Added unit convertes for billing article fields

foodcoops · Jun 16, 2022 · 870f5b7 · 870f5b7
1 parent 35f3c54
commit 870f5b7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 25 deletions.
diff --git a/app/assets/javascripts/article-form.js b/app/assets/javascripts/article-form.js
@@ -5,6 +5,7 @@ class ArticleForm {
       this.unitFieldsPrefix = fieldNamePrefix;
       this.articleUnitRatioTemplate$ = articleUnitRatioTemplate$;
       this.articleForm$ = articleForm$;
+      this.unitConversionPopoverTemplate$ = this.articleForm$.find('#unit_conversion_popover_content_template');
       this.unit$ = $(`#${this.unitFieldsPrefix}_unit`, this.articleForm$);
       this.supplierUnitSelect$ = $(`#${this.unitFieldsPrefix}_supplier_order_unit`, this.articleForm$);
       this.unitRatiosTable$ = $('#fc_base_price', this.articleForm$);
@@ -33,7 +34,7 @@ class ArticleForm {
       this.initializeOrderedAndReceivedUnits();
       this.convertOrderedAndReceivedUnits(this.supplierUnitSelect$.val(), this.billingUnit$.val());
       this.initializeFormSubmitListener();
-    } catch(e) {
+    } catch (e) {
       console.log('Could not initialize article form', e);
     }
   }
@@ -67,7 +68,7 @@ class ArticleForm {
   loadAvailableUnits() {
     this.availableUnits = Object.entries(this.units)
       .filter(([, unit]) => unit.visible)
-      .map(([code, unit]) => ({key: code, label: unit.name, baseUnit: unit.baseUnit}));
+      .map(([code, unit]) => ({ key: code, label: unit.name, baseUnit: unit.baseUnit }));
 
     $(`#${this.unitFieldsPrefix}_supplier_order_unit`, this.articleForm$).select2(this.select2Config);
   }
@@ -231,15 +232,15 @@ class ArticleForm {
     const unitsSelectedAbove = [];
     if (this.supplierUnitSelect$.val() != '') {
       const chosenOption$ = $(`option[value="${this.supplierUnitSelect$.val()}"]`, this.supplierUnitSelect$);
-      unitsSelectedAbove.push({key: chosenOption$.val(), label: chosenOption$.text()});
+      unitsSelectedAbove.push({ key: chosenOption$.val(), label: chosenOption$.text() });
     } else {
-      unitsSelectedAbove.push({key: '', label: this.unit$.val()});
+      unitsSelectedAbove.push({ key: '', label: this.unit$.val() });
     }
 
     const selectedRatioUnits = $('tr select[name$="[unit]"]', this.unitRatiosTable$).map((_, ratioSelect) => ({
-        key: $(ratioSelect).val(),
-        label: $(`option[value="${$(ratioSelect).val()}"]`, ratioSelect).text()
-      }))
+      key: $(ratioSelect).val(),
+      label: $(`option[value="${$(ratioSelect).val()}"]`, ratioSelect).text()
+    }))
       .get()
       .filter(option => option.key !== '');
 
@@ -330,7 +331,7 @@ class ArticleForm {
     for (let i = numberOfRatios; i > 1; i--) {
       const currentField$ = $(`input[name="${ratioQuantityFieldNameByIndex(i)}"]`, this.articleForm$);
       const currentValue = currentField$.val();
-      const previousValue = $(`input[name="${ratioQuantityFieldNameByIndex(i-1)}"]:last`, this.articleForm$).val();
+      const previousValue = $(`input[name="${ratioQuantityFieldNameByIndex(i - 1)}"]:last`, this.articleForm$).val();
       currentField$.val(currentValue / previousValue);
     }
   }
@@ -343,7 +344,10 @@ class ArticleForm {
   }
 
   initializeOrderedAndReceivedUnits() {
-    this.billingUnit$.change(() => this.updateOrderedAndReceivedUnits());
+    this.billingUnit$.change(() => {
+      this.updateOrderedAndReceivedUnits();
+      this.initializeOrderedAndReceivedUnitsConverters();
+    });
     this.billingUnit$.trigger('change');
   }
 
@@ -368,13 +372,29 @@ class ArticleForm {
     });
   }
 
+  initializeOrderedAndReceivedUnitsConverters() {
+    this.unitsToOrder$.unitConversionField('destroy');
+    this.unitsReceived$.unitConversionField('destroy');
+
+    const opts = {
+      units: this.units,
+      popoverTemplate$: this.unitConversionPopoverTemplate$,
+      ratios: this.ratios,
+      supplierOrderUnit: this.supplierUnitSelect$.val(),
+      customUnit: this.unit$.val(),
+      defaultUnit: this.billingUnit$.val()
+    };
+    this.unitsToOrder$.unitConversionField(opts);
+    this.unitsReceived$.unitConversionField(opts);
+  }
+
   loadRatios() {
     this.ratios = [];
-    this.unitRatiosTable$.find('tr').each((_, element) => {
+    this.unitRatiosTable$.find('tbody tr').each((_, element) => {
       const tr$ = $(element);
       const unit = tr$.find(`select[name^="${this.unitFieldsPrefix}[article_unit_ratios_attributes]"][name$="[unit]"]`).val();
       const quantity = tr$.find(`input[name^="${this.unitFieldsPrefix}[article_unit_ratios_attributes]"][name$="[quantity]"]:last`).val();
-      this.ratios.push({unit, quantity});
+      this.ratios.push({ unit, quantity });
     });
   }
 
@@ -405,7 +425,7 @@ function ratioQuantityFieldNameByIndex(i) {
 
 
 function mergeJQueryObjects(array_of_jquery_objects) {
-  return $($.map(array_of_jquery_objects, function(el) {
-      return el.get();
+  return $($.map(array_of_jquery_objects, function (el) {
+    return el.get();
   }));
 }
diff --git a/app/assets/javascripts/unit-conversion-field.js b/app/assets/javascripts/unit-conversion-field.js
@@ -4,12 +4,16 @@
 (function ( $ ) {
 
   class UnitConversionField {
-    constructor(field$, units, popoverTemplate$, useTargetUnitForStep = true) {
+    constructor(field$, units, popoverTemplate$, useTargetUnitForStep = true, ratios = undefined, supplierOrderUnit = undefined, defaultUnit = undefined, customUnit = undefined) {
       this.field$ = field$;
       this.popoverTemplate$ = popoverTemplate$;
       this.popoverTemplate = this.popoverTemplate$[0].content.querySelector('.popover_contents');
       this.units = units;
       this.useTargetUnitForStep = useTargetUnitForStep;
+      this.ratios = ratios;
+      this.supplierOrderUnit = supplierOrderUnit;
+      this.defaultUnit = defaultUnit;
+      this.customUnit = customUnit;
 
       this.loadArticleUnitRatios();
 
@@ -24,23 +28,31 @@
     }
 
     loadArticleUnitRatios() {
-      this.ratios = [];
-      for (let i = 0; this.field$.data(`ratio-quantity-${i}`) !== undefined; i++) {
-        this.ratios.push({
-          quantity: parseFloat(this.field$.data(`ratio-quantity-${i}`)),
-          unit: this.field$.data(`ratio-unit-${i}`),
-        });
+      if (!this.ratios) {
+        this.ratios = [];
+        for (let i = 0; this.field$.data(`ratio-quantity-${i}`) !== undefined; i++) {
+          this.ratios.push({
+            quantity: parseFloat(this.field$.data(`ratio-quantity-${i}`)),
+            unit: this.field$.data(`ratio-unit-${i}`),
+          });
+        }
       }
 
-      this.supplierOrderUnit = this.field$.data('supplier-order-unit');
-      this.customUnit = this.field$.data('custom-unit');
-      this.defaultUnit = this.field$.data('default-unit');
+      if (this.supplierOrderUnit === undefined) {
+        this.supplierOrderUnit = this.field$.data('supplier-order-unit');
+      }
+      if (this.customUnit === undefined) {
+        this.customUnit = this.field$.data('custom-unit');
+      }
+      if (this.defaultUnit === undefined) {
+        this.defaultUnit = this.field$.data('default-unit');
+      }
     }
 
     initializeFocusListener() {
       this.field$.popover({title: 'Conversions', placement: 'bottom', trigger: 'manual'});
 
-      this.field$.focus(() => this.openPopover());
+      this.field$.on('focus.unit-conversion-field',() => this.openPopover());
 
       this.field$.on('shown.bs.popover', () => this.initializeConversionPopover(this.field$.next('.popover')));
     }
@@ -199,8 +211,15 @@
         return conversionField;
       case 'getConverter':
         return conversionField === undefined ? undefined : conversionField.converter;
+      case 'destroy':
+        if (conversionField === undefined) {
+          break;
+        }
+        conversionField.converter.field$.off('focus.unit-conversion-field');
+        convertersMap.delete($(this)[0]);
+        break;
       default: {
-        const converter = new UnitConversionField($(this), optionsOrAction.units, optionsOrAction.popoverTemplate$, optionsOrAction.useTargetUnitForStep);
+        const converter = new UnitConversionField($(this), optionsOrAction.units, optionsOrAction.popoverTemplate$, optionsOrAction.useTargetUnitForStep, optionsOrAction.ratios, optionsOrAction.supplierOrderUnit, optionsOrAction.defaultUnit, optionsOrAction.customUnit);
         convertersMap.set($(this)[0], converter);
         break;
       }

diff --git a/app/views/articles/_form.html.haml b/app/views/articles/_form.html.haml
@@ -4,6 +4,7 @@
     const units = #{raw(ArticleUnits.units.to_json)};
     new ArticleForm(articleUnitRatioTemplate$, $('.article-form').parents('form'), units);
 
+  = render 'shared/js_templates/unit_conversion_popover_template'
   = f.hidden_field :shared_updated_on
   = f.hidden_field :supplier_id
   .modal-header

diff --git a/app/views/order_articles/_edit.html.haml b/app/views/order_articles/_edit.html.haml
@@ -26,6 +26,7 @@
             const articleUnitRatioTemplate$ = $($.parseHTML("#{escape_javascript(render(partial: 'shared/article_unit_ratio', locals: {article_unit_ratio: @empty_article_unit_ratio, f: fprice, article_unit_ratio_counter: -1}))}"));
             const units = #{raw(ArticleUnits.units.to_json)};
             new ArticleForm(articleUnitRatioTemplate$, $('.article-form').parents('form'), units, 'article_price');
+          = render 'shared/js_templates/unit_conversion_popover_template'
           = render partial: 'shared/article_fields_units', locals: {f: fprice, article: @order_article.article_price}
           = render partial: 'shared/article_fields_price', locals: {f: fprice, article: @order_article.article_price}