Print labels changes [SCI-5943] (#3461)

app/assets/javascripts/label_printers/index.js

@@ -0,0 +1,16 @@
+(function() {
+  $('.api-key-input').on('keyup change', function() {
+    var initialValue = this.dataset.originalValue;
+    if (initialValue.length) {
+      if (initialValue !== this.value) {
+        $('.api-key-container').addClass('warning');
+        $('.save-button').removeClass('hidden');
+        $('.saved-button').addClass('hidden');
+      } else {
+        $('.api-key-container').removeClass('warning');
+        $('.save-button').addClass('hidden');
+        $('.saved-button').removeClass('hidden');
+      }
+    }
+  });
+}());

app/assets/stylesheets/settings/addons.scss

@@ -26,6 +26,10 @@
           font-weight: bold;
         }
 
+        .control {
+          margin-left: auto;
+        }
+
         .status {
           border: $border-default;
           color: $color-silver-chalice;

app/assets/stylesheets/settings/label_printers.scss

@@ -30,6 +30,10 @@
     }
   }
 
+  .collapse {
+    margin-bottom: 1em;
+  }
+
   .fa-caret-down {
     cursor: pointer;
     margin-right: .25em;
@@ -55,9 +59,31 @@
 
   .api-key-container {
     display: flex;
+    position: relative;
+
+    &.warning {
+      &::after {
+        color: $brand-primary-light;
+        content: attr(data-warning);
+        left: 0;
+        position: absolute;
+        bottom: -1.5em;
+      }
+    }
 
     .api-key-input {
       margin-right: .5em;
+
+
+    }
+
+    .btn {
+      margin-left: .5em;
+      margin-top: 23px;
     }
   }
+
+  .update-printers {
+    margin-left: auto;
+  }
 }

app/controllers/label_printers_controller.rb

@@ -3,10 +3,12 @@
 class LabelPrintersController < ApplicationController
   include InputSanitizeHelper
 
+  before_action :check_manage_permissions, except: :index
   before_action :find_label_printer, only: %i(edit update destroy)
 
   def index
     @label_printers = LabelPrinter.all
+    @fluics_api_key = @label_printers.any? ? @label_printers.first.fluics_api_key : nil
   end
 
   def new
@@ -59,23 +61,34 @@ class LabelPrintersController < ApplicationController
 
   def create_fluics
     # Placeholder for FLUICS printer management
+    begin
+      printers = LabelPrinters::Fluics::ApiClient.new(label_printer_params[:fluics_api_key]).list
 
-    LabelPrinters::Fluics::ApiClient.new(params[:fluics_api_key]).list.each do |fluics_printer|
-      label_printer = LabelPrinter.find_or_initialize_by(
-        fluics_api_key: params[:fluics_api_key],
-        fluics_lid: fluics_printer['LID'],
-        type_of: :fluics,
-        language_type: :zpl
-      )
+      LabelPrinter.destroy_all
 
-      label_printer.update(name: fluics_printer['serviceName'])
+      printers.each do |fluics_printer|
+        label_printer = LabelPrinter.find_or_initialize_by(
+          fluics_api_key: label_printer_params[:fluics_api_key],
+          fluics_lid: fluics_printer['LID'],
+          type_of: :fluics,
+          language_type: :zpl
+        )
+
+        label_printer.update(name: fluics_printer['serviceName'])
+      end
+    rescue LabelPrinters::Fluics::ApiClient::BadRequestError
+      flash[:error] = t('users.settings.account.label_printer.api_key_error')
     end
 
-    redirect_to addons_path
+    redirect_to label_printers_path
   end
 
   private
 
+  def check_manage_permissions
+    render_403 unless can_manage_label_printers?
+  end
+
   def label_printer_params
     params.require(:label_printer).permit(
       :name, :type_of, :fluics_api_key, :host, :port

app/controllers/users/settings/account/addons_controller.rb

@@ -5,7 +5,7 @@ module Users
         layout 'fluid'
 
         def index
-          @label_printers = LabelPrinter.all
+          @label_printer_any = LabelPrinter.any?
         end
       end
     end

app/permissions/organization.rb

@@ -8,5 +8,9 @@ module Organization
     can :create_teams do |_|
       true
     end
+
+    can :manage_label_printers do |_|
+      true
+    end
   end
 end

app/views/label_printers/edit.html.erb

@@ -1,60 +0,0 @@
-<% provide(:head_title, t('users.settings.account.addons.head_title')) %>
-<% provide(:container_class, "no-second-nav-container") %>
-
-<%= render partial: 'users/settings/sidebar.html.erb' %>
-
-<div class="content-pane flexible label-printer-show">
-  <div class="content-header">
-    <div id="breadcrumbsWrapper">
-      <div class="breadcrumbs-container">
-        <%= render partial: 'shared/breadcrumbs', locals: {
-          links: [{label: 'Add-ons', url: addons_path}]
-        } %>
-      </div>
-    </div>
-    <div class="title-row">
-      <h1 class="printer-title">
-        <%= t("users.settings.account.label_printer.#{@label_printer.type_of}_printer") %>
-      </h1>
-      <div class="status" data-ready="<%= @label_printer.ready? %>">
-        <% if @label_printer.ready? %>
-          <%= t('users.settings.account.addons.printers.ready') %>
-        <% else %>
-          <%= t('users.settings.account.addons.printers.not_ready') %>
-        <% end %>
-      </div>
-    </div>
-  </div>
-
-  <ul>
-    <li>
-      <div class="collapse-row">
-        <i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
-        <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
-      </div>
-      <ul class="collapse in" id="InstructionsSection">
-        Instruction here
-      </ul>
-    </li>
-    <li>
-      <div class="collapse-row">
-        <i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
-        <div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
-      </div>
-      <ul class="collapse in" id="SettingsSection">
-        <% if @label_printer.fluics? %>
-          <%= form_with model: @label_printer do |form| %>
-              <div class="sci-input-container">
-                <%= form.label :fluics_api_key, t("users.settings.account.label_printer.api_key_label") %>
-                <div class="api-key-container">
-                  <%= form.text_field :fluics_api_key, class: "sci-input-field api-key-input" %>
-                  <%= form.submit t('general.save'), class: "btn btn-secondary" %>
-                </div>
-              </div>
-            <%= link_to t("users.settings.account.label_printer.api_key_information"), '' %>
-          <% end %>
-        <% end %>
-      </ul>
-    </li>
-  </ul>
-</div>

app/views/label_printers/index.html.erb

@@ -0,0 +1,102 @@
+<% provide(:head_title, t('users.settings.account.addons.head_title')) %>
+<% provide(:container_class, "no-second-nav-container") %>
+
+<%= render partial: 'users/settings/sidebar.html.erb' %>
+
+<div class="content-pane flexible label-printer-show">
+  <div class="content-header">
+    <div id="breadcrumbsWrapper">
+      <div class="breadcrumbs-container">
+        <%= render partial: 'shared/breadcrumbs', locals: {
+          links: [{label: 'Add-ons', url: addons_path}]
+        } %>
+      </div>
+    </div>
+    <div class="title-row">
+      <h1 class="printer-title">
+        <%= t("users.settings.account.label_printer.fluics_printer") %>
+      </h1>
+    </div>
+  </div>
+
+  <ul>
+    <li>
+      <div class="collapse-row">
+        <i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
+        <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
+      </div>
+      <ul class="collapse in" id="InstructionsSection">
+        <li>
+          <%= t("users.settings.account.label_printer.fluics_instruction.p1") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.fluics_instruction.p2") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.fluics_instruction.p3") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.fluics_instruction.p4") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.fluics_instruction.p5") %>
+        </li>
+      </ul>
+    </li>
+  <% if can_manage_label_printers? %>
+    <li>
+      <div class="collapse-row">
+        <i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
+        <div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
+      </div>
+      <ul class="collapse in" id="SettingsSection">
+        <%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
+          <div class="api-key-container" data-warning="<%= t("users.settings.account.label_printer.api_key_warning") %>">
+            <div class="sci-input-container <%= 'error' if flash[:error] %>" data-error-text="<%= flash[:error] %>">
+              <%= form.label :fluics_api_key, t("users.settings.account.label_printer.api_key_label") %>
+
+              <%= form.text_field :fluics_api_key, class: "sci-input-field api-key-input", value: @fluics_api_key, data: {original_value: @fluics_api_key, } %>
+            </div>
+
+            <%= form.submit t('general.save'), class: "save-button btn btn-primary #{'hidden' if @fluics_api_key}" %>
+            <%= button_tag class: "saved-button btn btn-secondary #{'hidden' if !@fluics_api_key}", disabled: true do %>
+              <i class="fas fa-check"></i>
+              <%= t("users.settings.account.label_printer.saved") %>
+            <% end %>
+          </div>
+        <% end %>
+      </ul>
+    </li>
+  <% end %>
+    <li>
+      <div class="collapse-row">
+        <i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
+        <div class="row-title">Printers</div>
+        <% if can_manage_label_printers? %>
+          <div class="update-printers">
+            <%= form_with scope: :label_printer, url: create_fluics_label_printers_path do |form| %>
+              <%= form.hidden_field :fluics_api_key, value: @fluics_api_key %>
+              <%= button_tag type: 'submit', class: "btn btn-light", disabled: @fluics_api_key.present?.to_s do %>
+                <i class="fas fa-sync"></i>
+                <%= t("users.settings.account.label_printer.update_printers") %>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <ul class="collapse in" id="PrintersSection">
+        <% if @label_printers.any? %>
+          <% @label_printers.each do |printer| %>
+            <li>
+              <b><%= printer.name %></b>
+            </li>
+          <% end %>
+        <% else %>
+          <li>
+            <%= t("users.settings.account.label_printer.no_printers_available") %>
+          </li>
+        <% end %>
+      </ul>
+  </ul>
+</div>
+<%= javascript_include_tag "label_printers/index" %>

app/views/users/settings/account/addons/index.html.erb

@@ -18,39 +18,30 @@
     <div class="row">
       <div class="col-xs-12 col-sm-12">
         <h1 class="addons-title"><%= t('users.settings.account.addons.label_printers') %></h1>
-        <% if @label_printers.none? %>
-          <%= form_with url: create_fluics_label_printers_path, method: :post do |f| %>
-            <h2>FLUICS Printer Management Placeholder</h2>
-            <%= f.text_field :fluics_api_key %>
-            <%= f.submit "Fetch FLUICS Printers" %>
-          <% end %>
-        <% end %>
-        <% @label_printers.each do |label_printer| %>
-          <div class="printers-container">
-            <div class="printer">
-              <div class="header">
-                <div class="title">
-                  <%= t('users.settings.account.addons.fluics_printer.title') %>
-                </div>
-                <div class="status" data-ready="<%= label_printer.ready? %>">
-                  <% if label_printer.ready? %>
-                    <%= t('users.settings.account.addons.printers.ready') %>
-                  <% else %>
-                    <%= t('users.settings.account.addons.printers.not_ready') %>
-                  <% end %>
-                </div>
-                <div class="control">
-                  <%= t('users.settings.account.addons.printers.enabled') %>
-                  <i class="fas fa-check"></i>
-                </div>
+        <div class="printers-container">
+          <div class="printer">
+            <div class="header">
+              <div class="title">
+                <%= t('users.settings.account.addons.fluics_printer.title') %>
               </div>
-              <div class="description">
-                <%= t('users.settings.account.addons.fluics_printer.description') %>
+              <div class="control">
+                <%= t('users.settings.account.addons.printers.enabled') %>
+                <i class="fas fa-check"></i>
               </div>
-              <%= link_to t('users.settings.account.addons.printers.printer_details'), edit_label_printer_path(label_printer), class: 'printer-details' %>
             </div>
+            <div class="description">
+              <%= t('users.settings.account.addons.fluics_printer.description') %>
+            </div>
+            <% if !@label_printer_any && can_manage_label_printers? %>
+              <%= link_to label_printers_path(), class: 'printer-details btn btn-primary' do %>
+                <i class="fas fa-key"></i>
+                <%= t('users.settings.account.addons.printers.enter_api_key') %>
+              <% end %>
+            <% else %>
+              <%= link_to t('users.settings.account.addons.printers.printer_details'), label_printers_path(), class: 'printer-details' %>
+            <% end %>
           </div>
-        <% end %>
+        </div>
       </div>
     </div>
   </div>

app/views/users/settings/account/addons/label_printer.html.erb

@@ -1,63 +0,0 @@
-<% provide(:head_title, t('users.settings.account.addons.head_title')) %>
-<% provide(:container_class, "no-second-nav-container") %>
-
-<%= render partial: 'users/settings/sidebar.html.erb' %>
-
-<div class="content-pane flexible label-printer-show">
-  <div class="content-header">
-    <div id="breadcrumbsWrapper">
-      <div class="breadcrumbs-container">
-        <%= render partial: 'shared/breadcrumbs', locals: {
-          links: [{label: 'Add-ons', url: addons_path}]
-        } %>
-      </div>
-    </div>
-    <div class="title-row">
-      <h1 class="printer-title">
-        <%= t("users.settings.account.label_printer.#{@printer[:printer_type]}_printer") %>
-      </h1>
-      <div class="status" data-ready="<%= @printer[:ready] %>">
-        <% if @printer[:ready] %>
-          <%= t('users.settings.account.addons.printers.ready') %>
-        <% else %>
-          <%= t('users.settings.account.addons.printers.not_ready') %>
-        <% end %>
-      </div>
-    </div>
-  </div>
-
-  <ul>
-    <li>
-      <div class="collapse-row">
-        <i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
-        <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
-      </div>
-      <ul class="collapse in" id="InstructionsSection">
-        Instruction here
-      </ul>
-    </li>
-    <li>
-      <div class="collapse-row">
-        <i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
-        <div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
-      </div>
-      <ul class="collapse in" id="SettingsSection">
-        <% if @printer[:printer_type] == :fluics %>
-          <%= form_with url: "" do |form| %>
-              <div class="sci-input-container">
-                <%= form.label :api_key, t("users.settings.account.label_printer.api_key_label") %>
-                <div class="api-key-container">
-                  <%= form.text_field :api_key, class: "sci-input-field api-key-input" %>
-                  <%= form.submit t('general.save'), class: "btn btn-secondary" %>
-                </div>
-              </div>
-            <%= link_to t("users.settings.account.label_printer.api_key_information"), '' %>
-          <% end %>
-        <% end %>
-      </ul>
-    </li>
-  </ul>
-
-
-</div>
-

config/initializers/assets.rb

@@ -76,6 +76,7 @@ Rails.application.config.assets.precompile += %w(system_notifications/index.js)
 Rails.application.config.assets.precompile += %w(users/invite_users_modal.js)
 Rails.application.config.assets.precompile += %w(highlightjs-github-theme.css)
 Rails.application.config.assets.precompile += %w(search.js)
+Rails.application.config.assets.precompile += %w(label_printers/index.js)
 Rails.application.config.assets.precompile += %w(repositories/index.js)
 Rails.application.config.assets.precompile += %w(repositories/edit.js)
 Rails.application.config.assets.precompile += %w(repositories/repository_datatable.js)

config/locales/en.yml

@@ -1835,6 +1835,7 @@ en:
             ready: "Ready"
             not_ready: "Not ready"
             printer_details: "Printer details"
+            enter_api_key: "Enter API key"
             enabled: "Enabled"
           fluics_printer:
             title: "FLUICS Printer"
@@ -1842,9 +1843,21 @@ en:
         label_printer:
           fluics_printer: "Label printer: FLUICS Printer"
           instructions: "Instructions"
+          fluics_instruction:
+            p1: "To make it work, please follow these steps:"
+            p2: "1. Open the FLUICS Connect web app or install an iOS / Android mobile app."
+            p3: "2. Sign up for a free account. Follow the instructions to set up your workspace."
+            p4: "3. Upgrade to a Pro Workspace to get your API key. Read more on how to get an API key."
+            p5: "4. Enter the API key into the field below and start printing your own labels."
           settings: "Settings"
           api_key_label: "API key"
+          api_key_warning: "API key change will lead to printer list refresh"
+          api_key_error: "Invalid API key"
           api_key_information: "Don’t have API key? Click here for more info."
+          saved: "Saved"
+          update_printers: "Update printers"
+          no_printers_available: "No printers available"
+
 
         connected_accounts:
           head_title: "Settings | Connected Accounts"