feat: agencies => image upload (#67)

src/stores/institution/index.ts

@@ -3,8 +3,11 @@ import { ref } from 'vue';
 import { Institution, InstitutionPayload } from './types';
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
+import useFlowStore from '../flow';
 
 export const useInstitution = defineStore('institution-store', () => {
+  const flowStore = useFlowStore();
+
   const data = ref<Institution[]>([]);
   const page = ref<number>(1);
   const pageMax = ref<number>(1);
@@ -33,8 +36,26 @@ export const useInstitution = defineStore('institution-store', () => {
     return null;
   }
 
-  async function createInstitution(data: InstitutionPayload) {
-    const res = await api.post('/institution', data);
+  async function createInstitution(
+    data: InstitutionPayload,
+    imgList: {
+      selectedImage: string;
+      list: { url: string; imgFile: File | null; name: string }[];
+    },
+  ) {
+    const res = await api.post('/institution', {
+      ...data,
+      selectedImage: imgList.selectedImage || '',
+    });
+
+    if (imgList.list.length > 0 && res.data.id) {
+      for (let index = 0; index < imgList.list.length; index++) {
+        const imgFile = imgList.list[index].imgFile;
+        if (imgFile)
+          await addImageList(imgFile, res.data.id, imgList.list[index].name);
+      }
+    }
+
     if (res.status < 400) {
       return res.data;
     }
@@ -60,6 +81,60 @@ export const useInstitution = defineStore('institution-store', () => {
     return null;
   }
 
+  async function fetchImageListById(
+    id: string,
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.get(`/institution/${id}/image`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+    if (res.status === 204) return null;
+
+    return false;
+  }
+
+  async function addImageList(file: File, id: string, name: string) {
+    await api
+      .put(`/institution/${id}/image/${name}`, file, {
+        headers: { 'Content-Type': file.type },
+        onUploadProgress: (e) => console.log(e),
+      })
+      .catch((e) => console.error(e));
+
+    return name;
+  }
+
+  async function deleteImageByName(
+    id: string,
+    name: string,
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.delete(`/institution/${id}/image/${name}`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+  }
+
   return {
     data,
     page,
@@ -71,5 +146,9 @@ export const useInstitution = defineStore('institution-store', () => {
     createInstitution,
     editInstitution,
     deleteInstitution,
+
+    fetchImageListById,
+    addImageList,
+    deleteImageByName,
   };
 });

src/stores/institution/types.ts

@@ -6,6 +6,7 @@ export type Institution = {
   group: string;
   name: string;
   nameEN: string;
+  selectedImage?: string | null;
 
   addressEN: string;
   address: string;
@@ -29,6 +30,7 @@ export type InstitutionPayload = {
   name: string;
   nameEN: string;
   group?: string;
+  selectedImage?: string | null;
 
   addressEN: string;
   address: string;