feat: institution attachment

src/components/07_agencies-management/FormBasicInfoAgencies.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import SelectInput from '../shared/SelectInput.vue';
 import useOptionStore from 'src/stores/options';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useInstitution } from 'src/stores/institution';
 
 const optionStore = useOptionStore();
 
@@ -10,6 +14,11 @@ defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
 }>();
+const emit = defineEmits<{
+  (e: 'deleteAttachment', name: string): void;
+}>();
+
+const attachmentRef = ref();
 
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
@@ -17,8 +26,19 @@ const nameEn = defineModel('nameEn', { default: '' });
 const contactName = defineModel('contactName', { default: '' });
 const email = defineModel('email', { default: '' });
 const contactTel = defineModel('contactTel', { default: '' });
+const attachment = defineModel<File[]>('attachment');
+const attachmentList =
+  defineModel<{ name: string; url: string }[]>('attachmentList');
 
 type Options = { label: string; value: string };
+
+function openNewTab(url: string) {
+  window.open(url, '_blank');
+}
+
+function deleteAttachment(name: string) {
+  emit('deleteAttachment', name);
+}
 </script>
 <template>
   <div class="row col-12">
@@ -162,6 +182,77 @@ type Options = { label: string; value: string };
           />
         </template>
       </q-input>
+
+      <q-file
+        ref="attachmentRef"
+        for="input-attachment"
+        dense
+        outlined
+        :readonly="readonly"
+        multiple
+        append
+        :label="$t('personnel.form.attachment')"
+        class="col"
+        v-model="attachment"
+      >
+        <template v-slot:prepend>
+          <Icon
+            icon="material-symbols:attach-file"
+            width="20px"
+            style="color: var(--brand-1)"
+          />
+        </template>
+        <template v-slot:file="file">
+          <div class="row full-width items-center">
+            <span class="col ellipsis">
+              {{ file.file.name }}
+            </span>
+            <q-btn
+              dense
+              rounded
+              flat
+              padding="2 2"
+              class="app-text-muted"
+              icon="mdi-close-circle"
+              @click.stop="attachmentRef.removeAtIndex(file.index)"
+            />
+          </div>
+        </template>
+      </q-file>
+
+      <div v-if="attachmentList && attachmentList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            id="attachment-file"
+            for="attachment-file"
+            v-for="item in attachmentList"
+            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"
+                  id="delete-file"
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteAttachment(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
     </div>
   </div>
 </template>