feat: manage work name & work properties

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>