feat(TicketService): use correct format

src/pages/Ticket/Card/TicketService.vue

@@ -10,17 +10,16 @@ import TicketCreateServiceType from './TicketCreateServiceType.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
-const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
+const selected = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 const { notify } = useNotify();
@@ -28,11 +27,6 @@ const { notify } = useNotify();
 const selectedServices = ref(new Set());
 const defaultTaxClass = ref(null);
 
-const toggleCheckSelection = (id) => {
-    if (selectedServices.value.has(id)) selectedServices.value.delete(id);
-    else selectedServices.value.add(id);
-};
-
 const crudModelFilter = computed(() => ({
     where: { ticketFk: route.params.id },
 }));
@@ -50,6 +44,8 @@ watch(
     }
 );
 
+onMounted(async () => await getDefaultTaxClass());
+
 const createRefund = async () => {
     try {
         if (!selectedServices.value.size) return;
@@ -88,7 +84,29 @@ const getDefaultTaxClass = async () => {
     }
 };
 
-onMounted(async () => await getDefaultTaxClass());
+const columns = computed(() => [
+    {
+        name: 'description',
+        label: t('service.description'),
+        field: (row) => row.ticketServiceTypeFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('service.quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('service.price'),
+        field: (row) => row.price,
+        sortable: true,
+        align: 'left',
+    },
+]);
 </script>
 
 <template>
@@ -98,15 +116,6 @@ onMounted(async () => await getDefaultTaxClass());
         auto-load
         url="TicketServiceTypes"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtn
-            color="primary"
-            :label="t('service.pay')"
-            :disabled="!selectedServices.size"
-            @click.stop="createRefund()"
-        />
-    </Teleport>
-    <div class="flex justify-center">
     <CrudModel
         ref="ticketServiceCrudRef"
         data-key="TicketService"
@@ -114,25 +123,30 @@ onMounted(async () => await getDefaultTaxClass());
         model="TicketService"
         :filter="crudModelFilter"
         :data-required="crudModelRequiredData"
-            :default-remove="false"
         auto-load
-            style="max-width: 800px"
+        v-model:selected="selected"
     >
-            <template #body="{ rows }">
+        <template #moreBeforeActions>
-                <QCard class="q-px-lg q-py-md">
+            <QBtn
-                    <div
+                color="primary"
-                        v-for="(row, index) in rows"
+                :label="t('service.pay')"
-                        :key="index"
+                :disabled="!selectedServices.size"
-                        class="q-mb-md row items-center q-gutter-x-md"
+                @click.stop="createRefund()"
-                    >
-                        <QCheckbox
-                            size="sm"
-                            @update:model-value="toggleCheckSelection(row.id)"
-                            :model-value="selectedServices.has(row.id)"
-                            :toggle-indeterminate="false"
             />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                table-header-class="text-left"
+            >
+                <template #body-cell-description="{ row, col }">
+                    <QTd auto-width>
                         <VnSelectDialog
-                            :label="t('service.description')"
+                            :label="col.label"
                             v-model="row.ticketServiceTypeFk"
                             :options="ticketServiceOptions"
                             option-label="name"
@@ -145,44 +159,33 @@ onMounted(async () => await getDefaultTaxClass());
                                 />
                             </template>
                         </VnSelectDialog>
+                    </QTd>
+                </template>
+                <template #body-cell-quantity="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.quantity')"
+                            :label="col.label"
                             v-model.number="row.quantity"
                             type="number"
                             min="0"
                             :info="t('service.quantityInfo')"
                         />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.price')"
+                            :label="col.label"
                             v-model.number="row.price"
                             type="number"
                             min="0"
                         />
-                        <QIcon
+                    </QTd>
-                            name="delete"
+                </template>
-                            size="sm"
+            </QTable>
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="ticketServiceCrudRef.remove([row])"
-                        >
-                            <QTooltip>
-                                {{ t('service.removeNote') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                    <QIcon
-                        name="add_circle"
-                        class="fill-icon-on-hover q-ml-md"
-                        size="sm"
-                        color="primary"
-                        @click="ticketServiceCrudRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('service.addService') }}
-                        </QTooltip>
-                    </QIcon>
-                </QCard>
         </template>
     </CrudModel>
-    </div>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
+    </QPageSticky>
 </template>