sort

src/modules/01_metadata/components/personal/01_Prefix.vue

@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const TABLE_COLUMNS = [
   {
     name: "prefix",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "prefix",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -230,10 +231,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -276,7 +277,7 @@ onMounted(async () => {
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
-          {{ col.value }}
+          {{ col.value ?? "-" }}
         </q-td>
       </q-tr>
     </template>

src/modules/01_metadata/components/personal/02_Rank.vue

@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "rank",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "rank",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/03_Gender.vue

@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "gender",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "gender",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/04_Relationship.vue

@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "relationship",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "relationship",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +228,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/05_BloodGroup.vue

@@ -16,9 +16,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "bloodGroup",
@@ -71,6 +69,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "bloodGroup",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -226,10 +227,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/06_Religion.vue

@@ -71,6 +71,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "religion",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -227,10 +230,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/07_Province.vue

@@ -18,9 +18,7 @@ const store = usePersonalDataStore();
 const { messageError, showLoader, hideLoader, success, dialogRemove } =
   useCounterMixin();
 
-/**
+/** Teble*/
- * Teble
- */
 const columns = [
   {
     name: "name",
@@ -73,6 +71,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const filterKeyword = ref<string>(""); // คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -242,6 +243,7 @@ onMounted(async () => {
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/08_EducationLevel.vue

@@ -80,6 +80,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const filterKeyword = ref<string>(""); //คำค้นหา
 const dialog = ref<boolean>(false); // เพิ่มข้อมูล,แก้ไขข้อมูล
@@ -241,10 +244,10 @@ onMounted(async () => {
     row-key="name"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">

src/modules/01_metadata/components/personal/province/01_District.vue

@@ -25,9 +25,7 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "name",
@@ -80,6 +78,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const id = ref<string>(route.params.id as string); // id จังหวัด
 const filterKeyword = ref<string>(""); //คำค้นหา
@@ -288,10 +289,10 @@ onMounted(async () => {
         row-key="name"
         flat
         bordered
-        :paging="true"
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">

src/modules/01_metadata/components/personal/province/02_SubDistrict.vue

@@ -25,9 +25,7 @@ const {
   dialogRemove,
 } = useCounterMixin();
 
-/**
+/** Table*/
- * Table
- */
 const columns = [
   {
     name: "name",
@@ -92,6 +90,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "lastUpdateFullName",
 ]);
+const pagination = ref({
+  sortBy: "name",
+});
 
 const id = ref<string>(route.params.id as string); // เขต/อำเภอ
 const rows = ref<FormSubDistrict[]>([]); // ข้อมูลรายการแขวง/ตำบล
@@ -298,6 +299,7 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">

src/modules/01_metadata/components/position/02_Type.vue

@@ -48,7 +48,9 @@ const columns = [
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",

src/modules/01_metadata/views/05_insignia.vue

@@ -80,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.toString().localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>([

src/modules/02_users/views/01_user.vue

@@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: (row) =>
       (currentPage.value - 1) * pageSize.value + rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
@@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "username",
     align: "left",
     label: "ชื่อผู้ใช้งาน",
-    sortable: true,
+    sortable: false,
     field: "username",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -63,7 +63,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "email",
     align: "left",
     label: "อีเมล",
-    sortable: true,
+    sortable: false,
     field: "email",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -72,7 +72,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "firstname",
     align: "left",
     label: "ชื่อ",
-    sortable: true,
+    sortable: false,
     field: "firstname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -81,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastname",
     align: "left",
     label: "นามสกุล",
-    sortable: true,
+    sortable: false,
     field: "lastname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -90,7 +90,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "role",
     align: "left",
     label: "สิทธิ์",
-    sortable: true,
+    sortable: false,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     field: (row) => {
@@ -102,7 +102,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "enabled",
     align: "left",
     label: "สถานะการใช้งาน",
-    sortable: true,
+    sortable: false,
     field: "enabled",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/02_users/views/02_rolesAndPermissions.vue

@@ -36,8 +36,8 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
-    field: (row) => rows.value.indexOf(row) + 1,
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -226,7 +226,10 @@ onMounted(() => {
         <template v-slot:body="props">
           <q-tr :props="props">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>

src/modules/02_users/views/03_permissionsView.vue

@@ -170,7 +170,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -179,7 +179,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionField",
     align: "left",
     label: "สายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -188,7 +188,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -197,7 +197,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -206,7 +206,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -215,7 +215,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionExecutiveField",
     align: "left",
     label: "ด้านทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "positionExecutiveField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -224,7 +224,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionArea",
     align: "left",
     label: "ด้าน/สาขา",
-    sortable: true,
+    sortable: false,
     field: "positionArea",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/02_users/views/05_responsIbilities.vue

@@ -164,7 +164,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionName",
     align: "left",
     label: "ตำแหน่งในสายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -173,7 +173,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionField",
     align: "left",
     label: "สายงาน",
-    sortable: true,
+    sortable: false,
     field: "positionField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -182,7 +182,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posTypeName",
     align: "left",
     label: "ประเภทตำเเหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -191,7 +191,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posLevelName",
     align: "left",
     label: "ระดับตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -200,7 +200,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -209,7 +209,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionExecutiveField",
     align: "left",
     label: "ด้านทางการบริหาร",
-    sortable: true,
+    sortable: false,
     field: "positionExecutiveField",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -218,7 +218,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
     name: "positionArea",
     align: "left",
     label: "ด้าน/สาขา",
-    sortable: true,
+    sortable: false,
     field: "positionArea",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

src/modules/02_users/views/page01_ManagementRoleUser.vue

@@ -32,8 +32,8 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
-    field: (row) => rows.value.indexOf(row) + 1,
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -185,7 +185,10 @@ onMounted(async () => {
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div>
+              <div v-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>

src/modules/05_command/views/salaryLists.vue

@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "isActive",
     align: "center",
     label: "สถานะการใช้งาน",
-    sortable: false,
+    sortable: true,
     field: "isActive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",