Fix "view receiving row" page, per oruga

all the buttons and tools *should* work correctly for Vue 2 and 3 now

tailbone/templates/receiving/view_row.mako

@@ -161,8 +161,13 @@
 
   </div>
 
-  <b-modal has-modal-card
+  <${b}-modal has-modal-card
-           :active.sync="accountForProductShowDialog">
+              % if request.use_oruga:
+                  v-model:active="accountForProductShowDialog"
+              % else:
+                  :active.sync="accountForProductShowDialog"
+              % endif
+              >
     <div class="modal-card">
 
       <header class="modal-card-head">
@@ -212,18 +217,26 @@
 
         </b-field>
 
-        <div class="level">
+        <div style="display: flex; gap: 0.5rem; align-items: center;">
-          <div class="level-left">
 
-            <div class="level-item">
+          <numeric-input v-model="accountForProductQuantity"
-              <numeric-input v-model="accountForProductQuantity"
+                         ref="accountForProductQuantityInput">
-                             ref="accountForProductQuantityInput">
+          </numeric-input>
-              </numeric-input>
-            </div>
 
-            <div class="level-item">
+          % if allow_cases:
-              % if allow_cases:
+              % if request.use_oruga:
-                  <b-field>
+                  <div>
+                    <o-button label="Units"
+                              :variant="accountForProductUOM == 'units' ? 'primary' : null"
+                              @click="accountForProductUOMClicked('units')" />
+                    <o-button label="Cases"
+                              :variant="accountForProductUOM == 'cases' ? 'primary' : null"
+                              @click="accountForProductUOMClicked('cases')" />
+                  </div>
+              % else:
+                  <b-field
+                    ## TODO: a bit hacky, but otherwise buefy styles throw us off here
+                    style="margin-bottom: 0;">
                     <b-radio-button v-model="accountForProductUOM"
                                     @click.native="accountForProductUOMClicked('units')"
                                     native-value="units">
@@ -235,24 +248,17 @@
                       Cases
                     </b-radio-button>
                   </b-field>
-              % else:
-                  <b-field>
-                    <input type="hidden" v-model="accountForProductUOM" />
-                    Units
-                  </b-field>
               % endif
-            </div>
+              <span v-if="accountForProductUOM == 'cases' && accountForProductQuantity">
+                = {{ accountForProductTotalUnits }}
+              </span>
 
-            % if allow_cases:
+          % else:
-                <div class="level-item"
+              <input type="hidden" v-model="accountForProductUOM" />
-                     v-if="accountForProductUOM == 'cases' && accountForProductQuantity">
+              <span>Units</span>
-                  = {{ accountForProductTotalUnits }}
+          % endif
-                </div>
-            % endif
 
-          </div>
         </div>
-
       </section>
 
       <footer class="modal-card-foot">
@@ -268,10 +274,15 @@
         </b-button>
       </footer>
     </div>
-  </b-modal>
+  </${b}-modal>
 
-  <b-modal has-modal-card
+  <${b}-modal has-modal-card
-           :active.sync="declareCreditShowDialog">
+              % if request.use_oruga:
+                  v-model:active="declareCreditShowDialog"
+              % else:
+                  :active.sync="declareCreditShowDialog"
+              % endif
+              >
     <div class="modal-card">
 
       <header class="modal-card-head">
@@ -319,47 +330,51 @@
 
         </b-field>
 
-        <div class="level">
+        <div style="display: flex; gap: 0.5rem; align-items: center;">
-          <div class="level-left">
 
-            <div class="level-item">
+            <numeric-input v-model="declareCreditQuantity"
-              <numeric-input v-model="declareCreditQuantity"
+                           ref="declareCreditQuantityInput">
-                             ref="declareCreditQuantityInput">
+            </numeric-input>
-              </numeric-input>
-            </div>
-
-            <div class="level-item">
-              % if allow_cases:
-                  <b-field>
-                    <b-radio-button v-model="declareCreditUOM"
-                                    @click.native="declareCreditUOMClicked('units')"
-                                    native-value="units">
-                      Units
-                    </b-radio-button>
-                    <b-radio-button v-model="declareCreditUOM"
-                                    @click.native="declareCreditUOMClicked('cases')"
-                                    native-value="cases">
-                      Cases
-                    </b-radio-button>
-                  </b-field>
-              % else:
-                  <b-field>
-                    <input type="hidden" v-model="declareCreditUOM" />
-                    Units
-                  </b-field>
-              % endif
-            </div>
 
             % if allow_cases:
-                <div class="level-item"
+
-                     v-if="declareCreditUOM == 'cases' && declareCreditQuantity">
+                % if request.use_oruga:
+                    <div>
+                      <o-button label="Units"
+                                :variant="declareCreditUOM == 'units' ? 'primary' : null"
+                                @click="declareCreditUOM = 'units'" />
+                      <o-button label="Cases"
+                                :variant="declareCreditUOM == 'cases' ? 'primary' : null"
+                                @click="declareCreditUOM = 'cases'" />
+                    </div>
+                % else:
+                    <b-field
+                      ## TODO: a bit hacky, but otherwise buefy styles throw us off here
+                      style="margin-bottom: 0;">
+                      <b-radio-button v-model="declareCreditUOM"
+                                      @click.native="declareCreditUOMClicked('units')"
+                                      native-value="units">
+                        Units
+                      </b-radio-button>
+                      <b-radio-button v-model="declareCreditUOM"
+                                      @click.native="declareCreditUOMClicked('cases')"
+                                      native-value="cases">
+                        Cases
+                      </b-radio-button>
+                    </b-field>
+                % endif
+                <span v-if="declareCreditUOM == 'cases' && declareCreditQuantity">
                   = {{ declareCreditTotalUnits }}
-                </div>
+                </span>
+
+            % else:
+                <b-field>
+                  <input type="hidden" v-model="declareCreditUOM" />
+                  Units
+                </b-field>
             % endif
 
-          </div>
         </div>
-
       </section>
 
       <footer class="modal-card-foot">
@@ -375,7 +390,7 @@
         </b-button>
       </footer>
     </div>
-  </b-modal>
+  </${b}-modal>
 
   <nav class="panel" >
     <p class="panel-heading">Credits</p>
@@ -527,6 +542,10 @@
 
     ThisPage.methods.accountForProductUOMClicked = function(uom) {
 
+        % if request.use_oruga:
+            this.accountForProductUOM = uom
+        % endif
+
         // TODO: this does not seem to work as expected..even though
         // the code appears to be correct
         this.$nextTick(() => {

tailbone/templates/themes/butterball/base.mako

@@ -264,6 +264,30 @@
         padding-left: 10rem;
     }
 
+    /******************************
+     * fix datepicker within modals
+     * TODO: someday this may not be necessary? cf.
+     * https://github.com/buefy/buefy/issues/292#issuecomment-347365637
+     ******************************/
+
+    /* TODO: this does change some things, but does not actually work 100% */
+    /* right for oruga 0.8.7 or 0.8.9 */
+
+    .modal .animation-content .modal-card {
+        overflow: visible !important;
+    }
+
+    .modal-card-body {
+        overflow: visible !important;
+    }
+
+    /* TODO: a simpler option we might try sometime instead?  */
+    /* cf. https://github.com/buefy/buefy/issues/292#issuecomment-1073851313 */
+
+    /* .dropdown-content{ */
+    /*     position: fixed; */
+    /* } */
+
   </style>
 </%def>
 

tailbone/templates/themes/butterball/field-components.mako

@@ -1,10 +1,93 @@
 ## -*- coding: utf-8; -*-
 
 <%def name="make_field_components()">
+  ${self.make_numeric_input_component()}
   ${self.make_tailbone_autocomplete_component()}
   ${self.make_tailbone_datepicker_component()}
 </%def>
 
+<%def name="make_numeric_input_component()">
+  <% request.register_component('numeric-input', 'NumericInput') %>
+  ${h.javascript_link(request.static_url('tailbone:static/js/numeric.js') + f'?ver={tailbone.__version__}')}
+  <script type="text/x-template" id="numeric-input-template">
+    <o-input v-model="orugaValue"
+             @update:model-value="orugaValueUpdated"
+             ref="input"
+             :disabled="disabled"
+             :icon="icon"
+             :name="name"
+             :placeholder="placeholder"
+             :size="size"
+             />
+  </script>
+  <script>
+
+    const NumericInput = {
+        template: '#numeric-input-template',
+
+        props: {
+            modelValue: [Number, String],
+            allowEnter: Boolean,
+            disabled: Boolean,
+            icon: String,
+            iconPack: String,   // ignored
+            name: String,
+            placeholder: String,
+            size: String,
+        },
+
+        data() {
+            return {
+                orugaValue: this.modelValue,
+                inputElement: null,
+            }
+        },
+
+        watch: {
+            modelValue(to, from) {
+                this.orugaValue = to
+            },
+        },
+
+        mounted() {
+            this.inputElement = this.$refs.input.$el.querySelector('input')
+            this.inputElement.addEventListener('keydown', this.keyDown)
+        },
+
+        beforeDestroy() {
+            this.inputElement.removeEventListener('keydown', this.keyDown)
+        },
+
+        methods: {
+
+            focus() {
+                this.$refs.input.focus()
+            },
+
+            keyDown(event) {
+                // by default we only allow numeric keys, and general navigation
+                // keys, but we might also allow Enter key
+                if (!key_modifies(event) && !key_allowed(event)) {
+                    if (!this.allowEnter || event.which != 13) {
+                        event.preventDefault()
+                    }
+                }
+            },
+
+            orugaValueUpdated(value) {
+                this.$emit('update:modelValue', value)
+                this.$emit('input', value)
+            },
+
+            select() {
+                this.$el.children[0].select()
+            },
+        },
+    }
+
+  </script>
+</%def>
+
 <%def name="make_tailbone_autocomplete_component()">
   <% request.register_component('tailbone-autocomplete', 'TailboneAutocomplete') %>
   <script type="text/x-template" id="tailbone-autocomplete-template">