feat: troubleshooting page

quasar.config.ts

@@ -31,7 +31,7 @@ export default defineConfig((ctx) => {
     devServer: {
       host: '0.0.0.0',
       open: false,
-      port: 5173,
+      port: 5174,
     },
     framework: {
       config: {},

src/i18n/eng.ts

@@ -254,7 +254,8 @@ export default {
 
     manual: {
       title: 'Manual',
-      usage: 'การใช้งาน',
+      usage: 'Usage',
+      troubleshooting: 'Troubleshooting',
     },
   },
 

src/i18n/tha.ts

@@ -255,6 +255,7 @@ export default {
     manual: {
       title: 'คู่มือ',
       usage: 'การใช้งาน',
+      troubleshooting: 'การแก้ปัญหา',
     },
   },
 

src/layouts/DrawerComponent.vue

@@ -215,6 +215,10 @@ function initMenu() {
           label: 'usage',
           route: '/manual',
         },
+        {
+          label: 'troubleshooting',
+          route: '/troubleshooting',
+        },
       ],
     },
   ];

src/pages/00_manual/MainPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // NOTE: Library
 import { storeToRefs } from 'pinia';
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 
 // NOTE:  Components
 
@@ -10,22 +10,33 @@ import { onMounted } from 'vue';
 import { useManualStore } from 'src/stores/manual';
 import { useNavigator } from 'src/stores/navigator';
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useRoute } from 'vue-router';
 
 // NOTE: Variable
+const route = useRoute();
 const manualStore = useManualStore();
 const navigatorStore = useNavigator();
-const { dataManual } = storeToRefs(manualStore);
-
-async function fetchManual() {
-  const res = await manualStore.getManual();
-  dataManual.value = res ? res : [];
-}
+const { dataManual, dataTroubleshooting } = storeToRefs(manualStore);
 
 onMounted(async () => {
   navigatorStore.current.title = 'menu.manual.title';
   navigatorStore.current.path = [{ text: '' }];
-  await fetchManual();
 });
+
+watch(
+  () => route.name,
+  async () => {
+    if (route.name === 'Manual') {
+      const res = await manualStore.getManual();
+      dataManual.value = res ? res : [];
+    }
+    if (route.name === 'Troubleshooting') {
+      const res = await manualStore.getTroubleshooting();
+      dataTroubleshooting.value = res ? res : [];
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -34,7 +45,7 @@ onMounted(async () => {
   >
     <section class="scroll q-gutter-y-sm">
       <q-expansion-item
-        v-for="v in dataManual"
+        v-for="v in $route.name === 'Manual' ? dataManual : dataTroubleshooting"
         :key="v.labelEN"
         :content-inset-level="0.5"
         class="rounded overflow-hidden bordered"
@@ -58,7 +69,11 @@ onMounted(async () => {
           clickable
           dense
           class="dot items-center rounded q-my-xs"
-          :to="`/manual/${v.category}/${x.name}`"
+          :to="
+            $route.name === 'Manual'
+              ? `/manual/${v.category}/${x.name}`
+              : `/troubleshooting/${v.category}/${x.name}`
+          "
         >
           <Icon
             v-if="!!x.icon"

src/pages/00_manual/ViewPage.vue

@@ -56,6 +56,8 @@ onUnmounted(() => {
 
 async function getContent() {
   if (!category.value || !page.value) return;
+
+  if (ROUTE.name === 'ManualView') {
     const res = await manualStore.getManualByPage({
       category: category.value,
       pageName: page.value,
@@ -65,6 +67,18 @@ async function getContent() {
       content.value = text;
       contentParsed.value = md.parse(text, {});
     }
+  }
+  if (ROUTE.name === 'TroubleshootingView') {
+    const res = await manualStore.getTroubleshootingByPage({
+      category: category.value,
+      pageName: page.value,
+    });
+    if (res && res.ok) {
+      const text = await res.text();
+      content.value = text;
+      contentParsed.value = md.parse(text, {});
+    }
+  }
 }
 
 function onScroll() {
@@ -184,7 +198,9 @@ async function scrollTo(id: string) {
           md.render(
             content.replaceAll(
               'assets/',
-              `${baseUrl}/manual/${category}/assets/`,
+              $route.name === 'ManualView'
+                ? `${baseUrl}/manual/${category}/assets/`
+                : `${baseUrl}/troubleshooting/${category}/assets/`,
             ),
           )
         "

src/router/routes.ts

@@ -155,6 +155,16 @@ const routes: RouteRecordRaw[] = [
         name: 'ManualView',
         component: () => import('pages/00_manual/ViewPage.vue'),
       },
+      {
+        path: '/troubleshooting',
+        name: 'Troubleshooting',
+        component: () => import('pages/00_manual/MainPage.vue'),
+      },
+      {
+        path: '/troubleshooting/:category/:page',
+        name: 'TroubleshootingView',
+        component: () => import('pages/00_manual/ViewPage.vue'),
+      },
     ],
   },
 

src/stores/manual/index.ts

@@ -5,10 +5,11 @@ import { getToken } from 'src/services/keycloak';
 import { Manual } from './types';
 import { baseUrl } from '../utils';
 
-const ENDPOINT = 'manual';
+const MANUAL_ENDPOINT = 'manual';
+const TROUBLESHOOTING_ENDPOINT = 'troubleshooting';
 
 export async function getManual() {
-  const res = await api.get<Manual[]>(`/${ENDPOINT}`);
+  const res = await api.get<Manual[]>(`/${MANUAL_ENDPOINT}`);
   if (res.status < 400) {
     return res.data;
   }
@@ -20,7 +21,28 @@ export async function getManualByPage(opt: {
   pageName: string;
 }) {
   const res = await fetch(
-    `${baseUrl}/${ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+    `${baseUrl}/${MANUAL_ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+  );
+  if (res.status < 400) {
+    return res;
+  }
+  return null;
+}
+
+export async function getTroubleshooting() {
+  const res = await api.get<Manual[]>(`/${TROUBLESHOOTING_ENDPOINT}`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getTroubleshootingByPage(opt: {
+  category: string;
+  pageName: string;
+}) {
+  const res = await fetch(
+    `${baseUrl}/${TROUBLESHOOTING_ENDPOINT}/${opt.category}/page/${opt.pageName}`,
   );
   if (res.status < 400) {
     return res;
@@ -30,11 +52,15 @@ export async function getManualByPage(opt: {
 
 export const useManualStore = defineStore('manual-store', () => {
   const dataManual = ref<Manual[]>([]);
+  const dataTroubleshooting = ref<Manual[]>([]);
 
   return {
     getManual,
     getManualByPage,
+    getTroubleshooting,
+    getTroubleshootingByPage,
 
     dataManual,
+    dataTroubleshooting,
   };
 });