[IMP] pos_restaurant: category count display

Change the category count display in the order button.

closes odoo/odoo#143298

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
This commit is contained in:
Loukas Wets (lowe)
2023-12-05 19:53:25 +00:00
parent b08a47afde
commit 7675905b88
3 changed files with 24 additions and 11 deletions
@@ -25,6 +25,6 @@ export class ActionpadWidget extends Component {
return this.pos.get_order()?.orderlines?.length;
}
getMainButtonClasses() {
return "button btn d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder btn-lg py-5 rounded-0";
return "button btn d-flex flex-column flex-fill align-items-center justify-content-center fw-bolder btn-lg rounded-0";
}
}
@@ -60,11 +60,15 @@ patch(ActionpadWidget.prototype, {
}
return acc;
}, {});
return Object.values(categories)
.map((value) => {
return `${value.name} ${value.count}`;
})
.join(" | ");
return Object.values(categories);
},
get displayCategoryCount() {
return this.categoryCount.slice(0, 3);
},
get isCategoryCountOverflow() {
if (this.categoryCount.length > 3) {
return true;
}
return false;
},
});
@@ -9,14 +9,23 @@
<xpath expr="//button[hasclass('validation')]" position="after">
<button
t-if="this.swapButton"
t-attf-class="submit-order w-100 h-100 {{getMainButtonClasses()}}"
t-attf-class="submit-order h-100 {{getMainButtonClasses()}}"
t-att-class="swapButtonClasses"
t-on-click="submitOrder">
t-on-click="submitOrder"
style="width: 170px;">
<i class="fa fa-cutlery"></i>
Order
<div class="break-line">
<t t-esc="categoryCount" />
<div t-if="displayCategoryCount.length" class="break-line fw-normal fs-6 w-100 border-top mt-1 pt-1">
<t t-foreach="displayCategoryCount" t-as="categoryCountLine" t-key="categoryCountLine.id">
<div class="row g-0 my-1 w-100">
<label class="col text-start text-truncate ps-0" ><t t-esc="categoryCountLine.name"/></label>
<label class="col-3 text-center rounded p-0" style="background-color:rgba(0, 0, 0, 0.3);"><t t-esc="categoryCountLine.count"/></label>
</div>
</t>
</div>
<t t-if="isCategoryCountOverflow">
<div class="position-absolute bottom-0">...</div>
</t>
</button>
</xpath>
<xpath expr="//button[hasclass('validation')]" position="attributes">