fix(04): no work name duplicate

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

@@ -125,7 +125,7 @@ defineEmits<{
                       @click.stop="$emit('manageWorkName')"
                     >
                       <q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
-                      {{ $t('manage') }}
+                      {{ $t('general.manage') }}
                     </q-btn>
                   </div>
                 </q-item>

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

@@ -13,10 +13,18 @@ const nameList = defineModel<{ id: string; name: string; isEdit: boolean }[]>(
   { required: true },
 );
 
+const refForm = ref();
 const cloneList = ref();
 const isAdd = ref(false);
 const inputName = ref<HTMLInputElement[]>([]);
 
+function nameExist(name: string) {
+  const listToCheck = cloneList.value.filter((clone) => !clone.isEdit);
+  const alreadyExist = listToCheck.find((clone) => clone.name === name);
+
+  return alreadyExist ? true : false;
+}
+
 function isWorkNameEdit() {
   return cloneList.value.some((i: { isEdit: boolean }) => i.isEdit === true);
 }
@@ -30,7 +38,7 @@ defineExpose({
 });
 
 defineEmits<{
-  (e: 'delete', id: string): void;
+  (e: 'delete', id: string, noDialog?: boolean): void;
   (e: 'edit', id: string, data: { name: string }): void;
   (e: 'add', data: { name: string; productId: []; order: number }): void;
 }>();
@@ -61,55 +69,79 @@ watch(
           v-for="(item, index) in cloneList"
           :key="index"
         >
-          <q-input
+          <q-form
-            lazy-rules="ondemand"
+            ref="refForm"
-            ref="inputName"
+            greedy
-            :for="`input-work-name-${index}`"
+            @submit.prevent
-            dense
+            @validation-success="
-            class="col q-mr-md"
-            v-model="item.name"
-            placeholder="ชื่องาน"
-            :borderless="!item.isEdit"
-            :readonly="!item.isEdit"
-            :outlined="item.isEdit"
-          ></q-input>
-          <EditButton
-            v-if="!item.isEdit"
-            icon-only
-            id="btn-edit-work-name"
-            :disabled="isWorkNameEdit()"
-            @click="item.isEdit = true"
-          />
-          <SaveButton
-            v-else
-            icon-only
-            id="btn-save-work-name"
-            @click="
               () => {
-                $emit('edit', item.id, { name: item.name }),
+                $emit('edit', item.id, { name: item.name });
-                  (item.isEdit = false);
+                item.isEdit = false;
               }
             "
-          />
+            class="row full-width"
-          <DeleteButton
+          >
-            v-if="!item.isEdit"
+            <q-input
-            icon-only
+              lazy-rules="ondemand"
-            id="btn-delete-work-name"
+              ref="inputName"
-            :disabled="isWorkNameEdit()"
+              :for="`input-work-name-${index}`"
-            @click="$emit('delete', item.id)"
+              dense
-          />
+              class="col q-mr-md"
-          <UndoButton
+              v-model="item.name"
-            v-else
+              placeholder="ชื่องาน"
-            icon-only
+              :borderless="!item.isEdit"
-            id="btn-undo-work-name"
+              :readonly="!item.isEdit"
-            @click="assignClone"
+              :outlined="item.isEdit"
-          />
+              :rules="[
+                (val: string) => val.length > 2 || $t('form.error.required'),
+                (val: string) =>
+                  (val.length > 0 && !nameExist(val)) ||
+                  $t('productService.service.workAlreadyExist'),
+              ]"
+              hide-bottom-space
+            ></q-input>
+            <EditButton
+              v-if="!item.isEdit"
+              icon-only
+              id="btn-edit-work-name"
+              :disabled="isWorkNameEdit()"
+              @click="item.isEdit = true"
+            />
+            <SaveButton
+              v-else
+              icon-only
+              id="btn-save-work-name"
+              type="submit"
+              @click.stop
+            />
+            <DeleteButton
+              v-if="!item.isEdit"
+              icon-only
+              id="btn-delete-work-name"
+              :disabled="isWorkNameEdit()"
+              @click="$emit('delete', item.id)"
+            />
+            <UndoButton
+              v-else
+              icon-only
+              id="btn-undo-work-name"
+              @click="
+                () => {
+                  assignClone();
+                  if (nameList[nameList.length - 1].name === '') {
+                    $emit('delete', cloneList[cloneList.length - 1].id, true);
+                    cloneList = cloneList.filter((item) => item.name !== '');
+                    nameList = nameList.filter((item) => item.name !== '');
+                  }
+                }
+              "
+            />
+          </q-form>
         </q-item>
       </q-list>
       <div v-else class="flex col justify-center items-center">
         <NoData />
       </div>
-
       <div class="bordered-t full-width">
         <q-item
           clickable

src/i18n/eng/index.ts

@@ -491,6 +491,7 @@ export default {
       totalProductWork: 'Total products of work',
       list: 'Item',
       addWork: 'Add Work',
+      workAlreadyExist: 'Work already exist',
     },
     product: {
       title: 'Products',

src/i18n/tha/index.ts

@@ -489,6 +489,7 @@ export default {
       totalProductWork: 'รวมสินค้างาน',
       list: 'รายการ',
       addWork: 'เพิ่มงาน',
+      workAlreadyExist: 'งานนี้มีอยู่แล้ว',
     },
     product: {
       title: 'สินค้า',

src/pages/04_product-service/MainPage.vue

@@ -1193,19 +1193,22 @@ async function submitGroup() {
   flowStore.rotate();
 }
 
-function confirmDeleteWork(id: string) {
+function confirmDeleteWork(id: string, noDialog?: boolean) {
-  dialog({
+  if (noDialog) {
-    color: 'negative',
+    deleteWork(id);
-    icon: 'mdi-alert',
+  } else
-    title: t('dialog.title.confirmDelete'),
+    dialog({
-    actionText: t('general.delete'),
+      color: 'negative',
-    message: t('dialog.message.confirmDelete'),
+      icon: 'mdi-alert',
-    action: async () => {
+      title: t('dialog.title.confirmDelete'),
-      deleteWork(id);
+      actionText: t('general.delete'),
-      flowStore.rotate();
+      message: t('dialog.message.confirmDelete'),
-    },
+      action: async () => {
-    cancel: () => {},
+        deleteWork(id);
-  });
+        flowStore.rotate();
+      },
+      cancel: () => {},
+    });
 }
 
 function triggerConfirmCloseWork() {