Add current/new amount section to stock [SCI-6416] (#3791)

Co-authored-by: Anton <anton@scinote.net>

app/assets/javascripts/repositories/stock.js

@@ -0,0 +1,94 @@
+/* global dropdownSelector */
+
+var RepositoryStockValues = (function() {
+  const UNIT_SELECTOR = '#repository-stock-value-units';
+
+  function initManageAction() {
+    $('.repository-show').on('click', '.manage-repository-stock-value-link', function() {
+      $.ajax({
+        url: $(this).closest('tr').data('manage-stock-url'),
+        type: 'GET',
+        dataType: 'json',
+        success: (result) => {
+          var $manageModal = $('#manage-repository-stock-value-modal');
+          $manageModal.find('.modal-content').html(result.html);
+
+          dropdownSelector.init(UNIT_SELECTOR, {
+            singleSelect: true,
+            closeOnSelect: true,
+            selectAppearance: 'simple',
+            onChange: function() {
+              $('.stock-final-container .units').text(dropdownSelector.getValues(UNIT_SELECTOR));
+            }
+          });
+
+          $manageModal.find('form').on('ajax:success', function() {
+            var dataTable = $('.dataTable').DataTable();
+            $manageModal.modal('hide');
+            dataTable.ajax.reload();
+          });
+
+          $('.stock-operator-option').click(function() {
+            var $stockInput = $('#stock-input-amount');
+            $('.stock-operator-option').removeClass('btn-primary').addClass('btn-secondary');
+            $(this).removeClass('btn-secondary').addClass('btn-primary');
+            $stockInput.data('operator', $(this).data('operator'));
+
+            dropdownSelector.selectValues(UNIT_SELECTOR, $('#initial_units').val());
+            switch ($(this).data('operator')) {
+              case 'set':
+                $stockInput.val($stockInput.data('currentAmount'));
+                dropdownSelector.enableSelector(UNIT_SELECTOR);
+                break;
+              case 'add':
+                $stockInput.val('');
+                dropdownSelector.disableSelector(UNIT_SELECTOR);
+                break;
+              case 'remove':
+                $stockInput.val('');
+                dropdownSelector.disableSelector(UNIT_SELECTOR);
+                break;
+              default:
+                break;
+            }
+          });
+
+          $('#stock-input-amount').on('input', function() {
+            var currentAmount = parseFloat($(this).data('currentAmount'));
+            var inputAmount = parseFloat($(this).val());
+            var newAmount;
+
+            if (!inputAmount) return;
+
+            switch ($(this).data('operator')) {
+              case 'set':
+                newAmount = inputAmount;
+                break;
+              case 'add':
+                newAmount = currentAmount + inputAmount;
+                break;
+              case 'remove':
+                newAmount = currentAmount - inputAmount;
+                break;
+              default:
+                newAmount = currentAmount;
+                break;
+            }
+            $('#repository_stock_value_amount').val(newAmount);
+            $('.stock-final-container .value').text(newAmount);
+          });
+
+          $manageModal.modal('show');
+        }
+      });
+    });
+  }
+
+  return {
+    init: () => {
+      initManageAction();
+    }
+  };
+}());
+
+RepositoryStockValues.init();

app/assets/javascripts/repository_columns/index.js

@@ -425,90 +425,8 @@ var RepositoryColumns = (function() {
   };
 }());
 
-var RepositoryStockValues = (function() {
-  function initManageAction() {
-    $(document).on('click', '.manage-repository-stock-value-link', function() {
-      $.ajax({
-        url: $(this).closest('tr').data('manage-stock-url'),
-        type: 'GET',
-        dataType: 'json',
-        success: (result) => {
-          var $manageModal = $('#manage-repository-stock-value-modal');
-          $manageModal.find('.modal-content').html(result.html);
 
-          dropdownSelector.init('#repository-stock-value-units', {
-            noEmptyOption: true,
-            singleSelect: true,
-            closeOnSelect: true,
-            selectAppearance: 'simple'
-          });
-
-          $manageModal.find('form').on('ajax:success', function() {
-            var dataTable = $('.dataTable').DataTable();
-            $manageModal.modal('hide');
-            dataTable.ajax.reload();
-          });
-
-          $('.stock-operator-option').click(function() {
-            var $stockInput = $('#stock-input-amount');
-            $('.stock-operator-option').removeClass('btn-primary').addClass('btn-secondary');
-            $(this).removeClass('btn-secondary').addClass('btn-primary');
-            $stockInput.data('operator', $(this).data('operator'));
-
-            switch ($(this).data('operator')) {
-              case 'set':
-                $stockInput.val($stockInput.data('currentAmount'));
-                break;
-              case 'add':
-                $stockInput.val('');
-                break;
-              case 'remove':
-                $stockInput.val('');
-                break;
-              default:
-
-                break;
-            }
-          });
-
-          $('#stock-input-amount').on('input', function() {
-            var currentAmount = parseFloat($(this).data('currentAmount'));
-            var inputAmount = parseFloat($(this).val());
-            var newAmount;
-
-            if (!inputAmount) return;
-
-            switch ($(this).data('operator')) {
-              case 'set':
-                newAmount = inputAmount;
-                break;
-              case 'add':
-                newAmount = currentAmount + inputAmount;
-                break;
-              case 'remove':
-                newAmount = currentAmount - inputAmount;
-                break;
-              default:
-                newAmount = currentAmount;
-                break;
-            }
-            $('#repository_stock_value_amount').val(newAmount);
-          });
-
-          $manageModal.modal('show');
-        }
-      });
-    });
-  }
-
-  return {
-    init: () => {
-      initManageAction();
-    }
-  };
-}());
 
 $(document).on('turbolinks:load', function() {
   RepositoryColumns.init();
-  RepositoryStockValues.init();
 });

app/assets/stylesheets/repository/stock_modal.scss

@@ -0,0 +1,38 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.repository-stock-modal {
+  .stock-update-view {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+
+    .stock-initial-container,
+    .stock-final-container {
+      align-items: center;
+      background: $color-concrete;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      padding: .5em 0;
+
+      .value {
+        @include font-h1;
+      }
+
+      .subtitle {
+        @include font-small;
+        color: $color-silver-chalice;
+      }
+
+      .units {
+        @include font-small;
+      }
+    }
+
+    .stock-arrow {
+      @include font-h1;
+      padding: 1em;
+    }
+  }
+}

app/views/repository_columns/_manage_column_modal_content.html.erb

@@ -79,10 +79,12 @@
           <option data-create-url="<%= repository_repository_columns_stock_columns_path(@repository) %>"
                   data-edit-url="<%= repository_repository_columns_stock_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
                   value="RepositoryStockValue"
+                  <% if @repository.repository_columns.where(data_type: 'RepositoryStockValue').any? %>
                     data-params="<%= {
-                    optionClass: ('disabled-option' if @repository.repository_columns.where(data_type: 'RepositoryStockValue').any?),
+                      optionClass: 'disabled-option',
                       text_description: 'Only one per inventory allowed'
                     }.to_json %>"
+                  <% end %>
                   <%= 'selected' if @repository_column.repository_stock_value? %> >
             <%= t('libraries.manange_modal_column.select.repository_stock_value') %>
           </option>

app/views/repository_stock_values/_manage_modal.html.erb

@@ -1,4 +1,4 @@
-<div class="modal"
+<div class="modal repository-stock-modal"
      id="manage-repository-stock-value-modal"
      tabindex="-1"
      role="dialog"
@@ -8,3 +8,4 @@
     </div>
   </div>
 </div>
+<%= javascript_include_tag 'repositories/stock' %>

app/views/repository_stock_values/_manage_modal_content.erb

@@ -9,6 +9,7 @@
   </div>
   <div class="modal-body">
     <%= hidden_field_tag 'repository_stock_value[amount]', repository_stock_value.amount %>
+    <%= hidden_field_tag 'initial_units', repository_stock_value.units %>
     <p><%= t('repository_stock_values.manage_modal.enter_amount') %></p>
     <div class="row">
       <div class="col-sm-5">
@@ -49,10 +50,9 @@
           </div>
           <div class="col-sm-6">
             <label><%= t('repository_stock_values.manage_modal.unit') %></label>
-            <select class="form-control" name="repository_stock_value[units]" id="repository-stock-value-units" required>
+            <select class="form-control" name="repository_stock_value[units]" id="repository-stock-value-units" required data-placeholder="<%= t('repository_stock_values.manage_modal.unit_prompt') %>">
-              <option value="" <%= 'selected="selected"' unless repository_stock_value.units %> disabled><%= t('repository_stock_values.manage_modal.unit_prompt') %></option>
               <% units.each do |unit| %>
-                <option <%= 'selected="selected"' if repository_stock_value.units == unit %>>
+                <option value="<%= unit.data %>" <%= 'data-selected=true' if repository_stock_value.units == unit.data %>>
                   <%= unit.data %>
                 </option>
               <% end %>
@@ -76,6 +76,27 @@
         </div>
       </div>
     </div>
+    <% unless repository_stock_value.new_record? %>
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="stock-update-view">
+            <div class="stock-initial-container">
+              <span class="subtitle"><%= t('repository_stock_values.manage_modal.current_stock') %></span>
+              <span class="value"><%= repository_stock_value.amount %></span>
+              <span class="units"><%= repository_stock_value.units %></span>
+            </div>
+            <div class="stock-arrow">
+              <i class="fas fa-arrow-right"></i>
+            </div>
+            <div class="stock-final-container">
+              <span class="subtitle"><%= t('repository_stock_values.manage_modal.new_stock') %></span>
+              <span class="value"><%= repository_stock_value.amount %></span>
+              <span class="units"><%= repository_stock_value.units %></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
   </div>
   <div class="modal-footer">
     <button type="button"

config/initializers/assets.rb

@@ -81,6 +81,7 @@ 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/stock.js)
 Rails.application.config.assets.precompile += %w(repositories/repository_datatable.js)
 Rails.application.config.assets.precompile += %w(activities/index.js)
 Rails.application.config.assets.precompile += %w(global_activities/index.js)

config/locales/en.yml

@@ -1556,6 +1556,9 @@ en:
       unit_error: "Select a unit"
       comment: "Comment (optional)"
       comment_placeholder: "Enter comment"
+      current_stock: "Current stock"
+      new_stock: "New stock"
+
   libraries:
     manange_modal_column_index:
       title: "Manage columns"