mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-27 01:05:21 +08:00
Add report wizard step 2 [SCI-5572]
This commit is contained in:
aignatov-bio
parent
304d0b4303
commit
e6edbf55f3
6 changed files with 316 additions and 38 deletions
|
|
@ -988,6 +988,88 @@ function reportHandsonTableConverter() {
|
|||
$('.back-button').on('click', function() {
|
||||
previousStep();
|
||||
});
|
||||
|
||||
$('.reports-new-body [href="#new-report-step-2"]').on('show.bs.tab', function() {
|
||||
var projectId = dropdownSelector.getValues('#projectSelector');
|
||||
var containerStep2 = $('#new-report-step-2');
|
||||
animateSpinner('.reports-new-body');
|
||||
$.get(containerStep2.data('project-content-url'), { project_id: projectId }, function(data) {
|
||||
animateSpinner('.reports-new-body', false);
|
||||
containerStep2.html(data.html);
|
||||
$('.experiment-contents').sortable();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initProjectContents() {
|
||||
function hideUnchekedElements(hide) {
|
||||
$('.report-experiment-checkbox,.report-my-module-checkbox')
|
||||
.closest('li').css('display', '');
|
||||
if (hide) {
|
||||
$(`.report-experiment-checkbox:not(:checked):not(:indeterminate),
|
||||
.report-my-module-checkbox:not(:checked):not(:indeterminate)`)
|
||||
.closest('li').css('display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
function selectAllState() {
|
||||
var selectAll = $('.select-all-my-modules-checkbox');
|
||||
var all = $('.report-my-module-checkbox').length;
|
||||
var checked = $('.report-my-module-checkbox:checked').length;
|
||||
selectAll.prop('indeterminate', false);
|
||||
if (all === checked) {
|
||||
selectAll.prop('checked', true);
|
||||
} else {
|
||||
selectAll.prop('checked', false);
|
||||
if (checked > 0) selectAll.prop('indeterminate', true);
|
||||
}
|
||||
}
|
||||
|
||||
$('.reports-new').on('change', '.report-experiment-checkbox', function() {
|
||||
$(this).closest('li').find('.report-my-module-checkbox').prop('checked', this.checked)
|
||||
selectAllState();
|
||||
hideUnchekedElements($('.hide-unchecked-checkbox').prop('checked'));
|
||||
})
|
||||
.on('change', '.select-all-my-modules-checkbox', function() {
|
||||
$('.report-experiment-checkbox, .report-my-module-checkbox')
|
||||
.prop('checked', this.checked)
|
||||
.prop('indeterminate', false);
|
||||
hideUnchekedElements($('.hide-unchecked-checkbox').prop('checked'));
|
||||
})
|
||||
.on('change', '.report-my-module-checkbox', function() {
|
||||
var experimentElement = $(this).closest('.experiment-element');
|
||||
var experiment = experimentElement.find('.report-experiment-checkbox');
|
||||
var all = experimentElement.find('.report-my-module-checkbox').length;
|
||||
var checked = experimentElement.find('.report-my-module-checkbox:checked').length;
|
||||
|
||||
experiment.prop('indeterminate', false);
|
||||
if (all === checked) {
|
||||
experiment.prop('checked', true);
|
||||
} else {
|
||||
experiment.prop('checked', false);
|
||||
if (checked > 0) experiment.prop('indeterminate', true);
|
||||
}
|
||||
|
||||
selectAllState();
|
||||
hideUnchekedElements($('.hide-unchecked-checkbox').prop('checked'));
|
||||
})
|
||||
.on('click', '.experiment-element .move-up', function() {
|
||||
var experiment = $(this).closest('.experiment-element');
|
||||
experiment.insertBefore(experiment.prev());
|
||||
})
|
||||
.on('click', '.experiment-element .move-down', function() {
|
||||
var experiment = $(this).closest('.experiment-element');
|
||||
experiment.insertAfter(experiment.next());
|
||||
})
|
||||
.on('change', '.hide-unchecked-checkbox', function() {
|
||||
hideUnchekedElements(this.checked);
|
||||
})
|
||||
.on('click', '.collapse-all', function() {
|
||||
$('.experiment-contents').collapse('hide');
|
||||
})
|
||||
.on('click', '.expand-all', function() {
|
||||
$('.experiment-contents').collapse('show');
|
||||
});
|
||||
}
|
||||
|
||||
function initDropdowns() {
|
||||
|
|
@ -1042,4 +1124,5 @@ function reportHandsonTableConverter() {
|
|||
initReportWizard();
|
||||
initDropdowns();
|
||||
initTaskContents();
|
||||
initProjectContents();
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -261,6 +261,160 @@
|
|||
}
|
||||
}
|
||||
|
||||
.task-contents-container {
|
||||
background: $color-white;
|
||||
box-shadow: $modal-shadow;
|
||||
margin: 2em 20%;
|
||||
padding: 1em 2em;
|
||||
width: 60%;
|
||||
|
||||
.divider {
|
||||
background: $color-alto;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.experiment-element {
|
||||
.experiment-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.content-element-title {
|
||||
@include font-h1;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.all-results-container {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
|
||||
.results-order-contaner {
|
||||
margin-top: .5em;
|
||||
|
||||
.move-down {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-contents-container {
|
||||
background: $color-white;
|
||||
box-shadow: $modal-shadow;
|
||||
margin: 2em 20%;
|
||||
padding: 1em 2em;
|
||||
width: 60%;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: .5em 0 1em;
|
||||
|
||||
.title {
|
||||
@include font-h1;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.select-all-my-modules {
|
||||
@include font-h2;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.hide-unchecked {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: $color-alto;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.experiment-element {
|
||||
.experiment-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.experiment-name {
|
||||
@include font-h1;
|
||||
}
|
||||
|
||||
.experiment-contents {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.fa-caret-down {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.move-buttons {
|
||||
margin-left: auto;
|
||||
|
||||
.btn {
|
||||
@include font-h2;
|
||||
}
|
||||
|
||||
.move-down {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-my-module {
|
||||
@include font-h2;
|
||||
align-items: center;
|
||||
background: $color-white;
|
||||
border-bottom: $border-default;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 1em 0;
|
||||
|
||||
&.ui-sortable-helper {
|
||||
box-shadow: $flyout-shadow;
|
||||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
margin-right: .4em;
|
||||
}
|
||||
|
||||
.fa-grip-vertical {
|
||||
color: $color-silver-chalice;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-element:first-child {
|
||||
.move-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.experiment-element:last-child {
|
||||
.move-down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-contents-container {
|
||||
background: $color-white;
|
||||
box-shadow: $modal-shadow;
|
||||
|
|
|
|||
|
|
@ -11,12 +11,11 @@ class ReportsController < ApplicationController
|
|||
update
|
||||
generate
|
||||
save_modal
|
||||
project_contents_modal
|
||||
project_contents
|
||||
experiment_contents_modal
|
||||
module_contents_modal
|
||||
step_contents_modal
|
||||
result_contents_modal
|
||||
project_contents
|
||||
experiment_contents
|
||||
module_contents
|
||||
step_contents
|
||||
|
|
@ -250,20 +249,6 @@ class ReportsController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
# Modal for adding contents into project element
|
||||
def project_contents_modal
|
||||
respond_to do |format|
|
||||
format.json do
|
||||
render json: {
|
||||
html: render_to_string(
|
||||
partial: 'reports/new/modal/project_contents.html.erb',
|
||||
locals: { project: @project }
|
||||
)
|
||||
}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
# Experiment for adding contents into experiment element
|
||||
def experiment_contents_modal
|
||||
experiment = @project.experiments.find_by_id(params[:experiment_id])
|
||||
|
|
@ -356,20 +341,12 @@ class ReportsController < ApplicationController
|
|||
end
|
||||
|
||||
def project_contents
|
||||
respond_to do |format|
|
||||
elements = generate_project_contents_json
|
||||
|
||||
if elements_empty? elements
|
||||
format.json { render json: {}, status: :no_content }
|
||||
else
|
||||
format.json do
|
||||
render json: {
|
||||
status: :ok,
|
||||
elements: elements
|
||||
}
|
||||
end
|
||||
end
|
||||
end
|
||||
render json: {
|
||||
html: render_to_string(
|
||||
partial: 'reports/wizard/second_step.html.erb',
|
||||
locals: { project: @project }
|
||||
)
|
||||
}
|
||||
end
|
||||
|
||||
def experiment_contents
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div role="tabpanel" class="tab-pane active" id="new-report-step-1">
|
||||
<%= render partial: 'reports/wizard/first_step' %>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="new-report-step-2">
|
||||
<div role="tabpanel" class="tab-pane" id="new-report-step-2" data-project-content-url="<%= project_contents_reports_path %>">
|
||||
Step 2
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="new-report-step-3">
|
||||
|
|
|
|||
68
app/views/reports/wizard/_second_step.html.erb
Normal file
68
app/views/reports/wizard/_second_step.html.erb
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<div class="project-contents-container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
Select and reorder experiments and tasks
|
||||
</div>
|
||||
<div class="collapse-buttons sci-btn-group">
|
||||
<button class="btn btn-light collapse-all">
|
||||
<i class="fas fa-caret-up"></i>
|
||||
Collapse all
|
||||
</button>
|
||||
<button class="btn btn-light expand-all">
|
||||
<i class="fas fa-caret-down"></i>
|
||||
Expand all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide-unchecked">
|
||||
<span class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox hide-unchecked-checkbox" />
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
Hide unchecked
|
||||
</div>
|
||||
<div class="select-all-my-modules">
|
||||
<span class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox select-all-my-modules-checkbox" checked/>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
Select all tasks
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<ul>
|
||||
<% project.experiments.includes(:my_modules).active.each do |experiment| %>
|
||||
<li class="experiment-element">
|
||||
<div class="experiment-block">
|
||||
<span class="sci-checkbox-container">
|
||||
<input type="checkbox" value="<%= experiment.id %>" class="sci-checkbox report-experiment-checkbox" checked/>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
<i class="fas fa-caret-down " data-toggle="collapse" href="#experimentContentContainer<%= experiment.id %>" aria-expanded="false"></i>
|
||||
<span class="experiment-name">
|
||||
<%= experiment.name %>
|
||||
</span>
|
||||
<div class="move-buttons sci-btn-group">
|
||||
<button class="btn btn-light icon-btn move-up">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
<button class="btn btn-light icon-btn move-down">
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="experiment-contents collapse in" id="experimentContentContainer<%= experiment.id %>">
|
||||
<% experiment.my_modules.active.each do |my_module| %>
|
||||
<li class="experiment-my-module">
|
||||
<span class="sci-checkbox-container">
|
||||
<input type="checkbox" value="<%= my_module.id %>" class="sci-checkbox report-my-module-checkbox" checked/>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
<%= my_module.name %>
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -194,11 +194,13 @@ Rails.application.routes.draw do
|
|||
via: [:get, :post, :put, :patch]
|
||||
end
|
||||
|
||||
|
||||
resources :reports, only: [:index, :new] do
|
||||
member do
|
||||
get :document_preview
|
||||
end
|
||||
collection do
|
||||
get :project_contents
|
||||
end
|
||||
end
|
||||
get 'reports/datatable', to: 'reports#datatable'
|
||||
get 'reports/new_template_values', to: 'reports#new_template_values', defaults: { format: 'json' }
|
||||
|
|
@ -251,12 +253,6 @@ Rails.application.routes.draw do
|
|||
# The posts following here should in theory be gets,
|
||||
# but are posts because of parameters payload
|
||||
post 'generate', to: 'reports#generate', format: %w(docx pdf)
|
||||
get 'new/project_contents_modal',
|
||||
to: 'reports#project_contents_modal',
|
||||
as: :project_contents_modal
|
||||
post 'new/project_contents',
|
||||
to: 'reports#project_contents',
|
||||
as: :project_contents
|
||||
get 'new/experiment_contents_modal',
|
||||
to: 'reports#experiment_contents_modal',
|
||||
as: :experiment_contents_modal
|
||||
|
|
|
|||
Loading…
Reference in a new issue