From b20c2b13a37079fb595eb54402118d3ac99064ed Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Wed, 28 Sep 2022 13:25:55 +0200
Subject: [PATCH] Fix label printers dropdown on print modal [SCI-7258]

---
 .../repository_print_label_modal.scss         | 24 ++++++++++++
 .../vue/repository_print_modal/container.vue  | 17 +++++++-
 .../vue/shared/dropdown_selector.vue          |  9 +++++
 app/models/label_printer.rb                   |  4 --
 app/serializers/label_printer_serializer.rb   | 15 ++++++-
 config/locales/en.yml                         | 39 +++++++++++--------
 6 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/repository/repository_print_label_modal.scss b/app/assets/stylesheets/repository/repository_print_label_modal.scss
index 20166ccc3..54d25e5f0 100644
--- a/app/assets/stylesheets/repository/repository_print_label_modal.scss
+++ b/app/assets/stylesheets/repository/repository_print_label_modal.scss
@@ -12,6 +12,30 @@
   .printers-container {
     margin-bottom: 1em;
     min-height: 4em;
+
+    .status-ready {
+
+    }
+
+    .status-ready {
+      color: #2DBE61;
+    }
+
+    .status-busy {
+      color: #231F20;
+    }
+
+    .status-out-of-labels {
+      color: #231F20;
+    }
+
+    .status-unreachable {
+      color: #231F20;
+    }
+
+    .status-error {
+      color: #231F20;
+    }
   }
 
   .labels-container {
diff --git a/app/javascript/vue/repository_print_modal/container.vue b/app/javascript/vue/repository_print_modal/container.vue
index 6053560f2..239eff72c 100644
--- a/app/javascript/vue/repository_print_modal/container.vue
+++ b/app/javascript/vue/repository_print_modal/container.vue
@@ -24,7 +24,10 @@
               </label>
               <DropdownSelector
                 :disableSearch="true"
+                :labelHTML="true"
                 :options="printers_dropdown"
+                :optionLabel="printerOptionLabel"
+                :tagLabel="printerOptionLabel"
                 :selectorId="`LabelPrinterSelector`"
                 @dropdown:changed="selectPrinter"
               />
@@ -157,7 +160,14 @@
       },
       printers_dropdown() {
         return this.printers.map(i => {
-          return {value: i.id, label: i.attributes.name}
+          return {
+            value: i.id,
+            label: i.attributes.display_name,
+            params: {
+              status: i.attributes.status,
+              display_status: i.attributes.display_status
+            }
+          }
         })
       }
     },
@@ -176,7 +186,7 @@
     methods: {
       selectDefaultLabelTemplate() {
         if (this.selectedPrinter && this.templates) {
-          let template = this.templates.find(i => i.attributes.default 
+          let template = this.templates.find(i => i.attributes.default
             && i.type.includes(this.selectedPrinter.attributes.type_of));
           if (template) {
             this.$nextTick(() => {
@@ -250,6 +260,9 @@
           </div>
         `
       },
+      printerOptionLabel(option) {
+        return `${option.label} <span class="status-${option.params.status}"> • ${option.params.display_status}`
+      },
       initTooltip() {
         $('[data-toggle="tooltip"]').tooltip();
       }
diff --git a/app/javascript/vue/shared/dropdown_selector.vue b/app/javascript/vue/shared/dropdown_selector.vue
index 0155a0396..cf34b16db 100644
--- a/app/javascript/vue/shared/dropdown_selector.vue
+++ b/app/javascript/vue/shared/dropdown_selector.vue
@@ -74,6 +74,13 @@
         type: Boolean,
         default: false
       },
+      labelHTML: {
+        type: Boolean,
+        default: false
+      },
+      tagLabel: {
+        type: Function
+      },
       optionClass: {
         type: String,
         default: ''
@@ -117,6 +124,8 @@
         closeOnSelect: this.closeOnSelect,
         selectAppearance: this.selectAppearance,
         disableSearch: this.disableSearch,
+        tagLabel: this.tagLabel,
+        labelHTML: this.labelHTML,
         onOpen: this.onOpen,
         onChange: () => {
           if (this.onChange) this.onChange();
diff --git a/app/models/label_printer.rb b/app/models/label_printer.rb
index 0de3a17d9..291b82b9e 100644
--- a/app/models/label_printer.rb
+++ b/app/models/label_printer.rb
@@ -19,10 +19,6 @@ class LabelPrinter < ApplicationRecord
   validates :type_of, presence: true
   validates :language_type, presence: true
 
-  def display_name
-    "#{name} • #{description}"
-  end
-
   def done?
     current_print_job_ids.blank? && ready?
   end
diff --git a/app/serializers/label_printer_serializer.rb b/app/serializers/label_printer_serializer.rb
index b20e3f048..21a66c452 100644
--- a/app/serializers/label_printer_serializer.rb
+++ b/app/serializers/label_printer_serializer.rb
@@ -2,11 +2,24 @@
 
 class LabelPrinterSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
+  include ApplicationHelper
 
-  attributes :name, :description, :type_of, :language_type, :status
+  attributes :name, :display_name, :description, :type_of, :language_type, :status, :display_status
 
   def urls
     {
     }
   end
+
+  def display_name
+    object.description.present? ? sanitize_input("#{object.name} • #{object.description}") : sanitize_input(object.name)
+  end
+
+  def status
+    object.status.dasherize
+  end
+
+  def display_status
+    I18n.t("label_printers.fluics.statuses.#{object.status}")
+  end
 end
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fadb8a807..e2e297638 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -918,7 +918,28 @@ en:
     delete:
       success: "Successfully deleted %{printer_name}."
       error: "Could not delete %{printer_name}."
-
+    fluics:
+      statuses:
+        ready: 'Ready'
+        busy: 'Busy'
+        out_of_labels: 'Out of labels'
+        unreachable: 'Offline'
+        error: 'Error'
+    modal_printing_status:
+      printer_status:
+        ready: "Ready"
+        not_ready: "Not Ready"
+        out_of_labels: "Out of labels"
+        error: "Printer error"
+        unreachable: "Printer offline"
+        offline: "Offline"
+      multiple_items: "%{item_count}/%{starting_item_count} labels"
+      printing_status:
+        done: "Done"
+        printing: "Printing"
+        out_of_labels: "Waiting for labels. Please, insert labels."
+        error: "There is an issue with the printer."
+        unreachable: "Printer is offline"
 
   my_modules:
     details:
@@ -2041,22 +2062,6 @@ en:
       date_expiration_html: "This item is expiring in <strong>%{date_expiration}</strong>."
       item_expired: "This item has expired."
       day: "day"
-  label_printers:
-    modal_printing_status:
-      printer_status:
-        ready: "Ready"
-        not_ready: "Not Ready"
-        out_of_labels: "Out of labels"
-        error: "Printer error"
-        unreachable: "Printer offline"
-        offline: "Offline"
-      multiple_items: "%{item_count}/%{starting_item_count} labels"
-      printing_status:
-        done: "Done"
-        printing: "Printing"
-        out_of_labels: "Waiting for labels. Please, insert labels."
-        error: "There is an issue with the printer."
-        unreachable: "Printer is offline"
   activities:
     index:
       global_activities_title: "Global activities"