fixing error & layout command template

src/api/05_command/api.command.ts

@@ -0,0 +1,6 @@
+import env from "../index";
+const order = `${env.API_URI}/order`;
+
+export default {
+  commandType: `${order}/order-type`,
+};

src/app.config.ts

@@ -43,6 +43,9 @@ import development from "./api/15_development/api.development";
 /** API  BackUp/*/
 import backup from "./api/04_system/api.backup";
 
+/** API  Command/*/
+import command from "./api/05_command/api.command";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -110,6 +113,8 @@ const API = {
   ...development,
   /** backup*/
   ...backup,
+  /** command*/
+  ...command,
 };
 
 export default {

src/modules/05_command/components/ViewPdf.vue

@@ -50,7 +50,6 @@ function backPage() {
 
 const showDocument = (url: any) => {
   const pdfData = usePDF(url);
-  console.log("🚀 ~ showDocument ~ pdfData:", pdfData);
   setTimeout(() => {
     pdfSrc.value = pdfData.pdf.value;
     numOfPages.value = pdfData.pages.value;
@@ -64,7 +63,7 @@ watch(
       showLoader();
       setTimeout(() => {
         const url =
-          "https://s3cluster.frappet.com/bma-ehr-fpt/b1638139-0753-45c7-adc4-c9824290a031?AWSAccessKeyId=frappet&Expires=1725631100&Signature=j5k81k0ofHDidwsSfiGz%2BpL3igA%3D";
+          "https://s3cluster.frappet.com/public/template-command.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=A3O4SZ1Q1L0A2SPWLMDY%2F20240909%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240909T064638Z&X-Amz-Expires=604800&X-Amz-Security-Token=eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3NLZXkiOiJBM080U1oxUTFMMEEyU1BXTE1EWSIsImV4cCI6MTcyNTkwNzE4MiwicGFyZW50IjoiZnJhcHBldCJ9.4opHdRH9VegUbtcHsIucy-SpWyboCcuhg2jjtLT4Ypvg2Yg8WvvLoyL92-IabqEYlNvv_sMJMa7P8oQkMqpsSA&X-Amz-SignedHeaders=host&versionId=null&X-Amz-Signature=fce8a76e6d5d3e83eac102402b07ba2a8ac8c2a1e0a055f1d8a5ecc74434c0e0";
         showDocument(url);
         hideLoader();
       }, 1000);
@@ -73,6 +72,7 @@ watch(
   { immediate: true }
 );
 </script>
+
 <template>
   <div class="row items-center q-col-gutter-sm">
     <div class="col-12 col-md-8 col-lg-6">

src/modules/05_command/interface/index/Main.ts

@@ -9,9 +9,10 @@ interface ActiveOptions {
 
 interface ListOrder {
   id: string;
-  code: string;
+  commandCode: string;
   name: string;
   status: boolean;
+  category?: string;
 }
 
 interface Tabs {

src/modules/05_command/views/lists.vue

@@ -14,7 +14,7 @@ import type {
 } from "@/modules/05_command/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
-import PageOrder from "@/modules/05_command/components/ListOrder.vue";
+import PageOrder from "@/modules/05_command/components/ViewPdf.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -117,29 +117,35 @@ function selectInbox(data: ListOrder) {
   activeOrderId.value = data.id;
 }
 
+/**
+ * ฟังก์ชั่นดึงรายการประเภทคำสั่ง
+ */
+async function fetchOrderType() {
+  showLoader();
+  await http
+    .get(config.API.commandType)
+    .then(async (res) => {
+      listOrder.value = res.data.result.map((item: any) => {
+        return {
+          name: item.name,
+          category: item.category,
+          commandCode: item.commandCode,
+          id: item.id,
+          status: true,
+        };
+      });
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(() => {
-  const dataTest = [
-    {
-      id: "031952c2-a0d5-4a17-925c-d97993879621",
-      code: "C-PM-01",
-      name: "Test1",
-      status: true,
-    },
-    {
-      id: "031952c2-a0d5-4a17-925c-d97993879622",
-      code: "C-PM-01",
-      name: "Test2",
-      status: true,
-    },
-    {
-      id: "031952c2-a0d5-4a17-925c-d97993879623",
-      code: "C-PM-01",
-      name: "Test3",
-      status: false,
-    },
-  ];
-  listOrder.value = dataTest;
+  fetchOrderType();
 });
 </script>
 
@@ -170,7 +176,7 @@ onMounted(() => {
               dense
               v-model="inActive"
               class="inputgreen"
-              label="status"
+              label="สถานะการใช้งาน"
               :options="activeOptions"
               option-label="label"
               option-value="value"
@@ -190,22 +196,21 @@ onMounted(() => {
               <q-item
                 clickable
                 v-ripple
-                class="my-link q-my-xs"
                 :active="activeOrderId === item.id"
                 active-class="my-menu_link"
                 @click="selectInbox(item)"
               >
                 <q-item-section>
-                  <q-item-label class="text-weight-medium" caption lines="2">
-                    {{ `- ${item.name}` }}
+                  <q-item-label>
+                    {{ item.name }}
                   </q-item-label>
                 </q-item-section>
-                <q-item-section side center>
+                <q-item-section side center @click.stop>
                   <q-icon
-                    name="mdi-dots-horizontal"
-                    color="secondary"
+                    name="mdi-dots-vertical"
+                    class="q-pa-none q-ml-xs"
+                    color="grey-13"
                     flat
-                    round
                     dense
                   >
                     <q-menu

tsconfig.app.json

@@ -8,6 +8,8 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "lib": ["dom", "es2015", "es2018", "es2018.promise"]
+    "lib": ["dom", "es2015", "es2018", "es2018.promise"],
+    "ignoreDeprecations": "5.0",
+    "verbatimModuleSyntax": true
   }
 }

tsconfig.config.json

@@ -3,6 +3,8 @@
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": ["node"],
+    "ignoreDeprecations": "5.0",
+    "verbatimModuleSyntax": true
   }
 }