Simplified popup modal for adding contents to report. [fixes SCI-487]

This commit is contained in:
Matej Zrimšek 2017-05-09 14:22:26 +02:00
parent 18e11fde59
commit 27cfd55ea5
10 changed files with 206 additions and 188 deletions

View file

@ -44,6 +44,15 @@
display: inline-block;
}
// Modal for adding content
label {
&[for="_module_content_all"],
&[for="_step_content_all"],
&[for="result_content_all"] {
font-weight: bold;
}
}
/* New page sidebar */
.report-sidebar-wrapper {
background-color: $color-white !important;

View file

@ -53,8 +53,8 @@
}
});
var moduleCheckAll = moduleTab.find(".module-check-all");
var moduleOthers = moduleTab.find("input:checkbox:not(.module-check-all)");
var moduleCheckAll = moduleTab.find("#_module_content_all");
var moduleOthers = moduleTab.find("input:checkbox:not(#_module_content_all)");
var moduleResultsAll = moduleTab.find(".results-all");
var moduleResults = moduleTab.find(".result-cb");
moduleCheckAll.click(function() {
@ -70,8 +70,8 @@
moduleResultsAll.prop("checked", false);
});
var stepsCheckAll = stepsTab.find(".step-check-all");
var stepsOthers = stepsTab.find("input:checkbox:not(.step-check-all)");
var stepsCheckAll = stepsTab.find("#_step_content_all");
var stepsOthers = stepsTab.find("input:checkbox:not(#_step_content_all)");
stepsCheckAll.click(function() {
stepsOthers.prop("checked", this.checked);
});

View file

@ -29,8 +29,8 @@
var moduleTab = form.find("#module-tab");
var stepsTab = form.find("#module-steps-tab");
var moduleCheckAll = moduleTab.find(".module-check-all");
var moduleOthers = moduleTab.find("input:checkbox:not(.module-check-all)");
var moduleCheckAll = moduleTab.find("#_module_content_all");
var moduleOthers = moduleTab.find("input:checkbox:not(#_module_content_all)");
var moduleResultsAll = moduleTab.find(".results-all");
var moduleResults = moduleTab.find(".result-cb");
moduleCheckAll.click(function() {
@ -46,8 +46,8 @@
moduleResultsAll.prop("checked", false);
});
var stepsCheckAll = stepsTab.find(".step-check-all");
var stepsOthers = stepsTab.find("input:checkbox:not(.step-check-all)");
var stepsCheckAll = stepsTab.find("#_step_content_all");
var stepsOthers = stepsTab.find("input:checkbox:not(#_step_content_all)");
stepsCheckAll.click(function() {
stepsOthers.prop("checked", this.checked);
});
@ -55,4 +55,4 @@
stepsCheckAll.prop("checked", false);
});
});
</script>
</script>

View file

@ -6,47 +6,50 @@
</em>
</div>
<%= form.check_box :module_all, label: t("general.check_all"), class: "module-check-all" %>
<%= form.check_box :module_content_all, label: t("projects.reports.elements.modals.module_contents_inner.check_all") %>
<div class="no-style" style="padding-left: 15px;">
<%= form.label t("projects.reports.elements.modals.module_contents_inner.header") %>
<% if my_module_undefined or my_module.protocol.steps.count > 0 %>
<%= form.check_box :module_steps, label: t("projects.reports.elements.modals.module_contents_inner.steps") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.module_contents_inner.no_steps") %>
</em>
</div>
<% end %>
<% if my_module_undefined or my_module.protocol.steps.count > 0 %>
<%= form.check_box :module_steps, label: t("projects.reports.elements.modals.module_contents_inner.steps") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.module_contents_inner.no_steps") %>
</em>
</div>
<% end %>
<% if my_module_undefined or (my_module.results.select { |r| r.active? }).count > 0 %>
<%= form.check_box :module_results, label: t("projects.reports.elements.modals.module_contents_inner.results"), class: "results-all" %>
<ul class="no-style" style="padding-left: 15px;">
<% if my_module_undefined or (my_module.results.select { |r| r.is_asset && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_assets, label: t("projects.reports.elements.modals.module_contents_inner.result_assets"), class: "result-cb" %>
</li>
<% end %>
<% if my_module_undefined or (my_module.results.select { |r| r.active? }).count > 0 %>
<%= form.check_box :module_results, label: t("projects.reports.elements.modals.module_contents_inner.results"), class: "results-all" %>
<ul class="no-style" style="padding-left: 15px;">
<% if my_module_undefined or (my_module.results.select { |r| r.is_asset && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_assets, label: t("projects.reports.elements.modals.module_contents_inner.result_assets"), class: "result-cb" %>
</li>
<% end %>
<% if my_module_undefined or (my_module.results.select { |r| r.is_table && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_tables, label: t("projects.reports.elements.modals.module_contents_inner.result_tables"), class: "result-cb" %>
</li>
<% end %>
<% if my_module_undefined or (my_module.results.select { |r| r.is_text && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_texts, label: t("projects.reports.elements.modals.module_contents_inner.result_texts"), class: "result-cb" %>
</li>
<% end %>
</ul>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.module_contents_inner.no_results") %>
</em>
</div>
<% end %>
<% if my_module_undefined or (my_module.results.select { |r| r.is_table && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_tables, label: t("projects.reports.elements.modals.module_contents_inner.result_tables"), class: "result-cb" %>
</li>
<% end %>
<%= form.check_box :module_activity, label: t("projects.reports.elements.modals.module_contents_inner.activity") %>
<% if my_module_undefined or (my_module.results.select { |r| r.is_text && r.active? }).count > 0 %>
<li>
<%= form.check_box :module_result_texts, label: t("projects.reports.elements.modals.module_contents_inner.result_texts"), class: "result-cb" %>
</li>
<% end %>
</ul>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.module_contents_inner.no_results") %>
</em>
</div>
<% end %>
<%= form.check_box :module_samples, label: t("projects.reports.elements.modals.module_contents_inner.samples") %>
<%= form.check_box :module_activity, label: t("projects.reports.elements.modals.module_contents_inner.activity") %>
<%= form.check_box :module_samples, label: t("projects.reports.elements.modals.module_contents_inner.samples") %>
</div>

View file

@ -4,28 +4,16 @@
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#project-tab" aria-controls="project-tab" role="tab" data-toggle="tab">
<a href="#tasks-tab" aria-controls="tasks-tab" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-credit-card visible-xs"></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.project_tab") %></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></span>
</a>
</li>
<% if project.project_my_modules.is_archived(false).count > 0 %>
<li role="presentation">
<a href="#project-modules-tab" aria-controls="project-modules-tab" role="tab" data-toggle="tab">
<a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-link visible-xs"></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.modules_tab") %></span>
</a>
</li>
<li role="presentation">
<a href="#module-steps-tab" aria-controls="module-steps-tab" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-random visible-xs"></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.steps_tab") %></span>
</a>
</li>
<li role="presentation">
<a href="#step-results-tab" aria-controls="step-results-tab" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-th visible-xs"></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.results_tab") %></span>
<span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
</a>
</li>
<% end %>
@ -33,21 +21,17 @@
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="project-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.project_tab") %></h5>
<div role="tabpanel" class="tab-pane active" id="tasks-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></h5>
<%= render partial: "reports/new/modal/project_contents_inner.html.erb", locals: { form: f, project: project } %>
</div>
<% if project.project_my_modules.is_archived(false).count > 0 %>
<div role="tabpanel" class="tab-pane" id="project-modules-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.modules_tab") %></h5>
<div role="tabpanel" class="tab-pane" id="content-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></h5>
<%= render partial: "reports/new/modal/module_contents_inner.html.erb", locals: { form: f } %>
</div>
<div role="tabpanel" class="tab-pane" id="module-steps-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.steps_tab") %></h5>
<hr>
<%= render partial: "reports/new/modal/step_contents_inner.html.erb", locals: { form: f } %>
</div>
<div role="tabpanel" class="tab-pane" id="step-results-tab">
<h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.results_tab") %></h5>
<hr>
<%= render partial: "reports/new/modal/result_contents_inner.html.erb", locals: { form: f } %>
</div>
<% end %>
@ -58,54 +42,64 @@
<script type="javascript">
$(function() {
var form = $("#add-contents-form");
var projectTab = form.find("#project-tab");
var modulesTab = form.find("#project-modules-tab");
var stepsTab = form.find("#module-steps-tab");
var tasksTab = form.find("#tasks-tab");
var contentTab = form.find("#content-tab");
var projectCheckAlls = projectTab.find(".project-all-cb");
var projectAll = projectTab.find("input:checkbox");
projectCheckAlls.click(function() {
var nextUl = $(this).closest("div.checkbox").next();
if (nextUl.length && nextUl.is("ul.project-contents-list, \
ul.experiment-contents-list")) {
nextUl.find("input:checkbox").prop("checked", this.checked);
}
});
projectAll.click(function() {
var parentLists = $(this).parents("ul.project-contents-list, \
ul.experiment-contents-list");
if (parentLists.length) {
var prevEl = parentLists.prev();
if (prevEl.length && prevEl.is("div.checkbox")) {
prevEl.find("input:checkbox").prop("checked", false);
}
}
});
var modulesCheckAll = contentTab.find("#_module_content_all");
var modulesOthers = contentTab.find("input:checkbox[name^='[module']:not([name$='all]'])");
var modulesResultsAll = contentTab.find(".results-all");
var modulesResults = contentTab.find(".result-cb");
checkboxTree(modulesResultsAll, modulesResults);
checkboxTree(modulesCheckAll, modulesOthers);
var modulesCheckAll = modulesTab.find(".module-check-all");
var modulesOthers = modulesTab.find("input:checkbox:not(.module-check-all)");
var modulesResultsAll = modulesTab.find(".results-all");
var modulesResults = modulesTab.find(".result-cb");
modulesCheckAll.click(function() {
modulesOthers.prop("checked", this.checked);
});
modulesOthers.click(function() {
modulesCheckAll.prop("checked", false);
});
modulesResultsAll.click(function() {
modulesResults.prop("checked", this.checked);
});
modulesResults.click(function() {
modulesResultsAll.prop("checked", false);
});
var stepsCheckAll = stepsTab.find(".step-check-all");
var stepsOthers = stepsTab.find("input:checkbox:not(.step-check-all)");
stepsCheckAll.click(function() {
stepsOthers.prop("checked", this.checked);
});
stepsOthers.click(function() {
stepsCheckAll.prop("checked", false);
});
var stepsCheckAll = contentTab.find("#_step_content_all");
var stepsOthers = contentTab.find("input:checkbox[name^='[step']:not([name$='all]'])");
checkboxTree(stepsCheckAll, stepsOthers);
});
function checkboxTree($select_all, $others) {
// Update child checkboxes based on the parent "select all" checkbox
$select_all.change(function() {
$others.prop('checked', $(this).prop("checked"));
});
$others.change(function(){
// Uncheck "select all" checkbox, if one of the listed checkbox item is unchecked
if(!$(this).prop("checked")) {
$select_all.prop('checked', false);
}
// Check "select all" checkbox if all checkboxes are checked
if ($others.filter(':checked').length == $others.length ){
$select_all.prop('checked', true);
}
});
}
function checkboxTree2() {
$(".checkbox-tree input:checkbox").change(function() {
// Update descendent checkboxes
var $checkbox = $(this);
var checkboxChecked = $checkbox.prop("checked");
var $childCheckboxes = $checkbox.closest("li").find("ul input:checkbox");
$childCheckboxes.each(function() {
$(this).prop('checked', checkboxChecked);
});
// Update ancestor checkboxes
var $checkboxesContainer;
while (!$checkboxesContainer ||
!$checkboxesContainer.hasClass("checkbox-tree")) {
var $checkboxesContainer = $checkbox.closest("ul");
var $parentCheckbox = $checkboxesContainer.siblings().find("input:checkbox");
var $checkboxes = $checkboxesContainer.find("input:checkbox");
var $checkedCheckboxes = $checkboxes.filter(':checked');
$parentCheckbox.prop('checked',
$checkboxes.length == $checkedCheckboxes.length);
$checkbox = $parentCheckbox;
}
});
}
checkboxTree2();
</script>

View file

@ -1,4 +1,3 @@
<div>
<em>
<%= t("projects.reports.elements.modals.project_contents_inner.instructions") %>
@ -6,35 +5,39 @@
</div>
<% if project.project_my_modules.is_archived(false).count > 0 %>
<%= form.check_box :project, label: project.name, class: "project-all-cb" %>
<ul class="no-style project-contents-list">
<% project.experiments.is_archived(false).each do |experiment| %>
<% next unless experiment.my_modules.is_archived(false).count > 0 %>
<li>
<%= form.check_box "experiment_#{experiment.id}", label: experiment.name, class: "project-all-cb" %>
<ul class="no-style experiment-contents-list">
<% experiment.my_module_groups.each do |my_module_group| %>
<% if my_module_group.my_modules.is_archived(false).present? then %>
<% my_module_group.ordered_modules.is_archived(false).each do |my_module| %>
<ul class="no-style checkbox-tree">
<li>
<%= form.check_box :project, label: project.name %>
<ul class="no-style project-contents-list">
<% project.experiments.is_archived(false).each do |experiment| %>
<% next unless experiment.my_modules.is_archived(false).count > 0 %>
<li>
<%= form.check_box "experiment_#{experiment.id}", label: experiment.name %>
<ul class="no-style experiment-contents-list">
<% experiment.my_module_groups.each do |my_module_group| %>
<% if my_module_group.my_modules.is_archived(false).present? then %>
<% my_module_group.ordered_modules.is_archived(false).each do |my_module| %>
<li>
<%= form.check_box "modules[#{my_module.id}]", label: my_module.name %>
</li>
<% end %>
<% end %>
<% end %>
<!-- Tasks without groups -->
<% modules_without_group = experiment.modules_without_group %>
<% if modules_without_group.present? and modules_without_group.count > 0 %>
<% modules_without_group.each do |my_module| %>
<li>
<%= form.check_box "modules[#{my_module.id}]", label: my_module.name %>
</li>
<% end %>
<% end %>
<% end %>
<!-- Tasks without groups -->
<% modules_without_group = experiment.modules_without_group %>
<% if modules_without_group.present? and modules_without_group.count > 0 %>
<% modules_without_group.each do |my_module| %>
<li>
<%= form.check_box "modules[#{my_module.id}]", label: my_module.name %>
</li>
<% end %>
<% end %>
</ul>
</li>
<% end %>
<% end %>
</ul>
</li>
<% end %>
</ul>
</li>
</ul>
<% else %>
<div>

View file

@ -4,4 +4,9 @@
</em>
</div>
<%= form.check_box :result_comments, label: t("projects.reports.elements.modals.result_contents_inner.comments") %>
<%= form.label :result_content_all, t("projects.reports.elements.modals.result_contents_inner.check_all"), class: "checkbox" %>
<div class="no-style" style="padding-left: 15px;">
<%= form.check_box :result_comments, label: t("projects.reports.elements.modals.result_contents_inner.comments") %>
</div>

View file

@ -7,8 +7,8 @@
<script type="javascript">
$(function() {
var form = $("#add-contents-form");
var checkAll = form.find(".step-check-all");
var others = form.find("input:checkbox:not(.step-check-all)");
var checkAll = form.find("#_step_content_all");
var others = form.find("input:checkbox:not(#_step_content_all)");
checkAll.click(function() {
others.prop("checked", this.checked);
});
@ -16,4 +16,4 @@
checkAll.prop("checked", false);
});
});
</script>
</script>

View file

@ -6,33 +6,39 @@
</em>
</div>
<%= form.check_box :step_all, label: t("general.check_all"), class: "step-check-all" %>
<%= form.label t("projects.reports.elements.modals.step_contents_inner.header") %>
<% if step_undefined or step.checklists.count > 0 %>
<%= form.check_box :step_checklists, label: t("projects.reports.elements.modals.step_contents_inner.checklists") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_checklists") %>
</em>
</div>
<% end %>
<% if step_undefined or step.assets.count > 0 %>
<%= form.check_box :step_assets, label: t("projects.reports.elements.modals.step_contents_inner.assets") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_assets") %>
</em>
</div>
<% end %>
<% if step_undefined or step.tables.count > 0 %>
<%= form.check_box :step_tables, label: t("projects.reports.elements.modals.step_contents_inner.tables") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_tables") %>
</em>
</div>
<% end %>
<%= form.check_box :step_comments, label: t("projects.reports.elements.modals.step_contents_inner.comments") %>
<%= form.check_box :step_content_all, label: t("projects.reports.elements.modals.step_contents_inner.check_all") %>
<div class="no-style" style="padding-left: 15px;">
<% if step_undefined or step.checklists.count > 0 %>
<%= form.check_box :step_checklists, label: t("projects.reports.elements.modals.step_contents_inner.checklists") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_checklists") %>
</em>
</div>
<% end %>
<% if step_undefined or step.assets.count > 0 %>
<%= form.check_box :step_assets, label: t("projects.reports.elements.modals.step_contents_inner.assets") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_assets") %>
</em>
</div>
<% end %>
<% if step_undefined or step.tables.count > 0 %>
<%= form.check_box :step_tables, label: t("projects.reports.elements.modals.step_contents_inner.tables") %>
<% else %>
<div>
<em>
<%= t("projects.reports.elements.modals.step_contents_inner.no_tables") %>
</em>
</div>
<% end %>
<%= form.check_box :step_comments, label: t("projects.reports.elements.modals.step_contents_inner.comments") %>
</div>

View file

@ -277,10 +277,8 @@ en:
modals:
project_contents:
head_title: "Add contents to report"
project_tab: "Choose tasks"
modules_tab: "Tasks content"
steps_tab: "Protocols content"
results_tab: "Results content"
tasks_tab: "Choose tasks"
content_tab: "Choose content"
project_contents_inner:
instructions: "Select projects/experiment/tasks to include in the report"
no_modules: "The project contains no tasks"
@ -292,7 +290,7 @@ en:
results_tab: "Results content"
module_contents_inner:
instructions: "Choose what information from task/s to include in the report"
header: "Report elements"
check_all: "All tasks content"
steps: "Completed protocol steps"
no_steps: "Task contains no protocols"
results: "Results"
@ -317,7 +315,7 @@ en:
results_tab: "Results content"
step_contents_inner:
instructions: "Choose what information from task protocol step/s to include in the report"
header: "Report elements"
check_all: "All protocols steps content"
tables: "Tables"
no_tables: "Step contains no tables"
assets: "Files"
@ -329,6 +327,7 @@ en:
head_title: "Add contents to result %{result}"
result_contents_inner:
instructions: "Include result/s comments in the report?"
check_all: "All results content"
comments: "Comments"
add: "Add to report"
save_report:
@ -1596,7 +1595,6 @@ en:
save: "Save"
close: "Close"
create: 'Create'
check_all: "Check all"
no_comments: "No comments!"
more_comments: "More comments"
comment_placeholder: "Your Message"