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>
 

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

@@ -1,20 +1,24 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { Option } from 'src/stores/options/types';
-import { ref, watch } from 'vue';
-import { Attributes, AdditionalType } from 'src/stores/product-service/types';
+import { Attributes } from 'src/stores/product-service/types';
+import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
+
 import NoData from '../NoData.vue';
 
+const { t } = useI18n();
+
 const propertiesOption = defineModel<Option[]>('propertiesOption');
 const formServiceProperties = defineModel<Attributes>('formServiceProperties');
 
 const telMax = ref();
 const pointNum = ref();
 
-const selectAll = ref(false);
-
 const tel = ref(false);
 const comma = ref(false);
 const point = ref(false);
+const selection = ref(false);
 
 const typeOption = ref([
   {
@@ -36,25 +40,13 @@ const typeOption = ref([
     icon: 'mdi-calendar-blank-outline',
   },
   {
-    label: 'List',
+    label: 'Selection',
     value: 'array',
     color: 'var(--indigo-7-hsl)',
     icon: 'mdi-code-array',
   },
 ]);
 
-watch(
-  () => selectAll.value,
-  () => {
-    if (selectAll.value) {
-    }
-  },
-);
-
-defineEmits<{
-  (e: 'addProperties'): void;
-}>();
-
 function manageProperties(properties?: string) {
   if (properties === 'all' && propertiesOption.value) {
     if (
@@ -94,13 +86,6 @@ function manageProperties(properties?: string) {
   }
 }
 
-function deleteItem(index: number) {
-  if (!formServiceProperties.value) return;
-  if (index >= 0 && index < formServiceProperties.value.additional.length) {
-    formServiceProperties.value.additional.splice(index, 1);
-  }
-}
-
 function shouldShowItem(opt: Option) {
   if (formServiceProperties.value) {
     const additionalFieldNames = new Set(
@@ -110,26 +95,18 @@ function shouldShowItem(opt: Option) {
   }
 }
 
-function swapItems(
-  arr: { fieldName: string | null; type: AdditionalType | null }[],
-  index1: number,
-  index2: number,
-) {
-  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
-}
-
-function moveItemUp(index: number) {
-  if (!formServiceProperties.value || index <= 0) return;
-  swapItems(formServiceProperties.value.additional, index, index - 1);
-}
-
-function moveItemDown(index: number) {
-  if (
-    !formServiceProperties.value ||
-    index >= formServiceProperties.value.additional.length - 1
-  )
-    return;
-  swapItems(formServiceProperties.value.additional, index, index + 1);
+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>
@@ -210,210 +187,222 @@ function moveItemDown(index: number) {
         formServiceProperties?.additional &&
         formServiceProperties.additional.length > 0
       "
+      class="q-gutter-y-md"
     >
-      <transition-group tag="div" name="list" class="q-gutter-y-md">
-        <div
-          v-for="(p, index) in formServiceProperties.additional"
-          :key="index"
-          class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
-          :class="
-            index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
-          "
-          :ref="`item-${index}`"
+      <div
+        v-for="(p, index) in formServiceProperties.additional"
+        :key="index"
+        class="bordered surface-1 rounded q-py-sm q-px-md row items-start"
+        :class="
+          index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
+        "
+        :ref="`item-${index}`"
+      >
+        <q-btn
+          id="btn-move-up-product"
+          icon="mdi-arrow-up"
+          dense
+          flat
+          round
+          :disable="index === 0"
+          style="color: hsl(var(--text-mute-2))"
+          @click="moveItemUp(formServiceProperties.additional, index)"
+        />
+        <q-btn
+          id="btn-move-down-product"
+          icon="mdi-arrow-down"
+          dense
+          flat
+          round
+          :disable="index === formServiceProperties.additional.length - 1"
+          style="color: hsl(var(--text-mute-2))"
+          @click="moveItemDown(formServiceProperties.additional, index)"
+        />
+
+        <q-avatar
+          size="md"
+          class="q-mx-lg"
+          style="background-color: var(--surface-3)"
         >
-          <q-btn
-            id="btn-move-up-product"
-            icon="mdi-arrow-up"
-            dense
-            flat
-            round
-            :disable="index === 0"
-            style="color: hsl(var(--text-mute-2))"
-            @click="moveItemUp(index)"
-          />
-          <q-btn
-            id="btn-move-down-product"
-            icon="mdi-arrow-down"
-            dense
-            flat
-            round
-            :disable="index === formServiceProperties.additional.length - 1"
-            style="color: hsl(var(--text-mute-2))"
-            @click="moveItemDown(index)"
-          />
+          {{ index + 1 }}
+        </q-avatar>
 
-          <q-avatar
-            size="md"
-            class="q-mx-lg"
-            style="background-color: var(--surface-3)"
-          >
-            {{ index + 1 }}
-          </q-avatar>
+        <!-- type -->
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          hide-bottom-space
+          class="col q-mr-md"
+          label="Properties Name"
+          option-label="label"
+          option-value="value"
+          :options="propertiesOption"
+          v-model="p.fieldName"
+        >
+          <template v-slot:option="scope">
+            <q-item
+              v-if="scope.opt && shouldShowItem(scope.opt)"
+              v-bind="scope.itemProps"
+              class="row items-center col-12"
+            >
+              {{ scope.opt.label }}
+            </q-item>
+          </template>
+        </q-select>
 
-          <!-- type -->
+        <div class="col">
           <q-select
             dense
             outlined
             emit-value
             map-options
             hide-bottom-space
-            class="col q-mr-md"
-            label="Properties Name"
-            option-label="label"
+            label="Type"
             option-value="value"
-            :options="propertiesOption"
-            v-model="p.fieldName"
+            :options="typeOption"
+            v-model="p.type"
           >
             <template v-slot:option="scope">
               <q-item
-                v-if="scope.opt && shouldShowItem(scope.opt)"
+                v-if="scope.opt"
                 v-bind="scope.itemProps"
                 class="row items-center col-12"
               >
+                <q-avatar
+                  size="sm"
+                  class="q-mr-md"
+                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                >
+                  <q-icon
+                    size="20px"
+                    :name="scope.opt.icon"
+                    :style="`color: hsl(${scope.opt.color})`"
+                  />
+                </q-avatar>
                 {{ scope.opt.label }}
               </q-item>
             </template>
+
+            <template v-slot:selected-item="scope">
+              <div v-if="scope.opt" class="row items-center col-12">
+                <q-avatar
+                  size="xs"
+                  class="q-mr-sm"
+                  :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+                >
+                  <q-icon
+                    size="14px"
+                    :name="scope.opt.icon"
+                    :style="`color: hsl(${scope.opt.color})`"
+                  />
+                </q-avatar>
+                {{ scope.opt.label }}
+              </div>
+            </template>
           </q-select>
 
-          <div class="col">
-            <q-select
-              dense
-              outlined
-              emit-value
-              map-options
-              hide-bottom-space
-              label="Type"
-              option-value="value"
-              :options="typeOption"
-              v-model="p.type"
-            >
-              <template v-slot:option="scope">
-                <q-item
-                  v-if="scope.opt"
-                  v-bind="scope.itemProps"
-                  class="row items-center col-12"
-                >
-                  <q-avatar
-                    size="sm"
-                    class="q-mr-md"
-                    :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                  >
-                    <q-icon
-                      size="20px"
-                      :name="scope.opt.icon"
-                      :style="`color: hsl(${scope.opt.color})`"
-                    />
-                  </q-avatar>
-                  {{ scope.opt.label }}
-                </q-item>
-              </template>
-
-              <template v-slot:selected-item="scope">
-                <div v-if="scope.opt" class="row items-center col-12">
-                  <q-avatar
-                    size="xs"
-                    class="q-mr-sm"
-                    :style="`background-color: hsla(${scope.opt.color}/0.2)`"
-                  >
-                    <q-icon
-                      size="14px"
-                      :name="scope.opt.icon"
-                      :style="`color: hsl(${scope.opt.color})`"
-                    />
-                  </q-avatar>
-                  {{ scope.opt.label }}
-                </div>
-              </template>
-            </q-select>
-
-            <div
-              v-if="p.type === 'number'"
-              class="menu-border q-pt-md q-pb-sm"
-              style="margin-top: -20px"
-            >
-              <q-item>
-                <q-item-section class="column">
-                  <span class="app-text-muted-2">เพิ่มเติม</span>
-                  <div class="q-gutter-y-sm">
-                    <div class="row items-center">
-                      <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                        <q-checkbox v-model="tel" size="xs" />
-                        เบอร์โทร
-                      </div>
-                      <q-input
-                        v-model="telMax"
-                        class="col"
-                        dense
-                        outlined
-                        label="จำนวนหลัก"
-                      />
-                    </div>
-
-                    <div class="row items-center">
-                      <div class="col surface-3 rounded q-mr-sm q-py-xs">
-                        <q-checkbox v-model="comma" size="xs" />
-                        ใส่ comma
-                      </div>
-                    </div>
-
-                    <div class="row items-center">
-                      <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
-                        <q-checkbox v-model="point" size="xs" />
-                        ทศนิยม
-                      </div>
-                      <q-input
-                        v-model="pointNum"
-                        class="col"
-                        dense
-                        outlined
-                        label="ตำแหน่ง"
-                      />
-                    </div>
-                  </div>
-                </q-item-section>
-              </q-item>
-            </div>
-
-            <div
-              v-if="p.type === 'array'"
-              class="menu-border q-pt-md q-pb-sm"
-              style="margin-top: -20px"
-            >
-              <q-item>
-                <q-item-section class="column">
-                  <span class="app-text-muted-2">เพิ่มเติม</span>
-                  <div class="row items-center justify-between">
-                    <div class="col surface-3 rounded q-mr-sm q-py-xs">
+          <div
+            v-if="p.type === 'string'"
+            class="menu-border q-pt-md q-pb-sm"
+            style="margin-top: -20px"
+          >
+            <q-item>
+              <q-item-section class="column">
+                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <div class="q-gutter-y-sm">
+                  <div class="row items-center">
+                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
                       <q-checkbox v-model="tel" size="xs" />
-                      เพิ่ม list
-                    </div>
-                    <div class="col-1">
-                      <q-btn
-                        dense
-                        flat
-                        icon="mdi-plus"
-                        class="bordered"
-                        text-color="grey"
-                      />
+                      เบอร์โทร
                     </div>
+                    <q-input
+                      v-model="telMax"
+                      class="col"
+                      dense
+                      outlined
+                      label="จำนวนหลัก"
+                    />
                   </div>
-                </q-item-section>
-              </q-item>
-            </div>
+                </div>
+              </q-item-section>
+            </q-item>
           </div>
 
-          <q-btn
-            id="btn-delete-work-product"
-            icon="mdi-trash-can-outline"
-            dense
-            flat
-            round
-            color="negative"
-            class="q-ml-sm"
-            @click="deleteItem(index)"
-          />
+          <div
+            v-if="p.type === 'number'"
+            class="menu-border q-pt-md q-pb-sm"
+            style="margin-top: -20px"
+          >
+            <q-item>
+              <q-item-section class="column">
+                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <div class="q-gutter-y-sm">
+                  <div class="row items-center">
+                    <div class="col surface-3 rounded q-py-xs">
+                      <q-checkbox v-model="comma" size="xs" />
+                      ใส่ comma
+                    </div>
+                  </div>
+
+                  <div class="row items-center">
+                    <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
+                      <q-checkbox v-model="point" size="xs" />
+                      ทศนิยม
+                    </div>
+                    <q-input
+                      v-model="pointNum"
+                      class="col"
+                      dense
+                      outlined
+                      label="ตำแหน่ง"
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </div>
+
+          <div
+            v-if="p.type === 'array'"
+            class="menu-border q-pt-md q-pb-sm"
+            style="margin-top: -20px"
+          >
+            <q-item>
+              <q-item-section class="column">
+                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <div class="row items-center justify-between">
+                  <div class="col surface-3 rounded q-mr-sm q-py-xs">
+                    <q-checkbox v-model="selection" size="xs" />
+                    เพิ่ม Selection
+                  </div>
+                  <div class="col-1">
+                    <q-btn
+                      dense
+                      flat
+                      icon="mdi-plus"
+                      class="bordered"
+                      text-color="grey"
+                    />
+                  </div>
+                </div>
+              </q-item-section>
+            </q-item>
+          </div>
         </div>
-      </transition-group>
+
+        <q-btn
+          id="btn-delete-work-product"
+          icon="mdi-trash-can-outline"
+          dense
+          flat
+          round
+          color="negative"
+          class="q-ml-sm"
+          @click="confirmDelete(formServiceProperties.additional, index)"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -425,8 +414,4 @@ function moveItemDown(index: number) {
   border-bottom-left-radius: var(--radius-2);
   border-bottom-right-radius: var(--radius-2);
 }
-
-// .list-move {
-//   transition: all 0.2s ease;
-// }
 </style>

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
+import { formatNumberDecimal } from 'src/stores/utils';
 
 defineProps<{
   workIndex: number;
@@ -14,15 +15,19 @@ const productItems = defineModel<
     label: string;
     labelEn: string;
     code: string;
-    price: string;
+    price: number;
     time: string;
   }[]
->('productItems');
+>('productItems', { required: true });
 
 defineEmits<{
-  (e: 'addProduct'): void;
+  (e: 'moveWorkUp'): void;
+  (e: 'moveWorkDown'): void;
   (e: 'deleteWork'): void;
-  (e: 'deleteProduct'): void;
+  (e: 'addProduct'): void;
+  (e: 'moveProductUp', items: unknown[], index: number): void;
+  (e: 'moveProductDown', items: unknown[], index: number): void;
+  (e: 'deleteProduct', items: unknown[], index: number): void;
 }>();
 </script>
 <template>
@@ -34,18 +39,19 @@ defineEmits<{
       expand-icon="mdi-chevron-down-circle"
     >
       <template v-slot:header>
-        <div class="row items-center q-py-sm full-width">
+        <div class="row items-center q-py-sm full-width" @click.stop>
           <q-btn
-            id="btn-swap-work-product"
+            id="btn-work-up-product"
             icon="mdi-arrow-up"
             dense
             flat
             round
             :disable="index === 0"
             style="color: hsl(var(--text-mute-2))"
+            @click.stop="$emit('moveWorkUp')"
           />
           <q-btn
-            id="btn-swap-work-product"
+            id="btn-work-down-product"
             icon="mdi-arrow-down"
             dense
             flat
@@ -53,6 +59,7 @@ defineEmits<{
             class="q-mx-sm"
             :disable="index === length - 1"
             style="color: hsl(var(--text-mute-2))"
+            @click.stop="$emit('moveWorkDown')"
           />
           <q-input
             for="input-work-name"
@@ -94,7 +101,7 @@ defineEmits<{
             padding="0"
             color="negative"
             class="q-ml-sm"
-            @click="$emit('deleteWork')"
+            @click.stop="$emit('deleteWork')"
           />
         </div>
       </template>
@@ -112,7 +119,7 @@ defineEmits<{
             :label="$t('serviceAddProduct')"
             padding="0"
             style="color: hsl(var(--info-bg))"
-            @click="$emit('addProduct')"
+            @click.stop="$emit('addProduct')"
           />
         </div>
 
@@ -127,16 +134,17 @@ defineEmits<{
             >
               <div class="row items-center col-9 no-wrap" v-if="productItems">
                 <q-btn
-                  id="btn-swap-work-product"
+                  id="btn-product-up"
                   icon="mdi-arrow-up"
                   dense
                   flat
                   round
                   :disable="index === 0"
                   style="color: hsl(var(--text-mute-2))"
+                  @click.stop="$emit('moveProductUp', productItems, index)"
                 />
                 <q-btn
-                  id="btn-swap-work-product"
+                  id="btn-product-down"
                   icon="mdi-arrow-down"
                   dense
                   flat
@@ -144,6 +152,7 @@ defineEmits<{
                   class="q-mx-sm"
                   :disable="index === productItems.length - 1"
                   style="color: hsl(var(--text-mute-2))"
+                  @click.stop="$emit('moveProductDown', productItems, index)"
                 />
 
                 <q-avatar
@@ -194,7 +203,7 @@ defineEmits<{
                   class="col-12 text-weight-bold text-h6"
                   style="color: var(--teal-9)"
                 >
-                  ฿ {{ product.price }}
+                  ฿ {{ formatNumberDecimal(product.price, 2) }}
                 </span>
                 <span class="col-9 text-caption app-text-muted-2">
                   {{ $t('processTime') }}
@@ -213,7 +222,7 @@ defineEmits<{
               round
               color="negative"
               class="q-mx-sm"
-              @click="$emit('deleteProduct')"
+              @click.stop="$emit('deleteProduct', productItems, index)"
             />
           </div>
         </div>