Adding team sketches selector

app/assets/javascripts/marvinjs_editor.js

@@ -1,4 +1,4 @@
-/* global MarvinJSUtil, I18n, FilePreviewModal, tinymce, TinyMCE */
+/* global MarvinJSUtil, I18n, FilePreviewModal, tinymce, TinyMCE PerfectScrollbar */
 /* eslint-disable no-param-reassign */
 /* eslint-disable wrap-iife */
 
@@ -69,10 +69,11 @@ var MarvinJsEditor = (function() {
 
   return Object.freeze({
     open: function(config) {
+      MarvinJsEditor().team_sketches();
       preloadActions(config);
       $(marvinJsModal).modal('show');
       $(marvinJsObject)
-        .css('width', marvinJsContainer.width() + 'px')
+        .css('width', (marvinJsContainer.width() - 200) + 'px')
         .css('height', marvinJsContainer.height() + 'px');
       marvinJsModal.find('.file-save-link').off('click').on('click', () => {
         if (config.mode === 'new') {
@@ -244,6 +245,28 @@ var MarvinJsEditor = (function() {
           $(object).remove();
         }
       });
+    },
+
+    team_sketches: function() {
+      var ps = new PerfectScrollbar(marvinJsContainer.find('.marvinjs-team-sketch')[0]);
+      marvinJsContainer.find('.sketch-container').remove();
+      $.get('/marvin_js_assets/team_sketches', function(result) {
+        $(result.html).appendTo(marvinJsContainer.find('.marvinjs-team-sketch'));
+
+        $.each(result.sketches, function(i, sketch) {
+          var sketchObj = marvinJsContainer.find('.marvinjs-team-sketch .sketch-container[data-sketch-id="' + sketch + '"]');
+          var src = sketchObj.find('#description');
+          var dest = sketchObj.find('img');
+          MarvinJsEditor().create_preview(src, dest);
+          setTimeout(() => { ps.update(); }, 500);
+          marvinJsContainer.find('.sketch-container').click(function() {
+            var sketchContainer = $(this);
+            loadEditor().then(function(sketcherInstance) {
+              sketcherInstance.importStructure('mrv', sketchContainer.find('#description').val());
+            });
+          });
+        });
+      });
     }
   });
 });

app/assets/stylesheets/marvinjs.scss

@@ -71,10 +71,66 @@
       width: 100%;
 
       #marvinjs-sketch {
+        border-right: 1px solid $color-gainsboro;
+        float: left;
         min-height: 450px;
         min-width: 500px;
         overflow: hidden;
       }
+
+      .marvinjs-team-sketch {
+        background: $color-white;
+        float: right;
+        height: calc(100% - 40px);
+        overflow-y: scroll;
+        position: relative;
+        width: 200px;
+      }
+
+      .marvinjs-team-sketch-header {
+        background: $color-white;
+        border-bottom: 1px solid $color-gainsboro;
+        color: $color-emperor;
+        float: right;
+        font-size: 16px;
+        height: 40px;
+        line-height: 39px;
+        text-align: center;
+        width: 200px;
+      }
+
+    }
+
+    .sketch-container {
+      @include md-card-style;
+      cursor: pointer;
+      margin: 10px;
+      overflow: hidden;
+      padding: 10px;
+      position: relative;
+
+      .sketch-image {
+        height: 100%;
+        width: 100%;
+      }
+
+      .sketch-name {
+        color: $brand-primary;
+        font-family: Lato;
+        font-size: 16px;
+        line-height: 18px;
+        margin: 10px auto;
+        overflow: hidden;
+        text-align: center;
+        width: 160px;
+      }
+
+      .sketch-object {
+        color: $color-emperor;
+        font-size: 12px;
+        opacity: .6;
+        text-align: center;
+      }
     }
   }
 

app/controllers/marvin_js_assets_controller.rb

@@ -39,6 +39,19 @@ class MarvinJsAssetsController < ApplicationController
     render json: MarvinJsAsset.update_sketch(marvin_params)
   end
 
+  def team_sketches
+    result = ''
+    sketches = current_team.marvin_js_assets.where.not(object_type: 'TinyMceAsset')
+    sketches.each do |sketch|
+      result += render_to_string(
+        partial: 'shared/marvinjs_modal_sketch.html.erb',
+           locals: { sketch: sketch }
+      )
+    end
+
+    render json: { html: result, sketches: sketches.pluck(:id) }
+  end
+
   private
 
   def marvin_params

app/models/team.rb

@@ -39,6 +39,7 @@ class Team < ApplicationRecord
   has_many :repositories, dependent: :destroy
   has_many :reports, inverse_of: :team, dependent: :destroy
   has_many :activities, inverse_of: :team, dependent: :destroy
+  has_many :marvin_js_assets, inverse_of: :team, dependent: :destroy
 
   attr_accessor :without_templates
   attr_accessor :without_intro_demo

app/views/shared/_marvinjs_modal.html.erb

@@ -16,8 +16,9 @@
       </div>
       <div class="modal-body">
         <div id="marvinjs-editor">
-          <iframe id="marvinjs-sketch" src="<%= MarvinJsAsset.url %>" 
-  style="overflow: hidden; min-width: 500px; min-height: 450px"  ></iframe>
+          <iframe id="marvinjs-sketch" src="<%= MarvinJsAsset.url %>" frameBorder="0"></iframe>
+          <div class="marvinjs-team-sketch-header"><%= t('marvinjs.team_drawings') %></div>
+          <div class="marvinjs-team-sketch"></div>
         </div>
       </div>
     </div>

app/views/shared/_marvinjs_modal_sketch.html.erb

@@ -0,0 +1,9 @@
+<div class="sketch-container" data-sketch-id="<%= sketch.id %>" >
+  <img src class="sketch-image">
+  <%= hidden_field_tag :description, sketch.description %>
+  <div class="sketch-name"><%= truncate(sketch.name, length: Constants::FILENAME_TRUNCATION_LENGTH) %></div>
+  <div class="sketch-object">
+    <%= t('marvinjs.task') %>: <%= truncate(sketch.object.protocol.my_module.name,
+      length: Constants::FILENAME_TRUNCATION_LENGTH) %>
+  </div>
+</div>

config/locales/en.yml

@@ -2145,4 +2145,6 @@ en:
   marvinjs:
     new_sketch: "New sketch"
     new_button: "New chemical drawing"
-    checmical_drawing: "Chemical drawings"
+    checmical_drawing: "Chemical drawings"
+    team_drawings: Team drawings
+    task:  Task

config/routes.rb

@@ -676,7 +676,11 @@ Rails.application.routes.draw do
     end
   end
 
-  resources :marvin_js_assets, only: %i(create update destroy show)
+  resources :marvin_js_assets, only: %i(create update destroy show) do
+    collection do
+      get :team_sketches
+    end
+  end
 
   post 'global_activities', to: 'global_activities#index'