[IMP] pos_self_order: remove resume section for attribute_selection
In this commit, we remove the resume section for the attribute_selection as it can lead to a lot of screen for the end-user (especially if the attribute_selection is used in a combo). We add the add to cart button instead with a quantity selector. The end resume is kept for the combo selection. Part-of: odoo/odoo#139187
This commit is contained in:
Adrien Guilliams (adgu)
+1
-11
@@ -7,7 +7,7 @@ import { attributeFlatter, attributeFormatter } from "@pos_self_order/app/utils"
|
||||
|
||||
export class AttributeSelection extends Component {
|
||||
static template = "pos_self_order.AttributeSelection";
|
||||
static props = ["toggleQtyBtn", "product"];
|
||||
static props = ["product"];
|
||||
|
||||
setup() {
|
||||
this.selfOrder = useSelfOrder();
|
||||
@@ -15,17 +15,12 @@ export class AttributeSelection extends Component {
|
||||
this.currentAttribute = 0;
|
||||
|
||||
this.state = useState({
|
||||
showResume: false,
|
||||
showNext: false,
|
||||
showCustomInput: false,
|
||||
});
|
||||
|
||||
this.selectedValues = useState(this.env.selectedValues);
|
||||
|
||||
if (!this.env.editable) {
|
||||
this.toggleResume();
|
||||
}
|
||||
|
||||
this.initAttribute();
|
||||
}
|
||||
|
||||
@@ -90,11 +85,6 @@ export class AttributeSelection extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
toggleResume() {
|
||||
this.state.showResume = !this.state.showResume;
|
||||
this.props.toggleQtyBtn(this.state.showResume);
|
||||
}
|
||||
|
||||
isChecked(attribute, value) {
|
||||
return attribute.display_type === "multi"
|
||||
? this.selectedValues[attribute.id][value.id]
|
||||
|
||||
+39
-66
@@ -2,76 +2,49 @@
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="pos_self_order.AttributeSelection">
|
||||
<div class="self_order_attribute_selection d-flex flex-column flex-grow-1">
|
||||
<t t-if="state.showResume">
|
||||
<div class="attribute_name py-1 mt-4 mb-2 px-3">
|
||||
<h1>Your resume</h1>
|
||||
</div>
|
||||
<ul class="attribute-selection-content list-group mx-3 mb-5">
|
||||
<li class="list-group-item d-flex align-items-center flex-wrap gap-2 py-3" t-foreach="attributeSelected" t-as="value" t-key="value.name">
|
||||
<div class="flex-grow-1">
|
||||
<span class="me-2 text-muted"><t t-out="value.name"/>:</span><strong t-out="value.value"/>
|
||||
</div>
|
||||
<button t-attf-class="{{ !this.env.editable ? 'disabled' : '' }} btn btn-secondary ms-auto" t-on-click="this.toggleResume">
|
||||
<i class="fa fa-pencil me-1"/> Edit
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="attribute-selection-content align-items-center justify-content-start px-3 flex-grow-1">
|
||||
<div class="d-flex flex-column">
|
||||
<div t-foreach="this.props.product.attributes" t-as="attribute" t-key="attribute.id">
|
||||
<h2 t-out="attribute.name"/>
|
||||
<div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6 mb-5">
|
||||
<t t-foreach="availableAttributeValue(attribute)" t-as="value" t-key="value.id">
|
||||
<div class="col">
|
||||
<div class="self_order_attribute_selection_option ratio ratio-16x9 w-100">
|
||||
<label t-attf-for="{{ attribute.id }}_{{ value.id }}"
|
||||
t-attf-class="{{ this.isChecked(attribute, value) ? 'text-bg-primary border-primary active' : '' }}
|
||||
d-flex flex-column align-items-center justify-content-center rounded border">
|
||||
<div class="name position-relative d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100 py-2 text-center">
|
||||
<span t-out="value.name"/>
|
||||
<span t-if="value.price_extra.list_price">
|
||||
+ <t t-out="selfOrder.formatMonetary(value.price_extra.list_price)" />
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="d-none"
|
||||
t-if="attribute.display_type !== 'multi'"
|
||||
t-att-value="value.id"
|
||||
t-attf-id="{{ attribute.id }}_{{ value.id }}"
|
||||
t-model="this.selectedValues[attribute.id]" />
|
||||
<input
|
||||
type="checkbox"
|
||||
class="d-none"
|
||||
t-else=""
|
||||
t-att-checked="this.isChecked(attribute, value)"
|
||||
t-att-value="value.id"
|
||||
t-model="this.selectedValues[attribute.id][value.id]"
|
||||
t-attf-id="{{ attribute.id }}_{{ value.id }}" />
|
||||
</div>
|
||||
<div class="attribute-selection-content align-items-center justify-content-start px-3 flex-grow-1">
|
||||
<div class="d-flex flex-column">
|
||||
<div t-foreach="this.props.product.attributes" t-as="attribute" t-key="attribute.id">
|
||||
<h2 t-out="attribute.name"/>
|
||||
<div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6 mb-5">
|
||||
<t t-foreach="availableAttributeValue(attribute)" t-as="value" t-key="value.id">
|
||||
<div class="col">
|
||||
<div class="self_order_attribute_selection_option ratio ratio-16x9 w-100">
|
||||
<label t-attf-for="{{ attribute.id }}_{{ value.id }}"
|
||||
t-attf-class="{{ this.isChecked(attribute, value) ? 'text-bg-primary border-primary active' : '' }}
|
||||
d-flex flex-column align-items-center justify-content-center rounded border">
|
||||
<div class="name position-relative d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100 py-2 text-center">
|
||||
<span t-out="value.name"/>
|
||||
<span t-if="value.price_extra.list_price">
|
||||
+ <t t-out="selfOrder.formatMonetary(value.price_extra.list_price)" />
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="d-none"
|
||||
t-if="attribute.display_type !== 'multi'"
|
||||
t-att-value="value.id"
|
||||
t-attf-id="{{ attribute.id }}_{{ value.id }}"
|
||||
t-model="this.selectedValues[attribute.id]" />
|
||||
<input
|
||||
type="checkbox"
|
||||
class="d-none"
|
||||
t-else=""
|
||||
t-att-checked="this.isChecked(attribute, value)"
|
||||
t-att-value="value.id"
|
||||
t-model="this.selectedValues[attribute.id][value.id]"
|
||||
t-attf-id="{{ attribute.id }}_{{ value.id }}" />
|
||||
</div>
|
||||
<div t-if="this.isChecked(attribute, value) and selfOrder.attributeValueById[value.id].is_custom" class="col w-100 order-2">
|
||||
<input type="text" t-model="this.env.customValues[value.id].custom_value" class="form-control form-control-lg" placeholder="Enter your custom value" />
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<div t-if="this.isChecked(attribute, value) and selfOrder.attributeValueById[value.id].is_custom" class="col w-100 order-2">
|
||||
<input type="text" t-model="this.env.customValues[value.id].custom_value" class="form-control form-control-lg" placeholder="Enter your custom value" />
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
<t t-if="!state.showResume">
|
||||
<div class="page-buttons position-fixed bottom-0 w-100 d-flex justify-content-end p-3 gap-3 bg-view border-top z-index-1">
|
||||
<button class="btn btn-primary btn-lg" t-att-class="this.showNextBtn ? '' : 'disabled'" t-on-click="this.toggleResume">Next</button>
|
||||
</div>
|
||||
|
||||
<!-- This element is just a placeholder used to generate enough verstical room for the 'page-buttons' one. -->
|
||||
<section class="p-3 border-top">
|
||||
<button class="btn btn-lg">Placeholder</button>
|
||||
</section>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
|
||||
@@ -22,10 +22,8 @@ export class ComboSelection extends Component {
|
||||
this.props.comboState.selectedProduct = productSelected;
|
||||
if (productSelected.attributes.length === 0) {
|
||||
this.props.next();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
toggleQtyBtn(bool) {
|
||||
this.props.comboState.showQtyButtons = bool;
|
||||
this.props.comboState.showQtyButtons = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<t t-else="">
|
||||
<AttributeSelection toggleQtyBtn.bind="toggleQtyBtn" product="props.comboState.selectedProduct" />
|
||||
<AttributeSelection product="props.comboState.selectedProduct" />
|
||||
</t>
|
||||
</t>
|
||||
</templates>
|
||||
|
||||
@@ -27,7 +27,6 @@ export class ProductPage extends Component {
|
||||
this.state = useState({
|
||||
qty: 1,
|
||||
customer_note: "",
|
||||
showQtyButtons: this.attributes.length === 0,
|
||||
product: this.props.product,
|
||||
});
|
||||
|
||||
@@ -55,10 +54,6 @@ export class ProductPage extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
toggleQtyBtn(bool) {
|
||||
this.state.showQtyButtons = bool;
|
||||
}
|
||||
|
||||
initState() {
|
||||
const editedLine = this.selfOrder.editedLine;
|
||||
|
||||
@@ -151,6 +146,6 @@ export class ProductPage extends Component {
|
||||
}
|
||||
|
||||
get showQtyButtons() {
|
||||
return this.state.showQtyButtons && this.props.product.self_order_available;
|
||||
return this.props.product.self_order_available;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +34,6 @@
|
||||
</div>
|
||||
<AttributeSelection
|
||||
t-if="this.product.attributes.length"
|
||||
toggleQtyBtn.bind="toggleQtyBtn"
|
||||
product="product"/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user