feat: manage work name & work properties

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

@@ -58,8 +58,8 @@ defineProps<{
 
 defineEmits<{
   (e: 'addProduct'): void;
-  (e: 'deleteWork'): void;
-  (e: 'deleteProduct'): void;
+  (e: 'manageWorkName'): void;
+  (e: 'workProperties'): void;
 }>();
 
 function addWork() {
@@ -116,6 +116,8 @@ function confirmDelete(items: unknown[], index: number) {
         @move-product-up="moveItemUp"
         @move-product-down="moveItemDown"
         @delete-product="confirmDelete"
+        @manage-work-name="$emit('manageWorkName')"
+        @work-properties="$emit('workProperties')"
       ></WorkManagementComponent>
     </div>
 

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

@@ -28,6 +28,9 @@ defineEmits<{
   (e: 'moveProductUp', items: unknown[], index: number): void;
   (e: 'moveProductDown', items: unknown[], index: number): void;
   (e: 'deleteProduct', items: unknown[], index: number): void;
+
+  (e: 'manageWorkName'): void;
+  (e: 'workProperties'): void;
 }>();
 </script>
 <template>
@@ -61,37 +64,72 @@ defineEmits<{
             style="color: hsl(var(--text-mute-2))"
             @click.stop="$emit('moveWorkDown')"
           />
-          <q-input
+          <div
             for="input-work-name"
-            dense
-            outlined
-            borderless
-            class="col"
-            hide-bottom-space
+            class="bordered col rounded q-py-sm q-px-md"
             :placeholder="$t('workName')"
-            v-model="workName"
             :input-style="'color: hsl(var(--text-mute-2))'"
-            style="background-color: var(--surface-1)"
+            style="background-color: var(--surface-1); z-index: 2"
           >
-            <template #prepend>
-              <q-btn
-                dense
-                unelevated
-                round
-                padding="0"
-                style="background-color: var(--surface-tab)"
-              >
-                <Icon
-                  icon="basil:settings-adjust-solid"
-                  width="24px"
-                  style="color: var(--stone-7)"
-                />
-              </q-btn>
-              <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
-                {{ $t('workNo') }} {{ index + 1 }} :
-              </span>
-            </template>
-          </q-input>
+            <q-btn
+              dense
+              unelevated
+              round
+              padding="0"
+              style="background-color: var(--surface-tab)"
+              @click.stop="$emit('workProperties')"
+            >
+              <Icon
+                icon="basil:settings-adjust-solid"
+                width="24px"
+                style="color: var(--stone-7)"
+              />
+            </q-btn>
+            <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
+              {{ $t('workNo') }} {{ index + 1 }} :
+              <span class="app-text-muted-2">{{ $t('workName') }}</span>
+            </span>
+
+            <q-menu fit anchor="bottom left" self="top left">
+              <q-item>
+                <div class="full-width flex items-center justify-between">
+                  ชื่องาน
+                  <q-btn
+                    dense
+                    unelevated
+                    class="bordered q-px-sm"
+                    style="
+                      border-radius: var(--radius-2);
+                      color: hsl(var(--info-bg));
+                    "
+                    @click.stop="$emit('manageWorkName')"
+                  >
+                    <q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
+                    จัดการ
+                  </q-btn>
+                </div>
+              </q-item>
+              <q-item clickable>
+                <div class="full-width flex items-center">
+                  <q-icon
+                    v-if="false"
+                    name="mdi-checkbox-marked"
+                    size="xs"
+                    color="primary"
+                    class="q-mr-sm"
+                  />
+                  <q-icon
+                    v-else
+                    name="mdi-checkbox-blank-outline"
+                    size="xs"
+                    style="color: hsl(var(--text-mute))"
+                    class="q-mr-sm"
+                  />
+                  {{ 'asd' }}
+                </div>
+              </q-item>
+            </q-menu>
+          </div>
           <q-btn
             id="btn-delete-work"
             icon="mdi-trash-can-outline"

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const text = 'demo text';
+const isEdit = ref(false);
+</script>
+<template>
+  <div class="full-width column no-wrap" style="height: 50vh">
+    <div
+      v-if="true"
+      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-btn
+            id="btn-delete-work-name"
+            icon="mdi-trash-can-outline"
+            dense
+            flat
+            round
+            color="negative"
+          />
+          <q-btn
+            v-if="!isEdit"
+            id="btn-edit-work-name"
+            icon="mdi-pencil-outline"
+            dense
+            flat
+            round
+            class="q-ml-md"
+            color="primary"
+            @click="isEdit = true"
+          />
+          <q-btn
+            v-else
+            id="btn-edit-work-name"
+            icon="mdi-check"
+            dense
+            flat
+            round
+            class="q-ml-md"
+            color="primary"
+            @click="isEdit = false"
+          />
+          <!-- outlined -->
+          <q-input
+            dense
+            :borderless="!isEdit"
+            :readonly="!isEdit"
+            :outlined="isEdit"
+            class="q-ml-xl col"
+            v-model="text"
+            placeholder="ชื่องาน"
+          ></q-input>
+        </q-item>
+      </q-list>
+
+      <div class="bordered-t full-width">
+        <q-item clickable>
+          <span class="q-px-lg flex items-center app-text-muted-2">
+            <q-icon name="mdi-plus" class="q-mr-md" />
+            เพิ่มงานใหม่
+          </span>
+        </q-item>
+      </div>
+    </div>
+    <div
+      v-else
+      class="bordered rounded surface-1 flex justify-center items-center col"
+    >
+      <NoData />
+    </div>
+  </div>
+</template>

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

@@ -16,6 +16,7 @@ import ProfileUpload from 'src/components/ProfileUpload.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
 import FormServiceWork from 'src/components/04_product-service/FormServiceWork.vue';
 import ServiceProperties from 'src/components/04_product-service/ServiceProperties.vue';
+import WorkNameManagement from 'src/components/04_product-service/WorkNameManagement.vue';
 import useOptionStore from 'src/stores/options';
 
 import { Status } from 'src/stores/types';
@@ -110,8 +111,11 @@ const product = ref<ProductList[]>();
 const service = ref<Service[]>();
 
 const productAndServiceTab = ref<string>('all');
+const manageWorkNameDialog = ref<boolean>(false);
 const previousValue = ref();
 
+const propertiesOption = ref();
+
 const formDataGroup = ref<ProductGroupCreate>({
   remark: '',
   detail: '',
@@ -528,6 +532,18 @@ async function submitGroup() {
   clearFormGroup();
 }
 
+function openPropertiesDialog(type: 'service' | 'work') {
+  if (type === 'service') {
+    propertiesOption.value =
+      optionStore.globalOption.tha.servicePropertiesField;
+  }
+
+  if (type === 'work') {
+    propertiesOption.value = optionStore.globalOption.tha.workPropertiesField;
+  }
+  propertiesDialog.value = true;
+}
+
 onMounted(async () => {
   const resStatsGroup = await fetchStatsProductGroup();
   const resStatsType = await fetchStatsProductType();
@@ -1378,12 +1394,14 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'serviceInformation'"
         dense
         service
-        @service-properties="propertiesDialog = true"
+        @service-properties="openPropertiesDialog('service')"
       />
       <FormServiceWork
         v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="dialogTotalProduct = true"
+        @manage-work-name="manageWorkNameDialog = true"
+        @work-properties="openPropertiesDialog('work')"
       />
     </template>
   </FormDialog>
@@ -1394,18 +1412,26 @@ watch(currentStatus, async () => {
     no-footer
     no-app-box
     width="75%"
-    height="1000px"
     title="Properties"
     v-model:modal="propertiesDialog"
   >
     <ServiceProperties
-      v-model:properties-option="
-        optionStore.globalOption.tha.servicePropertiesField
-      "
+      v-model:properties-option="propertiesOption"
       v-model:form-service-properties="formDataProductService.attributes"
       @add-properties="console.log('')"
     />
   </FormDialog>
+
+  <!-- manage work name -->
+  <FormDialog
+    no-address
+    no-app-box
+    width="65%"
+    title="จัดการ"
+    v-model:modal="manageWorkNameDialog"
+  >
+    <WorkNameManagement />
+  </FormDialog>
 </template>
 
 <style scoped>