From 94de8b103510812d6fef0786eb7c13d975e22dbc Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 26 Oct 2023 11:59:36 +0700
Subject: [PATCH] =?UTF-8?q?UI=20-=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=9E=E0=B8=B7=E0=B9=89=E0=B8=99=E0=B8=90?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=20=E0=B8=8A=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B2=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ปรับ column row  ลงใน store
---
 .../6_BasicInformation/Channel/MainPage.vue   | 86 ++++++-------------
 .../interface/response/channel.ts             |  5 ++
 .../11_discipline/store/ChannelStore.ts       | 54 ++++++++++++
 3 files changed, 84 insertions(+), 61 deletions(-)
 create mode 100644 src/modules/11_discipline/interface/response/channel.ts
 create mode 100644 src/modules/11_discipline/store/ChannelStore.ts

diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 7a15f1330..5891812eb 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -4,67 +4,15 @@ import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-} = mixin;
+const { dialogRemove } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "subject",
-  "interrogated",
-  "fault",
-  "status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "subject",
-    align: "left",
-    label: "ชื่อประเภท",
-    sortable: true,
-    field: "subject",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const rows = ref<any>([
-  {
-    subject: " จดหมาย",
-  },
-  {
-    subject: " อีเมล์",
-  },
-  {
-    subject: " โทรศัพท์",
-  },
-  {
-    subject: " บอกเล่า",
-  },
-]);
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
@@ -74,7 +22,7 @@ const resetFilter = () => {
     filterRef.value.focus();
   }
 };
-
+const dataStore = useDisciplineChannelDataStore();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -104,7 +52,23 @@ const clickDelete = (id: string) => {
   );
 };
 
-onMounted(() => {});
+onMounted(() => {
+  // get ข้อมูลแล้วโยนใส่ store
+  dataStore.fetchData([
+    {
+      subject: " จดหมาย",
+    },
+    {
+      subject: " อีเมล์",
+    },
+    {
+      subject: " โทรศัพท์",
+    },
+    {
+      subject: " บอกเล่า",
+    },
+  ]);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -149,7 +113,7 @@ onMounted(() => {});
       </q-input>
 
       <q-select
-        v-model="visibleColumns"
+        v-model="dataStore.visibleColumns"
         multiple
         for="visibleColumns"
         outlined
@@ -158,7 +122,7 @@ onMounted(() => {});
         :display-value="$q.lang.table.columns"
         emit-value
         map-options
-        :options="columns"
+        :options="dataStore.columns"
         option-value="name"
         options-cover
         style="min-width: 150px"
@@ -167,11 +131,11 @@ onMounted(() => {});
     </div>
     <div class="col-12">
       <d-table
-        :columns="columns"
-        :rows="rows"
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
         row-key="id"
         :filter="filterKeyword"
-        :visible-columns="visibleColumns"
+        :visible-columns="dataStore.visibleColumns"
         :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >
diff --git a/src/modules/11_discipline/interface/response/channel.ts b/src/modules/11_discipline/interface/response/channel.ts
new file mode 100644
index 000000000..8afb0a1c4
--- /dev/null
+++ b/src/modules/11_discipline/interface/response/channel.ts
@@ -0,0 +1,5 @@
+interface ChannelRows {
+  subject: string;
+}
+
+export type { ChannelRows };
diff --git a/src/modules/11_discipline/store/ChannelStore.ts b/src/modules/11_discipline/store/ChannelStore.ts
new file mode 100644
index 000000000..d20362c8f
--- /dev/null
+++ b/src/modules/11_discipline/store/ChannelStore.ts
@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { ChannelRows } from "@/modules/11_discipline/interface/response/channel";
+import type { QTableProps } from "quasar";
+
+// store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
+export const useDisciplineChannelDataStore = defineStore(
+  "disciplineChannel",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "no",
+      "subject",
+      "interrogated",
+      "fault",
+      "status",
+    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "subject",
+        align: "left",
+        label: "ชื่อประเภท",
+        sortable: true,
+        field: "subject",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    // ข้อมูลในตาราง
+    const rows = ref<ChannelRows[]>([]);
+    function fetchData(data: ChannelRows[]) {
+      rows.value = data;
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      rows,
+      fetchData,
+    };
+  }
+);