Add pagination to linked task modal [SCI-10301]

This commit is contained in:
Anton 2024-02-29 12:34:17 +01:00
parent d55ad14888
commit 6b27779746
2 changed files with 37 additions and 14 deletions

View file

@ -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

View file

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