mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-04-02 18:31:30 +08:00
Implemented pagination for experiment table [SCI-7214] (#4591)
* Implement pagination for experiment table [SCI-7214] * Fix table experiment pagination [SCI-7214] * Move pagination to service [SCI-7214]
This commit is contained in:
ajugo
GitHub
parent
def8b6b0bc
commit
dd22d53bda
5 changed files with 190 additions and 24 deletions
app
assets
controllers
services/experiments
views/experiments
|
|
@ -1,31 +1,56 @@
|
|||
/* global I18n */
|
||||
/* global I18n GLOBAL_CONSTANTS InfiniteScroll */
|
||||
|
||||
const ExperimnetTable = {
|
||||
selectedId: [],
|
||||
table: '.experiment-table',
|
||||
render: {},
|
||||
init: function() {
|
||||
$.get($('.experiment-table').data('my-modules-url'), (result) => {
|
||||
$.each(result, (id, data) => {
|
||||
// Checkbox selector
|
||||
let row = `
|
||||
pageSize: GLOBAL_CONSTANTS.DEFAULT_ELEMENTS_PER_PAGE,
|
||||
loadPlaceholder: function() {
|
||||
let placeholder = '';
|
||||
$.each(Array(this.pageSize), function() {
|
||||
placeholder += $('#experimentTablePlaceholder').html();
|
||||
});
|
||||
$(placeholder).insertAfter($(this.table).find('.table-body'));
|
||||
},
|
||||
appendRows: function(result) {
|
||||
$.each(result, (id, data) => {
|
||||
// Checkbox selector
|
||||
let row = `
|
||||
<div class="table-body-cell">
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox">
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</div>
|
||||
</div>`;
|
||||
// Task columns
|
||||
$.each(data, (_i, cell) => {
|
||||
row += `
|
||||
<div class="table-body-cell">
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox">
|
||||
<span class="sci-checkbox-label"></span>
|
||||
${ExperimnetTable.render[cell.column_type](cell.data)}
|
||||
</div>
|
||||
</div>`;
|
||||
// Task columns
|
||||
$.each(data, (_i, cell) => {
|
||||
row += `
|
||||
<div class="table-body-cell">
|
||||
${ExperimnetTable.render[cell.column_type](cell.data)}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
// Menu
|
||||
row += '<div class="table-body-cell"></div>';
|
||||
$(`<div class="table-row">${row}</div>`).appendTo(`${this.table} .table-body`);
|
||||
`;
|
||||
});
|
||||
// Menu
|
||||
row += '<div class="table-body-cell"></div>';
|
||||
$(`<div class="table-row">${row}</div>`).appendTo(`${this.table} .table-body`);
|
||||
});
|
||||
},
|
||||
init: function() {
|
||||
var dataUrl = $(this.table).data('my-modules-url');
|
||||
this.loadPlaceholder();
|
||||
$.get(dataUrl, (result) => {
|
||||
$(this.table).find('.table-row').remove();
|
||||
this.appendRows(result.data);
|
||||
InfiniteScroll.init(this.table, {
|
||||
url: dataUrl,
|
||||
eventTarget: window,
|
||||
placeholderTemplate: '#experimentTablePlaceholder',
|
||||
endOfListTemplate: '#experimentTableEndOfList',
|
||||
pageSize: this.pageSize,
|
||||
lastPage: !result.next_page,
|
||||
customResponse: (response) => {
|
||||
this.appendRows(response.data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,6 +114,118 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-row-placeholder {
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: $border-radius-default;
|
||||
box-shadow: $flyout-shadow;
|
||||
display: contents;
|
||||
|
||||
.placeholder-cell {
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeholder-pulsing;
|
||||
background-color: $color-alto;
|
||||
border-radius: $border-radius-default;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
|
||||
&.line-0 {
|
||||
display: block;
|
||||
grid-column: 2;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-1 {
|
||||
display: block;
|
||||
grid-column: 3;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-2 {
|
||||
display: block;
|
||||
grid-column: 4;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-3 {
|
||||
display: block;
|
||||
grid-column: 5;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-4 {
|
||||
display: block;
|
||||
grid-column: 6;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-5 {
|
||||
display: block;
|
||||
grid-column: 7;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-6 {
|
||||
display: block;
|
||||
grid-column: 9;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.line-7 {
|
||||
display: block;
|
||||
grid-column: 10;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&.circle-0 {
|
||||
border-radius: 100%;
|
||||
display: block;
|
||||
grid-column: 8;
|
||||
height: 24px;
|
||||
margin-left: 8px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes placeholder-pulsing {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.last-page {
|
||||
padding-bottom: 5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.experiment-table-list-end-placeholder {
|
||||
align-items: center;
|
||||
background-color: $color-concrete;
|
||||
bottom: 1em;
|
||||
display: flex;
|
||||
height: 3em;
|
||||
left: calc(50% - 150px);
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unseen-comments {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ class ExperimentsController < ApplicationController
|
|||
|
||||
def load_table
|
||||
active_modules = @experiment.my_modules.active
|
||||
render json: Experiments::TableViewService.new(active_modules, current_user).call
|
||||
render json: Experiments::TableViewService.new(active_modules, current_user, params[:page]).call
|
||||
end
|
||||
|
||||
def edit
|
||||
|
|
|
|||
|
|
@ -37,7 +37,11 @@ module Experiments
|
|||
|
||||
def call
|
||||
result = {}
|
||||
@my_modules.includes(PRELOAD).each do |my_module|
|
||||
|
||||
my_module_list = @my_modules.includes(PRELOAD)
|
||||
.page(@page || 1)
|
||||
.per(Constants::DEFAULT_ELEMENTS_PER_PAGE)
|
||||
my_module_list.each do |my_module|
|
||||
prepared_my_module = []
|
||||
COLUMNS.each do |col|
|
||||
column_data = {
|
||||
|
|
@ -49,7 +53,11 @@ module Experiments
|
|||
|
||||
result[my_module.id] = prepared_my_module
|
||||
end
|
||||
result
|
||||
|
||||
{
|
||||
next_page: my_module_list.next_page,
|
||||
data: result
|
||||
}
|
||||
end
|
||||
|
||||
private
|
||||
|
|
|
|||
|
|
@ -34,6 +34,27 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<template id="experimentTablePlaceholder">
|
||||
<div class="table-row-placeholder table-row">
|
||||
<div class="header"></div>
|
||||
<% 6.times do |i| %>
|
||||
<div class="placeholder-cell line-<%= i %>"></div>
|
||||
<% end %>
|
||||
<div class="placeholder-cell circle-0"></div>
|
||||
<% 2.times do |i| %>
|
||||
<div class="placeholder-cell line-<%= 6 + i %>"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="experimentTableEndOfList">
|
||||
<div class="experiment-table-list-end-placeholder">
|
||||
<i class="fas fa-flag-checkered"></i>
|
||||
<span><%= t('projects.index.end_of_list_placeholder') %></span>
|
||||
<i class="fas fa-flag-checkered"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
|
||||
|
||||
<%= javascript_include_tag("my_modules/tags") %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue