paging

src/modules/04_registry/views/Main.vue

@@ -83,6 +83,11 @@
             :doSearch="doSearch"
             :onExport="onExport"
             :onTab="changeTab"
+            :rowsPerPage="rowsPerPage"
+            :page="page"
+            :maxPage="maxPage"
+            @update:pagination="updatePagingProp"
+            :rows-per-page-options="[20, 50, 100, 200]"
           >
             <template #columns="props">
               <q-tr
@@ -92,7 +97,7 @@
               >
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'" class="table_ellipsis">
-                    {{ props.rowIndex + 1 }}
+                    {{ (page - 1) * Number(rowsPerPage) + props.rowIndex + 1 }}
                   </div>
                   <div v-else-if="col.name == 'isVerified'">
                     <q-icon
@@ -168,6 +173,10 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
 
+const maxPage = ref<number>(1);
+const rowsPerPage = ref<number>(20);
+const page = ref<number>(1);
+
 const mixin = useCounterMixin();
 const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
 const router = useRouter();
@@ -1204,6 +1213,8 @@ const changeTab = () => {
 };
 
 const onSelected = async (id: string) => {
+  rowsPerPage.value = 20;
+  page.value = 1;
   await clickTree();
   await doSearch();
 };
@@ -1355,12 +1366,15 @@ const doSearch = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
-      criterias: cirteria,
-    })
+    .post(
+      config.API.listProfileNew(selected.value, page.value, rowsPerPage.value),
+      {
+        criterias: cirteria,
+      }
+    )
     .then((res) => {
-      let data = res.data.result;
-
+      let data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.totalRows / rowsPerPage.value);
       rows.value = [];
       data.map((e: ResponseObject) => {
         rows.value.push({
@@ -1451,6 +1465,12 @@ const onExport = () => {
 const next = (id: string) => {
   router.push(`/registry/${id}`);
 };
+
+function updatePagingProp(rowPerpage: number, pageCurrent: number) {
+  rowsPerPage.value = rowPerpage;
+  page.value = pageCurrent;
+  doSearch();
+}
 </script>
 
 <style lang="scss" scope>