fix(startDateSuspend):sort

src/api/11_discipline/api.discipline.ts

@@ -82,13 +82,8 @@ export default {
     `${discipline}/director/${disciplineId}/${id}`,
 
   /** ผู้ถูกพักราชการ */
-  suspendMain: (
+  suspendMain: suspend,
-    page: number,
+
-    pageSize: number,
-    keyword: string,
-    type: string
-  ) =>
-    `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
   suspendById: (id: string) => `${suspend}/${id}`,
 
   suspendReport: () => `${suspend}/report`,

src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,33 +7,28 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
-
+import { usePagination } from "@/composables/usePagination";
-import type {
-  dataType,
-  DataOption,
-} from "@/modules/11_discipline/interface/response/suspend";
-import type { QTableProps } from "quasar";
-
-import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
 import {
   checkPermission,
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
 
+import type { QTableProps } from "quasar";
+import type {
+  dataType,
+  DataOption,
+} from "@/modules/11_discipline/interface/response/suspend";
+
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+
 /** use */
 const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
-const {
+  useCounterMixin();
-  messageError,
+const { pagination, params, onRequest } = usePagination("", getList);
-  showLoader,
-  hideLoader,
-  success,
-  date2Thai,
-  convertDateToAPI,
-} = mixin;
 
 const date = ref<any>(null);
 const employeeClass = ref<string>("");
@@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
   "no",
   "profileType",
   "title",
-  "name",
+  "firstName",
   "position",
   "positionType",
   "positionLevel",
   "organization",
-  "dateTotal",
+  "startDateSuspend",
   "descriptionSuspend",
   "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows2 = ref<dataType[]>([]);
@@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
@@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateTotal",
+    name: "startDateSuspend",
     align: "left",
     label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
     sortable: true,
@@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-const openModal = () => (modal.value = true);
+function openModal() {
-
+  modal.value = true;
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function resetFilter() {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-  getSearch();
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -201,28 +182,22 @@ function openModalOrder() {
 /** ดึงข้อมูลหน้าหลัก */
 async function getList() {
   showLoader();
-  const params: Record<string, any> = {};
+  const paramsNew = {
-  if (date.value && date.value.length === 2) {
+    ...params.value,
-    params.startDate = convertDateToAPI(date.value[0]);
+    keyword: filterKeyword.value.trim(),
-    params.endDate = convertDateToAPI(date.value[1]);
+    profileType: employeeClass.value,
-  }
+    ...(date.value?.length === 2 && {
+      startDate: convertDateToAPI(date.value[0]),
+      endDate: convertDateToAPI(date.value[1]),
+    }),
+  };
+
   await http
-    .get(
+    .get(config.API.suspendMain, { params: paramsNew })
-      config.API.suspendMain(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        employeeClass.value
-      ),
-      { params }
-    )
     .then(async (res) => {
-      const data = await res.data.result.data;
+      const result = await res.data.result;
-      totalList.value = Math.ceil(
+      pagination.value.rowsNumber = result.total;
-        res.data.result.total / pagination.value.rowsPerPage
+      await dataStore.getData(result.data);
-      );
-      total.value = res.data.result.total;
-      await dataStore.getData(data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,27 +207,11 @@ async function getList() {
     });
 }
 
-function filterFn() {
-  getSearch();
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 function convertType(val: string) {
   const data = val?.toLocaleUpperCase();
   switch (data) {
@@ -275,12 +234,13 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อผู้ถูกพักราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
+  <q-card flat bordered>
-    <q-separator />
+    <div class="row q-pa-md q-col-gutter-sm">
-    <div class="row q-pa-md">
       <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
             <div class="row col-12 q-col-gutter-sm items-center">
-          <div>
+              <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                 <q-select
                   v-model="employeeClass"
                   outlined
@@ -292,11 +252,10 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   label="ประเภทตำแหน่ง"
-              style="min-width: 200px"
                   @update:model-value="getList"
                 />
               </div>
-          <div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                 <datepicker
                   v-model="date"
                   :locale="'th'"
@@ -304,7 +263,6 @@ onMounted(async () => {
                   range
                   :enableTimePicker="false"
                   @update:model-value="getList()"
-              style="min-width: 280px"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -317,7 +275,9 @@ onMounted(async () => {
                       outlined
                       :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
                       :model-value="
-                    date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
+                        date
+                          ? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
+                          : ''
                       "
                     >
                       <template v-slot:prepend>
@@ -340,7 +300,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-          <div>
+              <div class="col-1 row justify-center">
                 <q-btn
                   v-if="
                     checkPermission($route)?.attrIsUpdate &&
@@ -357,8 +317,13 @@ onMounted(async () => {
                   <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
                 </q-btn>
               </div>
-          <q-space />
+            </div>
+          </div>
 
+          <q-space />
+          <div class="col-xs-12 col-sm-4 col-md-5 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
                 <q-input
                   for="#search"
                   standout
@@ -367,13 +332,14 @@ onMounted(async () => {
                   ref="filterRef"
                   outlined
                   placeholder="ค้นหา"
-            @keydown.enter.prevent="filterFn"
+                  @keydown.enter.prevent="getSearch"
                 >
                   <template v-slot:append>
                     <q-icon name="search" />
                   </template>
                 </q-input>
-
+              </div>
+              <div class="col-5">
                 <q-select
                   v-model="dataStore.visibleColumns"
                   multiple
@@ -385,40 +351,29 @@ onMounted(async () => {
                   map-options
                   :options="columns"
                   option-value="name"
-            style="min-width: 140px"
                 />
               </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        <div class="col-12 q-pt-sm">
+      <div class="col-12">
-          <d-table
+        <p-table
           :columns="dataStore.columns"
           :rows="dataStore.rows"
           row-key="id"
           :visible-columns="dataStore.visibleColumns"
           :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
-            <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="getList"
-              ></q-pagination>
-            </template>
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-                <!-- <q-th auto-width /> -->
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -454,13 +409,12 @@ onMounted(async () => {
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
-                    {{
+                  {{ props.rowIndex + 1 }}
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
                 </div>
-                  <div v-else-if="col.name === 'name'" class="table_ellipsis">
+                <div
+                  v-else-if="col.name === 'firstName'"
+                  class="table_ellipsis"
+                >
                   {{ props.row.prefix ? props.row.prefix : ""
                   }}{{ props.row.firstName ? props.row.firstName : "" }}
                   {{ props.row.lastName ? props.row.lastName : "" }}
@@ -488,8 +442,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          </d-table>
+        </p-table>
-        </div>
       </div>
     </div>
   </q-card>