complete design for submission flow

resources/js/Client/components/dashboard/RequestCard.vue

@@ -1,17 +1,22 @@
 <script setup>
-    import { convertEnglishToPersian } from '../../utils/numberUtils'
-    import UiButton from '../../components/ui/UiButton.vue'
-    import CtScanIcon from '../../components/svg/ctScanIcon.svg'
-    import MriIcon from '../../components/svg/mriIcon.svg'
-    import SonographyIcon from '../../components/svg/sonographyIcon.svg'
-    import ECOIcon from '../../components/svg/ecoIcon.svg'
-    import RadiologyIcon from '../../components/svg/radiologyIcon.svg'
-    import { computed } from 'vue'
-    
+    import UiButton from '../../components/ui/UiButton.vue';
+    import CtScanIcon from '../../components/svg/ctScanIcon.svg';
+    import MriIcon from '../../components/svg/mriIcon.svg';
+    import SonographyIcon from '../../components/svg/sonographyIcon.svg';
+    import ECOIcon from '../../components/svg/ecoIcon.svg';
+    import RadiologyIcon from '../../components/svg/radiologyIcon.svg';
+    import { computed } from 'vue';
+    import { useFastRequestStore } from '../../store/FastRequest';
+    const fastRequestStore = useFastRequestStore();
+
     const props = defineProps({
         title: {
             type: String,
             required: true
+        }, 
+        value: {
+            type: String,
+            required: true
         },
         icon: {
             type: String,
@@ -40,11 +45,14 @@
         }
     });
 
-    const emit = defineEmits(['update:modelValue']);
 
     const toggleSelect = () => {
         if (!props.selectable) return
-        emit('update:modelValue', !props.modelValue)
+        fastRequestStore.requestType = props.value;
+    };
+
+    const submitRequest = () => {
+        fastRequestStore.requestType = props.value;
     };
 
 
@@ -55,14 +63,12 @@
     :class="[
     'w-full p-[12px] flex flex-col gap-1 items-center justify-center border rounded-[12px] transition-all',
     props.selectable && 'cursor-pointer',
-    props.modelValue
-      ? 'border-[#576989]'
-      : 'border-[#DEE3EB]'
-      ]">
+    fastRequestStore.requestType === props.value ? 'border-[#576989] border-2': 'border-[#DEE3EB]'
+    ]">
         <component :is="iconComponent" class="w-[87px] h-[80px]" />
         <div class="w-full flex flex-col gap-1">
             <p class="w-full flex items-center justify-center font-[700] text-[14px]">{{ title }}</p>
-            <ui-button v-if="!selectable" label="ثبت درخواست" severity="secondary" size="small" full-width="true"/>
+            <ui-button v-if="!selectable" @click="submitRequest" label="ثبت درخواست" severity="secondary" size="small" full-width="true"/>
         </div>
     </div>
 </template>