fix(disciplinary):sort

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

@@ -2,25 +2,16 @@
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = dataInvestigateDis;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListDisciplinary
+);
 
 const filter = ref<string>(""); //search data table
 
 const status = ref<string>("NEW");
-async function fetchListDisciplinary(page?: number) {
+
+async function fetchListDisciplinary() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formInvestigateDisciplinary.respondentType && {
@@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
   await http
     .post(config.API.disciplineDisciplinary(), 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((e) => {
       messageError($q, e);
@@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListDisciplinary(page);
+  fetchListDisciplinary();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +121,26 @@ 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="dataInvestigateDis.rows"
-        :columns="dataInvestigateDis.columns"
-        :visible-columns="dataInvestigateDis.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :fetchListDisciplinary="fetchListDisciplinary"
-        v-model:open-edit="openEdit"
-        :open-detail="openDetail"
-        :filterStatus="filterStatus"
-        :get-search="getSearch"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="dataInvestigateDis.rows"
+      :columns="dataInvestigateDis.columns"
+      :visible-columns="dataInvestigateDis.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="dataInvestigateDis.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      v-model:pagination="pagination"
+      :fetchListDisciplinary="fetchListDisciplinary"
+      v-model:open-edit="openEdit"
+      :open-detail="openDetail"
+      :filterStatus="filterStatus"
+      :get-search="getSearch"
+      :on-request="onRequest"
+    >
+    </Table>
   </q-card>
 </template>
 

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

@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";
 
 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 });
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const dataInvestigateDis = useInvestigateDisStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const currentPage = ref<number>(1);
 const statusFilter = ref<string>("NEW");
-const option = ref<any[]>(dataInvestigateDis.statusOptions);
+const option = ref<DataOption[]>(dataInvestigateDis.statusOptions);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -77,6 +76,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  onRequest: {
+    type: Function,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
@@ -94,18 +97,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.fetchListDisciplinary?.();
-}
-
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -126,215 +117,166 @@ 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">
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      hide-selected
-      fill-input
-      map-options
-      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 = dataInvestigateDis.statusOptions),
-              (statusFilter = 'ALL'),
-              dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      @keydown.enter.prevent="filterFn"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
-        >หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
-        ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
+  <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
+            hide-selected
+            fill-input
+            map-options
+            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 = dataInvestigateDis.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">
+            <!-- ค้นหาข้อความใน table -->
+            <div class="col">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="filterFn"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  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-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <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
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                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: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.fetchListDisciplinary?.()"
-      ></q-pagination>
-    </template>
-    <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
-            v-if="checkPermission($route)?.attrIsGet"
-            flat
-            dense
-            round
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            dense
-            round
-            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'">
-            {{
-              (currentPage - 1) * Number(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>
-  </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/InvestigateDisStore.ts

@@ -4,7 +4,7 @@ import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { Persons } from "@/modules/11_discipline/interface/request/Disciplinary";
+import type { Persons } from "@/modules/11_discipline/interface/request/disciplinary";
 import type {
   investigateDisDataRowType,
   DataOption,
@@ -81,7 +81,7 @@ export const useInvestigateDisStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "dateReceived",
       "status",
     ]);
@@ -113,8 +113,6 @@ export const useInvestigateDisStore = 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",
@@ -124,8 +122,6 @@ export const useInvestigateDisStore = 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",
@@ -135,8 +131,6 @@ export const useInvestigateDisStore = 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",
@@ -146,11 +140,9 @@ export const useInvestigateDisStore = 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,
@@ -171,7 +163,7 @@ export const useInvestigateDisStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",