Add pagination to linked task modal [SCI-10301]

app/controllers/protocols_controller.rb

@@ -129,9 +129,11 @@ 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|
+    render json: {
+      data: records.map { |record|
         {
           my_module_name: record.my_module.name,
           experiment_name: record.my_module.experiment.name,
@@ -140,6 +142,9 @@ class ProtocolsController < ApplicationController
           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
 

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();
     }
   }