fix(director):sort

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

@@ -7,6 +7,7 @@ const appeal = `${env.API_URI}/discipline/complaint_appeal`;
 const disciplineReport = `${env.API_URI}/discipline/report`;
 
 export default {
+  directorListMain: `${disciplineMain}/director/`,
   directorList: (
     page: number,
     pageSize: number,

src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue

@@ -19,12 +19,9 @@ const router = useRouter();
  * @param id ระบุ บุคคล
  */
 function onSubmit(formData: FormDataPost) {
-  dialogConfirm($q, () => addData(formData));
+  dialogConfirm($q, async () => {
-}
-
-function addData(formData: FormDataPost) {
     showLoader();
-  http
+    await http
       .post(config.API.director(), {
         personalId: formData.personalId ?? "",
         prefix: formData.prefix,
@@ -36,14 +33,16 @@ function addData(formData: FormDataPost) {
         qualification: formData.qualification,
         rootDnaId: formData.rootDnaId,
       })
-    .then((res) => {
+      .then(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        await router.push(`/discipline/director`);
       })
       .catch((e) => {
         messageError($q, e);
       })
-    .finally(async () => {
+      .finally(() => {
-      router.push(`/discipline/director`);
+        hideLoader();
+      });
   });
 }
 </script>

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -7,6 +7,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   FormData,
@@ -18,15 +19,6 @@ import type {
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const route = useRoute();
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -36,6 +28,7 @@ const search = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
+const { pagination, params, onRequest } = usePagination("", getSearch);
 
 /** รับ props มาจาก page หลัก */
 const props = defineProps({
@@ -56,16 +49,8 @@ const typeOps = ref<typeOp[]>([
 ]);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
-/**
- * ข้อมูลเลขประจำตัวประชาชน
- */
-//
-const idCard = ref<string>("");
-const idCardRef = ref<any>(null);
 
-/**
+/** ข้อมูลทั้งก้อน form*/
- * ข้อมูลทั้งก้อน form
- */
 const formData = reactive<FormData>({
   personalId: "",
   prefix: "",
@@ -78,9 +63,7 @@ const formData = reactive<FormData>({
   rootDnaId: "",
 });
 
-/**
+/** ตรวจสอบข้อมูลก่อนส่งไปยัง api*/
- * ตรวจสอบข้อมูลก่อนส่งไปยัง api
- */
 const prefixRef = ref<object | null>(null);
 const firstnameRef = ref<object | null>(null);
 const lastnameRef = ref<object | null>(null);
@@ -183,42 +166,33 @@ function updateSelect() {
 
 /** ค้าหาข้อมูล */
 async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
   pagination.value.page = 1;
   await getSearch();
 }
-}
 
 /** ดึงข้อมูล */
 async function getSearch() {
   showLoader();
   const body = {
     fieldName: type.value,
-    keyword: search.value,
+    keyword: search.value ? search.value.trim() : "",
     system: (route.meta?.Key as string) || undefined,
   };
   await http
-    .post(
+    .post(config.API.orgSearchPersonal(), body, { params: params.value })
-      config.API.orgSearchPersonal() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
-      body
-    )
     .then((res) => {
-      totalList.value = Math.ceil(
+      const result = res.data.result;
-        res.data.result.total / pagination.value.rowsPerPage
+      pagination.value.rowsNumber = result.total;
-      );
+      if (result.data.length > 0) {
-      total.value = res.data.result.total;
+        rows.value = result.data.map((e: ResponsePreson) => ({
-      const data = res.data.result.data;
-      const list = data.map((e: ResponsePreson) => ({
           personId: e.id,
           idcard: e.citizenId,
           prefix: e.prefix,
           firstName: e.firstName,
           lastName: e.lastName,
-        name: `${e.prefix ? e.prefix : ""}${e.firstName ? e.firstName : ""}  ${
+          name: `${e.prefix ? e.prefix : ""}${
-          e.lastName ? e.lastName : ""
+            e.firstName ? e.firstName : ""
-        }`,
+          }  ${e.lastName ? e.lastName : ""}`,
           posNo: e.posNo ?? "-",
           position: e.position ?? "-",
           positionLevel: e.positionLevel ?? "-",
@@ -228,11 +202,13 @@ async function getSearch() {
           email: e.email ?? "-",
           rootDnaId: e.rootDnaId ?? "-",
         }));
-
+      } else {
-      rows.value = list;
+        rows.value = [];
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -267,17 +243,14 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
-watch(props.data, async () => {
+watch(
+  () => props.data,
+  async () => {
     formData.prefix = props.data.prefix;
     formData.firstname = props.data.firstname;
     formData.lastname = props.data.lastname;
@@ -285,13 +258,8 @@ watch(props.data, async () => {
     formData.phone = props.data.phone;
     formData.email = props.data.email;
     formData.qualification = props.data.qualification;
-});
+  },
-
+  { deep: true }
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getSearch();
-  }
 );
 </script>
 
@@ -343,7 +311,7 @@ watch(
             </div>
 
             <div class="col-12 q-pt-sm">
-              <d-table
+              <p-table
                 ref="table"
                 :columns="columnsRespondent"
                 :rows="rows"
@@ -352,26 +320,11 @@ watch(
                 bordered
                 :paging="true"
                 dense
-                class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
                 :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="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -393,11 +346,7 @@ watch(
                       @click="returnDetail(props.row)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
+                        {{ props.rowIndex + 1 }}
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
                       </div>
                       <div v-else-if="col.name == 'info'">
                         <q-btn
@@ -413,12 +362,12 @@ watch(
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
                 </template>
-              </d-table>
+              </p-table>
             </div>
           </div>
 

src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.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 config from "@/app.config";
@@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
 
@@ -21,6 +22,7 @@ const mainStore = useDisciplineMainStore();
 const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const titleInvestigate = ref<string>("");
 const personalId = ref<string>("");
@@ -36,33 +38,23 @@ const dataPopUp = ref<DirectorRowsResponse>();
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function getList() {
   showLoader();
   await http
     .get(
-      config.API.directorList(
+      config.API.directorListMain +
-        pagination.value.page,
+        `${mainStore.pathDirector(route.name as string)}`,
-        pagination.value.rowsPerPage,
+      {
-        filterKeyword.value.trim(),
+        params: {
-        mainStore.pathDirector(route.name as string)
+          ...params.value,
-      )
+          keyword: filterKeyword.value.trim(),
+        },
+      }
     )
     .then((res) => {
-      const data = res.data.result.data;
+      const result = res.data.result;
-      totalList.value = Math.ceil(
+      pagination.value.rowsNumber = result.total;
-        res.data.result.total / pagination.value.rowsPerPage
+      dataStore.fetchData(result.data);
-      );
-      total.value = res.data.result.total;
-      dataStore.fetchData(data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -77,38 +69,21 @@ async function getList() {
  * @param id ไอดีของข้อมูล
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
+  dialogRemove($q, async () => {
-}
-
-/**
- * ลบข้อมูล
- * @param id type
- */
-async function deleteData(id: string) {
     showLoader();
     await http
       .delete(config.API.directorbyId(id))
-    .then((res) => {
+      .then(async () => {
+        await getList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(async () => {
-      await getList();
+        hideLoader();
+      });
   });
-}
-
-function resetFilter() {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getSearch();
-  }
-}
-
-function filterFn() {
-  getSearch();
 }
 
 function openDetail(data: DirectorRowsResponse, typeChange: string) {
@@ -132,38 +107,28 @@ function onEdit(id: string, check: boolean) {
   isEdit.value = check;
 }
 
-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();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(() => {
   getList();
-  // get ข้อมูลแล้วโยนใส่ store
 });
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการชื่อกรรมการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+  <q-card flat bordered>
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="col-12 q-pa-md q-col-gutter-sm">
-      <div>
+      <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">
+            <div class="row items-center">
               <q-btn
                 v-if="checkPermission($route)?.attrIsCreate"
                 @click="$router.push(`/discipline/director/add`)"
@@ -176,23 +141,26 @@ onMounted(() => {
                 <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
               </q-btn>
             </div>
+          </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-7">
                 <q-input
-        class="col-xs-12 col-sm-3 col-md-2"
                   standout
                   dense
                   v-model="filterKeyword"
                   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
@@ -204,14 +172,15 @@ onMounted(() => {
                   map-options
                   :options="dataStore.columns"
                   option-value="name"
-        
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
                 />
               </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <div class="col-12">
-      <d-table
+        <p-table
           :columns="dataStore.columns"
           :rows="dataStore.rows"
           row-key="tb-list"
@@ -220,23 +189,10 @@ onMounted(() => {
           :paging="true"
           dense
           :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
           :visible-columns="dataStore.visibleColumns"
+          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 />
@@ -287,11 +243,7 @@ onMounted(() => {
               </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="
@@ -335,7 +287,8 @@ onMounted(() => {
               </q-td>
             </q-tr>
           </template>
-      </d-table>
+        </p-table>
+      </div>
     </div>
   </q-card>
 

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

@@ -14,7 +14,7 @@ export const useDisciplineDirectorDataStore = defineStore(
     const rows = ref<DirectorRowsResponse[]>([]);
     const visibleColumns = ref<string[]>([
       "no",
-      "fullName",
+      "firstName",
       "position",
       "email",
       "phone",
@@ -34,7 +34,7 @@ export const useDisciplineDirectorDataStore = defineStore(
         style: "font-size: 14px",
       },
       {
-        name: "fullName",
+        name: "firstName",
         align: "left",
         label: "ชื่อ-นามสกุล",
         sortable: true,