scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-26 01:35:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add pagination to linked task modal [SCI-10301]

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/controllers/protocols_controller.rb
View file

@ -129,9 +129,11 @@ class ProtocolsController < ApplicationController
records = records.where(parent_id: @protocol.published_versions) records = records.where(parent_id: @protocol.published_versions)
.or(records.where(parent_id: @protocol.id)) .or(records.where(parent_id: @protocol.id))
end 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, my_module_name: record.my_module.name,
experiment_name: record.my_module.experiment.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), experiment_url: my_modules_path(experiment_id: record.my_module.experiment.id),
project_url: experiments_path(project_id: record.my_module.experiment.project.id) project_url: experiments_path(project_id: record.my_module.experiment.project.id)
} }
},
next_page: records.next_page,
total_pages: records.total_pages
} }
end end

26
app/javascript/vue/protocols/modals/linked_my_modules.vue
View file

@ -35,6 +35,14 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex mt-4">
<Pagination
v-if="totalPage"
:totalPage="totalPage"
:currentPage="page"
@setPage="setPage"
></Pagination>
</div>
</div> </div>
<div class="modal-footer items-center"> <div class="modal-footer items-center">
{{ i18n.t("protocols.index.linked_children.show_version") }} {{ i18n.t("protocols.index.linked_children.show_version") }}
@ -57,6 +65,7 @@
import SelectDropdown from '../../shared/select_dropdown.vue'; import SelectDropdown from '../../shared/select_dropdown.vue';
import axios from '../../../packs/custom_axios.js'; import axios from '../../../packs/custom_axios.js';
import modalMixin from '../../shared/modal_mixin'; import modalMixin from '../../shared/modal_mixin';
import Pagination from '../../shared/datatable/pagination.vue';
export default { export default {
name: 'NewProtocolModal', name: 'NewProtocolModal',
@ -65,13 +74,16 @@ export default {
}, },
mixins: [modalMixin], mixins: [modalMixin],
components: { components: {
SelectDropdown SelectDropdown,
Pagination
}, },
data() { data() {
return { return {
linkedMyModules: [], linkedMyModules: [],
versionsList: [], versionsList: [],
selectedVersion: 'All' selectedVersion: 'All',
page: 1,
totalPage: null
}; };
}, },
mounted() { mounted() {
@ -80,13 +92,14 @@ export default {
}, },
methods: { methods: {
loadLinkedMyModules() { loadLinkedMyModules() {
const urlParams = {}; const urlParams = { page: this.page };
if (this.selectedVersion !== 'All') { if (this.selectedVersion !== 'All') {
urlParams.version = this.selectedVersion; urlParams.version = this.selectedVersion;
} }
axios.get(this.protocol.urls.linked_my_modules, { params: urlParams }) axios.get(this.protocol.urls.linked_my_modules, { params: urlParams })
.then((response) => { .then((response) => {
this.linkedMyModules = response.data; this.linkedMyModules = response.data.data;
this.totalPage = response.data.total_pages;
}); });
}, },
loadVersions() { loadVersions() {
@ -97,6 +110,11 @@ export default {
}, },
changeSelectedVersion(version) { changeSelectedVersion(version) {
this.selectedVersion = version; this.selectedVersion = version;
this.page = 1;
this.loadLinkedMyModules();
},
setPage(page) {
this.page = page;
this.loadLinkedMyModules(); this.loadLinkedMyModules();
} }
} }