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

resources/js/Client/components/dashboard/fastRequest/ArchiveCase.vue

@@ -2,46 +2,36 @@
 import Dialog from 'primevue/dialog';
 import UiButton from '../../ui/UiButton.vue';
 import TableGeneric from '../../ui/TableGeneric.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import CaseNumber from './CaseNumber.vue';
+import { useFastRequestStore } from '../../../store/FastRequest';
+
+const visible = defineModel('visible');
+const fastRequestStore = useFastRequestStore();
 
 const isChooseCaseNumber = ref(false);
+const selectedPetId = ref(null);
 
 const showChooseCaseNumber = () => {
     isChooseCaseNumber.value = true;
 }
-const data = ref([
-    {
-        id: 1,
-        case_number: '1234567890',
-        case_name: 'مایلو',
-        case_type: 'سگ',
-    },
-    {
-        id: 2,
-        case_number: '1234567891',
-        case_name: 'تدی',
-        case_type: 'گربه',
-    },
-    {
-        id: 3,
-        case_number: '1234567892',
-        case_name: 'پونی',
-        case_type: 'خرگوش',
-    },
-    {
-        id: 4,
-        case_number: '1234567893',
-        case_name: 'روبیک',
-        case_type: 'همستر',
-    },
-    {
-        id: 5,
-        case_number: '1234567894',
-        case_name: 'کولا',
-        case_type: 'خوکچه هندی',
-    }
-]);
+
+const data = computed(() => fastRequestStore.pets.map((pet) => ({
+    id: pet.id,
+    case_number: pet.id,
+    case_name: pet.name,
+    case_type: pet.breed ? `${pet.type} (${pet.breed})` : pet.type,
+})));
+
+const selectPet = (petId) => {
+    selectedPetId.value = petId;
+}
+
+const confirmSelection = () => {
+    if (!selectedPetId.value) return;
+    fastRequestStore.selectArchivePet(selectedPetId.value);
+    visible.value = false;
+}
 
 const columns = ref([
     {
@@ -65,9 +55,9 @@ const columns = ref([
     }
 ]);
 </script>
-    
+
 <template>
-    <Dialog :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '554px' , minHeight: '326px' }">
+    <Dialog v-model:visible="visible" :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '554px' , minHeight: '326px' }" class="fast-request-dialog">
         <template #header>
             <h3>انتخاب کیس از آرشیو</h3>
         </template>
@@ -76,7 +66,9 @@ const columns = ref([
             <p>در صورتیکه شماره مرجع یک کیس را در اختیار داشته باشید می‌توانید درخواست را برای کیس مربوطه نیز ثبت کنید.</p>
         </div>
         <div class="h-[180px] overflow-y-scroll">
+            <p v-if="!data.length" class="w-full py-8 text-center text-[11px] font-[400] text-[#7188AD]">کیسی در آرشیو شما ثبت نشده است.</p>
             <TableGeneric
+                v-else
                 class="bg-white !rounded-2xl"
                 :data="data"
                 customStyle="!text-[11px] !font-normal"
@@ -88,25 +80,20 @@ const columns = ref([
             >
                 <template #column-actions="{ data }">
                     <div class="flex items-center justify-end">
-                        <UiButton severity="secondary" size="small">
-                            <template #icon>
-
-                            </template>
-                        </UiButton>
+                        <UiButton
+                            :severity="selectedPetId === data.id ? 'success' : 'secondary'"
+                            size="small"
+                            :label="selectedPetId === data.id ? 'انتخاب شد' : 'انتخاب'"
+                            @click="selectPet(data.id)"
+                        />
                     </div>
                 </template>
             </TableGeneric>
         </div>
         <div class="w-full pt-3 flex items-center justify-end gap-2 border-t border-[#EBEBEB]">
             <ui-button label="افزودن از طریق شناسه کیس" severity="secondary" @click="showChooseCaseNumber"/>
-            <ui-button label="تایید و انتخاب" severity="success" size="small" @click="handleNext" />
+            <ui-button label="تایید و انتخاب" severity="success" size="small" :disabled="!selectedPetId" @click="confirmSelection" />
         </div>
-        <case-number v-model:visible="isChooseCaseNumber"></case-number>
+        <case-number v-model:visible="isChooseCaseNumber" @selected="visible = false"></case-number>
     </Dialog>
 </template>
-
-<style scoped>
-
-</style>
-    
-