fix(discipline-result):sort

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

@@ -158,7 +158,7 @@ onMounted(async () => {
               </div>
 
               <div
-                class="col-xs"
+                class="col-xs justify-center row"
                 v-if="checkPermission($route)?.attrIsCreate"
               >
                 <q-btn
@@ -180,7 +180,7 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col">
+              <div class="col justify-center row">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
               <div class="col-7">

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -175,7 +175,7 @@ onMounted(() => {
           <q-space />
           <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
             <div class="row q-col-gutter-sm items-center">
-              <div class="col">
+              <div class="col justify-center row">
                 <DialogSearchAdvanced :get-data="() => getSearch()" />
               </div>
 

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -162,7 +162,7 @@ function filterOptionFn(val: string, update: Function) {
         <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
           <div class="row q-col-gutter-sm items-center">
             <!-- ค้นหาข้อความใน table -->
-            <div class="col">
+            <div class="col justify-center row">
               <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
             </div>
             <div class="col-7">

src/modules/11_discipline/components/4_Result/MainPage.vue

@@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
 
@@ -19,23 +19,15 @@ const storeResult = useDisciplineResultStore();
 const store = useDisciplineMainStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = storeResult;
+const { pagination, params, onRequest } = usePagination("", fetchListResult);
 
 const filter = ref<string>("");
 const status = ref<string>("DONE");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
-async function fetchListResult(page?: number) {
+async function fetchListResult() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formResult.respondentType && {
@@ -77,12 +69,9 @@ async function fetchListResult(page?: number) {
   await http
     .post(config.API.listResult(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -112,18 +101,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListResult(page);
+  fetchListResult();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +118,25 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสรุปผลการพิจารณาความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="storeResult.rows"
-        :columns="storeResult.columns"
-        :visible-columns="storeResult.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="storeResult.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        :fetchListResult="fetchListResult"
-        :get-search="getSearch"
-        v-model:open-edit="openEdit"
-        v-model:open-detail="openDetail"
-        :filterStatus="filterStatus"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="storeResult.rows"
+      :columns="storeResult.columns"
+      :visible-columns="storeResult.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="storeResult.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      :fetchListResult="fetchListResult"
+      :get-search="getSearch"
+      v-model:open-edit="openEdit"
+      v-model:open-detail="openDetail"
+      :filterStatus="filterStatus"
+      v-model:pagination="pagination"
+      :on-request="onRequest"
+    />
   </q-card>
 </template>
 

src/modules/11_discipline/components/4_Result/Table.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { checkPermission } from "@/utils/permissions";
 
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const store = useDisciplineResultStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const statusFilter = ref<string>("DONE");
 
-const option = ref<any[]>(store.statusOptions);
+const option = ref<DataOption[]>(store.statusOptions);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -57,9 +58,12 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
 });
 
-const filter = ref<string>("");
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -71,17 +75,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.getSearch?.();
-}
-
-function updatePaging(p: number, pS: number, key: string) {
-  emit("update:queryString", p, pS, key);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -105,215 +98,167 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm items-center">
-    <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      map-options
-      hide-selected
-      fill-input
-      option-label="name"
-      option-value="id"
-      :options="option"
-      @update:model-value="dataUpdate"
-      use-input
-      @filter="filterOptionFn"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-        </q-item>
-      </template>
-      <template v-if="statusFilter !== 'ALL'" v-slot:append>
-        <q-icon
-          name="cancel"
-          @click.stop.prevent="
-            (option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @keydown.enter.prevent="filterFn"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        anchor="bottom left"
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
+  <div class="row q-col-gutter-sm q-pa-md">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+          <q-select
+            v-model="statusFilter"
+            label="สถานะ"
+            dense
+            outlined
+            emit-value
+            map-options
+            hide-selected
+            fill-input
+            option-label="name"
+            option-value="id"
+            :options="option"
+            @update:model-value="dataUpdate"
+            use-input
+            @filter="filterOptionFn"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+            <template v-if="statusFilter !== 'ALL'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (option = store.statusOptions),
+                    (statusFilter = 'ALL'),
+                    dataUpdate()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
+        <q-space />
+        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="row q-col-gutter-sm items-center">
+            <div class="col justify-center row">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @keydown.enter.prevent="filterFn"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  anchor="bottom left"
+                  transition-show="scale"
+                  transition-hide="scale"
+                  class="text-body2"
+                >
+                  หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
+                  หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
+                >
+              </q-input>
+            </div>
+            <div class="col-4">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <p-table
+        ref="table"
+        flat
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="props.onRequest"
       >
-        หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
-        หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
-      >
-    </q-input>
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-    >
-    </q-select>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium" v-html="col.label" />
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+                v-if="checkPermission($route)?.attrIsGet"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                round
+                dense
+                icon="edit"
+                color="edit"
+                @click="openEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <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-else
+                :class="
+                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
+                    ? 'table_ellipsis'
+                    : ''
+                "
+              >
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
   </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width></q-th>
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            flat
-            round
-            dense
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-            v-if="checkPermission($route)?.attrIsGet"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            round
-            dense
-            icon="edit"
-            color="edit"
-            @click="openEdit(props.row.id)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{
-              (pagination.page - 1) * pagination.rowsPerPage +
-              props.rowIndex +
-              1
-            }}
-          </div>
-          <div v-else-if="col.name === 'title'" class="table_ellipsis">
-            {{ props.row.title ?? "-" }}
-          </div>
-          <div v-else>
-            {{ col.value ?? "-" }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchListResult?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
 </template>
 
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>

src/modules/11_discipline/store/ResultStore.ts

@@ -42,7 +42,7 @@ export const useDisciplineResultStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "resultDisciplineType",
       "resultTitleType",
       "resultOc",
@@ -77,8 +77,6 @@ export const useDisciplineResultStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -88,8 +86,6 @@ export const useDisciplineResultStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryFaultLevel",
@@ -99,8 +95,6 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryCaseFault",
@@ -110,11 +104,9 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "disciplinaryDate",
+        name: "disciplinaryDateStart",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
@@ -162,7 +154,7 @@ export const useDisciplineResultStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",