fix: add product mode + service page

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

@@ -66,8 +66,8 @@ const inputSearch = ref<string>('');
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
-const isType = ref<boolean>(false);
-const groupName = ref<string>('test');
+
+const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
 const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
@@ -110,7 +110,7 @@ async function deleteProductById() {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
-      if (isType.value) {
+      if (productMode.value === 'type') {
         // Product Type
       } else {
         // Product Group
@@ -184,16 +184,20 @@ onMounted(async () => {
 
 <template>
   <div v class="column q-pb-lg">
-    <div v-if="isType" class="row items-center q-mb-md">
+    <div
+      v-if="productMode === 'group'"
+      class="text-h6 text-weight-bold q-mb-md"
+    ></div>
+    <div v-else-if="productMode === 'type'" class="row items-center q-mb-md">
       <q-btn
         round
         icon="mdi-arrow-left"
         flat
         dense
-        @click="isType = false"
+        @click="productMode = 'group'"
         class="q-mr-md"
       />
-      <div class="text-h6 app-text-muted q-mr-sm">
+      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
         {{ groupName }}
       </div>
       <div class="text-h6 app-text-muted q-mx-sm">/</div>
@@ -201,42 +205,59 @@ onMounted(async () => {
         {{ $t('ProductAndServiceType') }}
       </div>
     </div>
-    <div v-else class="text-h6 text-weight-bold q-mb-md">
-      {{ $t('ProductAndService') }}
-      // ปุ่มเลือกสร้าง
+    <div v-else-if="productMode === 'service'" class="row items-center q-mb-md">
       <q-btn
-        unelevated
-        @click="dialogProductServiceType = true"
-        size="lg"
-        class="color-btn"
-        icon="mdi-plus"
-        round
-      />
-      // ปุ่มรวมสินค้าทั้งหมด
-      <q-btn
-        unelevated
-        @click="dialogTotalProduct = true"
-        size="lg"
-        class="color-btn"
-        icon="mdi-plus"
         round
+        icon="mdi-arrow-left"
+        flat
+        dense
+        @click="productMode = 'type'"
+        class="q-mr-md"
       />
+      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
+        {{ groupName }}
+      </div>
+      <div class="text-h6 app-text-muted q-mx-sm">/</div>
+      <div class="text-h6 app-text-muted q-mr-sm hover-underline">
+        {{ 'บริการพิสูจน์สัญชาติ' }}
+      </div>
+      <div class="text-h6 app-text-muted q-mx-sm">/</div>
+      <div class="text-h6 text-weight-bold">
+        {{ $t('mainProductTitle') }}
+      </div>
     </div>
 
-    <AppBox bordered class="q-mb-md">
+    <AppBox
+      v-if="productMode === 'group' || productMode === 'type'"
+      bordered
+      class="q-mb-md"
+    >
       <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
     </AppBox>
-    <AppBox bordered style="min-height: 80vh">
+    <AppBox
+      v-if="productMode === 'group' || productMode === 'type'"
+      bordered
+      style="min-height: 80vh"
+    >
       <div class="row justify-between">
-        <div v-if="isType" class="text-h6 text-weight-bold q-mb-md">
+        <div
+          v-if="productMode === 'type'"
+          class="text-h6 text-weight-bold q-mb-md"
+        >
           {{ $t('ProductAndServiceType') }}
         </div>
-        <div v-else class="text-h6 text-weight-bold q-mb-md">
+        <div
+          v-else-if="productMode === 'group'"
+          class="text-h6 text-weight-bold q-mb-md"
+        >
           {{ $t('ProductAndServiceAll') }}
         </div>
-        <div class="row q-px-md q-pb-md">
+        <div
+          v-if="productMode === 'group' || productMode === 'type'"
+          class="row q-px-md q-pb-md"
+        >
           <q-input
-            style="width: 250px"
+            style="width: 300px"
             outlined
             dense
             :label="$t('search')"
@@ -244,7 +265,11 @@ onMounted(async () => {
             :bg-color="$q.dark.isActive ? 'dark' : 'white'"
             v-model="inputSearch"
             debounce="500"
-          ></q-input>
+          >
+            <template v-slot:prepend>
+              <q-icon name="mdi-magnify" />
+            </template>
+          </q-input>
           <q-btn
             icon="mdi-tune-vertical-variant"
             size="sm"
@@ -284,11 +309,11 @@ onMounted(async () => {
       <div class="row q-col-gutter-lg">
         <div
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-          v-for="(v, i) in isType ? productGroup : productGroup"
+          v-for="(v, i) in productMode ? productGroup : productGroup"
           :key="i"
         >
           <ProductCardComponent
-            v-if="isType"
+            v-if="productMode === 'type'"
             :title="cardTypeData.title"
             :subtitle="cardTypeData.subtitle"
             :date="cardTypeData.date"
@@ -303,12 +328,12 @@ onMounted(async () => {
             @on-click="
               () => {
                 currentId = v.id;
-                if (isType === true) drawerInfo = true;
+                productMode = 'service';
               }
             "
           />
           <ProductCardComponent
-            v-else
+            v-else-if="productMode === 'group'"
             :title="v.name"
             :subtitle="v.code"
             :date="new Date(v.updatedAt)"
@@ -324,7 +349,7 @@ onMounted(async () => {
             @on-click="
               () => {
                 currentId = v.id;
-                if (isType === false) isType = true;
+                productMode = 'type';
               }
             "
           />
@@ -333,13 +358,13 @@ onMounted(async () => {
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
         >
           <NewProductCardCompoent
-            v-if="isType"
+            v-if="productMode === 'type'"
             :label="$t('ProductAndServiceType')"
             :isType="true"
             @on-click="() => (dialogInputForm = true)"
           />
           <NewProductCardCompoent
-            v-else
+            v-else-if="productMode === 'group'"
             :label="$t('ProductAndService')"
             :isType="false"
             @on-click="() => (dialogInputForm = true)"
@@ -347,6 +372,48 @@ onMounted(async () => {
         </div>
       </div>
     </AppBox>
+    <AppBox bordered v-else-if="productMode === 'service'" no-padding>
+      <div
+        class="row justify-center q-py-sm"
+        style="background-color: var(--surface-2)"
+      >
+        <q-input
+          style="width: 500px"
+          outlined
+          dense
+          :label="$t('search')"
+          class="q-mr-md"
+          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+          v-model="inputSearch"
+          debounce="500"
+        >
+          <template v-slot:prepend>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
+        <q-btn
+          icon="mdi-plus"
+          :color="$q.dark.isActive ? 'dark' : 'white'"
+          :text-color="$q.dark.isActive ? 'white' : 'dark'"
+          class="bordered rounded q-px-sm"
+          unelevated
+          @click="dialogProductServiceType = true"
+        />
+        <div class="q-mx-lg">ปุ่มรวมสินค้าทั้งหมด >></div>
+        <q-btn
+          unelevated
+          @click="dialogTotalProduct = true"
+          class="bordered rounded q-px-sm"
+          icon="mdi-plus"
+          :color="$q.dark.isActive ? 'dark' : 'white'"
+          :text-color="$q.dark.isActive ? 'white' : 'dark'"
+          round
+        />
+      </div>
+      <div class="flex justify-center items-center" style="min-height: 70vh">
+        asdasdasd
+      </div>
+    </AppBox>
   </div>
 
   <FormDialog
@@ -363,7 +430,7 @@ onMounted(async () => {
     <template #information>
       <BasicInformation
         dense
-        :isType="isType"
+        :isType="productMode === 'type'"
         v-model:remark="formData.remark"
         v-model:name="formData.name"
         v-model:detail="formData.detail"
@@ -378,7 +445,7 @@ onMounted(async () => {
     :undo="() => undoProductGroup()"
     :isEdit="isEdit"
     :editData="() => (isEdit = true)"
-    :submit="() => (isType ? submitType() : submitGroup())"
+    :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
     :delete-data="() => deleteProductById()"
     :close="() => (drawerInfo = false)"
   >
@@ -386,7 +453,7 @@ onMounted(async () => {
       <AppBox class="q-ma-md" bordered>
         <BasicInformation
           dense
-          :isType="isType"
+          :isType="productMode === 'type'"
           :readonly="!isEdit"
           v-model:remark="formData.remark"
           v-model:name="formData.name"