updated file input and added new attachment component

frontend/components/global/FileInput.vue

@@ -6,11 +6,19 @@ import { useToast } from "~/composables/global/useToast";
 // types
 
 type Props = {
-    modelValue: File[];
+    modelValue: {
+        id: number;
+        file_link: string;
+        date: string;
+        size: number;
+        name: string;
+    }[];
+    loading?: boolean;
 };
 
 type Emits = {
     "update:modelValue": [value: any];
+    change: [value: File];
 };
 
 // props
@@ -50,7 +58,8 @@ const onDrop = (files: File[] | null) => {
         } else {
             if (modelValue.value.length + files.length <= 3) {
                 files?.forEach((item) => {
-                    emit("update:modelValue", [...modelValue.value, item]);
+                    emit("change", item);
+                    resetFileDialog();
                 });
             } else {
                 addToast({
@@ -78,22 +87,27 @@ const { isOverDropZone } = useDropZone(dropZoneRef, {
     dataTypes: ["image/jpeg", "image/png", "image/jpg"],
 });
 
-const { open: openDialog, onChange } = useFileDialog({
+const {
+    open: openDialog,
+    onChange,
+    reset: resetFileDialog,
+} = useFileDialog({
     accept: "image/*",
     directory: false,
 });
 
 onChange((files: any) => {
     let arr: File[] = [];
-    Object.keys(files).forEach((item) => {
-        arr.push(files[item]);
+    Object.keys(files).forEach((_, index) => {
+        arr.push(files[index]);
     });
     onDrop(arr);
 });
 
-const deleteFile = (index: number) => {
+const removeAttachment = (id: number) => {
+    let target = modelValue.value.findIndex((i) => i.id == id);
     const clone = [...modelValue.value];
-    clone.splice(index, 1);
+    clone.splice(target, 1);
     emit("update:modelValue", clone);
 };
 </script>
@@ -103,10 +117,22 @@ const deleteFile = (index: number) => {
         <div
             ref="dropZoneRef"
             @click="openDialog"
-            class="bg-slate-50 flex-col-center w-full transition-all text-black/50 gap-3 h-[20rem] border border-dashed rounded-xl cursor-pointer select-none"
-            :class="isOverDropZone ? 'border-black' : ' border-slate-300'"
+            class="bg-slate-50 relative flex-col-center w-full transition-all text-black/50 gap-3 h-[20rem] border border-dashed rounded-xl cursor-pointer select-none"
+            :class="{
+                'border-black': isOverDropZone,
+                ' border-slate-300': !isOverDropZone,
+                'pointer-events-none': loading,
+            }"
         >
-            <Icon name="bi:file-earmark-arrow-down" size="32" />
+            <Icon
+                :name="
+                    loading
+                        ? 'svg-spinners:ring-resize'
+                        : 'bi:file-earmark-arrow-down'
+                "
+                size="32"
+                :class="loading ? '' : ''"
+            />
             <p class="font-bold text-dynamic-primary text-sm lg:text-[1rem]">
                 برای آپلود کلیک کنید یا فایل خود را اینجا بیاندازید
             </p>
@@ -121,24 +147,12 @@ const deleteFile = (index: number) => {
             v-auto-animate
             class="flex flex-row-reverse items-center justify-between w-full px-2 animate__animated animate__fadeIn"
         >
-            <li class="w-full flex items-center">
-                <div class="flex justify-end w-9/12">
-                    <p class="text-sm text-black">{{ item.name }}</p>
-                </div>
-                <div class="w-2/12">
-                    <p class="text-sm text-black">
-                        {{ (item.size / 1024).toFixed(2) }}KB
-                    </p>
-                </div>
-                <div class="w-1/12">
-                    <Icon
-                        name="ci:close"
-                        class="**:stroke-red-500 cursor-pointer pb-1"
-                        @click="deleteFile(index)"
-                        size="28"
-                    />
-                </div>
-            </li>
+            <NewAttachment
+                :id="item.id"
+                :size="item.size"
+                :name="item.name"
+                @delete="removeAttachment"
+            />
         </ul>
     </div>
 </template>