Add edit mode for report [SCI-5620]

app/assets/javascripts/reports/new.js

@@ -1063,6 +1063,11 @@ function reportHandsonTableConverter() {
       previousStep();
     });
 
+    $('.change-step').on('click', function() {
+      $(`[href="#new-report-step-${this.dataset.stepId}"]`).tab('show');
+      $('.reports-new-footer').attr('data-step', this.dataset.stepId);
+    });
+
     $('.reports-new-body [href="#new-report-step-2"]').on('show.bs.tab', function() {
       var projectContents = $('#new-report-step-2').find('.project-contents');
       if (projectContents.is(':empty')) {
@@ -1161,6 +1166,7 @@ function reportHandsonTableConverter() {
     dropdownSelector.init('#projectSelector', {
       singleSelect: true,
       closeOnSelect: true,
+      noEmptyOption: true,
       selectAppearance: 'simple',
       onChange: function() {
         $('#new-report-step-2 .project-contents').empty();

app/assets/stylesheets/reports/new.scss

@@ -86,19 +86,40 @@
         white-space: nowrap;
       }
 
+      .change-step {
+        cursor: pointer;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        width: 6em;
 
+      }
 
       &.wizard-step-1 {
         text-align: left;
 
+        .change-step {
+          left: -3em;
+        }
+
         .name-wrapper {
           margin-left: calc(-50% + 2 * var(--wizard-step-dot-size));
         }
       }
 
+      &.wizard-step-2 {
+        .change-step {
+          margin: 0 calc(50% - 3em);
+        }
+      }
+
       &.wizard-step-3 {
         text-align: right;
 
+        .change-step {
+          right: -3em;
+        }
+
         .name-wrapper {
           margin-right: calc(-50% + 2 * var(--wizard-step-dot-size));
         }
@@ -123,10 +144,15 @@
       }
     }
 
-    .generate-button {
+    .generate-button,
+    .report-generate-actions-dropdown {
       display: none;
     }
 
+    .report-generate-actions-dropdown {
+      position: relative;
+    }
+
     .next-button-container {
       flex-basis: 25%;
       margin-left: auto;
@@ -197,6 +223,18 @@
         display: initial;
       }
 
+      .report-generate-actions-dropdown {
+        display: inline-block;
+
+        .dropdown-menu {
+          width: 250px;
+
+          li {
+            padding: .5em 0;
+          }
+        }
+      }
+
       .progress-step-1,
       .progress-step-2 {
         background: $brand-primary;

app/controllers/reports_controller.rb

@@ -63,7 +63,7 @@ class ReportsController < ApplicationController
             html: render_to_string(
               template: "reports/templates/#{template}/edit.html.erb",
               layout: 'reports/template_values_editor',
-              locals: { report: Report.new }
+              locals: { report: Report.find_by(id: params[:report_id]) || Report.new }
             )
           }
         else
@@ -108,11 +108,13 @@ class ReportsController < ApplicationController
   end
 
   def edit
-    # cleans all the deleted report
+    @edit = true
-    current_team_switch(@report.project.team)
-    @report.cleanup_report
     @templates = Extends::REPORT_TEMPLATES
-    render 'reports/new.html.erb'
+    @project_contents = {
+      experiments: @report.report_elements.where(type_of: 'experiment').pluck(:experiment_id),
+      my_modules: @report.report_elements.where(type_of: 'my_module').pluck(:my_module_id)
+    }
+    render :new
   end
 
   # Updating existing report from the _save modal of the new page
@@ -325,7 +327,7 @@ class ReportsController < ApplicationController
     render json: {
       html: render_to_string(
         partial: 'reports/wizard/project_contents.html.erb',
-        locals: { project: @project }
+        locals: { project: @project, report: nil}
       )
     }
   end

app/views/reports/new.html.erb

@@ -1,7 +1,7 @@
 <div class="content-pane flexible reports-new">
   <div class="reports-new-header">
     <div class="sci-input-container report-name-container">
-      <input type="text" class="sci-input-field report-name" placeholder="<%= t("projects.reports.new.report_name_placeholder") %>"></input>
+      <input type="text" class="sci-input-field report-name" placeholder="<%= t("projects.reports.new.report_name_placeholder") %>" value="<%= @report.name %>"></input>
 
     </div>
     <button class="btn btn-secondary cancel-button">
@@ -16,7 +16,7 @@
     </ul>
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="new-report-step-1">
-        <%= render partial: 'reports/wizard/first_step' %>
+        <%= render partial: 'reports/wizard/first_step', locals: { report: @report } %>
       </div>
       <div role="tabpanel" class="tab-pane" id="new-report-step-2">
         <%= render partial: 'reports/wizard/second_step', locals: { report: @report } %>
@@ -46,6 +46,10 @@
               <%= t("projects.reports.wizard.statuses.step_#{i + 1}") %>
             </span>
           </div>
+          <% if @edit %>
+            <div class="change-step" data-step-id="<%= i + 1 %>">
+            </div>
+          <% end %>
         </div>
       <% end %>
     </div>
@@ -53,9 +57,32 @@
       <button class="btn btn-primary continue-button" disabled>
         <%= t("projects.reports.new.continue_button") %>
       </button>
+      <% if @edit %>
+        <div class="report-generate-actions-dropdown sci-dropdown dropup">
+          <button class="btn btn-primary dropdown-toggle single-object-action" type="button" id="reportGenerateMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            <%= t("projects.reports.new.generate_as_button") %>
+            <span class="caret pull-right"></span>
+          </button>
+          <ul id="reportGenerateMenuDropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="reportGenerateMenu">
+            <li>
+              <%= link_to '#', remote: true, id: 'createNewReport' do %>
+                <i class="fas fa-plus-circle"></i>
+                <%= t("projects.reports.new.save_as_new_report") %>
+              <% end %>
+            </li>
+            <li>
+              <%= link_to '#', remote: true, id: 'UpdateReport' do %>
+                <i class="fas fa-redo-alt"></i>
+                <%= t("projects.reports.new.update_report") %>
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      <% else %>
         <button class="btn btn-primary generate-button"  data-create-url="<%= reports_path %>">
           <%= t("projects.reports.new.generate_button") %>
         </button>
+      <% end %>
     </div>
   </div>
 </div>

app/views/reports/wizard/_first_step.html.erb

@@ -1,5 +1,5 @@
 <div class="project-selector-container">
-  <%= render partial: 'reports/wizard/project_template_selector' %>
+  <%= render partial: 'reports/wizard/project_template_selector', locals: {report: report} %>
 </div>
 <div class="report-template-values-container">
 </div>

app/views/reports/wizard/_project_contents.html.erb

@@ -3,7 +3,13 @@
     <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"/>
+          <input type="checkbox" value="<%= experiment.id %>" class="sci-checkbox report-experiment-checkbox"
+          <%= if report
+                'checked' if @project_contents[:experiments].include?(experiment.id)
+              else
+                'checked'
+              end
+          %>/>
           <span class="sci-checkbox-label"></span>
         </span>
         <i class="fas fa-caret-down " data-toggle="collapse" href="#experimentContentContainer<%= experiment.id %>" aria-expanded="false"></i>
@@ -23,7 +29,13 @@
         <% 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"/>
+              <input type="checkbox" value="<%= my_module.id %>" class="sci-checkbox report-my-module-checkbox"
+              <%= if report
+                    'checked' if @project_contents[:my_modules].include?(my_module.id)
+                  else
+                    'checked'
+                  end
+              %>/>
               <span class="sci-checkbox-label"></span>
             </span>
             <%= my_module.name %>

app/views/reports/wizard/_project_template_selector.html.erb

@@ -6,7 +6,7 @@
   <div class="col-md-6">
     <div class='project-selector'>
       <%= label_tag :projectSelector, t('projects.reports.wizard.first_step.select_project') %>
-      <%= select_tag :projectSelector, options_from_collection_for_select(@visible_projects, :id, :name), data: { placeholder: t('projects.reports.wizard.first_step.select_project') } %>
+      <%= select_tag :projectSelector, options_from_collection_for_select(@visible_projects, :id, :name, report.project_id), data: { placeholder: t('projects.reports.wizard.first_step.select_project') } %>
     </div>
 
     <div class='template-selector'>
@@ -15,14 +15,14 @@
                      options_for_select(@templates),
                      data: {
                        placeholder: t('projects.reports.wizard.first_step.select_template'),
-                       values_editor_path: reports_new_template_values_path
+                       values_editor_path: reports_new_template_values_path(report_id: report.id)
                      } %>
     </div>
   </div>
   <div class="col-md-6">
     <div class="sci-input-container">
       <%= label_tag :projectDescription, t('projects.reports.wizard.first_step.report_description') %>
-      <%= text_area_tag :projectDescription, '', placeholder: t('projects.reports.wizard.first_step.report_description_placeholder'), class: 'sci-input-field' %>
+      <%= text_area_tag :projectDescription, report.description, placeholder: t('projects.reports.wizard.first_step.report_description_placeholder'), class: 'sci-input-field' %>
     </div>
   </div>
 </div>

app/views/reports/wizard/_second_step.html.erb

@@ -29,5 +29,10 @@
     <%= t("projects.reports.wizard.second_step.select_all_tasks") %>
   </div>
   <div class="divider"></div>
-  <div class="project-contents" data-project-content-url="<%= project_contents_reports_path %>"></div>
+  <div class="project-contents" data-project-content-url="<%= project_contents_reports_path %>">
+    <% if report.id %>
+      <%= render partial: 'reports/wizard/project_contents.html.erb',
+        locals: { project: report.project, report: report } %>
+    <% end %>
+  </div>
 </div>

config/locales/en.yml

@@ -574,6 +574,9 @@ en:
         report_name_placeholder: "Name your report"
         continue_button: "Continue"
         generate_button: "Start generating"
+        generate_as_button: "Generate as"
+        save_as_new_report: "A new report"
+        update_report: "Overwrite current reprot"
         head_title: "%{project} | New report"
         nav_title: "Report for: "
         nav_print: "Print"