refactor: quotation form & product service

src/pages/05_quotation/QuotationForm.vue

@@ -1,8 +1,21 @@
 <script lang="ts" setup>
-import { setLocale } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 import { QSelect, useQuasar } from 'quasar';
 import { onMounted, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+
+import { setLocale } from 'src/utils/datetime';
+import { dateFormat } from 'src/utils/datetime';
+
+import useOptionStore from 'stores/options';
+import { useQuotationForm } from './form';
+import { Employee } from 'src/stores/employee/types';
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+import { QuotationPayload } from 'src/stores/quotations/types';
 
 import ProductServiceForm from './ProductServiceForm.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
@@ -14,15 +27,6 @@ import DialogForm from 'src/components/DialogForm.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
 import PersonCard from 'src/components/shared/PersonCard.vue';
 import { AddButton, SaveButton } from 'components/button';
-import { storeToRefs } from 'pinia';
-import { useQuotationForm } from './form';
-import { dateFormat } from 'src/utils/datetime';
-import { Employee } from 'src/stores/employee/types';
-import {
-  ProductGroup,
-  ProductList,
-  Service,
-} from 'src/stores/product-service/types';
 import useProductServiceStore from 'src/stores/product-service';
 
 type Node = {
@@ -39,6 +43,7 @@ defineProps<{
   readonly?: boolean;
 }>();
 
+const optionStore = useOptionStore();
 const productServiceStore = useProductServiceStore();
 const quotationForm = useQuotationForm();
 const { locale } = useI18n();
@@ -131,20 +136,12 @@ function triggerProductServiceDialog() {
   // TODO: form and state controll
 }
 
-function convertToTable(nodes: Node[]): Node[] {
-  const products: Node[] = [];
+function toggleDeleteProduct(index: number) {
+  console.log(index);
+}
 
-  nodes.forEach((node) => {
-    if (node.type === 'product' && node.checked) {
-      products.push(node);
-    }
-
-    if (node.children && node.children.length !== 0) {
-      products.push(...convertToTable(node.children)); // Correctly push the converted children
-    }
-  });
-
-  return products;
+function convertToTable(nodes: Node[]) {
+  console.log(nodes);
 }
 
 function changeMode(mode: string) {
@@ -188,6 +185,11 @@ onMounted(async () => {
   quotationFormData.value.customerBranchId =
     urlParams.get('customerBranchId') || '';
 
+  const resultOption = await fetch('/option/option.json');
+  const rawOption = await resultOption.json();
+  if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
+  if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
+
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang === 'English') {
     locale.value = 'eng';
@@ -270,23 +272,28 @@ onMounted(async () => {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
-                <span
-                  class="text-weight-medium q-mr-md"
-                  style="font-size: 18px"
-                >
-                  {{ $t('quotation.employeeList') }}
-                </span>
-                <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-                {{
-                  toggleWorker ? $t('general.specify') : $t('general.noSpecify')
-                }}
-              </div>
-              <AddButton
-                icon-only
-                class="q-ml-auto"
-                @click.stop="triggerSelectEmployeeDialog"
-              />
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span
+                    class="text-weight-medium q-mr-md"
+                    style="font-size: 18px"
+                  >
+                    {{ $t('quotation.employeeList') }}
+                  </span>
+                  <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+                  {{
+                    toggleWorker
+                      ? $t('general.specify')
+                      : $t('general.noSpecify')
+                  }}
+                </div>
+                <nav class="q-ml-auto">
+                  <AddButton
+                    icon-only
+                    @click.stop="triggerSelectEmployeeDialog"
+                  />
+                </nav>
+              </section>
             </template>
 
             <div class="surface-1 q-pa-md full-width">
@@ -320,27 +327,23 @@ onMounted(async () => {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
-                <span class="text-weight-medium" style="font-size: 18px">
-                  {{ $t('quotation.productList') }}
-                </span>
-              </div>
-              <AddButton
-                icon-only
-                class="q-ml-auto"
-                @click.stop="triggerProductServiceDialog"
-              />
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span class="text-weight-medium" style="font-size: 18px">
+                    {{ $t('quotation.productList') }}
+                  </span>
+                </div>
+                <nav class="q-ml-auto">
+                  <AddButton
+                    icon-only
+                    class="q-ml-auto"
+                    @click.stop="triggerProductServiceDialog"
+                  />
+                </nav>
+              </section>
             </template>
             <div class="surface-1 q-pa-md full-width">
-              <ProductItem
-                :rows="
-                  rows.map((p) => ({
-                    code: p.subtitle,
-                    name: p.title,
-                  }))
-                "
-              />
-              {{ console.log(rows) }}
+              <ProductItem @delete="toggleDeleteProduct" :rows="[]" />
             </div>
           </q-expansion-item>
 
@@ -358,7 +361,7 @@ onMounted(async () => {
             <template v-slot:header>
               <div class="row full-width items-center q-pr-md q-py-sm">
                 <span class="text-weight-medium" style="font-size: 18px">
-                  {{ $t('productService.group.title') }}
+                  {{ $t('general.remark') }}
                 </span>
               </div>
             </template>
@@ -501,8 +504,8 @@ onMounted(async () => {
       v-model:service-list="serviceList"
       @submit="
         (nodes) => {
-          rows = convertToTable(nodes);
-          pageState.productServiceModal = false;
+          convertToTable(nodes);
+          // pageState.productServiceModal = false;
         }
       "
       @select-group="
@@ -597,4 +600,11 @@ onMounted(async () => {
 :deep(.q-editor__toolbar) {
   border-color: var(--surface-3) !important;
 }
+
+:deep(
+    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+      .q-focus-helper
+  ) {
+  visibility: hidden;
+}
 </style>