diff --git a/app/assets/javascripts/reports/new.js b/app/assets/javascripts/reports/new.js index 1c5c030c4..061e2589e 100644 --- a/app/assets/javascripts/reports/new.js +++ b/app/assets/javascripts/reports/new.js @@ -966,3 +966,29 @@ function reportHandsonTableConverter() { }); }, 0); } + +(function() { + function initReportWizard() { + function nextStep() { + var currentStep = parseInt($('.reports-new-footer').attr('data-step'), 10); + $(`[href="#new-report-step-${currentStep + 1}"]`).tab('show'); + $('.reports-new-footer').attr('data-step', currentStep + 1); + } + + function previousStep() { + var currentStep = parseInt($('.reports-new-footer').attr('data-step'), 10); + $(`[href="#new-report-step-${currentStep - 1}"]`).tab('show'); + $('.reports-new-footer').attr('data-step', currentStep - 1); + } + + $('.continue-button').on('click', function() { + nextStep(); + }); + + $('.back-button').on('click', function() { + previousStep(); + }); + } + + initReportWizard(); +}()); diff --git a/app/assets/javascripts/reports/reports_datatable.js.erb b/app/assets/javascripts/reports/reports_datatable.js.erb index 958027847..160620bc6 100644 --- a/app/assets/javascripts/reports/reports_datatable.js.erb +++ b/app/assets/javascripts/reports/reports_datatable.js.erb @@ -12,31 +12,6 @@ updateButtons(); } - function initSelectPicker() { - $('.selectpicker').selectpicker({liveSearch: true}) - .ajaxSelectPicker({ - ajax: { - url: '<%= Rails.application.routes.url_helpers.reports_visible_projects_path %>', - type: 'POST', - dataType: 'json', - data: function () { - return { q: '{{{q}}}' }; - } - }, - locale: { - emptyTitle: 'Nothing selected' - }, - preprocessData: appendSearchResults, - emptyRequest: true, - clearOnEmpty: false, - preserveSelected: false - }).on('change.bs.select', function(el) { - $('#new-report-reports-btn').attr('data-new-report-path', el.target.value); - }).on('loaded.bs.select', function(el) { - $('#new-report-reports-btn').attr('data-new-report-path', el.target.value); - }); - } - function appendSearchResults(data) { var items = []; if(data.hasOwnProperty('projects')){ @@ -53,14 +28,6 @@ return items; } - function initRedirectToNewReportPage() { - $('#new-report-reports-btn').on('click', function() { - animateSpinner(); - var url = $(this).attr('data-new-report-path'); - $(location).attr('href', url); - }); - } - function initToggleAllCheckboxes() { $('input[name="select_all"]').change(function() { if($(this).is(':checked')) { @@ -274,22 +241,7 @@ }); } - function initNewReportModal() { - var newReport = parseInt(sessionStorage.getItem('scinote-dashboard-new-report'), 10); - $('#new-report-btn').on('click', function() { - $('#new-report-modal').modal('show'); - initSelectPicker(); - initRedirectToNewReportPage(); - }); - - if (Math.floor(Date.now() / 1000) - newReport < 15) { - $('#new-report-btn').click(); - sessionStorage.removeItem('scinote-dashboard-new-report'); - } - } - initDatatable(); initEditReport(); initDeleteReports(); - initNewReportModal(); })(window); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0ef24a308..66995630e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -35,6 +35,7 @@ @import "dashboard/*"; @import "repository/*"; @import "repository_columns/*"; +@import "reports/*"; @import "settings/*"; @import "shared/*"; @import "themes/*"; diff --git a/app/assets/stylesheets/reports/new.scss b/app/assets/stylesheets/reports/new.scss new file mode 100644 index 000000000..be889145a --- /dev/null +++ b/app/assets/stylesheets/reports/new.scss @@ -0,0 +1,216 @@ +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth + +.reports-new { + height: calc(100vh - var(--navbar-height)); + + @mixin step-dot-active { + border: 2px solid $brand-primary; + } + + @mixin step-dot-completed { + background: $brand-primary; + } + + .reports-new-header { + align-items: center; + display: flex; + height: 4em; + + .report-name-container { + width: 50%; + + .report-name { + @include font-h1; + } + } + + .cancel-button { + margin-left: auto; + } + } + + .reports-new-body { + background: $color-concrete; + height: calc(100% - 10em); + margin-left: calc(-1em - 15px); + overflow-y: auto; + width: calc(100% + 2em + 30px); + } + + .reports-new-footer { + align-items: center; + display: flex; + height: 6em; + + .back-container { + flex-basis: 25%; + } + + .wizard-status { + display: flex; + flex-basis: 50%; + justify-content: center; + position: relative; + } + + .wizard-steps { + --wizard-step-dot-size: 8px; + color: $color-silver-chalice; + flex: 1; + font-weight: bold; + position: relative; + text-align: center; + user-select: none; + z-index: 2; + + .step-id { + @include font-h3; + display: inline-block; + line-height: 1.5em; + text-align: center; + width: calc(2 * var(--wizard-step-dot-size)); + } + + .step-dot { + background: $color-concrete; + border-radius: 50%; + display: inline-block; + height: var(--wizard-step-dot-size); + margin: 0 calc(var(--wizard-step-dot-size) / 2); + width: var(--wizard-step-dot-size); + } + + .step-name { + display: inline-block; + white-space: nowrap; + } + + + + &.wizard-step-1 { + text-align: left; + + .name-wrapper { + margin-left: calc(-50% + 2 * var(--wizard-step-dot-size)); + } + } + + &.wizard-step-3 { + text-align: right; + + .name-wrapper { + margin-right: calc(-50% + 2 * var(--wizard-step-dot-size)); + } + } + } + + .progress-line { + background: $color-concrete; + height: 4px; + margin: 12px 0; + position: absolute; + top: 1.5em; + width: calc(50% - 8px); + z-index: 1; + + &.progress-step-1 { + left: 8px; + } + + &.progress-step-2 { + right: 8px; + } + } + + .generate-button { + display: none; + } + + .next-button-container { + flex-basis: 25%; + margin-left: auto; + text-align: right; + } + + &[data-step="1"] { + .wizard-step-1 { + color: initial; + + .step-dot { + @include step-dot-active; + } + } + + .back-button { + display: none; + } + } + + + &[data-step="2"] { + .wizard-step-1 { + .step-dot { + @include step-dot-completed; + } + } + + .wizard-step-2 { + color: initial; + + .step-dot { + @include step-dot-active; + } + } + + .progress-step-1 { + background: $brand-primary; + } + } + + &[data-step="3"] { + .wizard-step-1 { + .step-dot { + @include step-dot-completed; + } + } + + .wizard-step-2 { + .step-dot { + @include step-dot-completed; + } + } + + .wizard-step-3 { + color: initial; + + .step-dot { + @include step-dot-active; + } + } + + .continue-button { + display: none; + } + + .generate-button { + display: initial; + } + + .progress-step-1, + .progress-step-2 { + background: $brand-primary; + } + } + } +} + +@media (max-width: 960px) { + .reports-new { + .reports-new-footer { + .wizard-status { + display: none; + } + } + } +} diff --git a/app/controllers/reports_controller.rb b/app/controllers/reports_controller.rb index 836106386..5d5ec092c 100644 --- a/app/controllers/reports_controller.rb +++ b/app/controllers/reports_controller.rb @@ -6,7 +6,6 @@ class ReportsController < ApplicationController protect_from_forgery with: :exception, except: :generate BEFORE_ACTION_METHODS = %i( - new create edit update @@ -26,7 +25,7 @@ class ReportsController < ApplicationController before_action :load_vars, only: %i(edit update) before_action :load_vars_nested, only: BEFORE_ACTION_METHODS - before_action :load_visible_projects, only: %i(index visible_projects) + before_action :load_visible_projects, only: :visible_projects before_action :load_available_repositories, only: %i(new edit available_repositories) @@ -50,7 +49,6 @@ class ReportsController < ApplicationController # Report grouped by modules def new - @report = nil end # Creating new report from the _save modal of the new page diff --git a/app/views/reports/_index_toolbar.html.erb b/app/views/reports/_index_toolbar.html.erb index bfdd3a8ab..d6db8f53d 100644 --- a/app/views/reports/_index_toolbar.html.erb +++ b/app/views/reports/_index_toolbar.html.erb @@ -1,6 +1,6 @@ <% if can_manage_reports?(current_team) %>
- <%= link_to '#', remote: true, class: 'btn btn-primary', id: 'new-report-btn' do %> + <%= link_to new_report_path, class: 'btn btn-primary', id: 'new-report-btn' do %> <% end %> diff --git a/app/views/reports/index.html.erb b/app/views/reports/index.html.erb index b600ab68d..4a4a54a3a 100644 --- a/app/views/reports/index.html.erb +++ b/app/views/reports/index.html.erb @@ -61,39 +61,4 @@ <% end %>
- - - <%= javascript_include_tag("reports/reports_datatable") %> diff --git a/app/views/reports/new.html.erb b/app/views/reports/new.html.erb index f7f04750a..fd0f9d5ec 100644 --- a/app/views/reports/new.html.erb +++ b/app/views/reports/new.html.erb @@ -1,88 +1,63 @@ -<% content_for :head do %> - - -<% end %> +
+
+
+ "> -<% provide(:head_title, t("projects.reports.new.head_title", project: h(@project.name)).html_safe) %> - -<%= render partial: "reports/new/report_navigation" %> - -
-
- - - -
- - <% if @report.present? %> - <% @report.root_elements.each do |el| %> - <%= render_report_element(el, local_assigns) %> - <%= render_new_element(false) %> - <% end %> - <% else %> - <%= render partial: "reports/elements/project_header_element", locals: { project: @project } %> - <%= render partial: "reports/elements/new_element", locals: { initial: true } %> - <% end %>
- - - - - - -<%= render partial: 'reports/new/save_PDF_to_inventory_modal' %> - -<%= javascript_include_tag "handsontable.full.min" %> - - -<%= render partial: "shared/formulas_libraries.html.erb" %> - <%= javascript_include_tag("reports/new") %> -<%= javascript_include_tag 'reports/save_pdf_to_inventory' %> diff --git a/app/views/reports/new_old.html.erb b/app/views/reports/new_old.html.erb new file mode 100644 index 000000000..f7f04750a --- /dev/null +++ b/app/views/reports/new_old.html.erb @@ -0,0 +1,88 @@ +<% content_for :head do %> + + +<% end %> + +<% provide(:head_title, t("projects.reports.new.head_title", project: h(@project.name)).html_safe) %> + +<%= render partial: "reports/new/report_navigation" %> + +
+
+ + + +
+ + <% if @report.present? %> + <% @report.root_elements.each do |el| %> + <%= render_report_element(el, local_assigns) %> + <%= render_new_element(false) %> + <% end %> + <% else %> + <%= render partial: "reports/elements/project_header_element", locals: { project: @project } %> + <%= render partial: "reports/elements/new_element", locals: { initial: true } %> + <% end %> +
+ + + + + + + +
+
+ +<%= render partial: 'reports/new/save_PDF_to_inventory_modal' %> + +<%= javascript_include_tag "handsontable.full.min" %> + + +<%= render partial: "shared/formulas_libraries.html.erb" %> + +<%= javascript_include_tag("reports/new") %> +<%= javascript_include_tag 'reports/save_pdf_to_inventory' %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 759ceb70d..e3f364c91 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -523,6 +523,14 @@ en: message: "Are you sure to delete selected report/s?" delete: "Delete" new: + report_name_placeholder: "Name your report" + wizard_statuses: + step_1: "Select project" + step_2: "Select tasks" + step_3: "Select task contents" + continue_button: "Continue" + generate_button: "Start generating" + head_title: "%{project} | New report" nav_title: "Report for: " nav_print: "Print" @@ -2371,6 +2379,7 @@ en: edit: "Edit" delete: "Delete" cancel: "Cancel" + back: "Back" close: "Close" create: 'Create' change: "Change" diff --git a/config/routes.rb b/config/routes.rb index d37e14dfd..31683c625 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -194,7 +194,7 @@ Rails.application.routes.draw do via: [:get, :post, :put, :patch] end - resources :reports, only: :index + resources :reports, only: [:index, :new] get 'reports/datatable', to: 'reports#datatable' post 'reports/visible_projects', to: 'reports#visible_projects', defaults: { format: 'json' } @@ -247,7 +247,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/', to: 'reports#new' get 'new/project_contents_modal', to: 'reports#project_contents_modal', as: :project_contents_modal