feat: agencies => image upload (#67)

src/pages/07_agencies-management/MainPage.vue

@@ -6,6 +6,7 @@ import { storeToRefs } from 'pinia';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { useI18n } from 'vue-i18n';
 
+import { baseUrl } from 'src/stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { useInstitution } from 'src/stores/institution';
 import { Institution, InstitutionPayload } from 'src/stores/institution/types';
@@ -95,9 +96,16 @@ const blankFormData: InstitutionPayload = {
   subDistrictId: '',
   districtId: '',
   provinceId: '',
+  selectedImage: '',
 };
+
+const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
 const currAgenciesData = ref<Institution>();
+const onCreateImageList = ref<{
+  selectedImage: string;
+  list: { url: string; imgFile: File | null; name: string }[];
+}>({ selectedImage: '', list: [] });
 
 function triggerDialog(type: 'add' | 'edit' | 'view') {
   if (type === 'add') {
@@ -146,10 +154,11 @@ function assignFormData(data: Institution) {
     subDistrictId: data.subDistrictId,
     districtId: data.districtId,
     provinceId: data.provinceId,
+    selectedImage: data.selectedImage,
   };
 }
 
-async function submit() {
+async function submit(opt?: { selectedImage: string }) {
   const payload = {
     group: undefined,
     code: formData.value.code,
@@ -167,26 +176,41 @@ async function submit() {
     districtId: formData.value.districtId,
     provinceId: formData.value.provinceId,
   };
-
-  if (pageState.isDrawerEdit && currAgenciesData.value?.id) {
+  if (
+    (pageState.isDrawerEdit && currAgenciesData.value?.id) ||
+    (opt?.selectedImage && currAgenciesData.value?.id)
+  ) {
     const ret = await institutionStore.editInstitution(
-      Object.assign(payload, { id: currAgenciesData.value.id }),
+      Object.assign(payload, {
+        id: currAgenciesData.value.id,
+        selectedImage: opt?.selectedImage || undefined,
+      }),
     );
+
     if (ret) {
       pageState.isDrawerEdit = false;
       currAgenciesData.value = ret;
+      formData.value.selectedImage = ret.selectedImage;
       await fetchData();
+
+      if (refAgenciesDialog.value && opt?.selectedImage) {
+        refAgenciesDialog.value.clearImageState();
+      }
       return;
     }
+  } else {
+    await institutionStore.createInstitution(
+      {
+        ...payload,
+        code: formData.value.group || '',
+      },
+      onCreateImageList.value,
+    );
+
+    await fetchData();
+    pageState.addModal = false;
+    return;
   }
-
-  await institutionStore.createInstitution({
-    ...payload,
-    code: formData.value.group || '',
-  });
-
-  await fetchData();
-  pageState.addModal = false;
 }
 
 async function triggerChangeStatus(data?: Institution) {}
@@ -409,7 +433,7 @@ watch(
 
         <!-- SEC: body content -->
         <article
-          v-if="false"
+          v-if="data.length === 0"
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
@@ -476,14 +500,24 @@ watch(
                 </q-td>
                 <q-td v-if="fieldSelected.includes('name')">
                   <section class="row items-center no-wrap">
-                    <q-avatar
-                      size="md"
-                      style="
-                        background: hsla(var(--green-8-hsl) / 0.1);
-                        color: hsla(var(--green-8-hsl) / 1);
-                      "
-                    >
-                      <Icon icon="ph-building-office" />
+                    <q-avatar size="md">
+                      <q-img
+                        class="text-center"
+                        :ratio="1"
+                        :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                      >
+                        <template #error>
+                          <div
+                            class="no-padding full-width full-height flex items-center justify-center"
+                            style="
+                              background: hsla(var(--green-8-hsl) / 0.1);
+                              color: hsla(var(--green-8-hsl) / 1);
+                            "
+                          >
+                            <Icon icon="ph-building-office" />
+                          </div>
+                        </template>
+                      </q-img>
                     </q-avatar>
                     <span class="col q-pl-md">
                       <div>
@@ -558,14 +592,24 @@ watch(
               <section class="column col-12 col-md-6">
                 <div class="bordered col surface-1 rounded q-pa-md">
                   <header class="row items-center">
-                    <q-avatar
-                      size="xl"
-                      style="
-                        background: hsla(var(--green-8-hsl) / 0.1);
-                        color: hsla(var(--green-8-hsl) / 1);
-                      "
-                    >
-                      <Icon icon="ph-building-office" />
+                    <q-avatar size="xl">
+                      <q-img
+                        class="text-center"
+                        :ratio="1"
+                        :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                      >
+                        <template #error>
+                          <div
+                            class="no-padding full-width full-height flex items-center justify-center"
+                            style="
+                              background: hsla(var(--green-8-hsl) / 0.1);
+                              color: hsla(var(--green-8-hsl) / 1);
+                            "
+                          >
+                            <Icon icon="ph-building-office" />
+                          </div>
+                        </template>
+                      </q-img>
                     </q-avatar>
                     <span class="text-weight-bold column q-pl-md">
                       {{
@@ -697,6 +741,8 @@ watch(
   </div>
 
   <AgenciesDialog
+    ref="refAgenciesDialog"
+    :data-id="currAgenciesData && currAgenciesData.id"
     @change-status="triggerChangeStatus"
     @drawer-delete="
       () => {
@@ -707,11 +753,17 @@ watch(
     @drawer-undo="undo"
     @close="resetForm"
     @submit="submit"
+    @submit-image="
+      async (v) => {
+        if (v) await submit({ selectedImage: v });
+      }
+    "
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     v-model="pageState.addModal"
     v-model:drawer-model="pageState.viewDrawer"
     v-model:data="formData"
+    v-model:on-create-image-list="onCreateImageList"
   />
 </template>
 <style scoped>