Update toolbar, add docx and pdf columns [SCI-5549][SCI-5550]

2025-10-06 03:46:39 +08:00 · 2021-03-17 12:54:25 +01:00 · 2021-03-17 12:54:25 +01:00 · 3e5c2e83c7
commit 3e5c2e83c7
parent c99e8f19fd
6 changed files with 235 additions and 32 deletions
--- a/app/assets/javascripts/reports/reports_datatable.js.erb
+++ b/app/assets/javascripts/reports/reports_datatable.js.erb
@ -1,3 +1,5 @@
+/* global I18n DataTableHelpers */
+
 (function(global) {
  'use strict';

@ -91,6 +93,54 @@
            </div>`;
  }

+  function renderDocxFile(data) {
+    if (data.error) {
+      return `<span class="processing-error">
+                <i class="fas fa-exclamation-triangle"></i>
+                ${I18n.t('projects.reports.index.error')}
+              </span>`;
+    }
+
+    if (data.processing) {
+      return `<span class="processing docx">
+                ${I18n.t('projects.reports.index.generating')}
+              </span>`;
+    }
+
+    if (data.file) {
+      return `<a href="${data.file}">
+                <i class="fas fa-file-word"></i>
+                ${I18n.t('projects.reports.index.docx')}
+              </a>`;
+    }
+
+    return `<a href="#" class="generate-docx">${I18n.t('projects.reports.index.generate')}</a>`;
+  }
+
+  function renderPdfFile(data) {
+    if (data.error) {
+      return `<span class="processing-error">
+                <i class="fas fa-exclamation-triangle"></i>
+                ${I18n.t('projects.reports.index.error')}
+              </span>`;
+    }
+
+    if (data.processing) {
+      return `<span class="processing pdf">
+                ${I18n.t('projects.reports.index.generating')}
+              </span>`;
+    }
+
+    if (data.file) {
+      return `<a href="${data.file}">
+                <i class="fas fa-file-pdf"></i>
+                ${I18n.t('projects.reports.index.pdf')}
+              </a>`;
+    }
+
+    return '';
+  }
+
  function appendEditPathToRow(row, data) {
    $(row).addClass('report-row')
          .attr('data-edit-path', data['edit'])
@ -115,17 +165,38 @@
  }

  function updateButtons() {
-    var editReportButton = $('#edit-report-btn');
-    var deleteReportsButton = $('#delete-reports-btn');
    if (CHECKED_REPORTS.length === 0) {
-      editReportButton.addClass('disabled hidden');
-      deleteReportsButton.addClass('disabled hidden');
+      $('.single-object-action, .multiple-object-action').addClass('disabled hidden');
    } else if (CHECKED_REPORTS.length === 1) {
-      editReportButton.removeClass('disabled hidden');
-      deleteReportsButton.removeClass('disabled hidden');
+      $('.single-object-action, .multiple-object-action').removeClass('disabled hidden');
+
+      let $row = $(`.report-row[data-id=${CHECKED_REPORTS[0]}]`);
+      let pdfProcessing = $row.has('.processing.pdf').length > 0;
+      let docxProcessing = $row.has('.processing.docx').length > 0;
+      let docxGenerate = $row.has('.generate-docx').length > 0;
+
+      if (pdfProcessing) {
+        $('#updatePdf').addClass('disabled');
+      } else {
+        $('#updatePdf').removeClass('disabled');
+      }
+
+      if (docxGenerate) {
+        $('#requestDocx').removeClass('hidden');
+        $('#updateDocx').addClass('hidden');
+      } else {
+        $('#requestDocx').addClass('hidden');
+        $('#updateDocx').removeClass('hidden');
+
+        if (docxProcessing) {
+          $('#updateDocx').addClass('disabled');
+        } else {
+          $('#updateDocx').removeClass('disabled');
+        }
+      }
    } else {
-      editReportButton.removeClass('hidden').addClass('disabled');
-      deleteReportsButton.removeClass('disabled hidden');
+      $('.single-object-action').removeClass('hidden').addClass('disabled');
+      $('.multiple-object-action').removeClass('disabled hidden');
    }
  }

@ -152,6 +223,18 @@
        className: 'dt-body-center',
        sWidth: '1%',
        render: renderCheckboxHTML
+      },
+      {
+        targets: 3,
+        searchable: false,
+        sWidth: '60',
+        render: renderPdfFile
+      },
+      {
+        targets: 4,
+        searchable: false,
+        sWidth: '60',
+        render: renderDocxFile
      }],
      oLanguage: {
        sSearch: I18n.t('general.filter')
--- a/app/assets/stylesheets/report_index.scss
+++ b/app/assets/stylesheets/report_index.scss
@ -1,3 +1,25 @@
+// scss-lint:disable SelectorDepth NestingDepth IdSelector SelectorFormat
+
+.reports-index {
+  .report-actions-dropdown {
+    display: inline-block;
+    float: left;
+    position: relative;
+
+    .report-actions-menu {
+      width: 200px;
+
+      li {
+        padding: 0;
+      }
+
+      a {
+        padding: .5em 1em;
+      }
+    }
+  }
+}
+
 .reports-datatable {
  height: calc(100vh - var(--navbar-height) - var(--content-header-size));

@ -22,4 +44,20 @@
    }
  }

+  .report-row {
+    .processing-error {
+      color: $brand-danger;
+    }
+
+    .generate-docx {
+      display: none;
+    }
+
+    &:hover {
+      .generate-docx {
+        display: initial;
+      }
+    }
+  }
+
 }
--- a/app/datatables/report_datatable.rb
+++ b/app/datatables/report_datatable.rb
@ -2,10 +2,13 @@

 class ReportDatatable < CustomDatatable
  include InputSanitizeHelper
+  include Rails.application.routes.url_helpers

  TABLE_COLUMNS = %w(
    Report.project_name
    Report.name
+    Report.pdf_file
+    Report.docx_file
    Report.created_by
    Report.modified_by
    Report.created_at
@ -27,6 +30,22 @@ class ReportDatatable < CustomDatatable
    @searchable_columns ||= TABLE_COLUMNS
  end

+  def sort_records(records)
+    case sort_column(order_params)
+    when 'reports.docx_file'
+      records.left_joins(:docx_file_attachment)
+             .order(active_storage_attachments: sort_direction(order_params))
+             .order(docx_file_processing: sort_direction(order_params) == 'ASC' ? :desc : :asc)
+    when 'reports.pdf_file'
+      records.left_joins(:pdf_file_attachment)
+             .order(active_storage_attachments: sort_direction(order_params))
+             .order(pdf_file_processing: sort_direction(order_params) == 'ASC' ? :desc : :asc)
+    else
+      sort_by = "#{sort_column(order_params)} #{sort_direction(order_params)}"
+      records.order(sort_by)
+    end
+  end
+
  private

  def data
@ -35,8 +54,8 @@ class ReportDatatable < CustomDatatable
        '0' => record.id,
        '1' => sanitize_input(record.project_name),
        '2' => sanitize_input(record.name),
-        '3' => '',
-        '4' => '',
+        '3' => pdf_file(record),
+        '4' => docx_file(record),
        '5' => sanitize_input(record.created_by),
        '6' => sanitize_input(record.modified_by),
        '7' => I18n.l(record.created_at, format: :full),
@ -46,6 +65,24 @@ class ReportDatatable < CustomDatatable
    end
  end

+  def docx_file(report)
+    docx = rails_blob_path(report.docx_file, disposition: 'attachment') if report.docx_file.attached?
+    {
+      processing: report.docx_file_processing,
+      file: docx,
+      error: false
+    }
+  end
+
+  def pdf_file(report)
+    pdf = rails_blob_path(report.pdf_file, disposition: 'attachment') if report.pdf_file.attached?
+    {
+      processing: report.pdf_file_processing,
+      file: pdf,
+      error: false
+    }
+  end
+
  def get_raw_records
    res = @reports.joins(:project)
                  .joins(
--- a/app/views/reports/_index_toolbar.html.erb
+++ b/app/views/reports/_index_toolbar.html.erb
@ -1,14 +1,49 @@
 <% if can_manage_reports?(current_team) %>
-  <%= link_to '#', remote: true, class: 'btn btn-primary', id: 'new-report-btn' do %>
-    <span class="fas fa-plus" aria-hidden="true"></span>
-    <span class="hidden-xs"><%=t "projects.reports.index.new" %></span>
-  <% end %>
-  <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "edit-report-btn" do %>
-    <span class="fas fa-pencil-alt" aria-hidden="true"></span>
-    <span class="hidden-xs"><%=t "projects.reports.index.edit" %></span>
-  <% end %>
-  <%= link_to "", remote: true, class: "btn btn-light disabled hidden", id: "delete-reports-btn" do %>
-    <span class="fas fa-times" aria-hidden="true"></span>
-    <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
-  <% end %>
+  <div class="sci-btn-group">
+    <%= link_to '#', remote: true, class: 'btn btn-primary', id: 'new-report-btn' do %>
+      <span class="fas fa-plus" aria-hidden="true"></span>
+      <span class="hidden-xs"><%= t("projects.reports.index.new") %></span>
+    <% end %>
+    <div class="report-actions-dropdown sci-dropdown">
+      <button class="btn btn-light dropdown-toggle single-object-action disabled hidden" type="button" id="reportMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        <i class="fas fa-file"></i>
+        <%= t("projects.reports.index.report_button") %>
+        <span class="caret pull-right"></span>
+      </button>
+      <ul id="reportMenuDropdown" class="dropdown-menu report-actions-menu" aria-labelledby="reportMenu">
+        <li>
+          <%= link_to '#', remote: true, id: 'updatePdf' do %>
+            <i class="fas fa-file-pdf"></i>
+            <%= t("projects.reports.index.update_pdf") %>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to '#', remote: true, id: 'savePdfToInventory' do %>
+            <i class="fas fa-save"></i>
+            <%= t("projects.reports.index.save_pdf_to_inventory") %>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to '#', remote: true, id: 'requestDocx' do %>
+            <i class="fas fa-file-word"></i>
+            <%= t("projects.reports.index.request_docx") %>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to '#', remote: true, id: 'updateDocx' do %>
+            <i class="fas fa-file-word"></i>
+            <%= t("projects.reports.index.update_docx") %>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+    <%= link_to "", remote: true, class: "btn btn-light disabled hidden single-object-action", id: "edit-report-btn" do %>
+      <span class="fas fa-pencil-alt" aria-hidden="true"></span>
+      <span class="hidden-xs"><%=t "projects.reports.index.edit" %></span>
+    <% end %>
+    <%= link_to "", remote: true, class: "btn btn-light disabled hidden multiple-object-action", id: "delete-reports-btn" do %>
+      <span class="fas fa-times" aria-hidden="true"></span>
+      <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
+    <% end %>
+  </div>
 <% end %>
--- a/app/views/reports/index.html.erb
+++ b/app/views/reports/index.html.erb
@ -4,7 +4,7 @@

 <%= stylesheet_link_tag 'datatables' %>

-<div class="content-pane flexible">
+<div class="content-pane flexible reports-index">
  <%= render partial: 'reports/index_header' %>
  <div id="content-reports-index">
    <div class="row">
@ -21,14 +21,14 @@
                    <span class="sci-checkbox-label"></span>
                  </div>
                </th>
-                <th id="project-name"><%=t 'projects.reports.index.thead_project_name' %></th>
-                <th id="report-name"><%=t 'projects.reports.index.thead_name' %></th>
-                <th id="report-pdf">PDF</th>
-                <th id="report-docx">DOCX</th>
-                <th id="report-created-by"><%=t 'projects.reports.index.thead_created_by' %></th>
-                <th id="report-last-modified-by"><%=t 'projects.reports.index.thead_last_modified_by' %></th>
-                <th id="report-created-at"><%=t 'projects.reports.index.thead_created_at' %></th>
-                <th id="report-updated-at"><%=t 'projects.reports.index.thead_updated_at' %></th>
+                <th id="project-name"><%= t('projects.reports.index.thead_project_name') %></th>
+                <th id="report-name"><%= t('projects.reports.index.thead_name') %></th>
+                <th id="report-pdf"><%= t('projects.reports.index.pdf') %></th>
+                <th id="report-docx"><%= t('projects.reports.index.docx') %></th>
+                <th id="report-created-by"><%= t('projects.reports.index.thead_created_by') %></th>
+                <th id="report-last-modified-by"><%= t('projects.reports.index.thead_last_modified_by') %></th>
+                <th id="report-created-at"><%= t('projects.reports.index.thead_created_at') %></th>
+                <th id="report-updated-at"><%= t('projects.reports.index.thead_updated_at') %></th>
              </tr>
            </thead>
            <tbody></tbody>
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -490,8 +490,13 @@ en:
    reports:
      print_title: "%{project} | Report"
      index:
-        head_title: " Reports"
+        head_title: "Reports"
        new: "New report"
+        report_button: "Report"
+        update_pdf: "Update PDF"
+        save_pdf_to_inventory: "Save PDF to Inventory"
+        request_docx: "Request DOCX"
+        update_docx: "Update DOCX"
        edit: "Edit"
        delete: "Delete"
        deleted: "(Deleted)"
@ -502,6 +507,11 @@ en:
        thead_created_at: "Created at"
        thead_updated_at: "Last updated at"
        no_reports: "No reports!"
+        pdf: "PDF"
+        docx: "DOCX"
+        error: "Error"
+        generating: "Generating"
+        generate: "Generate"
        modal_new:
          projects: "Projects"
          head_title: "Create new report"