From bd535dc9ad7dd35df196245ea93b8f00abada48a Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:09:10 +0200
Subject: [PATCH] Add dimension saving to label templates [SCI-7268] (#4489)

---
 app/controllers/label_templates_controller.rb |  2 +-
 .../components/label_preview.vue              | 28 ++++++++++++-------
 .../vue/label_template/container.vue          | 28 +++++++++++++++++--
 .../vue/repository_print_modal/container.vue  |  2 +-
 app/serializers/label_template_serializer.rb  |  2 +-
 5 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/app/controllers/label_templates_controller.rb b/app/controllers/label_templates_controller.rb
index ac1f2b0a7..da92d70c4 100644
--- a/app/controllers/label_templates_controller.rb
+++ b/app/controllers/label_templates_controller.rb
@@ -172,7 +172,7 @@ class LabelTemplatesController < ApplicationController
   end
 
   def label_template_params
-    params.require(:label_template).permit(:name, :description, :content)
+    params.require(:label_template).permit(:name, :description, :content, :width_mm, :height_mm)
   end
 
   def log_activity(type_of, label_template = @label_template, message_items: {})
diff --git a/app/javascript/vue/label_template/components/label_preview.vue b/app/javascript/vue/label_template/components/label_preview.vue
index 62fc0d94c..c8b58eefe 100644
--- a/app/javascript/vue/label_template/components/label_preview.vue
+++ b/app/javascript/vue/label_template/components/label_preview.vue
@@ -25,11 +25,13 @@
       <div class="label-preview__controls__size">
         <div class="sci-input-container">
           <label>{{ i18n.t('label_templates.label_preview.height') }}</label>
-          <input v-model="height" type="number" class="sci-input-field" />
+          <input v-model="height" type="number" class="sci-input-field"
+                 @change="$emit('height:update', (unit === 'in' ? height * 25.4 : height))"  />
         </div>
         <div class="sci-input-container">
           <label>{{ i18n.t('label_templates.label_preview.width') }}</label>
-          <input v-model="width" type="number" class="sci-input-field" />
+          <input v-model="width" type="number" class="sci-input-field"
+                 @change="$emit('width:update', (unit === 'in' ? width * 25.4 : width))" />
         </div>
         <div class="sci-input-container">
           <label>{{ i18n.t('label_templates.label_preview.density') }}</label>
@@ -79,6 +81,7 @@
     name: 'LabelPreview',
     components: { DropdownSelector },
     props: {
+      template: { type: Object, required: true},
       zpl: { type: String, required: true },
       previewUrl: { type: String, required: true },
       viewOnly: {
@@ -101,6 +104,9 @@
     },
     mounted() {
       this.refreshPreview();
+      this.width = this.template.attributes.width_mm
+      this.height = this.template.attributes.height_mm
+      if (this.width && this.height) this.recalculateUnits();
     },
     computed: {
       widthMm() {
@@ -112,14 +118,7 @@
     },
     watch: {
       unit() {
-        if (this.unit === 'in') {
-          this.width /= 25.4;
-          this.height /= 25.4;
-        } else {
-          this.width *= 25.4;
-          this.height *= 25.4;
-        }
-
+        this.recalculateUnits();
         this.setDefaults();
       },
       zpl() {
@@ -133,6 +132,15 @@
         !this.width && (this.width = this.unit === 'in' ? 2 : 50.8);
         !this.height && (this.height = this.unit === 'in' ? 1 : 25.4);
       },
+      recalculateUnits() {
+        if (this.unit === 'in') {
+          this.width /= 25.4;
+          this.height /= 25.4;
+        } else {
+          this.width *= 25.4;
+          this.height *= 25.4;
+        }
+      },
       refreshPreview() {
         if (this.zpl.length === 0) return;
 
diff --git a/app/javascript/vue/label_template/container.vue b/app/javascript/vue/label_template/container.vue
index 965ed9b31..363fb28f0 100644
--- a/app/javascript/vue/label_template/container.vue
+++ b/app/javascript/vue/label_template/container.vue
@@ -97,7 +97,15 @@
         </div>
       </div>
       <div class="label-preview-container">
-        <LabelPreview :zpl='previewContent' :previewUrl="previewUrl" @preview:valid="updateContent" @preview:invalid="invalidPreview" />
+        <LabelPreview
+          :zpl='previewContent'
+          :template="labelTemplate"
+          :previewUrl="previewUrl"
+          @preview:valid="updateContent"
+          @preview:invalid="invalidPreview"
+          @height:update="setNewHeight"
+          @width:update="setNewWidth"
+        />
       </div>
     </div>
   </div>
@@ -126,6 +134,8 @@
         editingDescription: false,
         editingContent: false,
         newContent: '',
+        newLabelWidth: null,
+        newLabelHeight: null,
         previewContent: '',
         previewValid: false,
         skipSave: false,
@@ -158,9 +168,17 @@
         this.labelTemplate = result.data
         this.newContent = this.labelTemplate.attributes.content
         this.previewContent = this.labelTemplate.attributes.content
+        this.newLabelWidth = this.labelTemplate.attributes.width_mm
+        this.newLabelHeight = this.labelTemplate.attributes.height_mm
       })
     },
     methods: {
+      setNewHeight(val) {
+        this.newLabelHeight = val;
+      },
+      setNewWidth(val) {
+        this.newLabelWidth = val;
+      },
       enableContentEdit() {
         this.editingContent = true;
         this.$nextTick(() => {
@@ -210,9 +228,15 @@
           $.ajax({
             url: this.labelTemplate.attributes.urls.update,
             type: 'PATCH',
-            data: {label_template: {content: this.newContent}},
+            data: {label_template: {
+              content: this.newContent,
+              width_mm: this.newLabelHeight,
+              height_mm: this.newLabelWidth
+            }},
             success: (result) => {
               this.labelTemplate.attributes.content = result.data.attributes.content;
+              this.labelTemplate.attributes.width_mm = result.data.attributes.width_mm;
+              this.labelTemplate.attributes.height_mm = result.data.attributes.height_mm;
               this.editingContent = false;
             }
           });
diff --git a/app/javascript/vue/repository_print_modal/container.vue b/app/javascript/vue/repository_print_modal/container.vue
index 9d3cc7547..b67c36dbc 100644
--- a/app/javascript/vue/repository_print_modal/container.vue
+++ b/app/javascript/vue/repository_print_modal/container.vue
@@ -61,7 +61,7 @@
               {{ i18n.t('repository_row.modal_print_label.label_preview') }}
             </div>
             <div class="label-preview-container">
-              <LabelPreview v-if="labelTemplateCode" :zpl='labelTemplateCode' :previewUrl="urls.labelPreview" :viewOnly="true"/>
+              <LabelPreview v-if="labelTemplateCode" :zpl='labelTemplateCode' :template="selectedTemplate" :previewUrl="urls.labelPreview" :viewOnly="true"/>
             </div>
           </div>
           <div class="modal-footer">
diff --git a/app/serializers/label_template_serializer.rb b/app/serializers/label_template_serializer.rb
index a0df6840e..7cf92ca86 100644
--- a/app/serializers/label_template_serializer.rb
+++ b/app/serializers/label_template_serializer.rb
@@ -4,7 +4,7 @@ class LabelTemplateSerializer < ActiveModel::Serializer
   include Canaid::Helpers::PermissionsHelper
   include Rails.application.routes.url_helpers
 
-  attributes :name, :description, :language_type, :icon_url, :urls, :content, :type, :default
+  attributes :name, :description, :language_type, :icon_url, :urls, :content, :type, :default, :width_mm, :height_mm
 
   def icon_url
     ActionController::Base.helpers.image_path("label_template_icons/#{object.icon}.svg")