Fix "view receiving row" page, per oruga
all the buttons and tools *should* work correctly for Vue 2 and 3 now
This commit is contained in:
Lance Edgar
parent
28fb3f44a7
commit
b40423fc2d
|
|
@ -161,8 +161,13 @@
|
|||
|
||||
</div>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="accountForProductShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% 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 class="level-left">
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
||||
|
||||
<div class="level-item">
|
||||
<numeric-input v-model="accountForProductQuantity"
|
||||
ref="accountForProductQuantityInput">
|
||||
</numeric-input>
|
||||
</div>
|
||||
<numeric-input v-model="accountForProductQuantity"
|
||||
ref="accountForProductQuantityInput">
|
||||
</numeric-input>
|
||||
|
||||
<div class="level-item">
|
||||
% if allow_cases:
|
||||
<b-field>
|
||||
% if allow_cases:
|
||||
% if request.use_oruga:
|
||||
<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:
|
||||
<div class="level-item"
|
||||
v-if="accountForProductUOM == 'cases' && accountForProductQuantity">
|
||||
= {{ accountForProductTotalUnits }}
|
||||
</div>
|
||||
% endif
|
||||
% else:
|
||||
<input type="hidden" v-model="accountForProductUOM" />
|
||||
<span>Units</span>
|
||||
% 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
|
||||
:active.sync="declareCreditShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% 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 class="level-left">
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
||||
|
||||
<div class="level-item">
|
||||
<numeric-input v-model="declareCreditQuantity"
|
||||
ref="declareCreditQuantityInput">
|
||||
</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>
|
||||
<numeric-input v-model="declareCreditQuantity"
|
||||
ref="declareCreditQuantityInput">
|
||||
</numeric-input>
|
||||
|
||||
% 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(() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue