feat: maximum order quantity

Author: philipprothmann2iterate

app/assets/javascripts/application_legacy.js

@@ -18,6 +18,7 @@
 //= require_self
 //= require big
 //= require units-converter
+//= require validation-utils
 //= require migrate-units-form
 //= require article-form
 //= require unit-conversion-field

app/assets/javascripts/article-form.js

@@ -13,6 +13,7 @@ class ArticleForm {
       this.supplierUnitSelect$ = $(`#${this.unitFieldsIdPrefix}_supplier_order_unit`, this.articleForm$);
       this.unitRatiosTable$ = $('#fc_base_price', this.articleForm$);
       this.minimumOrderQuantity$ = $(`#${this.unitFieldsIdPrefix}_minimum_order_quantity`, this.articleForm$);
+      this.maximumOrderQuantity$ = $(`#${this.unitFieldsIdPrefix}_maximum_order_quantity`, this.articleForm$);
       this.billingUnit$ = $(`#${this.unitFieldsIdPrefix}_billing_unit`, this.articleForm$);
       this.groupOrderGranularity$ = $(`#${this.unitFieldsIdPrefix}_group_order_granularity`, this.articleForm$);
       this.groupOrderUnit$ = $(`#${this.unitFieldsIdPrefix}_group_order_unit`, this.articleForm$);
@@ -60,7 +61,7 @@ class ArticleForm {
       const tax = parseFloat(this.tax$.val());
       const deposit = parseFloat(this.deposit$.val());
       const grossPrice = (price + deposit) * (tax / 100 + 1);
-      const fcPrice = grossPrice  * (this.priceMarkup / 100 + 1);
+      const fcPrice = grossPrice * (this.priceMarkup / 100 + 1);
       const priceUnitLabel = this.getUnitLabel(this.priceUnit$.val());
       this.fcPrice$.find('.price_value').text(isNaN(fcPrice) ? '?' : I18n.l('currency', fcPrice));
       this.fcPrice$.find('.price_per_text').toggle(priceUnitLabel.trim() !== '');
@@ -88,7 +89,7 @@ class ArticleForm {
         this.loadRatios();
         this.undoPriceConversion();
         this.undoOrderAndReceivedUnitsConversion();
-      } catch(err) {
+      } catch (err) {
         e.preventDefault();
         throw err;
       }
@@ -191,6 +192,7 @@ class ArticleForm {
   initializeRegularFormFields() {
     this.unit$.change(() => {
       this.setMinimumOrderUnitDisplay();
+      this.setMaximumOrderUnitDisplay();
       this.updateAvailableBillingAndGroupOrderUnits();
       this.updateUnitMultiplierLabels();
       this.updateCustomUnitWarning();
@@ -204,6 +206,28 @@ class ArticleForm {
       this.updateCustomUnitWarning();
     });
     this.onSupplierUnitChanged();
+
+    // Add validation for minimum/maximum order quantity
+    this.initializeOrderQuantityValidation();
+  }
+
+  initializeOrderQuantityValidation() {
+    const validateOrderQuantities = () => {
+      const minValue = parseFloat(this.minimumOrderQuantity$.val()) || 0;
+      const maxValue = parseFloat(this.maximumOrderQuantity$.val()) || Infinity;
+
+      if (this.minimumOrderQuantity$.val() && this.maximumOrderQuantity$.val() && minValue > maxValue) {
+        const errorMessage = I18n.t('activerecord.errors.models.article_version.attributes.minimum_order_quantity.greater_than_maximum');
+        this.minimumOrderQuantity$[0].setCustomValidity(errorMessage);
+        this.maximumOrderQuantity$[0].setCustomValidity(errorMessage);
+      } else {
+        this.minimumOrderQuantity$[0].setCustomValidity('');
+        this.maximumOrderQuantity$[0].setCustomValidity('');
+      }
+    };
+
+    this.minimumOrderQuantity$.on('input change', validateOrderQuantities);
+    this.maximumOrderQuantity$.on('input change', validateOrderQuantities);
   }
 
   updateCustomUnitWarning() {
@@ -227,6 +251,7 @@ class ArticleForm {
     this.unit$.toggle(!valueChosen);
     this.filterAvailableRatioUnits();
     this.setMinimumOrderUnitDisplay();
+    this.setMaximumOrderUnitDisplay();
     this.updateAvailableBillingAndGroupOrderUnits();
     this.updateUnitMultiplierLabels();
   }
@@ -245,6 +270,20 @@ class ArticleForm {
     this.minimumOrderQuantity$.attr('step', converter.isUnitSiConversible(this.supplierUnitSelect$.val()) ? 'any' : 1);
   }
 
+  setMaximumOrderUnitDisplay() {
+    const chosenOptionLabel = this.supplierUnitSelect$.val() !== ''
+      ? $(`option[value="${this.supplierUnitSelect$.val()}"]`, this.supplierUnitSelect$).text()
+      : undefined;
+    const unitVal = $(`#${this.unitFieldsIdPrefix}_unit`).val();
+    this.maximumOrderQuantity$
+      .parents('.input-group')
+      .find('.input-group-addon')
+      .text(chosenOptionLabel !== undefined ? chosenOptionLabel : unitVal);
+
+    const converter = this.getUnitsConverter();
+    this.maximumOrderQuantity$.attr('step', converter.isUnitSiConversible(this.supplierUnitSelect$.val()) ? 'any' : 1);
+  }
+
   bindAddRatioButton() {
     $('*[data-add-ratio]', this.articleForm$).on('click', (e) => {
       e.preventDefault();

app/assets/javascripts/group-order-form.js

@@ -11,14 +11,47 @@ class GroupOrderForm {
     this.groupBalance = config.groupBalance;
     this.minimumBalance = config.minimumBalance;
 
+    ValidationUtils.setupCustomValidation(this.form$);
+    
     this.initializeIncreaseDecreaseButtons();
     this.submitButton$.removeAttr('disabled');
+    this.initializeFormValidation();
   }
 
   initializeIncreaseDecreaseButtons() {
     this.articleRows$.each((_, element) => this.initializeOrderArticleRow($(element)));
   }
 
+  initializeFormValidation() {
+    this.form$.on('submit', (e) => {
+      // Update all validation messages first
+      this.articleRows$.each((_, row) => {
+        const row$ = $(row);
+        this.updateValidationMessages(row$);
+      });
+
+      // Check if form is valid - browser will prevent submission if invalid
+      if (!this.form$[0].checkValidity()) {
+        e.preventDefault();
+        
+        // Show popovers for all invalid inputs
+        this.form$.find(':invalid').each((_, invalidInput) => {
+          const input$ = $(invalidInput);
+          if (input$.hasClass('goa-quantity')) {
+            // Trigger validation to show popover
+            ValidationUtils.validateNumericInput(input$);
+          }
+        });
+        
+        // Focus on first invalid input
+        const firstInvalid = this.form$.find(':invalid').first();
+        if (firstInvalid.length > 0) {
+          firstInvalid.focus();
+        }
+      }
+    });
+  }
+
   initializeOrderArticleRow(row$) {
     const quantity$ = row$.find('.goa-quantity');
     const tolerance$ = row$.find('.goa-tolerance');
@@ -36,8 +69,18 @@ class GroupOrderForm {
     quantityAndTolerance$.change(() => {
       this.updateMissingUnits(row$, quantity$);
       this.updateBalance();
+      this.updateValidationMessages(row$);
     });
     quantityAndTolerance$.keyup(() => quantity$.trigger('change'));
+
+    // Handle validation events for quantity field only
+    quantity$.on('invalid', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.updateValidationMessages(row$);
+    });
+
+    this.updateValidationMessages(row$);
   }
 
   updateBalance() {
@@ -226,5 +269,30 @@ class GroupOrderForm {
     var remainder = Big(quantity).mod(packSize).toNumber();
     return (remainder > 0 && (Big(remainder).add(tolerance).toNumber() >= packSize));
   }
+
+  updateValidationMessages(row$) {
+    const quantity$ = row$.find('.goa-quantity');
+
+    if (quantity$.length === 0) return;
+
+    const inputElement = quantity$[0];
+    
+    // Clear any existing validation state
+    inputElement.setCustomValidity('');
+    
+    // Use ValidationUtils for validation with Bootstrap popovers
+    ValidationUtils.validateNumericInput(quantity$);
+
+    // Special case: item not available (max = 0)
+    const rawValue = quantity$.val().trim();
+    const inputValue = parseFloat(rawValue);
+    const maxValue = parseFloat(quantity$.attr('max'));
+
+    if (maxValue === 0 && inputValue > 0) {
+      const message = I18n.t('errors.item_not_available');
+      inputElement.setCustomValidity(message);
+      ValidationUtils.showValidationPopover(quantity$, message);
+    }
+  }
 }
 

app/assets/javascripts/unit-conversion-field.js

@@ -185,13 +185,22 @@
       const unitLabel = this.unitSelectOptions.find(option => option.value === unit).label;
       this.conversionResult$.text('= ' + this.getConversionResult() + ' x ' + unitLabel);
       this.conversionResult$.parent().find('.numeric-step-error').remove();
-      if (this.quantityInput$.is(':invalid')) {
-        this.applyButton$.attr('disabled', 'disabled');
-        const errorSpan$ = $(`<div class="numeric-step-error">${I18n.t('errors.step_error', {min: 0, granularity: this.quantityInput$.attr('step')})}</div>`);
-        errorSpan$.show();
-        this.conversionResult$.after(errorSpan$);
-      } else {
+
+      const errorSpan$ = $('<div class="numeric-step-error"></div>');
+      
+      // Use ValidationUtils for proper custom error messages
+      const isValid = ValidationUtils.validateNumericInput(this.quantityInput$, {
+        errorSpan$: errorSpan$
+      });
+      
+      if (isValid) {
         this.applyButton$.removeAttr('disabled');
+      } else {
+        this.applyButton$.attr('disabled', 'disabled');
+        if (errorSpan$.text()) {
+          errorSpan$.show();
+          this.conversionResult$.after(errorSpan$);
+        }
       }
     }