Add printers to addon page [SCI-5904][SCI-5931] (#3450)

* Add printers to addon page [SCI-5904]

* Fix markup

app/assets/stylesheets/settings/addons.scss

@@ -1,3 +1,6 @@
+// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
+// scss-lint:disable NestingDepth ImportantRule
+
 .user-account-addons {
   .content-pane {
     margin: 0;
@@ -8,4 +11,43 @@
     border-bottom: $border-tertiary;
     padding-bottom: 15px;
   }
+
+  .printers-container {
+    .printer {
+      border: $border-default;
+      padding: 1em;
+
+      .header {
+        align-items: center;
+        display: flex;
+        margin-bottom: .5em;
+
+        .title {
+          font-weight: bold;
+        }
+
+        .status {
+          border: $border-default;
+          color: $color-silver-chalice;
+          margin-left: .5em;
+          margin-right: auto;
+          padding: .25em;
+
+          &[data-ready="true"] {
+            background: $brand-success;
+            border-color: $brand-success;
+            color: $color-white;
+          }
+        }
+
+        .fas-check {
+          margin-left: .25em;
+        }
+      }
+
+      .description {
+        margin-bottom: .5em;
+      }
+    }
+  }
 }

app/assets/stylesheets/settings/label_printers.scss

@@ -0,0 +1,63 @@
+// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
+// scss-lint:disable NestingDepth ImportantRule
+
+.label-printer-show {
+  .printer-title {
+    flex-grow: 0 !important;
+    margin-right: .5em !important;
+  }
+
+  .status {
+    border: $border-default;
+    color: $color-silver-chalice;
+    margin-left: .5em;
+    margin-right: auto;
+    padding: .25em;
+
+    &[data-ready="true"] {
+      background: $brand-success;
+      border-color: $brand-success;
+      color: $color-white;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+      padding: .5em 0;
+    }
+  }
+
+  .fa-caret-down {
+    cursor: pointer;
+    margin-right: .25em;
+
+    &.collapsed {
+      @include rotate(-90deg);
+    }
+  }
+
+  .collapse-row {
+    align-items: center;
+    display: flex;
+  }
+
+  .collapse {
+    padding-left: 1.5em;
+  }
+
+  .row-title {
+    @include font-h2;
+    margin-left: .5em;
+  }
+
+  .api-key-container {
+    display: flex;
+
+    .api-key-input {
+      margin-right: .5em;
+    }
+  }
+}

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

@@ -3,6 +3,18 @@ module Users
     module Account
       class AddonsController < ApplicationController
         layout 'fluid'
+
+        before_action :load_printers, only: :index
+
+        def label_printer
+          @printer = { printer_type: :fluics, ready: true, api_key: 'ISVO42192IUDV168ATFI314UVYGU151USHYEV42' }
+        end
+
+        private
+
+        def load_printers
+          @fluics_printer = { ready: true, enabled: true }
+        end
       end
     end
   end

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

@@ -15,6 +15,39 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="col-xs-12 col-sm-12">
+        <h1 class="addons-title"><%= t('users.settings.account.addons.label_printers') %></h1>
+        <div class="printers-container">
+          <% if @fluics_printer  %>
+            <div class="printer">
+              <div class="header">
+                <div class="title">
+                  <%= t('users.settings.account.addons.fluics_printer.title') %>
+                </div>
+                <div class="status" data-ready="<%= @fluics_printer[:ready] %>">
+                  <% if @fluics_printer[:ready] %>
+                    <%= t('users.settings.account.addons.printers.ready') %>
+                  <% else %>
+                    <%= t('users.settings.account.addons.printers.not_ready') %>
+                  <% end %>
+                </div>
+                <div class="control">
+                  <% if @fluics_printer[:enabled] %>
+                    <%= t('users.settings.account.addons.printers.enabled') %>
+                    <i class="fas fa-check"></i>
+                  <% end %>
+                </div>
+              </div>
+              <div class="description">
+                <%= t('users.settings.account.addons.fluics_printer.description') %>
+              </div>
+              <%= link_to t('users.settings.account.addons.printers.printer_details'), label_printer_path, class: 'printer-details' %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
 </div>

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

@@ -0,0 +1,63 @@
+<% 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/locales/en.yml

@@ -1796,6 +1796,22 @@ en:
           head_title: "Settings | Add-ons"
           title: "Add-ons"
           no_addons: "You have no SciNote Add-ons."
+          label_printers: Label Printers
+          printers:
+            ready: "Ready"
+            not_ready: "Not ready"
+            printer_details: "Printer details"
+            enabled: "Enabled"
+          fluics_printer:
+            title: "FLUICS Printer"
+            description: "Sustainable sample inventory management for innovative research labs."
+        label_printer:
+          fluics_printer: "Label printer: FLUICS Printer"
+          instructions: "Instructions"
+          settings: "Settings"
+          api_key_label: "API key"
+          api_key_information: "Don’t have API key? Click here for more info."
+
         connected_accounts:
           head_title: "Settings | Connected Accounts"
           title: "Connected Accounts"

config/routes.rb

@@ -41,6 +41,9 @@ Rails.application.routes.draw do
     get 'users/settings/account/addons',
         to: 'users/settings/account/addons#index',
         as: 'addons'
+    get 'users/settings/account/addons/label_printer',
+        to: 'users/settings/account/addons#label_printer',
+        as: 'label_printer'
     get 'users/settings/account/connected_accounts',
         to: 'users/settings/account/connected_accounts#index',
         as: 'connected_accounts'