ปรับ interfeac

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -2,12 +2,15 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
+
+import type { DataList } from "@/modules/11_discipline/interface/response/complaint";
 // importStroe
-import { useComplainstDataStore } from "../../store/ComplaintsStore";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+
 const router = useRouter();
 
 const complainstStore = useComplainstDataStore();
-const { fectComplainst } = complainstStore; // function จาก stores
+const { fetchComplainst } = complainstStore; // function จาก stores
 
 //ข้อมูล Table
 const filterTable = ref<string>("");
@@ -96,12 +99,12 @@ const visibleColumns = ref<string[]>([
   "considerationDeadlineDate",
 ]);
 onMounted(async () => {
-  await fecthListComplaints();
+  await fetchListComplaints();
 });
 
 // เรีนกรายการเรื่องร้องเรียน
-async function fecthListComplaints() {
-  const listData = [
+async function fetchListComplaints() {
+  const listData: DataList[] = [
     {
       subject: "ทุจริตในหน้าที่",
       detail: "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน",
@@ -131,7 +134,7 @@ async function fecthListComplaints() {
       considerationDeadlineDate: "2023-11-01",
     },
   ];
-  await fectComplainst(listData);
+  await fetchComplainst(listData);
 }
 function redirectToPageadd() {
   router.push(`/discipline/complaints/add`);
@@ -157,6 +160,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
       <div class="q-pa-md">
         <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
           <q-btn
+            id="addComplaints"
             flat
             dense
             round
@@ -167,10 +171,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
           >
           <q-space />
           <div class="col-2">
-            <q-input dense outlined v-model="filterTable" label="ค้นหา" />
+            <q-input
+              id="filterTable"
+              for="filterTable"
+              dense
+              outlined
+              v-model="filterTable"
+              label="ค้นหา"
+            />
           </div>
           <div class="col-2">
             <q-select
+              id="visibleColumns"
+              for="visibleColumns"
               v-model="visibleColumns"
               multiple
               outlined
@@ -186,6 +199,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           </div>
         </q-toolbar>
         <d-table
+          id="table"
           ref="table"
           :columns="columns"
           :rows="complainstStore.rows"
@@ -209,46 +223,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="subject" :props="props">
-                {{ props.row.subject }}
-              </q-td>
-              <q-td key="detail" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.detail }}
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-if="col.name == 'detail'">
+                  <div class="table_ellipsis">
+                    {{ props.row.detail }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value }}
                 </div>
-              </q-td>
-              <q-td key="complainant" :props="props">
-                {{ props.row.complainant }}
-              </q-td>
-              <q-td key="offenseDescription" :props="props">
-                {{ props.row.offenseDescription }}
-              </q-td>
-              <q-td key="creationDate" :props="props">
-                {{ props.row.creationDate }}
-              </q-td>
-              <q-td key="considerationLevel" :props="props">
-                {{ props.row.considerationLevel }}
-              </q-td>
-              <q-td key="considerationDeadlineDate" :props="props">
-                {{ props.row.considerationDeadlineDate }}
               </q-td>
             </q-tr>
           </template>
-          <!-- <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template> -->
         </d-table>
       </div>
     </q-card>