Add buefy theme support for ordering worksheet
This commit is contained in:
Lance Edgar
parent
7a01cb8873
commit
58362ae858
7 changed files with 282 additions and 84 deletions
|
|
@ -1,10 +1,11 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
<%inherit file="/base.mako" />
|
||||
<%inherit file="/batch/worksheet.mako" />
|
||||
|
||||
<%def name="title()">Ordering Worksheet</%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">
|
||||
|
||||
|
|
@ -56,6 +57,7 @@
|
|||
|
||||
});
|
||||
</script>
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="extra_styles()">
|
||||
|
|
@ -112,71 +114,10 @@
|
|||
</style>
|
||||
</%def>
|
||||
|
||||
|
||||
<%def name="context_menu_items()">
|
||||
<li>${h.link_to("Back to {}".format(model_title), url('ordering.view', uuid=batch.uuid))}</li>
|
||||
</%def>
|
||||
|
||||
|
||||
##############################
|
||||
## page body
|
||||
##############################
|
||||
|
||||
<ul id="context-menu">
|
||||
${self.context_menu_items()}
|
||||
</ul>
|
||||
|
||||
<div class="form-wrapper">
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor</label>
|
||||
<div class="field">${h.link_to(vendor, url('vendors.view', uuid=vendor.uuid))}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Email</label>
|
||||
<div class="field">${vendor.email or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Fax</label>
|
||||
<div class="field">${vendor.fax_number or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Contact</label>
|
||||
<div class="field">${vendor.contact or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Phone</label>
|
||||
<div class="field">${vendor.phone or ''}</div>
|
||||
</div>
|
||||
|
||||
${self.extra_vendor_fields()}
|
||||
|
||||
<div class="field-wrapper po-total">
|
||||
<label>PO Total</label>
|
||||
## TODO: should not fall back to po_total
|
||||
<div class="field">$${'{:0,.2f}'.format(batch.po_total_calculated or batch.po_total or 0)}</div>
|
||||
</div>
|
||||
|
||||
</div><!-- form-wrapper -->
|
||||
|
||||
${self.order_form_grid()}
|
||||
|
||||
${h.form(url('ordering.worksheet_update', uuid=batch.uuid), id='item-update-form', style='display: none;')}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('product_uuid')}
|
||||
${h.hidden('cases_ordered')}
|
||||
${h.hidden('units_ordered')}
|
||||
${h.end_form()}
|
||||
|
||||
|
||||
##############################
|
||||
## methods
|
||||
##############################
|
||||
|
||||
<%def name="extra_vendor_fields()"></%def>
|
||||
|
||||
<%def name="extra_count()">0</%def>
|
||||
|
|
@ -189,7 +130,7 @@ ${h.end_form()}
|
|||
<div class="grid">
|
||||
<table class="order-form">
|
||||
<% column_count = 8 + len(header_columns) + (0 if ignore_cases else 1) + int(capture(self.extra_count)) %>
|
||||
% for department in sorted(departments.values(), key=lambda d: d.name if d else ''):
|
||||
% for department in sorted(six.itervalues(departments), key=lambda d: d.name if d else ''):
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="department" colspan="${column_count}">Department
|
||||
|
|
@ -200,7 +141,7 @@ ${h.end_form()}
|
|||
% endif
|
||||
</th>
|
||||
</tr>
|
||||
% for subdepartment in sorted(department._order_subdepartments.values(), key=lambda s: s.name if s else ''):
|
||||
% for subdepartment in sorted(six.itervalues(department._order_subdepartments), key=lambda s: s.name if s else ''):
|
||||
<tr>
|
||||
<th class="subdepartment" colspan="${column_count}">Subdepartment
|
||||
% if subdepartment.number or subdepartment.name:
|
||||
|
|
@ -245,7 +186,11 @@ ${h.end_form()}
|
|||
</thead>
|
||||
<tbody>
|
||||
% for i, cost in enumerate(subdepartment._order_costs, 1):
|
||||
<tr data-uuid="${cost.product_uuid}" class="${'even' if i % 2 == 0 else 'odd'}">
|
||||
<tr data-uuid="${cost.product_uuid}" class="${'even' if i % 2 == 0 else 'odd'}"
|
||||
% if use_buefy:
|
||||
:class="{active: activeUUID == '${cost.uuid}'}"
|
||||
% endif
|
||||
>
|
||||
${self.order_form_row(cost)}
|
||||
% for data in history:
|
||||
<td class="scratch_pad">
|
||||
|
|
@ -271,14 +216,34 @@ ${h.end_form()}
|
|||
% endfor
|
||||
% if not ignore_cases:
|
||||
<td class="current-order">
|
||||
${h.text('cases_ordered_{}'.format(cost.uuid), value=int(cost._batchrow.cases_ordered or 0) if cost._batchrow else None)}
|
||||
% if use_buefy:
|
||||
<numeric-input v-model="worksheet.cost_${cost.uuid}_cases"
|
||||
@focus="activeUUID = '${cost.uuid}'; $event.target.select()"
|
||||
@blur="activeUUID = null"
|
||||
@keydown.native="inputKeydown($event, '${cost.uuid}', '${cost.product_uuid}')">
|
||||
</numeric-input>
|
||||
% else:
|
||||
${h.text('cases_ordered_{}'.format(cost.uuid), value=int(cost._batchrow.cases_ordered or 0) if cost._batchrow else None)}
|
||||
% endif
|
||||
</td>
|
||||
% endif
|
||||
<td class="current-order">
|
||||
${h.text('units_ordered_{}'.format(cost.uuid), value=int(cost._batchrow.units_ordered or 0) if cost._batchrow else None)}
|
||||
% if use_buefy:
|
||||
<numeric-input v-model="worksheet.cost_${cost.uuid}_units"
|
||||
@focus="activeUUID = '${cost.uuid}'; $event.target.select()"
|
||||
@blur="activeUUID = null"
|
||||
@keydown.native="inputKeydown($event, '${cost.uuid}', '${cost.product_uuid}')">
|
||||
</numeric-input>
|
||||
% else:
|
||||
${h.text('units_ordered_{}'.format(cost.uuid), value=int(cost._batchrow.units_ordered or 0) if cost._batchrow else None)}
|
||||
% endif
|
||||
</td>
|
||||
## TODO: should not fall back to po_total
|
||||
<td class="po-total">${'${:0,.2f}'.format(cost._batchrow.po_total_calculated or cost._batchrow.po_total or 0) if cost._batchrow else ''}</td>
|
||||
% if use_buefy:
|
||||
<td class="po-total">{{ worksheet.cost_${cost.uuid}_total_display }}</td>
|
||||
% else:
|
||||
<td class="po-total">${'${:0,.2f}'.format(cost._batchrow.po_total_calculated or cost._batchrow.po_total or 0) if cost._batchrow else ''}</td>
|
||||
% endif
|
||||
${self.extra_td(cost)}
|
||||
</tr>
|
||||
% endfor
|
||||
|
|
@ -302,3 +267,166 @@ ${h.end_form()}
|
|||
% endif
|
||||
</td>
|
||||
</%def>
|
||||
|
||||
<%def name="page_content()">
|
||||
% if use_buefy:
|
||||
<ordering-worksheet></ordering-worksheet>
|
||||
% else:
|
||||
<div class="form-wrapper">
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor</label>
|
||||
<div class="field">${h.link_to(vendor, url('vendors.view', uuid=vendor.uuid))}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Email</label>
|
||||
<div class="field">${vendor.email or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Fax</label>
|
||||
<div class="field">${vendor.fax_number or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Contact</label>
|
||||
<div class="field">${vendor.contact or ''}</div>
|
||||
</div>
|
||||
|
||||
<div class="field-wrapper">
|
||||
<label>Vendor Phone</label>
|
||||
<div class="field">${vendor.phone or ''}</div>
|
||||
</div>
|
||||
|
||||
${self.extra_vendor_fields()}
|
||||
|
||||
<div class="field-wrapper po-total">
|
||||
<label>PO Total</label>
|
||||
## TODO: should not fall back to po_total
|
||||
<div class="field">$${'{:0,.2f}'.format(batch.po_total_calculated or batch.po_total or 0)}</div>
|
||||
</div>
|
||||
|
||||
</div><!-- form-wrapper -->
|
||||
|
||||
${self.order_form_grid()}
|
||||
|
||||
${h.form(url('ordering.worksheet_update', uuid=batch.uuid), id='item-update-form', style='display: none;')}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('product_uuid')}
|
||||
${h.hidden('cases_ordered')}
|
||||
${h.hidden('units_ordered')}
|
||||
${h.end_form()}
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="render_this_page_template()">
|
||||
${parent.render_this_page_template()}
|
||||
|
||||
<script type="text/x-template" id="ordering-worksheet-template">
|
||||
<div>
|
||||
<div class="form-wrapper">
|
||||
<div class="form">
|
||||
|
||||
<b-field horizontal label="Vendor">
|
||||
${h.link_to(vendor, url('vendors.view', uuid=vendor.uuid))}
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Vendor Email">
|
||||
<span>${vendor.email or ''}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Vendor Fax">
|
||||
<span>${vendor.fax_number or ''}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Vendor Contact">
|
||||
<span>${vendor.contact or ''}</span>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Vendor Phone">
|
||||
<span>${vendor.phone or ''}</span>
|
||||
</b-field>
|
||||
|
||||
${self.extra_vendor_fields()}
|
||||
|
||||
<b-field horizontal label="PO Total">
|
||||
<span>{{ poTotalDisplay }}</span>
|
||||
</b-field>
|
||||
|
||||
</div> <!-- form -->
|
||||
</div><!-- form-wrapper -->
|
||||
|
||||
${self.order_form_grid()}
|
||||
</div>
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="make_this_page_component()">
|
||||
${parent.make_this_page_component()}
|
||||
<script type="text/javascript">
|
||||
|
||||
const OrderingWorksheet = {
|
||||
template: '#ordering-worksheet-template',
|
||||
data() {
|
||||
return {
|
||||
worksheet: ${json.dumps(worksheet_data)|n},
|
||||
activeUUID: null,
|
||||
poTotalDisplay: "$${'{:0,.2f}'.format(batch.po_total_calculated or batch.po_total or 0)}",
|
||||
submitting: false,
|
||||
|
||||
## TODO: should find a better way to handle CSRF token
|
||||
csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
inputKeydown(event, cost_uuid, product_uuid) {
|
||||
if (event.which == 13) {
|
||||
if (!this.submitting) {
|
||||
this.submitting = true
|
||||
|
||||
let url = '${url('ordering.worksheet_update', uuid=batch.uuid)}'
|
||||
|
||||
let params = {
|
||||
product_uuid: product_uuid,
|
||||
% if not ignore_cases:
|
||||
cases_ordered: this.worksheet['cost_' + cost_uuid + '_cases'],
|
||||
% endif
|
||||
units_ordered: this.worksheet['cost_' + cost_uuid + '_units'],
|
||||
}
|
||||
|
||||
let headers = {
|
||||
## TODO: should find a better way to handle CSRF token
|
||||
'X-CSRF-TOKEN': this.csrftoken,
|
||||
}
|
||||
|
||||
## TODO: should find a better way to handle CSRF token
|
||||
this.$http.post(url, params, {headers: headers}).then(response => {
|
||||
if (response.data.error) {
|
||||
alert(response.data.error)
|
||||
} else {
|
||||
this.worksheet['cost_' + cost_uuid + '_cases'] = response.data.row_cases_ordered
|
||||
this.worksheet['cost_' + cost_uuid + '_units'] = response.data.row_units_ordered
|
||||
this.worksheet['cost_' + cost_uuid + '_total_display'] = response.data.row_po_total_display
|
||||
this.poTotalDisplay = response.data.batch_po_total_display
|
||||
}
|
||||
this.submitting = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Vue.component('ordering-worksheet', OrderingWorksheet)
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
|
||||
##############################
|
||||
## page body
|
||||
##############################
|
||||
|
||||
${parent.body()}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue