feat: manage work name

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

@@ -125,7 +125,7 @@ defineEmits<{
               >
                 <div class="full-width flex items-center">
                   <q-icon
-                    v-if="false"
+                    v-if="workName === item"
                     name="mdi-checkbox-marked"
                     size="xs"
                     color="primary"

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

@@ -1,8 +1,44 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { deleteItem, dialog } from 'src/stores/utils';
+import { useI18n } from 'vue-i18n';
 
-const text = 'demo text';
+const { t } = useI18n();
-const isEdit = ref(false);
+
+const inputWorkName = ref<HTMLInputElement[]>([]);
+const newNameIndex = ref();
+
+const testName = ref([
+  { name: 'ทดสอบการขาย 1', isEdit: false },
+  { name: 'ทดสอบการขาย 2', isEdit: false },
+  { name: 'ทดสอบการขาย 3', isEdit: false },
+  { name: 'ทดสอบการขาย 4', isEdit: false },
+  { name: 'ทดสอบการขาย 5', isEdit: false },
+]);
+
+function addWorkName() {
+  testName.value.push({
+    name: '',
+    isEdit: true,
+  });
+  setTimeout(() => {
+    inputWorkName.value[testName.value.length - 1].focus();
+  }, 100);
+}
+
+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>
   <div class="full-width column no-wrap" style="height: 50vh">
@@ -11,7 +47,11 @@ const isEdit = ref(false);
       class="bordered rounded surface-1 flex col column justify-between"
     >
       <q-list class="full-width col scroll">
-        <q-item class="items-center row q-px-lg">
+        <q-item
+          class="items-center row q-px-lg"
+          v-for="(i, index) in testName"
+          :key="index"
+        >
           <q-btn
             id="btn-delete-work-name"
             icon="mdi-trash-can-outline"
@@ -19,9 +59,10 @@ const isEdit = ref(false);
             flat
             round
             color="negative"
+            @click="confirmDelete(testName, index)"
           />
           <q-btn
-            v-if="!isEdit"
+            v-if="!i.isEdit"
             id="btn-edit-work-name"
             icon="mdi-pencil-outline"
             dense
@@ -29,7 +70,7 @@ const isEdit = ref(false);
             round
             class="q-ml-md"
             color="primary"
-            @click="isEdit = true"
+            @click="i.isEdit = true"
           />
           <q-btn
             v-else
@@ -40,23 +81,24 @@ const isEdit = ref(false);
             round
             class="q-ml-md"
             color="primary"
-            @click="isEdit = false"
+            @click="i.isEdit = false"
           />
           <!-- outlined -->
           <q-input
+            ref="inputWorkName"
             dense
-            :borderless="!isEdit"
+            :borderless="!i.isEdit"
-            :readonly="!isEdit"
+            :readonly="!i.isEdit"
-            :outlined="isEdit"
+            :outlined="i.isEdit"
             class="q-ml-xl col"
-            v-model="text"
+            v-model="i.name"
             placeholder="ชื่องาน"
           ></q-input>
         </q-item>
       </q-list>
 
       <div class="bordered-t full-width">
-        <q-item clickable>
+        <q-item clickable @click="addWorkName">
           <span class="q-px-lg flex items-center app-text-muted-2">
             <q-icon name="mdi-plus" class="q-mr-md" />
             เพิ่มงานใหม่