feat: แสดงลำดับ การเลือก

src/components/04_product-service/TotalProductCardComponent.vue

@@ -30,6 +30,7 @@ withDefaults(
     id?: string;
     process?: number;
     createdAt?: string;
+    index?: number;
   }>(),
   {
     isSelected: false,
@@ -45,9 +46,11 @@ withDefaults(
     style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
     @click="$emit('select', data)"
   >
-    <div class="q-pa-sm" :class="{ inactive: status }">
+    <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
-        <div class="col-9">{{ title ?? 'title' }}</div>
+        <div class="col-9" :class="{ inactive: status }">
+          {{ title ?? 'title' }}
+        </div>
         <div
           v-if="isSelected === false"
           class="col-3 relative-position"
@@ -57,7 +60,7 @@ withDefaults(
             flat
             round
             padding="sm"
-            class="absolute-top-right dots-btn app-text-muted"
+            class="absolute-top-right dots-btn"
             icon="mdi-dots-vertical"
             size="sm"
             @click.stop=""
@@ -110,9 +113,11 @@ withDefaults(
           size="18px"
           text-color="white"
         >
-          1
+          {{ (index ?? 0) + 1 }}
         </q-avatar>
       </div>
+
+      <div :class="{ inactive: status }">
         <div class="app-text-muted">{{ code ?? 'code' }}</div>
         <div class="flex justify-start text-bold">
           <div
@@ -176,6 +181,7 @@ withDefaults(
           </div>
         </div>
       </div>
+    </div>
   </AppBox>
 </template>