diff --git a/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js b/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js index 6976c8918d9..0ebbaafea9d 100644 --- a/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js +++ b/shopfloor_mobile/static/wms/src/components/packaging-qty-picker.js @@ -297,15 +297,16 @@ export var PackagingQtyPickerDisplay = Vue.component("packaging-qty-picker-displ props: { nonZeroOnly: Boolean, pkgNameKey: {default: "code"}, + qtyTodo: Number, }, methods: { - display_pkg: function (pkg) { - return this.nonZeroOnly ? this.qty_by_pkg[pkg.id] > 0 : true; + display_pkg: function (pkg, qty_by_pkg) { + return this.nonZeroOnly ? qty_by_pkg[pkg.id] > 0 : true; }, - }, - computed: { - visible_packaging: function () { - let packagings = _.filter(this.sorted_packaging, this.display_pkg); + get_visible_packaging: function (qty_by_pkg) { + let packagings = _.filter(this.sorted_packaging, (pkg) => { + return this.display_pkg(pkg, qty_by_pkg); + }); // Do not display if only uom packaging if ( packagings.length == 1 && @@ -314,16 +315,54 @@ export var PackagingQtyPickerDisplay = Vue.component("packaging-qty-picker-displ return []; return packagings; }, + /** + * Returns the quantity by packaging string for a given quantity + * Example: "(1 PAL + 3 TU)" + */ + _product_qty_by_packaging_string: function (qty) { + const qty_by_pkg = this._product_qty_by_packaging( + this.sorted_packaging, + qty + ); + + const visible_pkgs = this.get_visible_packaging(qty_by_pkg); + + // Do not display if only uom packaging + if ( + visible_pkgs.length === 1 && + visible_pkgs[0].id.toString().startsWith("uom-") + ) { + return ""; + } + + const parts = visible_pkgs.map((pkg) => { + const count = qty_by_pkg[pkg.id]; + const name = pkg[this.pkgNameKey] || this.unit_uom.name; + return `${count} ${name}`; + }); + + return parts.length ? "(" + parts.join(" + ") + ")" : ""; + }, + }, + computed: { + qtyInitDisplay: function () { + const qty_by_pkg_str = this._product_qty_by_packaging_string(this.qtyInit); + return `${this.qty} ${this.unit_uom.name}${ + qty_by_pkg_str ? " " + qty_by_pkg_str : "" + }`; + }, + qtyTodoDisplay: function () { + const qty_by_pkg_str = this._product_qty_by_packaging_string(this.qtyTodo); + return `${this.qtyTodo} ${this.unit_uom.name}${ + qty_by_pkg_str ? " " + qty_by_pkg_str : "" + }`; + }, }, template: `
- {{ qty }} {{ unit_uom.name }} - - ( - - + - ) - + {{ qtyInitDisplay }} + / + {{ qtyTodoDisplay }}
`, }); diff --git a/shopfloor_mobile/static/wms/src/wms_utils.js b/shopfloor_mobile/static/wms/src/wms_utils.js index a086133c321..8c0cc2c3f89 100644 --- a/shopfloor_mobile/static/wms/src/wms_utils.js +++ b/shopfloor_mobile/static/wms/src/wms_utils.js @@ -296,6 +296,8 @@ export class WMSUtils { render_props: function (record) { return self.move_line_qty_picker_props(record, { qtyInit: record.quantity, + // ↓ we do not want to display "/ qtyTodo" in normal case + qtyTodo: undefined, }); }, }, diff --git a/shopfloor_reception_mobile/static/src/scenario/reception.js b/shopfloor_reception_mobile/static/src/scenario/reception.js index 761e0aa6587..83cf59e0d00 100644 --- a/shopfloor_reception_mobile/static/src/scenario/reception.js +++ b/shopfloor_reception_mobile/static/src/scenario/reception.js @@ -380,6 +380,7 @@ const Reception = { }; }, picking_detail_options_for_select_move: function () { + const self = this; return { show_title: true, showActions: false, @@ -407,6 +408,16 @@ const Reception = { path: "quantity_done", label: "Qty done", display_no_value: true, + render_component: "packaging-qty-picker-display", + render_props: (record) => { + return self.utils.wms.move_line_qty_picker_props( + record, + { + qtyInit: record.quantity_done, + qtyDone: record.quantity, + } + ); + }, }, ], },