fix: service use utils function & confirm delete

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
+
 import NoData from 'src/components/NoData.vue';
 import WorkManagementComponent from './WorkManagementComponent.vue';
-import { ref } from 'vue';
+
+const { t } = useI18n();
 
 const serviceName = defineModel<string>('serviceName');
 
@@ -14,7 +19,7 @@ const workItems = ref([
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
         labelEn: '2 year work permit fee',
         code: 'AC101',
-        price: '1,200.00',
+        price: 1200,
         time: '14',
       },
     ],
@@ -27,7 +32,7 @@ const workItems = ref([
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
         labelEn: '2 year work permit fee',
         code: 'AC101',
-        price: '1,200.00',
+        price: 1200,
         time: '14',
       },
       {
@@ -37,7 +42,7 @@ const workItems = ref([
         labelEn:
           'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
         code: 'AC102',
-        price: '1,200.00',
+        price: 1200,
         time: '14',
       },
     ],
@@ -56,6 +61,28 @@ defineEmits<{
   (e: 'deleteWork'): void;
   (e: 'deleteProduct'): void;
 }>();
+
+function addWork() {
+  console.log('hi');
+  workItems.value.push({
+    id: '',
+    product: [],
+  });
+}
+
+function confirmDelete(items: unknown[], index: number) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('delete'),
+    message: t('deleteConfirmMessage'),
+    action: async () => {
+      deleteItem(items, index);
+    },
+    cancel: () => {},
+  });
+}
 </script>
 
 <template>
@@ -70,14 +97,11 @@ defineEmits<{
         padding="0"
         color="primary"
         class="q-ml-sm"
+        @click="addWork"
       />
     </div>
 
-    <!-- <div class="col row rounded bordered surface-2 justify-center items-center">
-      <NoData />
-    </div> -->
-
-    <div class="col q-gutter-y-md">
+    <div v-if="workItems.length > 0" class="col q-gutter-y-md">
       <WorkManagementComponent
         v-for="(work, index) in workItems"
         :key="work.id"
@@ -85,9 +109,21 @@ defineEmits<{
         :length="workItems.length"
         :workIndex="index"
         v-model:product-items="work.product"
-        @addProduct="$emit('addProduct')"
+        @move-work-up="moveItemUp(workItems, index)"
+        @move-work-down="moveItemDown(workItems, index)"
+        @delete-work="confirmDelete(workItems, index)"
+        @move-product-up="moveItemUp"
+        @move-product-down="moveItemDown"
+        @delete-product="confirmDelete"
       ></WorkManagementComponent>
     </div>
+
+    <div
+      v-else
+      class="col row rounded bordered surface-2 justify-center items-center"
+    >
+      <NoData />
+    </div>
   </div>
 </template>