From 735b5789cca20690e5e05015723f88fbfeec68fd Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 16 Nov 2023 11:29:58 +1100
Subject: [PATCH] [wip] Style on-hand button

Had to update the form controller a little bit to handle buttons.

But arrow not showwing on focus.
Getting some weird SCSS behaviour here.. maybe I'm trying to be too clever.
---
 app/views/admin/products_v3/_table.html.haml  |  2 +
 .../controllers/bulk_form_controller.js       |  2 +-
 app/webpacker/css/admin/products_v3.scss      | 47 +++++++++++++++++++
 .../stimulus/bulk_form_controller_test.js     |  1 +
 4 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index 54a7c0c691..31e8e27a24 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/app/views/admin/products_v3/_table.html.haml
@@ -86,6 +86,8 @@
                   = variant_form.text_field :price, 'aria-label': t('admin.products_page.columns.price'), value: number_to_currency(variant.price, unit: '')&.strip # TODO: add a spec to prove that this formatting is necessary. If so, it should be in a shared form helper for currency inputs
                   = error_message_on variant, :price
                 %td.field.on-hand__wrapper
+                  %button.on-hand__button
+                    = variant.on_demand ? t(:on_demand) : variant.on_hand
                   %div.on-hand__popout
                     .field
                       = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
diff --git a/app/webpacker/controllers/bulk_form_controller.js b/app/webpacker/controllers/bulk_form_controller.js
index ab93978584..9b10cd68c1 100644
--- a/app/webpacker/controllers/bulk_form_controller.js
+++ b/app/webpacker/controllers/bulk_form_controller.js
@@ -100,6 +100,6 @@ export default class BulkFormController extends Controller {
   }
 
   #isChanged(element) {
-    return element.value != element.defaultValue;
+    return element.defaultValue !== undefined && element.value != element.defaultValue;
   }
 }
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 949575b7f5..4dbbaf39b0 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -280,7 +280,54 @@
     &__wrapper {
       position: relative;
     }
+
+    &__button {
+      // override button styles
+      &.on-hand__button {
+        background: $color-tbl-cell-bg;
+        color: $color-txt-text;
+        white-space: nowrap;
+        border-color: transparent;
+        font-weight: normal;
+        padding-left: $border-radius; // Super compact
+        padding-right: 1rem; // Retain space for arrow
+        height: auto;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background: $color-tbl-cell-bg;
+          color: $color-txt-text;
+          position: relative;
+        }
+      }
+
+      &:hover:not(:active):not(:focus) {
+        border-color: transparent;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        // for some reason, sass ignores &:active, &:focus here. we could make this a mixin and include it in multiple rules instead
+        &:before {
+          // for some reason, sass seems to extends the selector to include every other :before selector in the app! probably causing the above, and potentially breaking other styles.
+          // extending .icon-chevron-down causes infinite loop in compilation. does @include work for classes?
+          font-family: FontAwesome;
+          text-decoration: inherit;
+          display: inline-block;
+          speak: none;
+          content: "\f078";
+
+          position: absolute;
+          right: $border-radius;
+          font-size: 0.67em;
+        }
+      }
+    }
+
     &__popout {
+      display: none;
       position: absolute;
       top: -1em;
       left: -1em;
diff --git a/spec/javascripts/stimulus/bulk_form_controller_test.js b/spec/javascripts/stimulus/bulk_form_controller_test.js
index d558e4b37a..fdbfcde2be 100644
--- a/spec/javascripts/stimulus/bulk_form_controller_test.js
+++ b/spec/javascripts/stimulus/bulk_form_controller_test.js
@@ -36,6 +36,7 @@ describe("BulkFormController", () => {
           <div data-record-id="1">
             <input id="input1a" type="text" value="initial1a">
             <input id="input1b" type="text" value="initial1b">
+            <button>a button is an element, but never changed</button>
           </div>
           <div data-record-id="2">
             <input id="input2" type="text" value="initial2">