8000 Add dynamic content snippet + 3 · odoo/tutorials@daa9dbb · GitHub
[go: up one dir, main page]
Skip to content

Commit daa9dbb

Browse files
gppa-odoogppa-odoo
committed
Add dynamic content snippet + 3
1 parent e5881c1 commit daa9dbb

File tree

8 files changed

+153
-78
lines changed

8 files changed

+153
-78
lines changed

‎website_dynamic_snippet/__init__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
from . import tests

‎website_dynamic_snippet/__manifest__.py

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
'name': 'Website Dynamic Snippet',
3-
'version': '18.0.1.0.0',
3+
'version': '18.4.1.0.0',
44
'category': 'Website',
55
'depends': ['website_sale'],
66
'data': [
@@ -13,7 +13,10 @@
1313
],
1414
'website.assets_wysiwyg': [
1515
'website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/options.js',
16-
]
16+
],
17+
'web.assets_tests': [
18+
'website_dynamic_snippet/static/tests/tours/dynamic_snippet_tour.js',
19+
],
1720
},
1821
'installable': True,
1922
'application': True,

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

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
/** @odoo-module **/
22
import { renderToElement } from "@web/core/utils/render";
3-
import publicWidget from "@web/legacy/js/public/public_widget";
3+
import { Interaction } from "@web/public/interaction";
4+
import { registry } from "@web/core/registry";
45

5-
publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
6-
selector: '.categories_section',
7-
disabledInEditableMode: false,
8-
events: {
9-
'click .load-more-button': '_onLoadMoreClick',
10-
},
6+
class SaleOrderSnippet extends Interaction {
7+
static selector = ".categories_section";
8+
dynamicContent = {
9+
".load-more-button": {
10+
"t-on-click": this._onLoadMoreClick,
11+
}
12+
};
1113

12-
init() {
13-
this._super(...arguments);
14-
this.orm = this.bindService("orm");
14+
setup() {
15+
this.orm = this.services.orm;
16+
this.layout = this.el.dataset.setLayout === 'list' ? 'list' : 'grid';
1517
this.offset = 0;
16-
this.limit = 10;
17-
},
18+
this.limit = this.layout === 'list' ? 10 : 9;
19+
};
1820

1921
async willStart() {
2022
await this.loadCategories();
21-
},
23+
};
2224

2325
async loadCategories() {
24-
if(this.$target[0].dataset.setLayout === 'list'){
25-
this.layout = 'list';
26-
} else {
27-
this.layout = 'grid';
28-
this.limit = 9;
29-
}
30-
const domain = this.$target[0].dataset.confirmOrderOnly === 'true' ? [['state', '=', 'sale']] : [];
26+
const template = this.layout === 'list'
27+
? 'website_dynamic_snippet.sale_order_snippet_list'
28+
: 'website_dynamic_snippet.sale_order_snippet_grid';
29+
30+
const domain = this.el.dataset.confirmOrderOnly === 'true' ? [['state', '=', 'sale']] : [];
3131
const result = await this.orm.searchRead(
3232
'sale.order',
3333
domain,
@@ -40,27 +40,17 @@ publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
4040
);
4141
if (result && result.length) {
4242
const content = await renderToElement(
43-
'website_dynamic_snippet.sale_order_snippet',
44-
{ result: result, layout: this.layout },
43+
template,
44+
{ result: result },
4545
);
46-
47-
const newTableRows = content.querySelectorAll('.list_sale_order > tbody > tr');
48-
const existingTableBody = this.el.querySelector('.list_sale_order > tbody');
49-
50-
const newCardCols = content.querySelectorAll('.card_sale_order > .col-md-4');
51-
const existingCardWrapper = this.el.querySelector('.card_sale_order');
46+
const selector = this.layout === 'list' ? '.list_sale_order > tbody' : '.card_sale_order';
47+
const targetContainer = this.el.querySelector(selector);
48+
const newContentContainer = content.querySelector(selector);
5249

5350
if (this.offset === 0) {
54-
this.el.innerHTML = '';
55-
this.el.appendChild(content);
56-
} else {
57-
if (existingTableBody && newTableRows.length) {
58-
newTableRows.forEach(row => existingTableBody.appendChild(row));
59-
}
60-
61-
if (existingCardWrapper && newCardCols.length) {
62-
newCardCols.forEach(card => existingCardWrapper.appendChild(card));
63-
}
51+
this.el.replaceChildren(content);
52+
} else if (targetContainer && newContentContainer) {
53+
targetContainer.append(...newContentContainer.children);
6454
}
6555

6656
this.offset += result.length;
@@ -70,11 +60,20 @@ publicWidget.registry.get_product_tab = publicWidget.Widget.extend({
7060
loadMoreButton.style.display = 'none';
7161
}
7262
}
73-
},
74-
63+
};
7564

7665
async _onLoadMoreClick(ev) {
7766
ev.preventDefault();
7867
await this.loadCategories();
79-
},
80-
});
68+
};
69+
};
70+
71+
registry
72+
.category("public.interactions")
73+
.add("s_dynamic_sale_order_snippet.get_product_tab", SaleOrderSnippet);
74+
registry
75+
.category("public.interactions.edit")
76+
.add("s_dynamic_sale_order_snippet.get_product_tab",
77+
{
78+
Interaction : SaleOrderSnippet
79+
});

‎website_dynamic_snippet/static/src/snippets/s_dynamic_sale_order_snippet/000.xml

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,59 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<templates xml:space="preserve">
3-
<t t-name="website_dynamic_snippet.sale_order_snippet">
3+
<t t-name="website_dynamic_snippet.sale_order_snippet_list">
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-
<table class="table list_sale_order">
9-
<thead>
7+
<table class="table list_sale_order">
8+
<thead>
9+
<tr>
10+
<th scope="col">Number</th>
11+
<th scope="col">Customer Name</th>
12+
<th scope="col">Status</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
1017
<tr>
11-
<th scope="col">Number</th>
12-
<th scope="col">Customer Name</th>
13-
<th scope="col">Status</th>
18+
<th scope="row"><t t-esc="sale_order.id"/></th>
19+
<td><t t-esc="sale_order.partner_id[1]"/></td>
20+
<td><t t-esc="sale_order.state"/></td>
1421
</tr>
15-
</thead>
16-
<tbody>
17-
<t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
18-
<tr>
19-
<th scope="row"><t t-esc="sale_order.id"/></th>
20-
<td><t t-esc="sale_order.partner_id[1]"/></td>
21-
<td><t t-esc="sale_order.state"/></td>
22-
</tr>
23-
</t>
24-
</tbody>
25-
</table>
26-
</t>
27-
<t t-else="">
28-
<div class="row card_sale_order">
29-
<t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
30-
<div class="col-md-4 mb-4">
31-
<div class="card h-100">
32-
<div class="card-body">
33-
<h5 class="card-title">Order #<t t-esc="sale_order.id"/></h5>
34-
<p class="card-text"><strong>Customer:</strong> <t t-esc="sale_order.partner_id[1]"/></p>
35-
<p class="card-text"><strong>Status:</strong> <t t-esc="sale_order.state"/></p>
36-
</div>
22+
</t>
23+
</tbody>
24+
</table>
25+
<div class="text-center mt-3">
26+
<button type="button" class="btn btn-primary load-more-button">
27+
Load More
28+
</button>
29+
</div>
30+
</div>
31+
</div>
32+
</t>
33+
34+
<t t-name="website_dynamic_snippet.sale_order_snippet_grid">
35+
<div class="container my-5 categories_section">
36+
<h3 class="section_heading">Sale Order Details</h3>
37+
<div class="card_list_wrapper">
38+
<div class="row card_sale_order">
39+
<t t-foreach="result" t-as="sale_order" t-key="sale_order.id">
40+
<div class="col-md-4 mb-4">
41+
<div class="card h-100">
42+
<div class="card-body">
43+
<h5 class="card-title">Order #<t t-esc="sale_order.id"/></h5>
44+
<p class="card-text"><strong>Customer:</strong> <t t-esc="sale_order.partner_id[1]"/></p>
45+
<p class="card-text"><strong>Status:</strong> <t t-esc="sale_order.state"/></p>
3746
</div>
3847
</div>
39-
</t>
40-
</div>
41-
</t>
48+
</div>
49+
</t>
50+
</div>
4251
<div class="text-center mt-3">
4352
<button type="button" class="btn btn-primary load-more-button">
4453
Load More
4554
</button>
4655
</div>
4756
</div>
4857
</div>
49-
</t>
50-
</templates>
58+
</t>
59+
</templates>

‎website_dynamic_snippet/static/tests/tours/dynamic_snippet_tour.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
clickOnSnippet,
3+
registerWebsitePreviewTour,
4+
} from '@website/js/tours/tour_utils';
5+
6+
registerWebsitePreviewTour('website_dynamic_snippet.sale_order_snippet', {
7+
url: '/',
8+
edition: true,
9+
},
10+
() => {
11+
return [
12+
{
13+
content: "Drag and drop the sale order snippet",
14+
trigger: "[data-snippet='sale_order_highlight']",
15+
run: "drag_and_drop :iframe #wrap .oe_drop_zone"
16+
},
17+
...clickOnSnippet({ id: "categories_section", name:"Sale Order Snippet" }),
18+
{
19+
content: "Click on the layout change Option",
20+
trigger: "[data-name='snippet_data_view']",
21+
run: "click"
22+
},
23+
{
24+
content: "Change layout to list",
25+
trigger: "[data-set-layout='list']",
26+
run: "click"
27+
},
28+
{
29+
content: "Click on the layout change Option",
30+
trigger: "[data-name='snippet_data_view']",
31+
run: "click"
32+
},
33+
{
34+
content: "Change layout to grid",
35+
trigger: "[data-set-layout='grid']",
36+
run: "click"
37+
},
38+
{
39+
content: "Click on the confirm order only Option",
40+
trigger: "[data-confirm-order-only='true'] we-checkbox",
41+
run: "click"
42+
},
43+
{
44+
content: "Save the snippet",
45+
trigger: "[data-action='save']",
46+
run: "click"
47+
},
48+
]
49+
}
50+
)

‎website_dynamic_snippet/tests/__init__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
from . import test_dynamic_snippet_tour

‎website_dynamic_snippet/tests/test_dynamic_snippet_tour.py

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
from odoo.tests import HttpCase, tagged
2+
3+
@tagged('post_install', '-at_install')
4+
class TestDynamicSnippetTour(HttpCase):
5+
def test_dynamic_snippet_tour(self):
6+
self.start_tour("/", "website_dynamic_snippet.sale_order_snippet", login="admin", watch=True)

‎website_dynamic_snippet/views/snippets/snippets.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
</xpath>
2121
</template>
2222

23+
<template id="snippets" inherit_id="website.snippets" name="sale order snippets">
24+
<xpath expr="//snippets[@id='snippet_structure']" position="inside">
25+
<t t-snippet="website_dynamic_snippet.sale_order_highlight" string="Sale Order" group="sale_order"/>
26+
</xpath>
27+
</template>
28+
2329
<template id="s_dynamic_snippet_controller_layout" inherit_id="website.snippet_options">
2430
<xpath expr="." position="inside">
2531
<div data-js="DynamicSnippetOptions" data-selector=".categories_section">

0 commit comments

Comments
 (0)
0