Add main functionality to view/edit screen [SCI-7041]

app/assets/javascripts/label_templates/label_templates_datatable.js

@@ -47,11 +47,9 @@
     });
   }
 
-  function initEditButton() {
-    $('#editLabelTemplate').on('click', function() {
-      if (rowsSelected.length === 1) {
-        window.open(editUrl, '_blank');
-      }
+  function initCreateButton() {
+    $('#newLabelTemplate').on('click', function() {
+      $.post(this.dataset.url);
     });
   }
 
@@ -253,7 +251,7 @@
 
         let toolBar = $($('#labelTemplatesToolbar').html());
         $('.label-buttons-container').html(toolBar);
-        initEditButton();
+        initCreateButton();
         initSetDefaultButton();
         initDuplicateButton();
         initDeleteModal();

app/assets/stylesheets/label_templates/show.scss

@@ -21,10 +21,69 @@
 
   .template-descripiton {
     @include font-button;
-    margin-top: 1em;
+    margin: 1em 0;
 
     .title {
       font-weight: bold;
     }
   }
+
+  .label-template-container {
+    display: flex;
+
+    .title {
+      font-weight: bold;
+    }
+
+    .label-edit-container {
+      flex-basis: 60%;
+      padding-right: 1em;
+
+      .button-container {
+        display: flex;
+
+        .refresh-preview {
+          margin-right: auto;
+        }
+
+        .save-template {
+          margin-left: .25em;
+        }
+      }
+    }
+
+    .label-preview-container {
+      flex-basis: 40%;
+      padding-left: 1em;
+    }
+  }
+
+  .label-view-container {
+    cursor: pointer;
+    padding: .5em;
+    position: relative;
+    white-space: pre;
+
+    .fa-pen {
+      display: none;
+      padding: 1em;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      background-color: $color-concrete;
+
+      .fa-pen {
+        display: inline-block;
+      }
+    }
+  }
+
+  .label-textarea {
+    min-height: 240px;
+    padding: .5em;
+    width: 100%;
+  }
 }

app/controllers/label_templates_controller.rb

@@ -4,7 +4,7 @@ class LabelTemplatesController < ApplicationController
   include InputSanitizeHelper
 
   before_action :check_view_permissions, only: %i(index datatable)
-  before_action :check_manage_permissions, only: %i(duplicate set_default delete update)
+  before_action :check_manage_permissions, only: %i(create duplicate set_default delete update)
   before_action :load_label_templates, only: %i(index datatable)
   before_action :load_label_template, only: %i(show set_default update)
 
@@ -31,6 +31,19 @@ class LabelTemplatesController < ApplicationController
     end
   end
 
+  def create
+    label_template = LabelTemplate.create!(
+      team_id: current_team.id,
+      name: I18n.t('label_templates.new_label_template'),
+      language_type: :zpl,
+      format: 'ZPL',
+      size: '1" x 0.5" / 25.4mm x 12.7mm',
+      content: Extends::DEFAULT_LABEL_TEMPLATE[:zpl]
+    )
+
+    redirect_to label_template_path(label_template, new_label: true)
+  end
+
   def update
     if @label_template.update(label_template_params)
       render json: @label_template, serializer: LabelTemplateSerializer, user: current_user

app/javascript/packs/vue/label_template.js

@@ -1,5 +1,3 @@
-/* global I18n */
-
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue/dist/vue.esm';
 import LabelTemplateContainer from '../../vue/label_template/container.vue';
@@ -17,7 +15,8 @@ window.initLabelTemplateComponent = () => {
     data() {
       return {
         labelTemplateUrl: $('#labelTemplateContainer').data('label-template-url'),
-        labelTemplatesUrl: $('#labelTemplateContainer').data('label-templates-url')
+        labelTemplatesUrl: $('#labelTemplateContainer').data('label-templates-url'),
+        newLabel: $('#labelTemplateContainer').data('new-label')
       };
     }
   });

app/javascript/vue/label_template/container.vue

@@ -3,7 +3,9 @@
   <div class="content-header">
     <div id="breadcrumbsWrapper">
       <div class="breadcrumbs-container">
-        <a :href="labelTemplatesUrl" class="breadcrumbs-link">Label templates</a>
+        <a :href="labelTemplatesUrl" class="breadcrumbs-link">
+          {{ i18n.t('label_templates.show.breadcrumb_index') }}
+        </a>
         <span class="delimiter">/</span>
       </div>
     </div>
@@ -13,8 +15,9 @@
         :value="labelTemplate.attributes.name"
         :characterLimit="255"
         :allowBlank="false"
-        :attributeName="`Label template name`"
+        :attributeName="i18n.t('label_templates.show.name_error_prefix')"
         :autofocus="editingName"
+        :editOnload="newLabel"
         @editingEnabled="editingName = true"
         @editingDisabled="editingName = false"
         @update="updateName"
@@ -24,20 +27,60 @@
   <div id="content-label-templates-show">
     <div v-if="labelTemplate.id" class="template-descripiton">
       <div class="title">
-        Template description
+        {{ i18n.t('label_templates.show.description_title') }}
       </div>
       <InlineEdit
         :value="labelTemplate.attributes.description"
         :characterLimit="255"
         :allowBlank="true"
-        :attributeName="`Label template description`"
-        :placeholder="`Enter the template description (optional)`"
+        :attributeName="i18n.t('label_templates.show.description_error_prefix')"
+        :placeholder="i18n.t('label_templates.show.description_placeholder')"
         :autofocus="editingDescription"
         @editingEnabled="editingDescription = true"
         @editingDisabled="editingDescription = false"
         @update="updateDescription"
       />
     </div>
+
+    <div v-if="labelTemplate.id" class="label-template-container">
+      <div class="label-edit-container">
+        <div class="title">
+          {{ i18n.t('label_templates.show.content_title', { format: labelTemplate.attributes.language_type.toUpperCase() }) }}
+        </div>
+        <template v-if="editingContent">
+          <div class="label-textarea-container">
+            <textarea
+              ref="contentInput"
+              v-model="newContent"
+              class="label-textarea"
+              @blur="updateContent"
+            ></textarea>
+          </div>
+          <div class="button-container">
+            <div class="btn btn-secondary refresh-preview">
+              <i class="fas fa-sync"></i>
+              {{ i18n.t('label_templates.show.buttons.refresh') }}
+            </div>
+            <div class="btn btn-secondary" @click="editingContent = false">
+              {{ i18n.t('general.cancel') }}
+            </div>
+            <div class="btn btn-primary save-template" @click="updateContent">
+              <i class="fas fa-save"></i>
+              {{ i18n.t('label_templates.show.buttons.save') }}
+            </div>
+          </div>
+        </template>
+        <div v-else class="label-view-container" :title="i18n.t('label_templates.show.view_content_tooltip')" @click="editingContent = true">{{ labelTemplate.attributes.content}}
+          <i class="fas fa-pen"></i>
+        </div>
+      </div>
+
+      <div class="label-preview-container">
+        <div class="title">
+          {{ i18n.t('label_templates.show.preview_title') }}
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 </template>
@@ -50,7 +93,8 @@
     name: 'LabelTemplateContainer',
     props: {
       labelTemplateUrl: String,
-      labelTemplatesUrl: String
+      labelTemplatesUrl: String,
+      newLabel: Boolean
     },
     data() {
       return {
@@ -58,13 +102,17 @@
           attributes: {}
         },
         editingName: false,
-        editingDescription: false
+        editingDescription: false,
+        editingContent: false,
+        newContent: ''
       }
     },
     components: {InlineEdit},
     created() {
+      console.log(this.newLabel)
       $.get(this.labelTemplateUrl, (result) => {
         this.labelTemplate = result.data
+        this.newContent = this.labelTemplate.attributes.content
       })
     },
     methods: {
@@ -88,6 +136,17 @@
           }
         });
       },
+      updateContent() {
+        $.ajax({
+          url: this.labelTemplate.attributes.urls.update,
+          type: 'PATCH',
+          data: {label_template: {content: this.newContent}},
+          success: (result) => {
+            this.labelTemplate.attributes.content = result.data.attributes.content
+            this.editingContent = false
+          }
+        });
+      },
     }
   }
  </script>

app/serializers/label_template_serializer.rb

@@ -3,7 +3,7 @@
 class LabelTemplateSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
-  attributes :name, :description, :language_type, :icon_url, :urls
+  attributes :name, :description, :language_type, :icon_url, :urls, :content
 
   def urls
     {

app/views/label_templates/_index_toolbar.html.erb

@@ -1,14 +1,10 @@
 <template id="labelTemplatesToolbar">
   <% if can_manage_label_templates?(current_team) %>
-  <a href="" title="<%= t('label_templates.index.toolbar.new') %>"
-     class="btn btn-primary  auto-shrink-button" id="newLabelTemplate" target="_blank">
+  <button data-url="<%= label_templates_path %>" title="<%= t('label_templates.index.toolbar.new') %>"
+     class="btn btn-primary  auto-shrink-button" id="newLabelTemplate">
     <i class="fas fa-plus"></i>
     <span class="button-text"><%= t('label_templates.index.toolbar.new') %></span>
-  </a>
-  <div class="btn btn-light hidden selected-actions  auto-shrink-button" id="editLabelTemplate"  title="<%= t('label_templates.index.toolbar.edit') %>">
-    <i class="fas fa-pen"></i>
-    <span class="button-text"><%= t('label_templates.index.toolbar.edit') %></span>
-  </div>
+  </button>
   <div class="btn btn-light hidden selected-actions  auto-shrink-button"
        title="<%= t('label_templates.index.toolbar.duplicate') %>"
        data-url="<%= duplicate_label_templates_path %>"

app/views/label_templates/show.html.erb

@@ -7,11 +7,13 @@
 <div id="labelTemplateContainer"
      data-label-template-url="<%= label_template_path(params[:id], format: :json) %>"
      data-label-templates-url="<%= label_templates_path() %>"
+     data-new-label="<%= params[:new_label] || false %>"
   >
   <label-template-container
     :label-template-url="labelTemplateUrl"
     :label-templates-url="labelTemplatesUrl"
+    :new-label="newLabel"
   />
 </div>
 
-<%= javascript_pack_tag 'vue/label_template' %>
+<%= javascript_pack_tag 'vue/label_template' %>

config/initializers/extends.rb

@@ -490,6 +490,24 @@ class Extends
   )
 
   STI_PRELOAD_CLASSES = %w(LinkedRepository BmtRepository)
+
+  DEFAULT_LABEL_TEMPLATE = {
+    zpl:
+      <<~HEREDOC
+        ^XA
+        ^MTT
+        ^MUD,300,300
+        ^PR2
+        ^MD30
+        ^LH20,20
+        ^PW310
+        ^CF0,23
+        ^FO0,0^FD{{item_id}}^FS
+        ^FO0,20^BQN,2,4^FDMA,{{item_id}}^FS
+        ^FO95,30^FB180,4,0,L^FD{{item_name}}^FS^FS
+        ^XZ
+      HEREDOC
+  }
 end
 
 # rubocop:enable Style/MutableConstant

config/locales/en.yml

@@ -815,6 +815,7 @@ en:
       can_add_user_to_project: "Can not add user to the project."
 
   label_templates:
+    new_label_template: 'New label'
     index:
       head_title: 'Label templates'
       search_templates: 'Filter templates'
@@ -837,6 +838,18 @@ en:
       delete_modal:
         title: 'Delete Label template(s)'
         description: 'Are you sure you want to delete the selected Label template(s)?'
+    show:
+      breadcrumb_index: 'Label templates'
+      name_error_prefix: 'Label template name'
+      description_error_prefix: 'Label template description'
+      description_title: 'Template description'
+      description_placeholder: 'Enter the template description (optional)'
+      content_title: '%{format} template code'
+      preview_title: 'Template preview'
+      view_content_tooltip: 'Click to edit template code'
+      buttons:
+        refresh: 'Refresh preview'
+        save: 'Save template code'
 
   label_printers:
     create:

config/routes.rb

@@ -45,7 +45,7 @@ Rails.application.routes.draw do
         to: 'users/settings/account/addons#index',
         as: 'addons'
 
-    resources :label_templates, only: %i(index show update) do
+    resources :label_templates, only: %i(index show update create) do
       member do
         post :set_default
       end