From 6b27779746267d3cf5724ec12238c5bd956f89e5 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 29 Feb 2024 12:34:17 +0100
Subject: [PATCH] Add pagination to linked task modal [SCI-10301]

---
 app/controllers/protocols_controller.rb       | 25 +++++++++++-------
 .../protocols/modals/linked_my_modules.vue    | 26 ++++++++++++++++---
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/app/controllers/protocols_controller.rb b/app/controllers/protocols_controller.rb
index 50324bf99..d2c1b7889 100644
--- a/app/controllers/protocols_controller.rb
+++ b/app/controllers/protocols_controller.rb
@@ -129,17 +129,22 @@ class ProtocolsController < ApplicationController
       records = records.where(parent_id: @protocol.published_versions)
                        .or(records.where(parent_id: @protocol.id))
     end
-    records.preload(my_module: { experiment: :project }).distinct
+    records = records.preload(my_module: { experiment: :project })
+                     .distinct.order(updated_at: :desc).page(params[:page]).per(10)
 
-    render json: records.map { |record|
-      {
-        my_module_name: record.my_module.name,
-        experiment_name: record.my_module.experiment.name,
-        project_name: record.my_module.experiment.project.name,
-        my_module_url: protocols_my_module_path(record.my_module),
-        experiment_url: my_modules_path(experiment_id: record.my_module.experiment.id),
-        project_url: experiments_path(project_id: record.my_module.experiment.project.id)
-      }
+    render json: {
+      data: records.map { |record|
+        {
+          my_module_name: record.my_module.name,
+          experiment_name: record.my_module.experiment.name,
+          project_name: record.my_module.experiment.project.name,
+          my_module_url: protocols_my_module_path(record.my_module),
+          experiment_url: my_modules_path(experiment_id: record.my_module.experiment.id),
+          project_url: experiments_path(project_id: record.my_module.experiment.project.id)
+        }
+      },
+      next_page: records.next_page,
+      total_pages: records.total_pages
     }
   end
 
diff --git a/app/javascript/vue/protocols/modals/linked_my_modules.vue b/app/javascript/vue/protocols/modals/linked_my_modules.vue
index 1a07a4628..38f272ca8 100644
--- a/app/javascript/vue/protocols/modals/linked_my_modules.vue
+++ b/app/javascript/vue/protocols/modals/linked_my_modules.vue
@@ -35,6 +35,14 @@
               </a>
             </div>
           </div>
+          <div class="flex mt-4">
+            <Pagination
+              v-if="totalPage"
+              :totalPage="totalPage"
+              :currentPage="page"
+              @setPage="setPage"
+            ></Pagination>
+          </div>
         </div>
         <div class="modal-footer items-center">
           {{ i18n.t("protocols.index.linked_children.show_version") }}
@@ -57,6 +65,7 @@
 import SelectDropdown from '../../shared/select_dropdown.vue';
 import axios from '../../../packs/custom_axios.js';
 import modalMixin from '../../shared/modal_mixin';
+import Pagination from '../../shared/datatable/pagination.vue';
 
 export default {
   name: 'NewProtocolModal',
@@ -65,13 +74,16 @@ export default {
   },
   mixins: [modalMixin],
   components: {
-    SelectDropdown
+    SelectDropdown,
+    Pagination
   },
   data() {
     return {
       linkedMyModules: [],
       versionsList: [],
-      selectedVersion: 'All'
+      selectedVersion: 'All',
+      page: 1,
+      totalPage: null
     };
   },
   mounted() {
@@ -80,13 +92,14 @@ export default {
   },
   methods: {
     loadLinkedMyModules() {
-      const urlParams = {};
+      const urlParams = { page: this.page };
       if (this.selectedVersion !== 'All') {
         urlParams.version = this.selectedVersion;
       }
       axios.get(this.protocol.urls.linked_my_modules, { params: urlParams })
         .then((response) => {
-          this.linkedMyModules = response.data;
+          this.linkedMyModules = response.data.data;
+          this.totalPage = response.data.total_pages;
         });
     },
     loadVersions() {
@@ -97,6 +110,11 @@ export default {
     },
     changeSelectedVersion(version) {
       this.selectedVersion = version;
+      this.page = 1;
+      this.loadLinkedMyModules();
+    },
+    setPage(page) {
+      this.page = page;
       this.loadLinkedMyModules();
     }
   }