feat: Implement Fast Request feature with file upload and request management

2026-08-26 17:40:45 +03:30
parent ba734679cf
commit 2d96978c38
33 changed files with 1294 additions and 852 deletions
@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue';
+import FileUpload from 'primevue/fileupload';
+import Badge from 'primevue/badge';
+import { formatFileSize } from '../../../utils/fileUtils';
+
+const files = defineModel({ type: Array, default: () => [] });
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    }
+});
+
+const fileUpload = ref(null);
+
+const openFileDialog = () => {
+    fileUpload.value.choose();
+}
+
+const onSelectedFiles = (event) => {
+    files.value = event.files;
+}
+
+const onRemoveFile = (removeFileCallback, index) => {
+    removeFileCallback(index);
+    files.value = fileUpload.value.files;
+}
+</script>
+
+<template>
+    <FileUpload
+        ref="fileUpload"
+        class="w-full !border-dashed !border-[#C1D0E8] !min-h-[100px] flex items-center justify-center"
+        name="files[]"
+        :customUpload="true"
+        :showUploadButton="false"
+        :showCancelButton="false"
+        :showChooseButton="false"
+        :multiple="true"
+        accept="image/*"
+        :maxFileSize="10485760"
+        @select="onSelectedFiles"
+    >
+        <template #content="{ files: selectedFiles, removeFileCallback }">
+            <div v-if="selectedFiles.length > 0" class="flex flex-wrap gap-4 pt-4">
+                <div v-for="(file, index) of selectedFiles" :key="file.name + file.type + file.size" class="relative w-[5rem] h-[5rem] rounded-lg border border-gray-200 flex flex-col items-center overflow-hidden">
+                    <img role="presentation" :alt="file.name" :src="file.objectURL" class="absolute top-0 left-0 w-full h-full object-cover"/>
+                    <div class="absolute bottom-0 left-0 w-full flex flex-col items-center gap-1 bg-white/80 p-1">
+                        <span class="w-full text-[10px] font-[400] text-center text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
+                        <span class="text-[9px]">{{ formatFileSize(file.size) }}</span>
+                    </div>
+                    <button type="button" class="absolute top-1 left-1 w-4 h-4 flex items-center justify-center rounded-full bg-white text-[#7A1419] text-[10px] cursor-pointer" @click.stop="onRemoveFile(removeFileCallback, index)">✕</button>
+                </div>
+                <button type="button" class="w-[5rem] h-[5rem] rounded-lg border border-dashed border-[#C1D0E8] text-[11px] text-[#365891] cursor-pointer" @click="openFileDialog">افزودن</button>
+            </div>
+        </template>
+        <template #empty>
+            <div class="w-full flex items-center justify-center flex-col cursor-pointer" @click="openFileDialog">
+                <p class="text-[11px] font-[600] text-[#365891]">{{ title }}</p>
+                <p class="mt-1 mb-0 text-[11px] font-[400] text-[#365891]">
+                    جهت آپلود تصویر کلیک کنید و یا فایل خود را کشیده و در این قسمت رها (Drag and Drop) کنید.
+                </p>
+            </div>
+        </template>
+    </FileUpload>
+</template>