Update attachments view, add ordering on FE

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

@@ -671,6 +671,16 @@
     Comments.initDeleteComments("#steps");
   }
 
+  // Reorder attachments
+  global.reorderAttachments = function reorderAtt(stepId, sortType) {
+    var label_value = $("#dd-att-step-" + stepId + "> .dropdown-menu > li > a[data-order=" + sortType + "]").html();
+    $("#dd-att-step-" + stepId + "-label").html(label_value);
+    $('#att-' + stepId + ' a.file-preview-link').each(function(){
+      var elm = $(this)
+      elm.css('order', elm.attr('data-order-' + sortType));
+    })
+  }
+
     // On init
   initCallBacks();
   initHandsOnTable($(document));

app/assets/stylesheets/steps.scss

@@ -83,4 +83,95 @@
   }
 }
 
+.attacments{
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.attachment-placeholder {
+  height: 277px;
+  width: 216px;
+  border-radius: 5px;
+  background-color: $color-white;
+  margin: 3px;
+  color: $color-silver-chalice;
+
+  a {
+    color: inherit;
+  }
+
+  &:hover{
+    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.18);
+  }
+
+  .attachment-thumbnail {
+    height: 160px;;
+    width: 113px;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
+    margin: 16px auto 5px auto;
+    text-align: center;
+    overflow: hidden;
+
+    img {
+      max-height: 100%;
+    }
+
+     i.fas{
+      font-size: 100px;
+      line-height: 160px;
+    }
+  }
+
+  .no-shadow {
+    box-shadow: 0 0 0 0 rgba(0,0,0,0.15);
+  }
+
+  .attachment-label {
+    height: 39px;
+    width: 190px;
+    color: #40A1D7;
+    font-family: Lato;
+    font-size: 16px;
+    line-height: 18px;
+    text-align: center;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .spencer-bonnet-modif {
+    height: 45px;
+    width: 149px;
+    color: $color-silver-chalice;
+    font-family: Lato;
+    font-size: 12px;
+    line-height: 15px;
+    text-align: center;
+    margin: 0 auto;
+  }
+}
+
+.attachments-order{
+  display: inline-block;
+}
+
+.attachments-actions{
+  color: $color-silver-chalice;
+
+  .drag_n_drop_label{
+    font-size: 14px;
+    line-height: 32px;
+  }
+
+  .btn-default{
+    border: 0;
+    margin-left: 10px;
+    color: inherit;
+
+    &:hover{
+      background: inherit;
+    }
+  }
+}
+
+
 

app/helpers/my_modules_helper.rb

@@ -11,6 +11,10 @@ module MyModulesHelper
     step.assets.order(:file_updated_at)
   end
 
+  def az_ordered_assets_index(step, asset_id)
+    step.assets.order('LOWER(file_file_name)').pluck(:id).index(asset_id)
+  end
+
   def number_of_samples(my_module)
     my_module.samples.count
   end

app/views/assets/wopi/_create_wopi_file_button.html.erb

@@ -1,11 +1,11 @@
-<%= link_to create_wopi_file_path,
+ <%= link_to create_wopi_file_path,
              class: 'btn btn-default create-wopi-file-btn',
              target: '_blank',
               title: 'Create_new_file',
-    data: {
+              data: { 'id': element_id, 'type': element_type, } do %>
-        'id': element_id,
+
-        'type': element_type,
+   <span class="btn btn-default new-asset-upload-button">
-        } do %>
+    <span class="fas fa-file-medical new-asset-upload-icon"></span>
-        <%= image_tag 'office/office-online-logo.svg' %>
+      <%=t 'assets.create_wopi_file.button_text' %>
-        <%= t('assets.create_wopi_file.button_text') %>
+   </span>
-<% end %>
+  <% end %>

app/views/steps/_step.html.erb

@@ -26,8 +26,6 @@
 
         <% if can_manage_protocol_in_module?(@protocol) ||
               can_manage_protocol_in_repository?(@protocol) %>
-          <%= render partial: "/assets/wopi/create_wopi_file_button.html.erb",
-                     locals: {  element_id: step.id, element_type: 'Step' } %>
           <a data-action="move-step"
              class="btn btn-link"
              href="<%= move_up_step_path(step, format: :json) %>"
@@ -39,7 +37,7 @@
              href="<%= move_down_step_path(step, format: :json) %>"
              title="<%= t("protocols.steps.options.down_arrow_title") %>"
              data-remote="true">
-            <span class="fas fa-arrow-down"></a>
+            <span class="fas fa-arrow-down"></span></a>
           <a data-action="edit-step"
              class="btn btn-link help_tooltips"
              title="<%= t("protocols.steps.options.edit_title") %>"
@@ -47,11 +45,11 @@
              data-remote="true"
              data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_edit') %>"
              data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_edit') %>" >
-            <span class="fas fa-pencil-alt">
+            <span class="fas fa-pencil-alt"></span>
           </a>
           <%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link",
             data: {action: "delete-step", confirm: t("protocols.steps.destroy.confirm", step: step.name)}) do %>
-            <span class="fas fa-trash-alt">
+            <span class="fas fa-trash-alt"></span>
           <% end %>
         <% end %>
       </div>
@@ -112,19 +110,26 @@
             </div>
           <% end %>
 
-          <% assets = ordered_assets(step) %>
+
-          <% unless assets.blank? then %>
+
-            <div class="col-xs-12">
+
-              <strong><%= t("protocols.steps.files") %></strong>
+          <%# assets = ordered_assets(step) %>
-              <ul>
+          <%# unless assets.blank? then %>
-                <% assets.each do |asset| %>
+<!--            <div class="col-xs-12">-->
-                  <li>
+<!--              <strong><%#= t("protocols.steps.files", count: assets.count) %></strong>-->
-                    <%= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
+<!--              <ul>-->
-                  </li>
+                <%# assets.each do |asset| %>
-                <% end %>
+<!--                  <li>-->
-              </ul>
+                    <%#= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
-            </div>
+<!--                  </li>-->
-          <% end %>
+                <%# end %>
+<!--              </ul>-->
+<!--            </div>-->
+          <%# end %>
+
+          <%= render partial: 'steps/attachments/list',
+                     locals: {  step: step } %>
+
 
           <% unless step.checklists.blank? then %>
             <div class="col-xs-12">

app/views/steps/attachments/_item.html.erb

@@ -0,0 +1,31 @@
+<% image_preview = asset.is_image? ? asset.url(:medium) : nil %>
+
+<%= link_to download_asset_path(asset),
+            class: 'file-preview-link',
+            id: "modal_link#{asset.id}",
+            style: "order: #{ assets_count - i }",
+            data: { no_turbolink: true, id: true, status: 'asset-present',
+                    'preview-url': asset_file_preview_path(asset),
+                    'order-atoz': az_ordered_assets_index(step, asset.id),
+                    'order-ztoa': assets_count - az_ordered_assets_index(step, asset.id),
+                    'order-old': i,
+                    'order-new': assets_count - i,
+            } do %>
+
+
+  <div class="attachment-placeholder pull-left">
+    <div class="attachment-thumbnail <%= image_preview ? '' : 'no-shadow' %> %>">
+      <% if image_preview %>
+        <%= image_tag image_preview %>
+      <% else %>
+        <i class="fas fa-image"></i>
+      <% end %>
+    </div>
+    <div class="attachment-label"><%= truncate(asset.file_file_name,
+                                               length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
+    <div class="spencer-bonnet-modif">
+      Modified: <%= l(asset.updated_at, format: :full_date) %>  <br>
+      <%= number_to_human_size(asset.file.size) %>
+    </div>
+  </div>
+<% end %>

app/views/steps/attachments/_list.html.erb

@@ -0,0 +1,48 @@
+<% assets = ordered_assets step %>
+<hr>
+<div class="col-xs-12">
+  <h4>
+    <%= t("protocols.steps.files", count: assets.count) %>
+  </h4>
+</div>
+<div class="col-xs-12 attachments-actions">
+  <div class="col-md-4 drag_n_drop_label">
+    <%#=t 'assets.drag_n_drop.label_html' %>
+  </div>
+  <div class="col-md-8">
+    <div class="attachemnts-header pull-right">
+      <%= render partial: "/assets/wopi/create_wopi_file_button.html.erb",
+                 locals: {  element_id: step.id, element_type: 'Step' } %>
+
+<!--      <span class="btn btn-default new-asset-upload-button">-->
+<!--        <span class="fas fa-file-upload new-asset-upload-icon"></span>-->
+        <%#=t 'assets.drag_n_drop.browse_label' %>
+<!--      </span>-->
+
+      <div class="dropdown attachments-order" id="dd-att-step-<%= step.id %>">
+        <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span id="dd-att-step-<%= step.id %>-label"><%= t('protocols.steps.attachments.sort_new').html_safe %></span>
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="sortMenu">
+          <% ["new", "old", "atoz", "ztoa"].each do |sort| %>
+            <li>
+              <a data-order="<%= sort %>" onClick="reorderAttachments('<%= step.id %>', '<%= sort %>')">
+                <%= t('protocols.steps.attachments.sort_' + sort ).html_safe %></a>
+            </li>
+            <%#= t('protocols.steps.attachments.sorting.new') %>
+          <% end %>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="col-xs-12 attacments" id="att-<%= step.id %>">
+  <% assets.each_with_index do |asset, i| %>
+    <%= render partial: 'steps/attachments/item',
+               locals: { asset: asset, i: i, assets_count: assets.count, step: step } %>
+  <% end %>
+</div>
+<hr>

config/locales/en.yml

@@ -1734,7 +1734,7 @@ en:
       comments_tab: "Comments"
       no_description: "This step has no description."
       tables: "Tables"
-      files: "Files"
+      files: "Attachments (%{count})"
       empty_checklist: "No items"
       comment_title: "%{user} at %{time}:"
       options:
@@ -1748,6 +1748,11 @@ en:
         duplicate_title: "Duplicate step"
         complete_title: "Complete Step"
         uncomplete_title: "Uncomplete Step"
+      attachments:
+        sort_new: "Newest first ↓"
+        sort_old: "Oldest first ↑"
+        sort_atoz: "Name ↓"
+        sort_ztoa: "Name ↑"
       new:
         add_step_title: "Add new step"
         tab_checklists: "Checklists"