feat: agency attachment

src/components/02_personnel-management/FormByType.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import useUserStore from 'src/stores/user';
+import { UserAttachmentDelete } from 'src/stores/user/types';
+import { dialog } from 'src/stores/utils';
 import { dateFormat } from 'src/utils/datetime';
+import { watch } from 'vue';
 
 const userStore = useUserStore();
 
+const userId = defineModel<string>('userId');
 const userType = defineModel<string>('userType');
 const registrationNo = defineModel<string | null>('registrationNo');
 const startDate = defineModel<Date | null>('startDate');
@@ -21,15 +25,43 @@ const importNationality = defineModel<string | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkPoint = defineModel<string>('checkPoint');
-const checkPointEN = defineModel<string>('checkPointEN');
-const idenDoc = defineModel<File>('idenDoc');
+const checkpoint = defineModel<string>('checkPoint');
+const checkpointEN = defineModel<string>('checkPointEN');
+const agencyFile = defineModel<File[]>('agencyFile');
+const agencyFileList =
+  defineModel<{ name: string; url: string }[]>('agencyFileList');
 
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
 }>();
+
+function openNewTab(url: string) {
+  window.open(url, '_blank');
+}
+
+function deleteFile(name: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: 'ยืนยันการลบเอกสารประจำตัว',
+    actionText: 'ตกลง',
+    persistent: true,
+    message: 'คุณต้องการลบเอกสารประจำตัว ใช่หรือไม่',
+    action: async () => {
+      if (!userId.value) return;
+      const payload: UserAttachmentDelete = {
+        file: [name],
+      };
+      userStore.deleteAttachment(userId.value, payload);
+      const result = await userStore.fetchAttachment(userId.value);
+      if (result) {
+        agencyFileList.value = result;
+      }
+    },
+  });
+}
 </script>
 <template>
   <div v-if="userType" class="col-3 app-text-muted">• ข้อมูลการทำงาน</div>
@@ -225,7 +257,7 @@ defineProps<{
         :borderless="readonly"
         label="ด่าน"
         class="col-6"
-        v-model="checkPoint"
+        v-model="checkpoint"
       />
       <q-input
         :dense="dense"
@@ -234,18 +266,50 @@ defineProps<{
         :borderless="readonly"
         label="ด่าน ENG"
         class="col-6"
-        v-model="checkPointEN"
+        v-model="checkpointEN"
       />
       <q-file
         :dense="dense"
         :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :borderless="readonly"
+        multiple
+        append
         label="แบบเอกสารประจำตัว"
         class="col-12"
-        v-model="idenDoc"
-        type="textarea"
+        v-model="agencyFile"
       />
+
+      <div v-if="agencyFileList && agencyFileList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            v-for="item in agencyFileList"
+            clickable
+            :key="item.url"
+            class="items-center row"
+            @click="() => openNewTab(item.url)"
+          >
+            <q-item-section>
+              <div class="row items-center justify-between">
+                <div class="col">
+                  {{ item.name }}
+                </div>
+                <q-btn
+                  v-if="!readonly && userId"
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteFile(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
     </div>
   </div>
 </template>