Add delete feature

app/assets/javascripts/sitewide/marvinjs_editor.js

@@ -4,6 +4,7 @@ var MarvinJsEditor = (function() {
   var marvinJsContainer = $('#marvinjs-editor');
   var marvinJsObject = $('#marvinjs-sketch');
   var emptySketch = "<cml><MDocument></MDocument></cml>"
+  var sketchName = marvinJsModal.find('.file-name input')
 
   var loadEditor = () => {
     return MarvinJSUtil.getEditor('#marvinjs-sketch')
@@ -14,7 +15,6 @@ 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)
@@ -75,7 +75,8 @@ var MarvinJsEditor = (function() {
           $.post(config.marvinUrl,{
             description: source,
             object_id: config.objectId,
-            object_type: config.objectType
+            object_type: config.objectType,
+            name: sketchName.val()
           }, function(result){
             console.log(result)
             $(marvinJsModal).modal('hide');
@@ -94,6 +95,17 @@ var MarvinJsEditor = (function() {
           });
         });
       });
+    },
+
+    delete_sketch: function(url,object){
+      $.ajax({
+        url: url,
+        dataType: 'json',
+        type: 'DELETE',
+        success: function(json) {
+          $(object).remove()
+        }
+      });
     }
   });
 });

app/assets/stylesheets/marvinjs.scss

@@ -81,3 +81,10 @@
     margin-right: 20px;
   }
 }
+
+#new-step-sketch{
+  .sketch-container {
+    width: 100%; 
+    float:left;
+  }
+}

app/assets/stylesheets/steps.scss

@@ -167,6 +167,7 @@
 
   .remove-icon {
     bottom: 15px;
+    cursor: pointer;
     position: relative;
     right: 10px;
   }

app/controllers/marvin_js_assets_controller.rb

@@ -6,10 +6,16 @@ class MarvinJsAssetsController < ApplicationController
     render json: new_asset
   end
 
+  def destroy
+    sketch=MarvinJsAsset.find(params[:id])
+    sketch.destroy
+    render json: sketch
+  end
+
   private
 
   def marvin_params
-    params.permit(:description, :object_id, :object_type)
+    params.permit(:description, :object_id, :object_type, :name)
   end
 
 end

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

@@ -5,5 +5,5 @@
   data-marvin-url="<%= marvin_js_assets_path %>"
 >
   <span class="fas fa-file-invoice new-marvinjs-upload-icon"></span>
-  New chemical drawing
+  <%= t('marvinjs.new_button') %>
 </span>

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

@@ -11,24 +11,7 @@
                     'asset-type': 'marvin-sketch',
                     'asset-id': sketch.id
             } do %>
-
+        <%= render partial: 'assets/marvinjs/marvin_sketch_card_placeholder.html.erb',
-        <div class="attachment-placeholder pull-left">
+             locals: { edit_page: false, sketch: sketch } %>
-          <div class="attachment-thumbnail">
-              <img src>
-              <%= hidden_field_tag :description, sketch.description %>
-          </div>
-          <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>
-        (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/assets/marvinjs/_marvin_sketch_card_placeholder.html.erb

@@ -0,0 +1,32 @@
+        <div class="attachment-placeholder pull-left" data-marvinjs-sketch="<%= sketch.id %>">
+          <div class="attachment-thumbnail">
+              <img src>
+              <%= hidden_field_tag :description, sketch.description %>
+          </div>
+          <script>
+            (function(){
+                src=$('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('#description')
+                target=$('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('img')
+                MarvinJsEditor().create_preview(src,target)
+            })()
+          </script>
+          <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>
+          <% if edit_page %>
+            <div class="remove-icon pull-right">
+              <span class="fas fa-trash"></span>
+            </div>
+            <script>
+              $('.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]').find('.remove-icon')
+                .click(function() {
+                  MarvinJsEditor().delete_sketch(
+                    '<%= marvin_js_asset_path(sketch.id) %>',
+                    '.attachment-placeholder[data-marvinjs-sketch="<%= sketch.id %>"]'
+                  )
+                })
+            </script>
+          <% end %>
+        </div>

app/views/steps/_empty_step.html.erb

@@ -24,6 +24,12 @@
       <%= t("protocols.steps.new.tab_tables") %>
     </a>
   </li>
+  <li role="presentation" id="new-step-sketch-tab">
+    <a href="#new-step-sketch" data-toggle="tab" data-no-turbolink="true">
+      <span class="fas fa-file-invoice"></span>
+      <%= t('marvinjs.checmical_drawing') %>
+    </a>
+  </li>
 </ul>
 <div class="tab-content">
   <div class="tab-pane active" role="tabpanel" id="new-step-main">
@@ -84,4 +90,12 @@
       <%= t("protocols.steps.new.add_table") %>
     <% end %>
   </div>
+  <div class="tab-pane" role="tabpanel" id="new-step-sketch">
+    <div class="sketch-container">
+      <% @step.marvin_js_assets.each do |sketch| %>
+            <%= render partial: 'assets/marvinjs/marvin_sketch_card_placeholder.html.erb',
+               locals: { sketch: sketch, edit_page: true} %>
+      <% end %>
     </div>
+  </div>
+</div>

config/locales/en.yml

@@ -2142,3 +2142,7 @@ en:
         new: "https://support.scinote.net/hc/en-us/articles/360004627792"
         visibility: "https://support.scinote.net/hc/en-us/articles/360004627472"
         manage_columns: "https://support.scinote.net/hc/en-us/articles/360004695831"
+  marvinjs:
+    new_sketch: "New sketch"
+    new_button: "New chemical drawing"
+    checmical_drawing: "Chemical drawings"

config/locales/marvinjs/en.yml

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