Merge pull request #3229 from aignatov-bio/ai-sci-5559-add-document-preview-to-report

Add document preview to reports [SCI-5559]

app/assets/javascripts/reports/reports_datatable.js.erb

@@ -74,8 +74,8 @@
               </span>`;
     }
 
-    if (data.file) {
-      return `<a href="${data.file}">
+    if (data.preview_url) {
+      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
                 <i class="fas fa-file-word"></i>
                 ${I18n.t('projects.reports.index.docx')}
               </a>`;
@@ -98,8 +98,8 @@
               </span>`;
     }
 
-    if (data.file) {
-      return `<a href="${data.file}">
+    if (data.preview_url) {
+      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
                 <i class="fas fa-file-pdf"></i>
                 ${I18n.t('projects.reports.index.pdf')}
               </a>`;

app/controllers/reports_controller.rb

@@ -23,7 +23,7 @@ class ReportsController < ApplicationController
     result_contents
   ).freeze
 
-  before_action :load_vars, only: %i(edit update)
+  before_action :load_vars, only: %i(edit update document_preview)
   before_action :load_vars_nested, only: BEFORE_ACTION_METHODS
   before_action :load_visible_projects, only: :new
   before_action :load_available_repositories,
@@ -455,6 +455,16 @@ class ReportsController < ApplicationController
     render json: { results: @available_repositories }, status: :ok
   end
 
+  def document_preview
+    render json: { html: render_to_string(
+      partial: 'reports/content_document_preview.html.erb',
+      locals: {
+        report: @report,
+        report_type: params[:report_type]
+      }
+    ) }
+  end
+
   private
 
   include StringUtility

app/datatables/report_datatable.rb

@@ -66,19 +66,19 @@ class ReportDatatable < CustomDatatable
   end
 
   def docx_file(report)
-    docx = rails_blob_path(report.docx_file, disposition: 'attachment') if report.docx_file.attached?
+    docx = document_preview_report_path(report, report_type: :docx) if report.docx_file.attached?
     {
       processing: report.docx_file_processing,
-      file: docx,
+      preview_url: docx,
       error: false
     }
   end
 
   def pdf_file(report)
-    pdf = rails_blob_path(report.pdf_file, disposition: 'attachment') if report.pdf_file.attached?
+    pdf = document_preview_report_path(report, report_type: :pdf) if report.pdf_file.attached?
     {
       processing: report.pdf_file_processing,
-      file: pdf,
+      preview_url: pdf,
       error: false
     }
   end

app/views/assets/_asset_inline.html.erb

@@ -40,7 +40,7 @@
       </div>
     <% end %>
   <% elsif asset.pdf_previewable? %>
-    <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: asset } %>
+    <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: asset, report_document: false } %>
   <% elsif asset.previewable? %>
     <div class="image-container">
       <%= image_tag asset.large_preview,

app/views/reports/_content_document_preview.html.erb

@@ -0,0 +1,23 @@
+<div class="modal-header">
+  <span class="file-name"><%= report.name %></span>
+  <div class="sci-btn-group">
+     <a class="btn btn-light file-download-link" href="<%= rails_blob_path(report_type == 'docx' ? report.docx_file : report.pdf_file, disposition: 'attachment') %>" data-turbolinks="false">
+      <span class="fas fa-download"></span> <%= t('Download')%>
+    </a>
+    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
+  </div>
+</div>
+<div class="modal-body">
+  <div class="file-preview-container">
+    <% if report_type == 'pdf' %>
+      <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: report.pdf_file, report_document: true } %>
+    <% else %>
+      <div>
+        <i class="fas fa-10x fa-file-word"></i>
+        <h3 class="file-name"><%= report.name %></h3>
+      </div>
+    <% end %>
+  </div>
+</div>
+<div class="modal-footer">
+</div>

app/views/reports/index.html.erb

@@ -62,3 +62,5 @@
 </div>
 
 <%= javascript_include_tag("reports/reports_datatable") %>
+<%= javascript_pack_tag 'pdfjs/pdf_js' %>
+<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>

app/views/shared/_pdf_viewer.html.erb

@@ -1,7 +1,12 @@
 <%
-   pdf_url = asset.pdf? ? asset_download_path(asset) : asset_pdf_preview_path(asset)
-   pdf_size = !asset.pdf? && asset.pdf_preview_ready? ? asset.file_pdf_preview&.blob&.byte_size : asset.file_size
-   blocked = pdf_size > Constants::PDF_PREVIEW_MAX_SIZE_MB.megabyte
+  unless report_document
+    pdf_url = asset.pdf? ? asset_download_path(asset) : asset_pdf_preview_path(asset)
+    pdf_size = !asset.pdf? && asset.pdf_preview_ready? ? asset.file_pdf_preview&.blob&.byte_size : asset.file_size
+  else
+    pdf_url = rails_blob_path(asset, disposition: 'attachment')
+    pdf_size = asset.blob.byte_size
+  end
+  blocked = pdf_size > Constants::PDF_PREVIEW_MAX_SIZE_MB.megabyte
 %>
 <div class="pdf-viewer <%= 'blocked' if blocked %> ">
   <div class="page-container">

app/views/shared/file_preview/_content.html.erb

@@ -50,7 +50,7 @@
       <% if wopi_enabled? && wopi_file?(asset) %>
         <iframe class="wopi-file-preview" src="<%= asset.get_action_url(current_user, 'embedview') %>"></iframe>
       <% elsif asset.pdf_previewable? %>
-        <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: asset } %>
+        <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: asset, report_document: false } %>
       <% else %>
         <%= image_tag asset.large_preview,
             onerror: 'ActiveStoragePreviews.reCheckPreview(event)',

config/routes.rb

@@ -194,7 +194,12 @@ Rails.application.routes.draw do
             via: [:get, :post, :put, :patch]
     end
 
-    resources :reports, only: [:index, :new]
+
+    resources :reports, only: [:index, :new] do
+      member do
+        get :document_preview
+      end
+    end
     get 'reports/datatable', to: 'reports#datatable'
     post 'reports/visible_projects', to: 'reports#visible_projects',
                                      defaults: { format: 'json' }