Add marvin js assets to assets sort and name field

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

@@ -665,7 +665,7 @@
     $("#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));
+      elm.parent().css('order', elm.attr('data-order-' + sortType));
     })
   }
 

app/assets/javascripts/sitewide/file_preview.js

@@ -18,9 +18,13 @@ var FilePreviewModal = (function() {
     $('.file-preview-link').off('click');
     $('.file-preview-link').click(function(e) {
       e.preventDefault();
-      name = $(this).find('p').text();
+      name = $(this).find('.attachment-label').text();
       url = $(this).data('preview-url');
       downloadUrl = $(this).attr('href');
+      if ($(this).data('asset-type') === 'marvin-sketch'){
+        openMarvinPrevieModal(name,$(this).find('#description'))
+        return true
+      }
       openPreviewModal(name, url, downloadUrl);
     });
   }
@@ -421,8 +425,7 @@ var FilePreviewModal = (function() {
       dataType: 'json',
       success: function(data) {
         var link = modal.find('.file-download-link');
-        modal.find('.file-preview-container').empty();
-        modal.find('.file-wopi-controls').empty();
+        clearPrevieModal()
         if (Object.prototype.hasOwnProperty.call(data, 'wopi-controls')) {
           modal.find('.file-wopi-controls').html(data['wopi-controls']);
         }
@@ -520,6 +523,25 @@ var FilePreviewModal = (function() {
     });
   }
 
+  function clearPrevieModal(){
+    var modal = $('#filePreviewModal');
+    modal.find('.file-preview-container').empty();
+    modal.find('.file-wopi-controls').empty();
+    modal.find('.file-edit-link').css('display', 'none');
+  }
+
+  function openMarvinPrevieModal(name,src){
+    var modal = $('#filePreviewModal');
+    clearPrevieModal()
+
+    modal.modal('show')
+    modal.find('.file-preview-container')
+            .append($('<img>').attr('src', '').attr('alt', ''));
+    target=modal.find('.file-preview-container').find('img')
+    MarvinJsEditor().create_preview(src,target)
+    modal.find('.file-name').text(name);
+  }
+
   return Object.freeze({
     init: initPreviewModal
   });

app/assets/javascripts/sitewide/marvinjs_editor.js

@@ -14,25 +14,32 @@ var MarvinJsEditor = (function() {
   }
 
   function preloadActions(config) {
+    var sketchName = marvinJsModal.find('.file-name input')
     if (config.mode === 'new'){
       loadEditor().then(function(sketcherInstance) {
         sketcherInstance.importStructure("mrv",emptySketch)
+        sketchName.val(I18n.t('marvinjs.new_sketch'))
       })
     }
   }
 
   function createExporter(marvin,imageType) {
     var inputFormat = "mrv";
+    var settings = {
+      'width' : 900,
+      'height' : 900
+    };
+
     var params = {
       'imageType': imageType,
+      'settings': settings,
       'inputFormat': inputFormat
     }
     return new marvin.ImageExporter(params);
   }
 
   function assignImage(target,data){
-    console.log(data)
-    $(target).find('img').attr('src',data)
+    target.attr('src',data)
   }
 
   return Object.freeze({
@@ -77,11 +84,11 @@ var MarvinJsEditor = (function() {
       })
     },
 
-    create_preview: function(target){
+    create_preview: function(source,target){
       loadPackages().then(function (sketcherInstance) {
         sketcherInstance.onReady(function() {
           exporter = createExporter(sketcherInstance,'image/jpeg')
-          sketch_config = $(target).find('#description').val();
+          sketch_config = source.val();
           exporter.render(sketch_config).then(function(result){
             assignImage(target,result)
           });

app/assets/stylesheets/marvinjs.scss

@@ -40,6 +40,18 @@
 
     .file-name {
       float: left;
+
+      input {
+        border-radius: 5px;
+        box-shadow: none;
+        color: $color-black;
+        height: 40px;
+        outline: 0;
+        padding: 5px 10px;
+        position:relative;
+        top: -5px;
+        width: 350px;
+      }
     }
   }
 

app/helpers/my_modules_helper.rb

@@ -8,11 +8,21 @@ module MyModulesHelper
   end
 
   def ordered_assets(step)
-    step.assets.order(:file_updated_at)
+    assets=[]
+    assets += step.assets
+    assets += step.marvin_js_assets
+    assets.sort! { |a, b| 
+      a[asset_date_sort_field(a)] <=> b[asset_date_sort_field(b)] 
+    }
   end
 
   def az_ordered_assets_index(step, asset_id)
-    step.assets.order('LOWER(file_file_name)').pluck(:id).index(asset_id)
+    assets=[]
+    assets += step.assets
+    assets += step.marvin_js_assets
+    assets.sort! { |a, b| 
+      (a[asset_name_sort_field(a)] || '').downcase <=> (b[asset_name_sort_field(b)] || '').downcase
+    }.pluck(:id).index(asset_id)
   end
 
   def number_of_samples(my_module)
@@ -42,4 +52,22 @@ module MyModulesHelper
     action_name == "results"
   end
 
+  private
+
+  def asset_date_sort_field(el)
+    result = {
+      'Asset' => :file_updated_at,
+      'MarvinJsAsset' => :updated_at
+    }
+    result[el.class.name]
+  end
+
+  def asset_name_sort_field(el)
+    result = {
+      'Asset' => :file_file_name,
+      'MarvinJsAsset' => :name
+    }
+    result[el.class.name]
+  end
+
 end

app/views/assets/marvinjs/_marvin_sketch_card.html.erb

@@ -1,14 +1,15 @@
-<div class="pseudo-attachment-container">
+<div class="pseudo-attachment-container" style="order: <%= assets_count - i %>">
     <%= link_to '',
             class: 'file-preview-link',
-            id: "modal_link_sketch_#{sketch.id}",
-            style: "order: 0",
+            id: "marvin_js_sketch_#{sketch.id}",
             data: { no_turbolink: true, id: true, status: 'asset-present',
                     'preview-url': '',
-                    'order-atoz': 0,
-                    'order-ztoa': 0,
-                    'order-old': 0,
-                    'order-new': 0,
+                    'order-atoz': az_ordered_assets_index(step, sketch.id),
+                    'order-ztoa': assets_count - az_ordered_assets_index(step, sketch.id),
+                    'order-old': i,
+                    'order-new': assets_count - i,
+                    'asset-type': 'marvin-sketch',
+                    'asset-id': sketch.id
             } do %>
 
         <div class="attachment-placeholder pull-left">
@@ -16,12 +17,18 @@
               <img src>
               <%= hidden_field_tag :description, sketch.description %>
           </div>
-          <div class="attachment-label"><%= truncate('Empty name',
+          <div class="attachment-label"><%= truncate(sketch.name,
                                              length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
           <div class="spencer-bonnet-modif">
             <%= t('protocols.steps.attachments.modified_label') %> <%= l(sketch.updated_at, format: :full_date) if sketch.updated_at %>
           </div>
         </div>
     <% end %>
-    <script>MarvinJsEditor().create_preview('#modal_link_sketch_<%= sketch.id %>')</script>
+    <script>
+        (function(){
+            src=$('#marvin_js_sketch_<%= sketch.id %>').find('#description')
+            target=$('#marvin_js_sketch_<%= sketch.id %>').find('img')
+            MarvinJsEditor().create_preview(src,target)
+        })()
+    </script>
 </div>

app/views/shared/_marvinjs_modal.html.erb

@@ -9,7 +9,9 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
-        <span class="file-name"></span>
+        <span class="file-name">
+          <%= text_field_tag :sketch_name %>
+        </span>
         <p class="file-save-link"><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
       </div>
       <div class="modal-body">

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

@@ -1,8 +1,7 @@
-<div class="pseudo-attachment-container">
+<div class="pseudo-attachment-container"  style="order: <%= assets_count - i %>">
     <%= 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),

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

@@ -34,13 +34,13 @@
 
 <div class="col-xs-12 attacments" id="att-<%= step.id %>">
   <% assets.each_with_index do |asset, i| %>
-    <%= render partial: 'steps/attachments/item.html.erb',
+    <% if asset.class.name == 'Asset' %>
+      <%= render partial: 'steps/attachments/item.html.erb',
                locals: { asset: asset, i: i, assets_count: assets.count, step: step } %>
-  <% end %>
-
-  <% step.marvin_js_assets.each_with_index do |sketch, i| %>
-    <%= render partial: 'assets/marvinjs/marvin_sketch_card.html.erb',
-               locals: { sketch: sketch} %>
+    <% elsif asset.class.name == 'MarvinJsAsset' %>
+      <%= render partial: 'assets/marvinjs/marvin_sketch_card.html.erb',
+               locals: { sketch: asset, i:i, assets_count: assets.count, step: step} %>
+    <% end %>
   <% end %>
 </div>
 <hr>

config/locales/marvinjs/en.yml

@@ -0,0 +1,3 @@
+en:
+  marvinjs:
+    new_sketch: 'New sketch'

db/migrate/20190427115413_add_name_to_marvin_js_assets.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+class AddNameToMarvinJsAssets < ActiveRecord::Migration[5.1]
+  def change
+    add_column :marvin_js_assets, :name, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20190426185413) do
+ActiveRecord::Schema.define(version: 20190427115413) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -187,6 +187,7 @@ ActiveRecord::Schema.define(version: 20190426185413) do
     t.bigint "object_id"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.string "name"
     t.index ["object_type", "object_id"], name: "index_marvin_js_assets_on_object_type_and_object_id"
   end