Skip to content

Commit

Permalink
Merge pull request OCA#25 from camptocamp/ui-imp-fix
Browse files Browse the repository at this point in the history 
Misc UI fixes/imp
  • Loading branch information
@simahawk
simahawk authored Jun 2, 2020
2 parents f0f53a8 + 0348c6a commit d455acb
Show file tree
Hide file tree
Showing 13 changed files with 261 additions and 142 deletions.
23 changes: 16 additions & 7 deletions shopfloor_mobile/static/wms/src/components/batch_picking_detail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,22 @@ Vue.component("batch-picking-detail", {
},
picking_detail_fields() {
return [
{path: "name", klass: "loud", action_val_path: "name"},
{path: "move_line_count", label: "Lines"},
{path: "weight", label: "Weight"},
];
},
picking_list_options() {
return {
group_title_default: "Pickings list",
group_color: this.utils.colors.color_for("screen_step_todo"),
list_item_options: {
key_title: "name",
bold_title: true,
fields: this.picking_detail_fields(),
},
};
},
},
template: `
<div class="detail batch-picking-detail with-bottom-actions" v-if="!_.isEmpty(record)">
Expand All @@ -40,13 +52,10 @@ Vue.component("batch-picking-detail", {
</div>
<div class="pickings">
<separator-title>Pickings list</separator-title>
<detail-picking
v-for="picking in record.pickings"
:key="picking.id"
:record="picking"
:options="{fields: picking_detail_fields()}"
/>
<list
:records="record.pickings"
:options="picking_list_options()"
/>
</div>
</div>
Expand Down
63 changes: 37 additions & 26 deletions shopfloor_mobile/static/wms/src/components/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,14 @@ Vue.component("list", {
listable() {
if (!this.grouped_records.length) {
// Simulate grouping (allows to keep template the same)
return [{key: "no-group", title: "", records: this.records}];
return [
{
key: "no-group",
title: this.opts.group_title_default,

records: this.records,
},
];
}
return this.grouped_records;
},
Expand All @@ -52,6 +59,7 @@ Vue.component("list", {
list_item_actions: [],
list_item_on_click: null,
list_item_options: {},
group_title_default: "",
});
return opts;
},
Expand Down Expand Up @@ -81,15 +89,14 @@ Vue.component("list", {
},
template: `
<div :class="klass">
<v-card>
<v-card class="list-group" :color="opts.group_color" v-for="(group, gindex) in listable" :key="make_component_key([$options._componentTag, 'group', gindex])">
<v-card-title v-if="group.title">{{ group.title }}</v-card-title>
<v-list v-if="has_records">
<div class="list-group" v-for="group in listable" :key="make_component_key(['group', group.key])">
<v-card-title v-if="group.title">{{ group.title }}</v-card-title>
<div class="list-items-wrapper">
<v-list-item
v-for="(rec, index) in group.records" :key="make_component_key(['group', group.key, index])"
@click="opts.list_item_on_click ? opts.list_item_on_click(rec) : undefined"
:class="list_item_options.list_item_klass_maker ? list_item_options.list_item_klass_maker(rec) : ''">
<div class="list-item-wrapper" v-for="(rec, index) in group.records">
<v-list-item :key="make_component_key(['group-rec', gindex, index, rec.id])"
:class="list_item_options.list_item_klass_maker ? list_item_options.list_item_klass_maker(rec) : ''"
@click="opts.list_item_on_click ? opts.list_item_on_click(rec) : undefined">
<v-list-item-content>
<component
:is="opts.list_item_component"
:options="list_item_options"
Expand All @@ -98,25 +105,29 @@ Vue.component("list", {
:count="group.records.length"
:key="make_component_key([opts.list_item_component, 'list', index, rec.id])"
/>
<v-list-item-action v-if="opts.list_item_actions.length">
<component
v-for="action in opts.list_item_actions"
:is="action.comp_name"
v-if="action.enabled(rec, action)"
:options="_.merge({}, list_item_options, action.options)"
:record="action.get_record(rec, action)"
:index="index"
:count="group.records.length"
:key="make_component_key([action.comp_name, 'list', index, action.get_record(rec, action).id])"
/>
</v-list-item-action>
</v-list-item>
</div>
</v-list-item-content>
<v-list-item-action v-if="opts.list_item_actions.length">
<component
v-for="action in opts.list_item_actions"
:is="action.comp_name"
v-if="action.enabled(rec, action)"
:options="_.merge({}, list_item_options, action.options)"
:record="action.get_record(rec, action)"
:index="index"
:count="group.records.length"
:key="make_component_key([action.comp_name, 'list', index, action.get_record(rec, action).id])"
/>
</v-list-item-action>
</v-list-item>
</div>
</v-list>
<div class="no-record pa-2" v-if="!has_records">
<p class="text--secondary">No item to list.</p>
</div>
<v-list v-if="!has_records">
<v-list-item>
<v-list-item-content>
<p class="text--secondary">No item to list.</p>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</div>
`,
Expand Down
44 changes: 30 additions & 14 deletions shopfloor_mobile/static/wms/src/components/manual_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ Vue.component("manual-select", {
list_item_extra_component: "",
selected_event: "select",
group_color: "",
group_title_default: "",
});
return opts;
},
Expand All @@ -180,7 +181,13 @@ Vue.component("manual-select", {
selectable() {
if (!this.grouped_records.length) {
// Simulate grouping (allows to keep template the same)
return [{key: "no-group", title: "", records: this.records}];
return [
{
key: "no-group",
title: this.opts.group_title_default,
records: this.records,
},
];
}
return this.grouped_records;
},
Expand Down Expand Up @@ -224,7 +231,7 @@ Vue.component("manual-select", {
:key="make_component_key([opts.list_item_component, index, rec.id])"
/>
</v-list-item-content>
<v-list-item-action :class="{'d-flex align-stretch': opts.list_item_actions.length}">
<v-list-item-action>
<component
v-for="(action, action_index) in opts.list_item_actions"
:is="action.comp_name"
Expand All @@ -236,16 +243,18 @@ Vue.component("manual-select", {
:key="make_component_key([action.comp_name, index, action_index, rec.id])"
/>
<div class="action action-select">
<input
:class="['sf-checkbox', is_selected(rec) ? selected_color_klass('darken-3') : '']"
type="checkbox"
:input-value="rec.id"
:true-value="rec.id"
:value="rec.id"
:checked="is_selected(rec)"
:key="make_component_key(['list-checkbox', index, rec.id])"
@click="handleSelect(rec, $event)"
/>
<v-btn icon x-large rounded>
<input
:class="['sf-checkbox', is_selected(rec) ? selected_color_klass('darken-3') : '']"
type="checkbox"
:input-value="rec.id"
:true-value="rec.id"
:value="rec.id"
:checked="is_selected(rec)"
:key="make_component_key(['list-checkbox', index, rec.id])"
@click="handleSelect(rec, $event)"
/>
</v-btn>
</div>
</v-list-item-action>
</v-list-item>
Expand All @@ -262,8 +271,15 @@ Vue.component("manual-select", {
</div>
</v-list>
</v-card>
<v-card class="no-record pa-2" v-if="!has_records">
<p class="text--secondary">No item to select.</p>
<v-card :color="opts.group_color" class="no-record pa-2" v-if="!has_records">
<!-- Use v-list to have the same look and feel of the record list -->
<v-list>
<v-list-item>
<v-list-item-content>
<p class="text--secondary">No item to select.</p>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
<v-row class="actions bottom-actions" v-if="has_records && opts.showActions">
<v-col>
Expand Down
43 changes: 33 additions & 10 deletions shopfloor_mobile/static/wms/src/components/misc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ Vue.component("last-operation", {
Vue.component("get-work", {
template: `
<div class="get-work fullscreen-buttons fullscreen-buttons-50">
<btn-action id="btn-get-work" color="success" @click="$emit('get_work')">
<btn-action id="btn-get-work" @click="$emit('get_work')">
Get work
</btn-action>
<v-btn id="btn-manual" color="default" @click="$emit('manual_selection')">
<btn-action id="btn-manual" color="default" @click="$emit('manual_selection')">
Manual selection
</v-btn>
</btn-action>
</div>
`,
});
Expand Down Expand Up @@ -117,12 +117,6 @@ Vue.component("edit-action", {
`,
});

Vue.component("btn-back", {
template: `
<v-btn x-large color="default" v-on:click="$router.back()">{{ $t("btn.back.title") }}</v-btn>
`,
});

Vue.component("separator-title", {
template: `
<h3 class="separator-title"><slot></slot></h3>
Expand Down Expand Up @@ -218,10 +212,39 @@ Vue.component("btn-action", {
type: String,
default: "",
},
color: {
type: String,
default: "",
},
},
computed: {
btn_color() {
let color = this.color;
if (!color) {
color = this.utils.colors.color_for(
this.action ? "btn_action_" + this.action : "btn_action"
);
}
return color;
},
},
template: `
<v-btn x-large v-bind="$attrs" v-on="$listeners" :color="utils.colors.color_for(action ? 'btn_action_' + action : 'btn_action')">
<v-btn x-large v-bind="$attrs" v-on="$listeners" :color="btn_color">
<slot></slot>
</v-btn>
`,
});

Vue.component("btn-back", {
methods: {
on_back: function() {
this.$root.trigger("go_back");
this.$router.back();
},
},
template: `
<btn-action v-bind="$attrs" action="back" v-on:click="on_back">
<v-icon>mdi-keyboard-backspace</v-icon>{{ $t("btn.back.title") }}
</btn-action>
`,
});
68 changes: 42 additions & 26 deletions shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export var PackagingQtyPickerMixin = {
methods: {
on_change_pkg_qty: function(event) {
const input = event.target;
let new_qty = parseInt(input.value, 10);
let new_qty = parseInt(input.value || 0, 10);
const data = $(input).data();
const origvalue = data.origvalue || 0;
const origvalue = parseInt(data.origvalue || 0, 10);
// Check max qty reached
const future_qty = this.value + data.pkg.qty * (new_qty - origvalue);
if (new_qty && future_qty > this.original_value) {
Expand Down Expand Up @@ -75,6 +75,10 @@ export var PackagingQtyPickerMixin = {
// const min_unit = _.last(pkg_by_qty);
pkg_by_qty.forEach(function(pkg) {
let qty_per_pkg = 0;
if (!pkg.qty) {
console.error("Packaging with no quantity: skipping", pkg);
return {};
}
[qty_per_pkg, qty] = self._qty_by_pkg(pkg.qty, qty);
if (qty_per_pkg) res[pkg.id] = qty_per_pkg;
if (!qty) return;
Expand Down Expand Up @@ -108,36 +112,33 @@ export var PackagingQtyPickerMixin = {
compute_qty: function(newVal, oldVal) {
this.value = this._compute_qty();
},
},
watch: {
value: {
handler: function(newVal, oldVal) {
this.$root.trigger("qty_edit", this.value);
},
_init_editable() {
const self = this;
this.$watch(
"qty_by_pkg",
function() {
self.compute_qty();
},
{deep: true}
);
this.qty_by_pkg = this.product_qty_by_packaging();
this.orig_qty_by_pkg = this.qty_by_pkg;
// hooking via `v-on:change` we don't get the full event but only the qty :/
// And forget about using v-text-field because it loses the full event object
$(".pkg-value", this.$el).change(this.on_change_pkg_qty);
$(".pkg-value", this.$el).on("focus click", function() {
$(this).select();
});
},
_init_readonly() {
this.qty_by_pkg = this.product_qty_by_packaging();
this.compute_qty();
},
},
created: function() {
this.original_value = parseInt(this.opts.init_value, 10);
this.value = parseInt(this.opts.init_value, 10);
},
mounted: function() {
const self = this;
this.$watch(
"qty_by_pkg",
function() {
self.compute_qty();
},
{deep: true}
);
this.qty_by_pkg = this.product_qty_by_packaging();
this.orig_qty_by_pkg = this.qty_by_pkg;
// hooking via `v-on:change` we don't get the full event but only the qty :/
// And forget about using v-text-field because it loses the full event object
$(".pkg-value", this.$el).change(this.on_change_pkg_qty);
$(".pkg-value", this.$el).on("focus click", function() {
$(this).select();
});
},
computed: {
opts() {
const opts = _.defaults({}, this.$props.options, {
Expand Down Expand Up @@ -180,6 +181,16 @@ export var PackagingQtyPickerMixin = {

export var PackagingQtyPicker = Vue.component("packaging-qty-picker", {
mixins: [PackagingQtyPickerMixin],
watch: {
value: {
handler: function(newVal, oldVal) {
this.$root.trigger("qty_edit", this.value);
},
},
},
mounted: function() {
this._init_editable();
},
template: `
<div :class="[$options._componentTag, opts.mode ? 'mode-' + opts.mode: '']">
<v-row class="unit-value">
Expand Down Expand Up @@ -211,12 +222,17 @@ export var PackagingQtyPicker = Vue.component("packaging-qty-picker", {

export var PackagingQtyPickerDisplay = Vue.component("packaging-qty-picker-display", {
mixins: [PackagingQtyPickerMixin],
mounted: function() {
this._init_readonly();
},
template: `
<div :class="[$options._componentTag, opts.mode ? 'mode-' + opts.mode: '', 'd-inline']">
<span class="packaging" v-for="(pkg, index) in sorted_packaging">
<span class="pkg-qty" v-text="qty_by_pkg[pkg.id] || 0" />
<span class="pkg-name" v-text="pkg.name" /><span class="sep" v-if="index != Object.keys(sorted_packaging).length - 1">, </span>
</span>
<!-- TOOO: use product uom -->
<span class="min-unit">({{ opts.init_value }} Units)</span>
</div>
`,
});
Loading

0 comments on commit d455acb

Please sign in to comment.