Merge pull request #790 from Badsender-com/fix-pagination-for-user-de…

…tails fix pagination for user details
Badsender-com · May 14, 2024 · a2feec4 · a2feec4
2 parents 8e43675 + 142fa23
commit a2feec4
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/packages/server/user/user.controller.js b/packages/server/user/user.controller.js
@@ -149,7 +149,9 @@ async function read(req, res) {
 async function readMailings(req, res) {
   const { userId } = req.params;
   const { page = 1, limit = 10 } = req.query;
-  const offset = (page - 1) * limit;
+  const parsedPage = parseInt(page, 10);
+  const parsedLimit = parseInt(limit, 10);
+  const offset = (parsedPage - 1) * parsedLimit;
 
   const user = await Users.findById(userId).select('_id');
   if (!user) {
@@ -158,15 +160,18 @@ async function readMailings(req, res) {
 
   // Retrieve mailings and their total count
   const [mailings, totalItems] = await Promise.all([
-    Mailings.find({ _user: userId }).skip(offset).limit(limit),
+    Mailings.find({ _user: userId })
+      .select('-previewHtml -data')
+      .skip(offset)
+      .limit(parsedLimit),
     Mailings.countDocuments({ _user: userId }), // Count all mailings for this user
   ]);
 
   res.json({
     items: mailings,
     totalItems,
-    currentPage: page,
-    totalPages: Math.ceil(totalItems / limit), // Calculate the total number of pages
+    currentPage: parsedPage,
+    totalPages: Math.ceil(totalItems / parsedLimit), // Calculate the total number of pages
   });
 }
 

diff --git a/packages/ui/routes/users/_userId.vue b/packages/ui/routes/users/_userId.vue
@@ -32,6 +32,14 @@ export default {
       mailings: [],
       loading: false,
       isLoadingMailings: false,
+      pagination: {
+        page: 1,
+        itemsPerPage: 10,
+        itemsLength: 0,
+        pageCount: 0,
+        pageStart: 0,
+        pageStop: 0,
+      },
     };
   },
   head() {
@@ -42,6 +50,10 @@ export default {
       return `${this.$tc('global.user', 1)} – ${this.user.name}`;
     },
   },
+  watch: {
+    'pagination.page': 'loadMailings',
+    'pagination.itemsPerPage': 'loadMailings',
+  },
   mounted() {
     this.loadMailings();
   },
@@ -54,17 +66,32 @@ export default {
           $axios,
           $route: { params },
         } = this;
-
-        const mailingsResponse = await $axios.$get(
-          apiRoutes.usersItemMailings(params)
+        const response = await $axios.$get(
+          apiRoutes.usersItemMailings(params),
+          {
+            params: {
+              page: this.pagination.page,
+              limit: this.pagination.itemsPerPage,
+            },
+          }
         );
-        this.mailings = mailingsResponse.items;
+        this.mailings = response.items;
+        this.pagination.itemsLength = response.totalItems;
+        this.pagination.pageCount = response.totalPages;
+        this.pagination.pageStart =
+          (this.pagination.page - 1) * this.pagination.itemsPerPage;
+        this.pagination.pageStop =
+          this.pagination.pageStart + this.mailings.length;
       } catch (error) {
-        console.error(error);
+        console.error('Error fetching mailings for user:', error);
       } finally {
         this.isLoadingMailings = false;
       }
     },
+    handleItemsPerPageChange(itemsPerPage) {
+      this.pagination.page = 1;
+      this.pagination.itemsPerPage = itemsPerPage;
+    },
     async updateUser() {
       this.loading = true;
       try {
@@ -133,9 +160,31 @@ export default {
       <v-card-text>
         <bs-mailings-admin-table
           :mailings="mailings"
-          :hidden-cols="[`userName`]"
           :loading="isLoadingMailings"
+          :options="pagination || {}"
+          :hidden-cols="[`userName`]"
+          :footer-props="{
+            pagination,
+            disablePagination: true,
+            prevIcon: 'none',
+            nextIcon: 'none',
+            itemsPerPageOptions: [5, 10, 15, -1],
+          }"
+          @update:items-per-page="handleItemsPerPageChange"
         />
+        <v-card
+          flat
+          class="d-flex align-center justify-center mx-auto"
+          max-width="22rem"
+        >
+          <v-pagination
+            v-if="pagination && pagination.itemsLength > 0"
+            v-model="pagination.page"
+            :circle="true"
+            class="my-4 pagination-custom-style"
+            :length="pagination.pageCount"
+          />
+        </v-card>
       </v-card-text>
     </v-card>
     <bs-user-actions