130 lines
3.6 KiB
Mako
130 lines
3.6 KiB
Mako
## -*- coding: utf-8 -*-
|
|
<%inherit file="/page.mako" />
|
|
|
|
<%def name="title()">Ordering Worksheet</%def>
|
|
|
|
<%def name="page_content()">
|
|
|
|
<p class="block">
|
|
Please provide the following criteria to generate your report:
|
|
</p>
|
|
|
|
<div style="max-width: 50%;">
|
|
${h.form(request.current_route_url(), **{'@submit': 'validateForm'})}
|
|
${h.csrf_token(request)}
|
|
${h.hidden('departments', **{':value': 'departmentUUIDs'})}
|
|
|
|
<b-field label="Vendor">
|
|
<tailbone-autocomplete v-model="vendorUUID"
|
|
service-url="${url('vendors.autocomplete')}"
|
|
name="vendor"
|
|
expanded
|
|
% if request.use_oruga:
|
|
@update:model-value="vendorChanged"
|
|
% else:
|
|
@input="vendorChanged"
|
|
% endif
|
|
>
|
|
</tailbone-autocomplete>
|
|
</b-field>
|
|
|
|
<b-field label="Departments">
|
|
<${b}-table v-if="fetchedDepartments"
|
|
:data="departments"
|
|
narrowed
|
|
checkable
|
|
% if request.use_oruga:
|
|
v-model:checked-rows="checkedDepartments"
|
|
% else:
|
|
:checked-rows.sync="checkedDepartments"
|
|
% endif
|
|
:loading="fetchingDepartments">
|
|
|
|
<${b}-table-column field="number"
|
|
label="Number"
|
|
v-slot="props">
|
|
{{ props.row.number }}
|
|
</${b}-table-column>
|
|
|
|
<${b}-table-column field="name"
|
|
label="Name"
|
|
v-slot="props">
|
|
{{ props.row.name }}
|
|
</${b}-table-column>
|
|
|
|
</${b}-table>
|
|
</b-field>
|
|
|
|
<b-field>
|
|
<b-checkbox name="preferred_only"
|
|
v-model="preferredVendorOnly"
|
|
native-value="1">
|
|
Only include products for which this vendor is preferred.
|
|
</b-checkbox>
|
|
</b-field>
|
|
|
|
${self.extra_fields()}
|
|
|
|
<div class="buttons">
|
|
<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_vue_vars()">
|
|
${parent.modify_vue_vars()}
|
|
<script>
|
|
|
|
ThisPageData.vendorUUID = null
|
|
ThisPageData.departments = []
|
|
ThisPageData.checkedDepartments = []
|
|
ThisPageData.preferredVendorOnly = true
|
|
ThisPageData.fetchingDepartments = false
|
|
ThisPageData.fetchedDepartments = false
|
|
|
|
ThisPage.computed.departmentUUIDs = function() {
|
|
let uuids = []
|
|
for (let dept of this.checkedDepartments) {
|
|
uuids.push(dept.uuid)
|
|
}
|
|
return uuids.join(',')
|
|
}
|
|
|
|
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>
|
|
|