mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-06 21:24:23 +08:00
update reports show page to work with new navigation
This commit is contained in:
mlorb
parent
2290b75f8a
commit
cc34376253
7 changed files with 60 additions and 368 deletions
|
|
@ -5,7 +5,6 @@ $.fn.findWithSelf = function(selector) {
|
|||
};
|
||||
|
||||
var REPORT_CONTENT = "#report-content";
|
||||
var SIDEBAR_PARENT_TREE = "#report-sidebar-tree";
|
||||
var ADD_CONTENTS_FORM_ID = "#add-contents-form";
|
||||
var SAVE_REPORT_FORM_ID = "#save-report-form";
|
||||
|
||||
|
|
@ -31,12 +30,14 @@ var ignoreUnsavedWorkAlert;
|
|||
initializeSaveToPdf();
|
||||
initializeSaveReport();
|
||||
initializeAddContentsModal();
|
||||
initializeSidebarNavigation();
|
||||
initializeUnsavedWorkDialog();
|
||||
|
||||
$('.report-nav-link').each(function() {
|
||||
truncateLongString($(this), <%= Constants::NAME_TRUNCATION_LENGTH %>);
|
||||
});
|
||||
|
||||
// Automatically display the "Add content" modal
|
||||
$('.new-element.initial').click();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -238,9 +239,6 @@ function initializeNewElement(newEl) {
|
|||
} else if (data.status == 200) {
|
||||
// Add elements
|
||||
addElements(el, data.responseJSON.elements);
|
||||
|
||||
// Update sidebar
|
||||
initializeSidebarNavigation();
|
||||
}
|
||||
})
|
||||
.on("ajax:error", function(e, xhr, settings, error) {
|
||||
|
|
@ -486,140 +484,6 @@ function initializeUnsavedWorkDialog() {
|
|||
$(document).on('page:before-change', beforeUnload);
|
||||
}
|
||||
|
||||
/**
|
||||
* SIDEBAR CODE
|
||||
*/
|
||||
|
||||
/**
|
||||
* Get the sidebar <li> element for the specified report element.
|
||||
* @param reportEl - The .report-element in the report.
|
||||
* @return The corresponding sidebar <li>.
|
||||
*/
|
||||
function getSidebarEl(reportEl) {
|
||||
var type = reportEl.data("type");
|
||||
var scrollId = reportEl.data("scroll-id");
|
||||
return $(SIDEBAR_PARENT_TREE).find(
|
||||
"li" +
|
||||
"[data-type='" + type + "']" +
|
||||
"[data-scroll-id='" + scrollId + "']"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the report <div.report-element> element for the specified
|
||||
* sidebar element.
|
||||
* @param sidebarEl - The <li> sidebar element.
|
||||
* @return The corresponding report element.
|
||||
*/
|
||||
function getReportEl(sidebarEl) {
|
||||
var type = sidebarEl.data("type");
|
||||
var scrollId = sidebarEl.data("scroll-id");
|
||||
return $(REPORT_CONTENT).find(
|
||||
"div.report-element" +
|
||||
"[data-type='" + type + "']" +
|
||||
"[data-scroll-id='" + scrollId + "']"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the sidebar navigation pane.
|
||||
*/
|
||||
function initializeSidebarNavigation() {
|
||||
var reportContent = $(REPORT_CONTENT);
|
||||
var treeParent = $(SIDEBAR_PARENT_TREE);
|
||||
|
||||
// Remove existing contents (also remove click listeners)
|
||||
treeParent.find(".report-nav-link").off("click");
|
||||
treeParent.children().remove();
|
||||
|
||||
// Re-populate the sidebar
|
||||
_.each(reportContent.children(".report-element"), function(child) {
|
||||
var li = initSidebarElement($(child));
|
||||
li.appendTo(treeParent);
|
||||
});
|
||||
|
||||
// Add click listener on all links
|
||||
treeParent.find(".report-nav-link").click(function(e) {
|
||||
var el = $(this).closest("li");
|
||||
scrollToElement(el);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Call to sidebar function to re-initialize tree functionality
|
||||
setupSidebarTree();
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursive call to initialize sidebar elements.
|
||||
* @param reportEl - The report element for which to
|
||||
* generate the sidebar.
|
||||
* @return A <li> jQuery element containing sidebar entry.
|
||||
*/
|
||||
function initSidebarElement(reportEl) {
|
||||
var elChildrenContainer = reportEl.children(".report-element-children");
|
||||
var type = reportEl.data("type");
|
||||
var name = reportEl.data("name");
|
||||
var scrollId = reportEl.data("scroll-id");
|
||||
var iconClass = reportEl.data("icon-class");
|
||||
|
||||
// Generate list element
|
||||
var newLi = $(document.createElement("li"));
|
||||
newLi
|
||||
.attr("data-type", type)
|
||||
.attr("data-scroll-id", scrollId);
|
||||
|
||||
var newSpan = $(document.createElement("span"));
|
||||
newSpan.appendTo(newLi);
|
||||
var newI = $(document.createElement("i"));
|
||||
newI.appendTo(newSpan);
|
||||
var newHref = $(document.createElement("a"));
|
||||
newHref
|
||||
.attr("href", "")
|
||||
.addClass("report-nav-link")
|
||||
.text(name)
|
||||
.appendTo(newSpan);
|
||||
var newIcon = $(document.createElement("span"));
|
||||
newIcon.addClass(iconClass).prependTo(newHref);
|
||||
|
||||
if (elChildrenContainer.length && elChildrenContainer.length > 0) {
|
||||
var elChildren = elChildrenContainer.children(".report-element");
|
||||
if (elChildren.length && elChildren.length > 0) {
|
||||
var newUl = $(document.createElement("ul"));
|
||||
newUl.appendTo(newLi);
|
||||
|
||||
_.each(elChildren, function(child) {
|
||||
var li = initSidebarElement($(child));
|
||||
li.appendTo(newUl);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return newLi;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to the specified element in the report.
|
||||
* @param sidebarEl - The sidebar element.
|
||||
*/
|
||||
function scrollToElement(sidebarEl) {
|
||||
var el = getReportEl(sidebarEl);
|
||||
|
||||
if (el.length && el.length == 1) {
|
||||
var content = $("body");
|
||||
content.scrollTo(
|
||||
el,
|
||||
{
|
||||
axis: 'y',
|
||||
duration: 500,
|
||||
offset: -150
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* INDIVIDUAL ELEMENTS SORTING/MODIFYING FUNCTIONS
|
||||
*/
|
||||
|
|
@ -683,8 +547,6 @@ function sortWholeReport(asc) {
|
|||
sortElementChildren($(el), asc, true);
|
||||
});
|
||||
|
||||
// Reinitialize sidebar
|
||||
initializeSidebarNavigation();
|
||||
animateLoading(false);
|
||||
}
|
||||
|
||||
|
|
@ -734,22 +596,6 @@ function sortElementChildren(el, asc, recursive) {
|
|||
sortElementChildren($(child), asc, true);
|
||||
}
|
||||
});
|
||||
|
||||
// Update sidebar
|
||||
var prevEl = null;
|
||||
_.each(children, function(child) {
|
||||
var sidebarEl = getSidebarEl($(child));
|
||||
if (sidebarEl.length && sidebarEl.length == 1) {
|
||||
var sidebarParent = sidebarEl.closest("ul");
|
||||
sidebarEl.detach();
|
||||
if (prevEl === null) {
|
||||
sidebarParent.prepend(sidebarEl);
|
||||
} else {
|
||||
prevEl.after(sidebarEl);
|
||||
}
|
||||
prevEl = sidebarEl;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -843,46 +689,6 @@ function moveElement(el, up) {
|
|||
!nextNewEl.hasClass("new-element")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var sidebarEl;
|
||||
if (up) {
|
||||
var prevEl = prevNewEl.prev();
|
||||
if (!prevEl.length || !prevEl.hasClass("report-element")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Move sidebar element up
|
||||
sidebarEl = getSidebarEl(el);
|
||||
var sidebarPrev = sidebarEl.prev();
|
||||
sidebarEl.detach();
|
||||
sidebarPrev.before(sidebarEl);
|
||||
|
||||
el.detach();
|
||||
nextNewEl.detach();
|
||||
prevEl.before(el);
|
||||
prevEl.before(nextNewEl);
|
||||
updateElementControls(prevEl);
|
||||
|
||||
|
||||
} else {
|
||||
var nextEl = nextNewEl.next();
|
||||
if (!nextEl.length || !nextEl.hasClass("report-element")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Move sidebar element up
|
||||
sidebarEl = getSidebarEl(el);
|
||||
var sidebarNext = sidebarEl.next();
|
||||
sidebarEl.detach();
|
||||
sidebarNext.after(sidebarEl);
|
||||
|
||||
prevNewEl.detach();
|
||||
el.detach();
|
||||
nextEl.after(el);
|
||||
nextEl.after(prevNewEl);
|
||||
updateElementControls(nextEl);
|
||||
}
|
||||
|
||||
updateElementControls(el);
|
||||
}
|
||||
|
||||
|
|
@ -905,10 +711,6 @@ function removeElement(el) {
|
|||
|
||||
// TODO Remove event listeners
|
||||
|
||||
// Remove sidebar entry
|
||||
var sidebarEl = getSidebarEl(el);
|
||||
sidebarEl.remove();
|
||||
|
||||
prevNewEl.remove();
|
||||
el.remove();
|
||||
|
||||
|
|
@ -933,10 +735,6 @@ function removeResultCommentsElement(el) {
|
|||
|
||||
// TODO Remove event listeners
|
||||
|
||||
// Remove sidebar entry
|
||||
var sidebarEl = getSidebarEl(el);
|
||||
sidebarEl.remove();
|
||||
|
||||
// Remove element, show the new element container
|
||||
el.remove();
|
||||
parent.children(".new-element").removeClass("hidden");
|
||||
|
|
@ -1125,26 +923,6 @@ function constructElementContentsJson(el) {
|
|||
return jsonEl;
|
||||
}
|
||||
|
||||
/**
|
||||
* Binds listeners to sidebar
|
||||
* that truncate long strings
|
||||
*/
|
||||
function initializeReportSidebartruncation() {
|
||||
var target = document.getElementById("report-sidebar-tree");
|
||||
var observer = new MutationObserver(
|
||||
function() {
|
||||
$.each($("a.report-nav-link"),
|
||||
function(){
|
||||
truncateLongString($(this),
|
||||
<%= Constants::NAME_TRUNCATION_LENGTH %>);
|
||||
});
|
||||
}
|
||||
);
|
||||
var config = { childList: true };
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// Check if we are actually at new report page
|
||||
if ($(REPORT_CONTENT).length) {
|
||||
|
|
|
|||
|
|
@ -252,30 +252,6 @@ function setupSidebarTree() {
|
|||
$(".tree li span.tree-link ").after("<div class='border-custom'></div>");
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the show/hide toggling of sidebar.
|
||||
*/
|
||||
function initializeSidebarToggle() {
|
||||
var wrapper = $("#wrapper");
|
||||
var toggled = sessionIsSidebarToggled();
|
||||
|
||||
if (toggled || toggled === null && $(window).width() <
|
||||
<%= Constants::SCREEN_WIDTH_LARGE %>) {
|
||||
wrapper.addClass("no-animation");
|
||||
wrapper.addClass("toggled");
|
||||
// Cause reflow of the wrapper element
|
||||
wrapper[0].offsetHeight;
|
||||
wrapper.removeClass("no-animation");
|
||||
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
||||
}
|
||||
|
||||
$(".toggle-sidebar-link").on("click", function() {
|
||||
$("#wrapper").toggleClass("toggled");
|
||||
sessionToggleSidebar();
|
||||
$(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Resize the sidebar to accomodate to the page size
|
||||
function resizeSidebarContents() {
|
||||
|
|
|
|||
|
|
@ -8,27 +8,33 @@
|
|||
|
||||
/* New page navbar */
|
||||
.navbar-report {
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
background: $color-concrete;
|
||||
border-bottom: 4px solid $color-silver;
|
||||
background: $color-concrete !important;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
margin-bottom: 0;
|
||||
min-width: 320px;
|
||||
padding: 0 15px;
|
||||
z-index: 500;
|
||||
padding-right: 100px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 500;
|
||||
|
||||
div.row {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#report-menu {
|
||||
margin: 15px 0;
|
||||
|
||||
form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.row {
|
||||
|
|
@ -54,43 +60,6 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
/* New page sidebar */
|
||||
.report-sidebar-wrapper {
|
||||
background-color: $color-white !important;
|
||||
}
|
||||
|
||||
// Some additional styling on the treeview
|
||||
.report-tree {
|
||||
li {
|
||||
padding: 0 0 0 15px;
|
||||
|
||||
a.report-nav-link:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.report-nav-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
[data-type='step']:not(.parent_li) {
|
||||
padding-left: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.report-sidebar-panel-description {
|
||||
margin: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
.report-item-elements {
|
||||
margin-top: 10px !important;
|
||||
margin-left: 15px !important;
|
||||
|
||||
li {
|
||||
margin: 5px 5px 5px 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Global fix for handsontable
|
||||
|
|
@ -115,19 +84,20 @@ label {
|
|||
.report-container {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
padding-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#report-content {
|
||||
color: $color-black;
|
||||
@include box-shadow(0 0 58px -10px $color-black);
|
||||
background: $color-white;
|
||||
@include box-shadow(0px 0px 58px -10px $color-black);
|
||||
max-width: 800px;
|
||||
min-width: 230px;
|
||||
min-height: 1200px;
|
||||
color: $color-black;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 50px;
|
||||
max-width: 800px;
|
||||
min-height: 1200px;
|
||||
min-width: 230px;
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,8 +49,6 @@ class ReportsController < ApplicationController
|
|||
result_contents
|
||||
)
|
||||
|
||||
layout 'fluid'
|
||||
|
||||
# Index showing all reports of a single project
|
||||
def index
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<% provide(:head_title, t("projects.reports.new.head_title", project: h(@project.name)).html_safe) %>
|
||||
<% provide(:body_class, "report-body") %>
|
||||
<% provide(:sidebar_wrapper_class, "report-sidebar-wrapper") %>
|
||||
<% provide(:container_class, "report-container") %>
|
||||
|
||||
<%= render partial: "reports/new/report_sidebar" %>
|
||||
<%= render partial: "reports/new/report_navigation" %>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,65 +1,37 @@
|
|||
<% content_for :secondary_navigation do %>
|
||||
|
||||
<div class="navbar-report">
|
||||
<div>
|
||||
<ul class="breadcrumb" style="margin-left: 15px;">
|
||||
<li>
|
||||
<% if can_read_team?(@project.team) %>
|
||||
<a id="team-link"
|
||||
href="<%= projects_path :team => @project.team.id %>">
|
||||
<% end %>
|
||||
<span class="hidden-sm hidden-md hidden-lg">Org</span>
|
||||
<span class="hidden-xs"><%= @project.team.name %></span>
|
||||
<% if can_read_team?(@project.team) %>
|
||||
</a>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="active">
|
||||
<span class="hidden-sm hidden-md hidden-lg">Project</span>
|
||||
<span class="hidden-xs"><%= @project.name %></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="center-block" id="report-menu">
|
||||
|
||||
<div class="dropdown" id="sort-report">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="glyphicon glyphicon-sort visible-xs-inline"></span>
|
||||
<span class="hidden-xs"><%= t'projects.reports.new.nav_sort_by' %></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a href="#" data-sort="desc"><%= t('projects.reports.new.nav_sort_desc') %></a></li>
|
||||
<li><a href="#" data-sort="asc"><%= t('projects.reports.new.nav_sort_asc') %></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %>
|
||||
<span class="glyphicon glyphicon-print"></span>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_print" %></span>
|
||||
<% end %>
|
||||
<%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %>
|
||||
<div class="form-group">
|
||||
<%= hidden_field_tag "html", "" %>
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %>
|
||||
<span class="glyphicon glyphicon-save-file"></span>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_pdf" %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %>
|
||||
<span class="glyphicon glyphicon-ok"></span>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_save" %></span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default" do %>
|
||||
<span class="glyphicon glyphicon-remove"></span>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_close" %></span>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
<div class="navbar-report">
|
||||
<div class="center-block" id="report-menu">
|
||||
|
||||
<div class="dropdown" id="sort-report">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="glyphicon glyphicon-sort visible-xs-inline"></span>
|
||||
<span class="hidden-xs"><%= t'projects.reports.new.nav_sort_by' %></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li><a href="#" data-sort="desc"><%= t('projects.reports.new.nav_sort_desc') %></a></li>
|
||||
<li><a href="#" data-sort="asc"><%= t('projects.reports.new.nav_sort_asc') %></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "print-report" do %>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_print" %></span>
|
||||
<% end %>
|
||||
<%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %>
|
||||
<div class="form-group">
|
||||
<%= hidden_field_tag "html", "" %>
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "get-report-pdf" do %>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_pdf" %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "", class: "btn btn-primary", remote: true, id: "save-report-link" do %>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_save" %></span>
|
||||
<% end %>
|
||||
|
||||
<%= link_to project_reports_path(@project), id: "cancel-report-link", class: "btn btn-default pull-right" do %>
|
||||
<span class="hidden-xs"><%=t "projects.reports.new.nav_close" %></span>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -306,8 +306,8 @@ en:
|
|||
head_title: "%{project} | New report"
|
||||
nav_title: "Report for: "
|
||||
nav_print: "Print"
|
||||
nav_pdf: "Export to PDF"
|
||||
nav_save: "Save report"
|
||||
nav_pdf: "Download PDF"
|
||||
nav_save: "Save"
|
||||
nav_close: "Close"
|
||||
nav_sort_by: "Sort report by"
|
||||
nav_sort_asc: "Oldest on top"
|
||||
|
|
@ -323,7 +323,7 @@ en:
|
|||
tasks_tab: "Choose tasks"
|
||||
content_tab: "Choose content"
|
||||
project_contents_inner:
|
||||
instructions: "Select projects/experiment/tasks to include in the report"
|
||||
instructions: "Select experiments/tasks to include in the report"
|
||||
no_modules: "The project contains no tasks"
|
||||
no_module_group: "No workflow"
|
||||
module_contents:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue