Commit add asset preview mode switcher to step

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

@@ -325,29 +325,15 @@
     });
   }
 
-  function initPreviewToggle(){
-    $('.attachments').on('click', '.change-preview-type', function (e) {
-      var viewMode = $(this).data('preview-type');
-      var toggleUrl = $(this).data('toggle-view-url');
-      var assetId = $(this).closest('.asset').data('asset-id');
-      e.preventDefault();
-      e.stopPropagation();
-      $.ajax({
-        url: toggleUrl,
-        type: "PATCH",
-        dataType: "json",
-        data: { asset: { view_mode: viewMode }},
-        success: function (data) {
-          $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html);
-          FilePreviewModal.init();
-          $(`.asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder');
-
-        },
-        error: function (data) {
-          console.log(data);
-        }
-      });
-    });
+  function initAssetViewModeToggle(){
+    $('.attachments-actions').on('click', '.attachments-view-mode', function () {
+      var viewModeBtn = $(this);
+      $.post(viewModeBtn.data('url'), {
+        assets_view_mode: viewModeBtn.data('assets-view-mode')
+      }, function(result) {
+        viewModeBtn.closest('.step').find('.attachments').html(result.html)
+      })
+    })
   }
 
   function initCallBacks() {
@@ -358,8 +344,8 @@
     applyMoveStepCallBack();
     initDeleteStep();
     TinyMCE.highlight();
-    initPreviewToggle();
     reorderAttachmentsInit();
+    initAssetViewModeToggle();
   }
 
   /*
@@ -680,6 +666,9 @@
         element.style.order = i
       })
     })
+    .on('DOMSubtreeModified', function() {
+      $(this).trigger('reorder');
+    })
     $('.attachments').trigger('reorder');
   }
 

app/assets/javascripts/sitewide/assets.js

@@ -0,0 +1,17 @@
+
+$(document).on('click', '.asset .change-preview-type', function(e) {
+  var viewMode = $(this).data('preview-type');
+  var toggleUrl = $(this).data('toggle-view-url');
+  var assetId = $(this).closest('.asset').data('asset-id');
+  e.preventDefault();
+  e.stopPropagation();
+  $.ajax({
+    url: toggleUrl,
+    type: 'PATCH',
+    dataType: 'json',
+    data: { asset: { view_mode: viewMode } },
+    success: function(data) {
+      $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html);
+    }
+  });
+});

app/assets/javascripts/sitewide/drag_n_drop.js

@@ -324,7 +324,7 @@
     function listItems() {
       totalSize = 0;
       enableSubmitButton();
-      $('.attachment-placeholder.new').remove();
+      $('.attachment-container.new').remove();
       dragNdropAssetsOff();
 
       for (let i = 0; i < droppedFiles.length; i += 1) {

app/controllers/assets_controller.rb

@@ -18,7 +18,7 @@ class AssetsController < ApplicationController
 
   before_action :load_vars, except: :create_wopi_file
   before_action :check_read_permission, except: :edit
-  before_action :check_edit_permission, only: %i(edit toggle_view_mode)
+  before_action :check_edit_permission, only: :edit
 
   def file_preview
     render json: { html: render_to_string(

app/controllers/steps_controller.rb

@@ -5,11 +5,11 @@ class StepsController < ApplicationController
   include MarvinJsActions
 
   before_action :load_vars, only: %i(edit update destroy show toggle_step_state checklistitem_state update_view_state
-                                     move_up move_down)
+                                     move_up move_down update_asset_view_mode)
   before_action :load_vars_nested, only:  %i(new create)
   before_action :convert_table_contents_to_utf8, only: %i(create update)
 
-  before_action :check_view_permissions, only: %i(show update_view_state)
+  before_action :check_view_permissions, only: %i(show update_view_state update_asset_view_mode)
   before_action :check_manage_permissions, only: %i(new create edit update destroy move_up move_down toggle_step_state)
   before_action :check_complete_and_checkbox_permissions, only: %i(toggle_step_state checklistitem_state)
 
@@ -145,7 +145,12 @@ class StepsController < ApplicationController
       step_params_all[:assets_attributes]&.each do |key, value|
         next unless value[:signed_blob_id]
 
-        new_asset = @step.assets.create!(created_by: current_user, last_modified_by: current_user, team: current_team)
+        new_asset = @step.assets.create!(
+          created_by: current_user,
+          last_modified_by: current_user,
+          team: current_team,
+          view_mode: @step.assets_view_mode
+        )
         new_asset.file
                  .attach(value[:signed_blob_id])
         new_assets.push(new_asset.id)
@@ -218,6 +223,23 @@ class StepsController < ApplicationController
     end
   end
 
+  def update_asset_view_mode
+    html = ''
+    ActiveRecord::Base.transaction do
+      @step.assets_view_mode = params[:assets_view_mode]
+      @step.save!(touch: false)
+      @step.assets.each do |asset|
+        asset.view_mode = @step.assets_view_mode
+        asset.save!(touch: false)
+        html += render_to_string(partial: 'assets/asset.html.erb', locals: { asset: asset })
+      end
+    end
+    render json: { html: html }, status: :ok
+  rescue StandardError => e
+    Rails.logger.error(e.message)
+    render json: {}, status: :unprocessable_entity
+  end
+
   def destroy
     if @step.can_destroy?
 

app/models/step.rb

@@ -4,6 +4,8 @@ class Step < ApplicationRecord
   include TinyMceImages
   include ViewableModel
 
+  enum assets_view_mode: { thumbnail: 0, inline: 1, list: 2 }
+
   auto_strip_attributes :name, :description, nullify: false
   validates :name,
             presence: true,

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

@@ -35,6 +35,10 @@
           <% end %>
         </ul>
       </div>
+
+      <i class="fas fa-desktop attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="inline"></i>
+      <i class="fas fa-list attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="list"></i>
+      <i class="fas fa-th-large attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="thumbnail"></i>
     </div>
   </div>
 </div>

config/routes.rb

@@ -421,6 +421,7 @@ Rails.application.routes.draw do
         put 'move_down'
         put 'move_up'
         post 'update_view_state'
+        post 'update_asset_view_mode'
       end
     end
 

db/migrate/20201027133634_add_assets_view_mode_to_step.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddAssetsViewModeToStep < ActiveRecord::Migration[6.0]
+  def change
+    add_column :steps, :assets_view_mode, :integer, default: 0, null: false
+  end
+end

db/structure.sql

@@ -2316,7 +2316,8 @@ CREATE TABLE public.steps (
     created_at timestamp without time zone NOT NULL,
     updated_at timestamp without time zone NOT NULL,
     last_modified_by_id bigint,
-    protocol_id bigint NOT NULL
+    protocol_id bigint NOT NULL,
+    assets_view_mode integer DEFAULT 0 NOT NULL
 );
 
 
@@ -7639,6 +7640,7 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('20200714082503'),
 ('20200826143431'),
 ('20200902093234'),
-('20200909121441');
+('20200909121441'),
+('20201027133634');