Skip to content

Commit 8a3d203

Browse files
gppa-odoogppa-odoo
committed
Add dynamic content snippet + 3
1 parent c6eaeae commit 8a3d203

File tree

5 files changed

+50
-56
lines changed

5 files changed

+50
-56
lines changed

‎website_dynamic_snippet/__manifest__.py

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44
'category': 'Website',
55
'depends': ['website_sale'],
66
'data': [
7-
'views/snippets/snippet_templates.xml',
7+
'views/snippets/snippets.xml',
88
],
99
'assets': {
1010
'web.assets_frontend': [
11-
'/website_dynamic_snippet/static/src/xml/sale_order_snippets.xml',
12-
'/website_dynamic_snippet/static/src/js/dynamic_snippet_sale_orders.js',
13-
'/website_dynamic_snippet/static/src/js/layout_switcher.js',
11+
'website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/000.xml',
12+
'website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/000.js',
1413
],
1514
'website.assets_wysiwyg': [
1615
'website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/options.js',

‎website_dynamic_snippet/static/src/js/dynamic_snippet_sale_orders.js renamed to ‎website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/000.js

+13-6
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,22 @@ publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
3838
{ result: result }
3939
);
4040

41+
const newTableRows = content.querySelectorAll('.list_sale_order > tbody > tr');
42+
const existingTableBody = this.el.querySelector('.list_sale_order > tbody');
43+
44+
const newCardCols = content.querySelectorAll('.card_sale_order > .col-md-4');
45+
const existingCardWrapper = this.el.querySelector('.card_sale_order');
46+
4147
if (this.offset === 0) {
4248
this.el.innerHTML = '';
4349
this.el.appendChild(content);
4450
} else {
45-
const newRows = content.querySelectorAll('tbody > tr');
46-
const existingTbody = this.el.querySelector('tbody');
47-
if (existingTbody) {
48-
newRows.forEach(row => {
49-
existingTbody.appendChild(row);
50-
});
51+
if (existingTableBody && newTableRows.length) {
52+
newTableRows.forEach(row => existingTableBody.appendChild(row));
53+
}
54+
55+
if (existingCardWrapper && newCardCols.length) {
56+
newCardCols.forEach(card => existingCardWrapper.appendChild(card));
5157
}
5258
}
5359

@@ -60,6 +66,7 @@ publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
6066
}
6167
},
6268

69+
6370
async _onLoadMoreClick(ev) {
6471
ev.preventDefault();
6572
await this.loadCategories();

‎website_dynamic_snippet/static/src/xml/sale_order_snippets.xml renamed to ‎website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/000.xml

+4-10
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<div class="container my-5 categories_section">
55
<h3 class="section_heading">Sale Order Details</h3>
66
<div class="card_list_wrapper">
7-
<t t-if="layout == 'list'">
8-
<!-- LIST/TABLE VIEW -->
9-
<table class="table">
7+
<table class="table list_sale_order d-none">
108
<thead>
119
<tr>
1210
<th scope="col">Number</th>
@@ -24,10 +22,7 @@
2422
</t>
2523
</tbody>
2624
</table>
27-
</t>
28-
<t t-else="">
29-
<!-- GRID/CARD VIEW -->
30-
<div class="row">
25+
<div class="row card_sale_order">
3126
<t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
3227
<div class="col-md-4 mb-4">
3328
<div class="card h-100">
@@ -40,7 +35,6 @@
4035
</div>
4136
</t>
4237
</div>
43-
</t>
4438

4539
<div class="text-center mt-3">
4640
<button type="button" class="btn btn-primary load-more-button">
@@ -49,5 +43,5 @@
4943
</div>
5044
</div>
5145
</div>
52-
</t>
53-
</templates>
46+
</t>
47+
</templates>

‎website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/options.js

+25-29
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
1-
/** @odoo-module **/
1+
import options from "@web_editor/js/editor/snippets.options";
22

3-
import publicWidget from "@web_editor/js/public/widget";
4-
5-
publicWidget.registry.dynamic_snippet_sale_order = publicWidget.Widget.extend({
6-
selector: ".categories_section",
7-
8-
xmlDependencies: ["/website_dynamic_snippet/static/src/xml/sale_order_snippet.xml"],
9-
10-
start: function () {
11-
this.layout = this.el.dataset.layout || 'list';
12-
this._render();
13-
return this._super(...arguments);
3+
options.registry.DynamicSnippetOptions = options.Class.extend({
4+
setLayout(previewMode, widgetValue, params) {
5+
const snippetList = this.$target[0].querySelector(".list_sale_order");
6+
const snippetCard = this.$target[0].querySelector(".card_sale_order");
7+
if (widgetValue && widgetValue === "list") {
8+
snippetList.classList.remove("d-none");
9+
snippetCard.classList.add("d-none");
10+
} else if (widgetValue && widgetValue === "grid") {
11+
snippetList.classList.add("d-none");
12+
snippetCard.classList.remove("d-none");
13+
} else {
14+
snippetList.classList.remove("d-none");
15+
snippetCard.classList.add("d-none");
16+
}
1417
},
1518

16-
_render: function () {
17-
this._rpc({
18-
route: '/your/data/route',
19-
params: { /* your logic */ },
20-
}).then(data => {
21-
this.$el.find(".card_list_wrapper").html(
22-
qweb.render("website_dynamic_snippet.sale_order_snippet", {
23-
result: data.orders,
24-
layout: this.layout,
25-
})
26-
);
27-
});
28-
},
19+
//--------------------------------------------------------------------------
20+
// Private
21+
//--------------------------------------------------------------------------
2922

30-
onChangeOption(previewMode, widgetValue, params) {
31-
if (['grid', 'list'].includes(widgetValue)) {
32-
this.layout = widgetValue;
33-
this._render();
23+
/**
24+
* @override
25+
*/
26+
_computeWidgetState(methodName, params) {
27+
if (methodName === "setLayout") {
28+
return this.$target[0].querySelector(".list_sale_order").classList.contains('d-none') ? "grid" : "list";
3429
}
30+
return this._super(...arguments);
3531
},
3632
});

‎website_dynamic_snippet/views/snippets/snippet_templates.xml renamed to ‎website_dynamic_snippet/views/snippets/snippets.xml

+5-7
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,18 @@
2323
<template id="s_dynamic_snippet_controller_layout" inherit_id="website.snippet_options">
2424
<xpath expr="." position="inside">
2525
<t t-call="website.s_dynamic_snippet_options_template">
26-
<t t-set="snippet_name" t-value="'dynamic_snippet_sale_order'"/>
26+
<t t-set="snippet_name" t-value="'DynamicSnippetOptions'"/>
2727
<t t-set="snippet_selector" t-value="'.categories_section'"/>
2828
</t>
2929
</xpath>
3030
</template>
3131

3232
<template id="s_dynamic_snippet_sale_order_template_options" inherit_id="website.s_dynamic_snippet_options_template">
3333
<xpath expr="//we-select[@data-name='filter_opt']" position="after">
34-
<t t-if="snippet_name == 'dynamic_snippet_sale_order'">
35-
<we-select data-name="default_listing_layout" string="View" data-no-preview="true" data-reload="/">
36-
<we-button data-set-layout="grid" data-name="grid_view_opt">Grid</we-button>
37-
<we-button data-set-layout="list" data-name="list_view_opt">List</we-button>
38-
</we-select>
39-
</t>
34+
<we-select data-name="snippet_data_view" string="View" data-no-preview="true" data-reload="/">
35+
<we-button data-set-layout="grid" data-name="grid_view_opt">Grid</we-button>
36+
<we-button data-set-layout="list" data-name="list_view_opt">List</we-button>
37+
</we-select>
4038
</xpath>
4139
</template>
4240
</odoo>

0 commit comments

Comments
 (0)