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;
 }>();
@@ -60,6 +68,18 @@ watch(
           class="items-center row q-px-lg"
           v-for="(item, index) in cloneList"
           :key="index"
+        >
+          <q-form
+            ref="refForm"
+            greedy
+            @submit.prevent
+            @validation-success="
+              () => {
+                $emit('edit', item.id, { name: item.name });
+                item.isEdit = false;
+              }
+            "
+            class="row full-width"
           >
             <q-input
               lazy-rules="ondemand"
@@ -72,6 +92,13 @@ watch(
               :borderless="!item.isEdit"
               :readonly="!item.isEdit"
               :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"
@@ -84,12 +111,8 @@ watch(
               v-else
               icon-only
               id="btn-save-work-name"
-            @click="
+              type="submit"
-              () => {
+              @click.stop
-                $emit('edit', item.id, { name: item.name }),
-                  (item.isEdit = false);
-              }
-            "
             />
             <DeleteButton
               v-if="!item.isEdit"
@@ -102,14 +125,23 @@ watch(
               v-else
               icon-only
               id="btn-undo-work-name"
-            @click="assignClone"
+              @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,7 +1193,10 @@ async function submitGroup() {
   flowStore.rotate();
 }
 
-function confirmDeleteWork(id: string) {
+function confirmDeleteWork(id: string, noDialog?: boolean) {
+  if (noDialog) {
+    deleteWork(id);
+  } else
     dialog({
       color: 'negative',
       icon: 'mdi-alert',