Refactor inventory batch "add row" page, per new theme

tailbone/templates/batch/inventory/desktop_form.mako

@@ -1,10 +1,11 @@
 ## -*- coding: utf-8; -*-
-<%inherit file="/base.mako" />
+<%inherit file="/form.mako" />
 
 <%def name="title()">Inventory Form</%def>
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   ${h.javascript_link(request.static_url('tailbone:static/js/numeric.js'))}
   <script type="text/javascript">
 
@@ -200,10 +201,12 @@
 
     });
   </script>
+  % endif
 </%def>
 
 <%def name="extra_styles()">
   ${parent.extra_styles()}
+  % if not use_buefy:
   <style type="text/css">
 
     #product-info {
@@ -226,19 +229,274 @@
     }
 
   </style>
+  % endif
 </%def>
 
-
 <%def name="context_menu_items()">
+  ${parent.context_menu_items()}
   <li>${h.link_to("Back to Inventory Batch", url('batch.inventory.view', uuid=batch.uuid))}</li>
 </%def>
 
+<%def name="render_form()">
+  % if use_buefy:
 
-<ul id="context-menu">
+      <script type="text/x-template" id="${form.component}-template">
-  ${self.context_menu_items()}
+        <div class="product-info">
-</ul>
 
-<div class="form-wrapper">
+          ${h.form(form.action_url, **{'@submit': 'handleSubmit'})}
+          ${h.csrf_token(request)}
+
+          ${h.hidden('product', **{':value': 'productInfo.uuid'})}
+          ${h.hidden('upc', **{':value': 'productInfo.upc'})}
+          ${h.hidden('brand_name', **{':value': 'productInfo.brand_name'})}
+          ${h.hidden('description', **{':value': 'productInfo.description'})}
+          ${h.hidden('size', **{':value': 'productInfo.size'})}
+          ${h.hidden('case_quantity', **{':value': 'productInfo.case_quantity'})}
+
+          <b-field label="Product UPC" horizontal>
+            <div style="display: flex; flex-direction: column;">
+              <b-input v-model="productUPC"
+                       ref="productUPC"
+                       @input="productChanged"
+                       @keydown.native="productKeydown">
+              </b-input>
+              <div class="has-text-centered block">
+
+                <p v-if="!productInfo.uuid"
+                   class="block">
+                  please ENTER a scancode
+                </p>
+
+                <p v-if="productInfo.uuid"
+                   class="block">
+                  {{ productInfo.full_description }}
+                </p>
+
+                <div style="min-height: 150px; margin: 0.5rem 0;">
+                  <img v-if="productInfo.uuid"
+                       :src="productInfo.image_url" />
+                </div>
+
+                <div v-if="alreadyPresentInBatch"
+                     class="has-background-danger">
+                  product already exists in batch, please confirm count
+                </div>
+
+                <div v-if="forceUnitItem"
+                     class="has-background-danger">
+                  pack item scanned, but must count units instead
+                </div>
+
+##                 <div v-if="productNotFound"
+##                      class="has-background-danger">
+##                   please confirm UPC and provide more details
+##                 </div>
+
+              </div>
+            </div>
+          </b-field>
+
+##           <div v-if="productNotFound"
+##                ## class="product-fields"
+##                >
+##
+##             <div class="field-wrapper brand_name">
+##               <label for="brand_name">Brand Name</label>
+##               <div class="field">${h.text('brand_name')}</div>
+##             </div>
+##
+##             <div class="field-wrapper description">
+##               <label for="description">Description</label>
+##               <div class="field">${h.text('description')}</div>
+##             </div>
+##
+##             <div class="field-wrapper size">
+##               <label for="size">Size</label>
+##               <div class="field">${h.text('size')}</div>
+##             </div>
+##
+##             <div class="field-wrapper case_quantity">
+##               <label for="case_quantity">Units in Case</label>
+##               <div class="field">${h.text('case_quantity')}</div>
+##             </div>
+##
+##           </div>
+
+          % if allow_cases:
+              <b-field label="Cases" horizontal>
+                <b-input name="cases"
+                         v-model="productCases"
+                         ref="productCases"
+                         :disabled="!productInfo.uuid">
+                </b-input>
+              </b-field>
+          % endif
+
+          <b-field label="Units" horizontal>
+            <b-input name="units"
+                     v-model="productUnits"
+                     ref="productUnits"
+                     :disabled="!productInfo.uuid">
+            </b-input>
+          </b-field>
+
+          <b-button type="is-primary"
+                    native-type="submit"
+                    :disabled="submitting">
+            {{ submitting ? "Working, please wait..." : "Submit" }}
+          </b-button>
+
+          ${h.end_form()}
+        </div>
+      </script>
+
+      <script type="text/javascript">
+
+        let ${form.component_studly} = {
+            template: '#${form.component}-template',
+
+            mounted() {
+                this.$refs.productUPC.focus()
+            },
+
+            methods: {
+
+                clearProduct() {
+                    this.productInfo = {}
+                    ## this.productNotFound = false
+                    this.alreadyPresentInBatch = false
+                    this.forceUnitItem = false
+                    this.productCases = null
+                    this.productUnits = null
+                },
+
+                assertQuantity() {
+
+                    % if allow_cases:
+                        let cases = parseFloat(this.productCases)
+                        if (!isNaN(cases)) {
+                            if (cases > 999999) {
+                                alert("Case amount is invalid!")
+                                this.$refs.productCases.focus()
+                                return false
+                            }
+                            return true
+                        }
+                    % endif
+
+                    let units = parseFloat(this.productUnits)
+                    if (!isNaN(units)) {
+                        if (units > 999999) {
+                            alert("Unit amount is invalid!")
+                            this.$refs.productUnits.focus()
+                            return false
+                        }
+                        return true
+                    }
+
+                    alert("Please provide case and/or unit quantity")
+                    % if allow_cases:
+                        this.$refs.productCases.focus()
+                    % else:
+                        this.$refs.productUnits.focus()
+                    % endif
+                },
+
+                handleSubmit(event) {
+                    if (!this.assertQuantity()) {
+                        event.preventDefault()
+                        return
+                    }
+                    this.submitting = true
+                },
+
+                productChanged() {
+                    this.clearProduct()
+                },
+
+                productKeydown(event) {
+                    if (event.which == 13) { // ENTER
+                        this.productLookup()
+                        event.preventDefault()
+                    }
+                },
+
+                productLookup() {
+                    let url = '${url('batch.inventory.desktop_lookup', uuid=batch.uuid)}'
+                    let params = {
+                        upc: this.productUPC,
+                    }
+                    this.$http.get(url, {params: params}).then(response => {
+
+                        if (response.data.error) {
+                            alert(response.data.error)
+                            if (response.data.redirect) {
+                                location.href = response.data.redirect
+                            }
+
+                        } else if (response.data.product.uuid) {
+
+                            this.productUPC = response.data.product.upc_pretty
+                            this.productInfo = response.data.product
+                            this.forceUnitItem = response.data.force_unit_item
+                            this.alreadyPresentInBatch = response.data.already_present_in_batch
+
+                            if (this.alreadyPresentInBatch) {
+                                this.productCases = response.data.cases
+                                this.productUnits = response.data.units
+                            } else if (this.productInfo.type2) {
+                                this.productUnits = this.productInfo.units
+                            }
+
+                            this.$nextTick(() => {
+                                if (this.productInfo.type2) {
+                                    this.$refs.productUnits.focus()
+                                } else {
+                                    % if allow_cases and prefer_cases:
+                                        if (this.productCases) {
+                                            this.$refs.productCases.focus()
+                                        } else if (this.productUnits) {
+                                            this.$refs.productUnits.focus()
+                                        } else {
+                                            this.$refs.productCases.focus()
+                                        }
+                                    % else:
+                                        this.$refs.productUnits.focus()
+                                    % endif
+                                }
+                            })
+
+                        } else {
+                            ## this.productNotFound = true
+                            alert("Product not found!")
+                        }
+                    })
+                },
+            },
+        }
+
+        let ${form.component_studly}Data = {
+            submitting: false,
+
+            productUPC: null,
+            ## productNotFound: false,
+            productInfo: {},
+
+            % if allow_cases:
+            productCases: null,
+            % endif
+            productUnits: null,
+
+            alreadyPresentInBatch: false,
+            forceUnitItem: false,
+        }
+
+      </script>
+
+  % else:
+      ## not buefy
+
+      <div class="form-wrapper">
         ${h.form(form.action_url, id='inventory-form')}
         ${h.csrf_token(request)}
 
@@ -298,4 +556,10 @@
         </div>
 
         ${h.end_form()}
-</div>
+      </div>
+
+  % endif
+</%def>
+
+
+${parent.body()}

tailbone/templates/form.mako

@@ -57,7 +57,7 @@
 <%def name="before_object_helpers()"></%def>
 
 <%def name="render_this_page_template()">
-  % if form is not Underined:
+  % if form is not Undefined:
       ${self.render_form()}
   % endif
   ${parent.render_this_page_template()}

tailbone/views/batch/core.py

@@ -705,8 +705,14 @@ class BatchMasterView(MasterView):
         if self.rows_creatable and not batch.executed and not batch.complete:
             permission_prefix = self.get_permission_prefix()
             if self.request.has_perm('{}.create_row'.format(permission_prefix)):
-                link = tags.link_to("Create a new {}".format(self.get_row_model_title()),
+                url = self.get_action_url('create_row', batch)
-                                    self.get_action_url('create_row', batch))
+                if self.get_use_buefy():
+                    return self.make_buefy_button("New Row", url=url,
+                                                  is_primary=True,
+                                                  icon_left='plus')
+                else:
+                    text = "Create a new {}".format(self.get_row_model_title())
+                    link = tags.link_to(text, url)
                     return HTML.tag('p', c=[link])
 
     def make_batch_row_grid_tools(self, batch):

tailbone/views/batch/inventory.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2021 Lance Edgar
+#  Copyright © 2010-2023 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -234,8 +234,10 @@ class InventoryBatchView(BatchMasterView):
         if batch.executed:
             return self.redirect(self.get_action_url('view', batch))
 
+        use_buefy = self.get_use_buefy()
         schema = DesktopForm().bind(session=self.Session())
-        form = forms.Form(schema=schema, request=self.request)
+        form = forms.Form(schema=schema, request=self.request, use_buefy=use_buefy)
+        if self.request.method == 'POST':
             if form.validate(newstyle=True):
 
                 product = self.Session.query(model.Product).get(form.validated['product'])
@@ -269,6 +271,11 @@ class InventoryBatchView(BatchMasterView):
                     form.validated['upc'].pretty(), description))
                 return self.redirect(self.request.current_route_url())
 
+            else:
+                dform = form.make_deform_form()
+                msg = "Form did not validate: {}".format(six.text_type(dform.error))
+                self.request.session.flash(msg, 'error')
+
         title = self.get_instance_title(batch)
         return self.render_to_response('desktop_form', {
             'batch': batch,