Refactor the Ordering Worksheet generator, per Buefy

tailbone/menus.py

@@ -24,8 +24,6 @@
 App Menus
 """
 
-from __future__ import unicode_literals, absolute_import
-
 import re
 import logging
 import warnings
@@ -527,6 +525,19 @@ class MenuHandler(GenericHandler):
                 },
             ])
 
+        if kwargs.get('include_worksheets', False):
+            items.extend([
+                {'type': 'sep'},
+                {
+                    'title': "Ordering Worksheet",
+                    'route': 'reports.ordering',
+                },
+                {
+                    'title': "Inventory Worksheet",
+                    'route': 'reports.inventory',
+                },
+            ])
+
         if kwargs.get('include_trainwreck', False):
             items.extend([
                 {'type': 'sep'},

tailbone/reports/ordering_worksheet.mako

@@ -111,7 +111,7 @@
                     <td class="brand">${cost.product.brand or ''}</td>
                     <td class="desc">${cost.product.description}</td>
                     <td class="size">${cost.product.size or ''}</td>
-                    <td class="case-qty">${cost.case_size} ${"LB" if cost.product.weighed else "EA"}</td>
+                    <td class="case-qty">${app.render_quantity(cost.case_size)} ${"LB" if cost.product.weighed else "EA"}</td>
                     <td class="code">${cost.code or ''}</td>
                     <td class="preferred">${'X' if cost.preference == 1 else ''}</td>
                     % for i in range(14):

tailbone/templates/reports/base.mako

@@ -1,4 +0,0 @@
-## -*- coding: utf-8; -*-
-<%inherit file="/page.mako" />
-
-${parent.body()}

tailbone/templates/reports/inventory.mako

@@ -1,7 +1,7 @@
 ## -*- coding: utf-8 -*-
-<%inherit file="/reports/base.mako" />
+<%inherit file="/page.mako" />
 
-<%def name="title()">Report : Inventory Worksheet</%def>
+<%def name="title()">Inventory Worksheet</%def>
 
 <%def name="page_content()">
 

tailbone/templates/reports/ordering.mako

@@ -1,89 +1,120 @@
 ## -*- coding: utf-8 -*-
-<%inherit file="/reports/base.mako" />
+<%inherit file="/page.mako" />
 
-<%def name="title()">Report : Ordering Worksheet</%def>
+<%def name="title()">Ordering Worksheet</%def>
 
-<%def name="head_tags()">
+<%def name="page_content()">
-  ${parent.head_tags()}
-  <style type="text/css">
 
-    div.grid {
+  <p class="block">
-        clear: none;
+    Please provide the following criteria to generate your report:
-    }
+  </p>
 
-  </style>
+  <div style="max-width: 50%;">
-</%def>
+    ${h.form(request.current_route_url(), **{'@submit': 'validateForm'})}
+    ${h.csrf_token(request)}
+    ${h.hidden('departments', **{':value': 'departmentUUIDs'})}
 
-<p>Please provide the following criteria to generate your report:</p>
+    <b-field label="Vendor">
-<br />
+      <tailbone-autocomplete v-model="vendorUUID"
+                             service-url="${url('vendors.autocomplete')}"
+                             name="vendor"
+                             @input="vendorChanged">
+      </tailbone-autocomplete>
+    </b-field>
 
-${h.form(request.current_route_url())}
+    <b-field label="Departments">
-${h.hidden('departments', value='')}
+      <b-table v-if="fetchedDepartments"
+        :data="departments"
+        narrowed
+        checkable
+        :checked-rows.sync="checkedDepartments"
+        :loading="fetchingDepartments">
 
-<div class="field-wrapper">
+        <b-table-column field="number"
-  ${h.hidden('vendor', value='')}
+                        label="Number"
-  <label for="vendor-name">Vendor:</label>
+                        v-slot="props">
-  ${h.text('vendor-name', size='40', value='')}
+          {{ props.row.number }}
-  <div id="vendor-display" style="display: none;">
+        </b-table-column>
-    <span>(no vendor)</span>&nbsp;
-    <button type="button" id="change-vendor">Change</button>
-  </div>
-</div>
 
-<div class="field-wrapper">
+        <b-table-column field="name"
-  <label>Departments:</label>
+                        label="Name"
-  <div class="grid"></div>
+                        v-slot="props">
-</div>
+          {{ props.row.name }}
+        </b-table-column>
 
-<div class="field-wrapper">
+      </b-table>
-  ${h.checkbox('preferred_only', label="Include only those products for which this vendor is preferred.", checked=True)}
+    </b-field>
-</div>
+
+    <b-field>
+      <b-checkbox name="preferred_only" :value="true"
+                  native-value="1">
+        Only include products for which this vendor is preferred.
+      </b-checkbox>
+    </b-field>
+
+    ${self.extra_fields()}
 
     <div class="buttons">
-  ${h.submit('submit', "Generate Report")}
+      <b-button type="is-primary"
+                native-type="submit"
+                icon-pack="fas"
+                icon-left="arrow-circle-right">
+        Generate Report
+      </b-button>
     </div>
 
     ${h.end_form()}
+  </div>
 
+</%def>
+
+<%def name="extra_fields()"></%def>
+
+<%def name="modify_this_page_vars()">
+  ${parent.modify_this_page_vars()}
   <script type="text/javascript">
 
-$(function() {
+    ThisPageData.vendorUUID = null
+    ThisPageData.departments = []
+    ThisPageData.checkedDepartments = []
+    ThisPageData.fetchingDepartments = false
+    ThisPageData.fetchedDepartments = false
 
-    var autocompleter = $('#vendor-name').autocomplete({
+    ThisPage.computed.departmentUUIDs = function() {
-        serviceUrl: '${url('vendors.autocomplete')}',
+        let uuids = []
-        width: 300,
+        for (let dept of this.checkedDepartments) {
-        onSelect: function(value, data) {
+            uuids.push(dept.uuid)
-            $('#vendor').val(data);
+        }
-            $('#vendor-name').hide();
+        return uuids.join(',')
-            $('#vendor-name').val('');
-            $('#vendor-display span').html(value);
-            $('#vendor-display').show();
-            loading($('div.grid'));
-            $('div.grid').load('${url('departments.by_vendor')}', {'uuid': data});
-        },
-    });
-
-    $('#vendor-name').focus();
-
-    $('#change-vendor').click(function() {
-        $('#vendor').val('');
-        $('#vendor-display').hide();
-        $('#vendor-name').show();
-        $('#vendor-name').focus();
-        $('div.grid').empty();
-    });
-
-    $('form').submit(function() {
-        var depts = [];
-        $('div.grid table tbody tr').each(function() {
-            if ($(this).find('td.checkbox input[type=checkbox]').is(':checked')) {
-                depts.push(get_uuid(this));
     }
-            $('#departments').val(depts.toString());
-            return true;
-        });
-    });
 
-});
+    ThisPage.methods.vendorChanged = function(uuid) {
+        if (uuid) {
+            this.fetchingDepartments = true
+
+            let url = '${url('departments.by_vendor')}'
+            let params = {uuid: uuid}
+            this.$http.get(url, {params: params}).then(response => {
+                this.departments = response.data
+                this.fetchingDepartments = false
+                this.fetchedDepartments = true
+            })
+
+        } else {
+            this.departments = []
+            this.fetchedDepartments = false
+        }
+    }
+
+    ThisPage.methods.validateForm = function(event) {
+        if (!this.departmentUUIDs.length) {
+            alert("You must select at least one Department.")
+            event.preventDefault()
+        }
+    }
 
   </script>
+</%def>
+
+
+${parent.body()}

tailbone/views/reports.py

@@ -135,6 +135,7 @@ class OrderingWorksheet(View):
             time=now.strftime('%I:%M %p'),
             get_upc=self.upc_getter,
             rattail=rattail,
+            app=self.get_rattail_app(),
         )
 
         template_path = resource_path(self.report_template_path)