Merge pull request #2900 from aignatov-bio/ai-sci-5109-add-list-view-for-files

Add list view to attachments [SCI-5109]

app/assets/javascripts/protocols/steps.js.erb

@@ -332,18 +332,19 @@
   function initPreviewToggle(){
     $('.attachments').on('click', '.change-preview-type', function (e) {
       var viewMode = $(this).data('preview-type');
-      var assetId = $(this).data('asset-id');
+      var toggleUrl = $(this).data('toggle-view-url');
+      var assetId = $(this).closest('.asset').data('asset-id');
       e.preventDefault();
       e.stopPropagation();
       $.ajax({
-        url: `/files/${assetId}/toggle_view_mode`,
+        url: toggleUrl,
         type: "PATCH",
         dataType: "json",
         data: { asset: { view_mode: viewMode }},
         success: function (data) {
-          $(`.step-asset[data-asset-id=${assetId}]`).replaceWith(data.html);
+          $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html);
           FilePreviewModal.init();
-          $(`.step-asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder');
+          $(`.asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder');
         },
         error: function (data) {
           console.log(data);
@@ -661,7 +662,7 @@
     })
 
     $('.attachments').on('reorder', function() {
-      var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .step-asset`);
+      var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`);
       var order = $(this).data('order');
       var sortedAssets = assets.sort(function(a, b) {
         if (a.dataset.assetOrder == b.dataset.assetOrder) {

app/assets/stylesheets/steps.scss

@@ -11,8 +11,8 @@
 @import "mixins";
 
 :root {
-  --attachment-card-thumbnail-height: 280px;
+  --attachment-column-width: 16em;
-  --attachment-card-thumbnail-width: 220px;
+  --attachment-row-height: 3em;
 }
 
 
@@ -135,22 +135,26 @@
 
 .attachments {
   display: grid;
-  grid-auto-rows: var(--attachment-card-thumbnail-height);
+  grid-auto-rows: var(--attachment-row-height);
   grid-column-gap: 1em;
   grid-row-gap: 1em;
-  grid-template-columns: repeat(auto-fill, minmax(var(--attachment-card-thumbnail-width), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--attachment-column-width), 1fr));
   justify-content: center;
   margin: 1em 0;
+
+  .nested_fields {
+    display: contents;
+  }
 }
 
 .attachment-container {
   @include md-card-style;
-  height: var(--attachment-card-thumbnail-height);
+  grid-row: span 6;
   justify-self: center;
   overflow: hidden;
   padding: 1em;
   position: relative;
-  width: var(--attachment-card-thumbnail-width);
+  width: var(--attachment-column-width);
 
 
   .file-preview-link {
@@ -174,7 +178,7 @@
 
   .attachment-preview {
     border-radius: $border-radius-default;
-    height: 170px;
+    height: 14em;
     position: relative;
     text-align: center;
     width: 100%;
@@ -343,7 +347,7 @@
 .inline-attachment-container {
   @include md-card-style;
   grid-column: 1/-1;
-  grid-row: span 2;
+  grid-row: span 12;
 
   .active-iframe-preview {
     border: 0;
@@ -351,6 +355,26 @@
     width: 100%;
   }
 
+  .image-container,
+  .general-file-container {
+    align-items: center;
+    background: $color-concrete;
+    display: flex;
+    height: calc(100% - 4em);
+    justify-content: center;
+    padding: .5em;
+    width: 100%;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+
+    .fas {
+      font-size: 10em;
+    }
+  }
+
   .header {
     align-items: center;
     display: flex;
@@ -376,3 +400,32 @@
     }
   }
 }
+
+.list-attachment-container {
+  @include md-card-style;
+  align-items: center;
+  display: flex;
+  grid-column: 1/-1;
+  padding: .5em;
+
+  .file-icon {
+    @include font-main;
+  }
+
+  .file-name {
+    @include font-main;
+    color: $brand-primary;
+    margin: 0 .5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-metadata {
+    @include font-small;
+    color: $color-silver-chalice;
+    display: grid;
+    grid-column-gap: 1em;
+    grid-template-columns: max-content max-content;
+  }
+}

app/models/asset.rb

@@ -12,7 +12,7 @@ class Asset < ApplicationRecord
   # Lock duration set to 30 minutes
   LOCK_DURATION = 60 * 30
 
-  enum view_mode: { show_as_thumbnail: 0, show_inline: 1 }
+  enum view_mode: { thumbnail: 0, inline: 1, list: 2 }
 
   # ActiveStorage configuration
   has_one_attached :file

app/views/assets/_asset.html.erb

@@ -1,5 +1,7 @@
-<% if wopi_enabled? && wopi_file?(asset) && asset.show_inline? %>
+<% if asset.inline? %>
     <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset } %>
+<% elsif asset.list? %>
+    <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset } %>
 <% else %>
     <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { edit_page: false, asset: asset } %>
 <% end %>

app/views/assets/_asset_inline.html.erb

@@ -1,4 +1,4 @@
-<div class="inline-attachment-container step-asset"
+<div class="inline-attachment-container asset"
   data-asset-id="<%= asset.id %>"
   data-asset-file-name="<%= asset.file_name %>"
   data-asset-updated-at="<%= asset.updated_at.to_i %>"
@@ -6,20 +6,45 @@
 >
   <div class="header">
     <div class="file-info">
-      <div class="file-name">
+      <%= link_to rails_blob_path(asset.file, disposition: 'attachment'),
+        class: "file-preview-link file-name",
+        id: "modal_link#{asset.id}",
+        data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %>
         <%= asset.file_name %>
-      </div>
+      <% end %>
       <div class="file-metadata">
         <span><%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %></span>
-        <span><%= number_to_human_size(asset.file_size) %></span>
+        <span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
       </div>
     </div>
-    <div class="show-as-thumbnail change-preview-type"
+    <div class="change-preview-type"
-         data-preview-type="show_as_thumbnail"
+         data-preview-type="inline"
-         data-asset-id="<%= asset.id %>" >
+         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-      <i class="fas fa-compress"></i>
+      <i class="fas fa-desktop"></i>
+    </div>
+    <div class="change-preview-type"
+         data-preview-type="list"
+         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+      <i class="fas fa-list"></i>
+    </div>
+    <div class="change-preview-type"
+         data-preview-type="thumbnail"
+         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+      <i class="fas fa-th-large"></i>
     </div>
   </div>
+  <% if wopi_enabled? && wopi_file?(asset) %>
     <div class="iframe-placeholder" data-iframe-url="<%= asset.get_action_url(current_user, 'embedview') %>"></div>
-
+  <% elsif asset.previewable? %>
+    <div class="image-container">
+      <%= image_tag asset.large_preview,
+          onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
+          onload: 'ActiveStoragePreviews.showPreview(event)',
+          style: 'opacity: 0' %>
+    </div>
+  <% else %>
+    <div class="general-file-container">
+      <i class="fas <%= file_fa_icon_class(asset) if asset.file_name %>"></i>
+    </div>
+  <% end %>
 </div>

app/views/assets/_asset_list.html.erb

@@ -0,0 +1,35 @@
+<div class="list-attachment-container asset"
+  data-asset-id="<%= asset.id %>"
+  data-asset-file-name="<%= asset.file_name %>"
+  data-asset-updated-at="<%= asset.updated_at.to_i %>"
+  data-asset-order="1"
+>
+  <div class="file-icon">
+    <i class="fas <%= file_fa_icon_class(asset) if asset.file_name %>"></i>
+  </div>
+  <%= link_to rails_blob_path(asset.file, disposition: 'attachment'),
+    class: "file-preview-link file-name",
+    id: "modal_link#{asset.id}",
+    data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %>
+    <%= asset.file_name %>
+  <% end %>
+  <div class="file-metadata">
+    <span><%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %></span>
+    <span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
+  </div>
+  <div class="change-preview-type"
+       data-preview-type="inline"
+       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+    <i class="fas fa-desktop"></i>
+  </div>
+  <div class="change-preview-type"
+       data-preview-type="list"
+       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+    <i class="fas fa-list"></i>
+  </div>
+  <div class="change-preview-type"
+       data-preview-type="thumbnail"
+       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+    <i class="fas fa-th-large"></i>
+  </div>
+</div>

app/views/assets/_asset_thumbnail.html.erb

@@ -1,20 +1,28 @@
-<div class="attachment-container step-asset"
+<div class="attachment-container asset"
   data-asset-id="<%= asset.id %>"
   data-asset-file-name="<%= asset.file_name %>"
   data-asset-updated-at="<%= asset.updated_at.to_i %>"
-  data-asset-order="1"
+  data-asset-order="2"
 >
   <%= link_to rails_blob_path(asset.file, disposition: 'attachment'),
           class: "file-preview-link",
           id: "modal_link#{asset.id}",
           data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %>
-    <% if wopi_enabled? && wopi_file?(asset) %>
+      <div class="change-preview-type"
-      <div class="show-inline change-preview-type"
+           data-preview-type="inline"
-           data-preview-type="show_inline"
+           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-           data-asset-id="<%= asset.id %>">
+        <i class="fas fa-desktop"></i>
-        <i class="fas fa-expand"></i>
+      </div>
+      <div class="change-preview-type"
+           data-preview-type="list"
+           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+        <i class="fas fa-list"></i>
+      </div>
+      <div class="change-preview-type"
+           data-preview-type="thumbnail"
+           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+        <i class="fas fa-th-large"></i>
       </div>
-    <% end %>
     <div class="attachment-preview <%= asset.file.attached? ? asset.file.metadata['asset_type'] : '' %>">
       <% if asset.previewable? %>
         <%= image_tag asset.medium_preview,

config/locales/en.yml

@@ -2266,6 +2266,7 @@ en:
       file_name_placeholder: 'Image'
     placeholder:
       modified_label: "Modified:"
+      size_label: "Size: %{size}"
     wopi_supported_text_formats_title: 'Only .docx, .docm, .odt file formats are supported for editing in Word Online.'
     wopi_supported_table_formats_title: 'Only .xlsx, .xlsm, .xlsb, .ods file formats are supported for editing in Excel Online.'
     wopi_supported_presentation_formats_title: 'Only .pptx, ppsx, .odp file formats are supported for editing in Powerpoint Online.'