feat: change path in product service

src/i18n/en-US/product-service.ts

@@ -9,6 +9,8 @@ export default {
 
   service: 'Service',
   product: 'Product',
+  productGroup: 'Product Group: {name}',
+  productType: 'Product Type: {name}',
 
   messageTooltipNoProduct: 'No Product and Service Groups',
   messageTooltipProductCreate: 'Click + for product and service groups.',

src/i18n/th-th/main.ts

@@ -9,7 +9,7 @@ export default {
   mainCustomerCaption: 'จัดการคนภายในองค์กร',
 
   mainProductTitle: 'สินค้าและบริการ',
-  mainProductCaption: 'รายการสินค้าและบริการ',
+  mainProductCaption: 'ประเภทสินค้าและบริการ',
 
   mainQuotationTitle: 'ใบเสนอราคา',
   mainQuotationCaption: 'รายการใบเสนอราคา',

src/layouts/MainLayout.vue

@@ -265,7 +265,13 @@ onMounted(async () => {
                   class="text-caption cursor-pointer"
                   @click="item.handler?.()"
                 >
-                  {{ item.text ? $t(item.text) : '' }}
+                  {{
+                    item.text
+                      ? $t(item.text, {
+                          ...(item.argsi18n || {}),
+                        })
+                      : ''
+                  }}
                 </span>
                 <q-icon
                   name="mdi-chevron-right"

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

@@ -1022,6 +1022,22 @@ onMounted(async () => {
 watch(productMode, () => {
   inputSearch.value = '';
   currentStatus.value = 'All';
+  const tmp: typeof utilsStore.currentTitle.path = [];
+
+  if (productMode.value === 'type' || productMode.value === 'service') {
+    tmp.push({
+      text: 'productGroup',
+      argsi18n: { name: pathGroupName.value },
+      handler: () => {
+        productMode.value = 'type';
+      },
+    });
+  }
+  if (productMode.value === 'service') {
+    tmp.push({ text: 'productType', argsi18n: { name: pathTypeName.value } });
+  }
+
+  utilsStore.currentTitle.path = tmp;
 });
 
 watch(currentStatus, async () => {
@@ -1183,47 +1199,6 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </transition>
 
-      <!-- title type/service -->
-      <div
-        class="row items-center q-mb-md"
-        v-if="productMode === 'service' || productMode === 'type'"
-      >
-        <q-btn
-          round
-          icon="mdi-arrow-left"
-          flat
-          dense
-          @click="productMode = productMode === 'service' ? 'type' : 'group'"
-          class="q-mr-md"
-        />
-        <div
-          class="text-h6 hover-underline"
-          :class="{
-            'app-text-muted': productMode !== 'type',
-            'text-weight-bold': productMode === 'type',
-          }"
-          @click="productMode = 'type'"
-        >
-          {{ pathGroupName }}
-        </div>
-        <div
-          class="text-h6 app-text-muted q-mx-sm"
-          v-if="productMode === 'service'"
-        >
-          /
-        </div>
-        <div
-          v-if="productMode === 'service'"
-          class="text-h6"
-          :class="{
-            'app-text-muted': productMode !== 'service',
-            'text-weight-bold': productMode === 'service',
-          }"
-        >
-          {{ pathTypeName }}
-        </div>
-      </div>
-
       <!-- group/type -->
       <div
         v-if="productMode === 'group' || productMode === 'type'"

src/stores/utils/index.ts

@@ -97,7 +97,11 @@ export function formatNumberDecimal(num: number, point: number): string {
 const useUtilsStore = defineStore('utilsStore', () => {
   const currentTitle = ref<{
     title: string;
-    path: { text: string; handler?: () => unknown }[];
+    path: {
+      text: string;
+      argsi18n?: Record<string, string>;
+      handler?: () => unknown;
+    }[];
   }>({
     title: '',
     path: [