Extract unit_value and unit_description values

Copied from display_as.js.coffee (ofn.admin.ofnDisplayAs.variantUnitProperties).

app/views/admin/products_v3/_variant_row.html.haml

@@ -14,7 +14,9 @@
     = variant.unit_to_display # Show the generated summary of unit values
   %div.popout__container{ style: 'display: none;', 'data-controller': 'toggle-control', 'data-popout-target': "dialog" }
     .field
-      -# Composite field for unit_value and unit_description
+      -# Show a composite field for unit_value and unit_description
+      = f.hidden_field :unit_value
+      = f.hidden_field :unit_description
       -# todo: create a method for value_with_description
       = f.text_field :unit_value_with_description,
           value: [number_with_precision(variant.unit_value, precision: nil,strip_insignificant_zeros: true), variant.unit_description].compact_blank.join(" "),

app/webpacker/controllers/variant_controller.js

@@ -10,6 +10,8 @@ export default class VariantController extends Controller {
     this.variantUnitScale = product.querySelector('[name$="[variant_unit_scale]"]');
     this.variantUnitName = product.querySelector('[name$="[variant_unit_name]"]');
 
+    this.unitValue = this.element.querySelector('[name$="[unit_value]"]');
+    this.unitDescription = this.element.querySelector('[name$="[unit_description]"]');
     this.unitValueWithDescription = this.element.querySelector(
       '[name$="[unit_value_with_description]"]',
     );
@@ -23,7 +25,7 @@ export default class VariantController extends Controller {
 
     // on unit_value_with_description changed; update unit_value and unit_description
     // on unit_value and/or unit_description changed; update display_as:placeholder and unit_to_display
-    this.unitValueWithDescription.addEventListener("input", this.#unitValueChanged.bind(this), {
+    this.unitValueWithDescription.addEventListener("input", this.#unitChanged.bind(this), {
       passive: true,
     });
 
@@ -42,14 +44,22 @@ export default class VariantController extends Controller {
   #unitChanged(event) {
     //todo: deduplicate events.
     //Hmm in hindsight the logic in product_controller should be inn this controller already. then we can do everything in one event, and store the generated name in an instance variable.
+    this.#extractUnitValues();
     this.#updateUnitDisplay();
   }
 
-  // Extract unit_value and unit_description from unit_value_with_description,
-  // and update hidden fields
-  #unitValueChanged(event) {
-    //todo: deduplicate events.
-    this.#updateUnitDisplay();
+  // Extract unit_value and unit_description
+  #extractUnitValues() {
+    // Extract a number (optional) and text value, separated by a space.
+    const match = this.unitValueWithDescription.value.match(/^([\d\.\,]+(?= |$)|)( |)(.*)$/);
+    if (match) {
+      let unit_value = parseFloat(match[1].replace(",", "."));
+      unit_value = isNaN(unit_value) ? null : unit_value;
+      unit_value *= this.variantUnitScale.value ? this.variantUnitScale.value : 1;
+
+      this.unitValue.value = unit_value;
+      this.unitDescription.value = match[3];
+    }
   }
 
   // Update display_as placeholder and unit_to_display

spec/system/admin/products_v3/products_spec.rb

@@ -186,7 +186,18 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
       within row_containing_name("Medium box") do
         fill_in "Name", with: "Large box"
         fill_in "SKU", with: "POM-01"
-        fill_in "Unit", with: "500.1"
+
+        click_on "Unit" # activate popout
+      end
+
+      # Unit popout
+      # TODO: prevent empty value
+      # fill_in "Unit value", with: ""
+      # click_button "Save changes" # attempt to save or close the popout
+      # expect(page).to have_field "Unit value", with: "" # popout is still open
+      fill_in "Unit value", with: "500.1"
+
+      within row_containing_name("Medium box") do
         fill_in "Price", with: "10.25"
 
         click_on "On Hand" # activate popout
@@ -210,7 +221,7 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
         .and change{ product_a.variant_unit_scale }.to(0.001)
         .and change{ variant_a1.display_name }.to("Large box")
         .and change{ variant_a1.sku }.to("POM-01")
-        .and change{ variant_a1.unit_value }.to(500.1)
+        .and change{ variant_a1.unit_value }.to(0.5001) # volumes are stored in litres
         .and change{ variant_a1.price }.to(10.25)
         .and change{ variant_a1.on_hand }.to(6)
 
@@ -221,8 +232,6 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
       within row_containing_name("Large box") do
         expect(page).to have_field "Name", with: "Large box"
         expect(page).to have_field "SKU", with: "POM-01"
-        expect(page).to have_field "Unit value", with: "500.1"
-        pending "Units values not handled" # similar to old admin screen
         expect(page).to have_button "Unit", text: "500.1mL"
         expect(page).to have_field "Price", with: "10.25"
         expect(page).to have_button "On Hand", text: "6"
@@ -269,21 +278,44 @@ describe 'As an admin, I can manage products', feature: :admin_style_v3 do
       end
     end
 
-    it "saves a custom variant unit display name" do
-      within row_containing_name("Medium box") do
-        fill_in "Display unit as", with: "250g box"
+    describe "Changing unit values" do
+      # This is a rather strange feature, I wonder if anyone actually uses it.
+      it "saves a variant unit description" do
+        within row_containing_name("Medium box") do
+          click_on "Unit" # activate popout
+          fill_in "Unit value", with: "1000 boxed" # 1000 grams
+        end
+
+        expect {
+          click_button "Save changes"
+
+          expect(page).to have_content "Changes saved"
+          variant_a1.reload
+        }.to change{ variant_a1.unit_value }.to(1000)
+          .and change{ variant_a1.unit_description }.to("boxed")
+
+        within row_containing_name("Medium box") do
+          # New value is visible immediately
+          expect(page).to have_button "Unit", text: "1kg boxed"
+        end
       end
 
-      expect {
-        click_button "Save changes"
+      it "saves a custom variant unit display name" do
+        within row_containing_name("Medium box") do
+          fill_in "Display unit as", with: "250g box"
+        end
 
-        expect(page).to have_content "Changes saved"
-        variant_a1.reload
-      }.to change{ variant_a1.unit_to_display }.to("250g box")
+        expect {
+          click_button "Save changes"
 
-      within row_containing_name("Medium box") do
-        expect(page).to have_field "Display unit as", with: "250g box"
-        expect(page).to have_button "Unit", text: "250g box"
+          expect(page).to have_content "Changes saved"
+          variant_a1.reload
+        }.to change{ variant_a1.unit_to_display }.to("250g box")
+
+        within row_containing_name("Medium box") do
+          expect(page).to have_field "Display unit as", with: "250g box"
+          expect(page).to have_button "Unit", text: "250g box"
+        end
       end
     end