Web Tutorial PR: trcaz #967

trcazier · 2025-09-22T14:19:21Z

No description provided.

robodoo · 2025-09-22T14:19:24Z

cgun-odoo

Amazing job

awesome_owl/static/src/card/card.js

awesome_owl/static/src/card/card.xml

awesome_owl/static/src/counter/counter.js

awesome_owl/static/src/counter/counter.xml

awesome_owl/static/src/card/card.js

awesome_owl/static/src/playground.xml

… better than the actual solution

awesome_owl/static/src/counter/counter.js

cgun-odoo

You named your commit sections 8-9 but this contains section 10 🤨

awesome_owl/static/src/todo_list/todo_list.js

Co-authored-by: Cemal Faruk Güney <[email protected]>

awesome_owl/static/src/playground.xml

cgun-odoo · 2025-09-24T09:10:27Z

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js

+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.pie_chart";
+    static props = { data: {optional: false}}


Every prop is required by default. You don't have to write it unless it's optional: true

I know but I just didn't want to type check the data because it's json and annoying but I still wanted to require the data prop

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.xml

cgun-odoo · 2025-09-24T09:45:23Z

awesome_dashboard/static/src/dashboard/dashboard_item.js

+    }
+
+    setup() {
+        this.size = this.props.size || 1


You can also use defaultProps

awesome_dashboard/static/src/dashboard/dashboard_item.js

awesome_dashboard/static/src/dashboard/dashboard_service.js

cgun-odoo · 2025-09-24T09:51:41Z

awesome_dashboard/static/src/dashboard/dashboard_service.js

+        async function loadData() {
+            console.log("slt")
+            const newStats = await rpc("/awesome_dashboard/statistics");
+            Object.keys(newStats).forEach((k) => stats[k] = newStats[k])


why can't you do something like stats = newStats?
why did you have to iterate over the keys?

When I did that it didn't register the change, maybe because it overwrote the useState, idk
I can try again

Nope doesn't work with stats = newStats

Object.assign(stats, newStats) maybe

How on god's green earth was I supposed to find that out

…ials into 18.0-web-tutorial-trcaz

cgun-odoo · 2025-09-24T12:09:04Z

What happened here

awesome_dashboard/static/src/dashboard/dashboard.js

cgun-odoo · 2025-09-24T12:15:47Z

awesome_dashboard/static/src/dashboard/dashboard.xml

+            </t>
+
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <DashboardItem size="item.size">


What happens if they don't have size? I saw that you don't have a default value

this.size = this.props.size || 1

awesome_dashboard/static/src/dashboard/dashboard.xml

trcazier · 2025-09-24T12:34:31Z

What happened here

I amended the last commit but I had already pushed so it created a new branch I guess

cgun-odoo · 2025-09-25T08:35:03Z

awesome_dashboard/static/src/dashboard/dashboard.js

 import { _t } from "@web/core/l10n/translation";
 import { DashboardItem } from "./dashboard_item";
 import { PieChart } from "./pie_chart/pie_chart";
+import { browser } from "@web/core/browser/browser";


cgun-odoo · 2025-09-25T08:35:52Z

awesome_dashboard/static/src/dashboard/dashboard.js

        this.stats = useState(useService("awesome_dashboard.statistics"));
        this.items = registry.category("awesome_dashboard").getAll();
+        this.dialog = useService("dialog");
+        this.state = useState({ itemsNotShown: browser.localStorage.getItem("itemsNotShown")?.split(",") || []});


Suggested change

this.state = useState({ itemsNotShown: browser.localStorage.getItem("itemsNotShown")?.split(",") || []});

this.state = useState({ itemsNotShown: localStorage.getItem("itemsNotShown")?.split(",") || []});

just localStorage should be enough. Or maybe I'm dreaming 📦

idk I had no idea how to do it so I just looked it up

cgun-odoo · 2025-09-25T08:37:20Z

awesome_dashboard/static/src/dashboard/dashboard.js

        this.stats = useState(useService("awesome_dashboard.statistics"));
        this.items = registry.category("awesome_dashboard").getAll();
+        this.dialog = useService("dialog");
+        this.state = useState({ itemsNotShown: browser.localStorage.getItem("itemsNotShown")?.split(",") || []});


It's confusing to have a state variable called state when you already have other state variables (stats). Either put stats in state or take itemsNotShown outside of state

But isn't state used to pass mutable variables? I put the ones that change in this.state and the others just in this

I never heard a rule like that, did you see it somewhere 👀

No but it makes more sense to me :)

cgun-odoo · 2025-09-25T08:38:12Z

awesome_dashboard/static/src/dashboard/dashboard.js

+class SettingsDialog extends Component {
+    static template = "awesome_dashboard.SettingsDialog";
+    static components = { Dialog, CheckBox };
+    static props = ["dashboard", "items", "itemsNotShown"];
+
+    setup() {
+        this.items = useState(this.props.items);
+        this.items.forEach((item) => { item.shown = !this.props.itemsNotShown.includes(item.id)});
+    }
+
+    toggleItem (ev, item) {
+        item.shown = ev;
+
+        const newItemsNotShown = Object.values(this.items)
+            .filter((i) => !i.shown)
+            .map((i) => i.id)
+
+        browser.localStorage.setItem("itemsNotShown", newItemsNotShown);
+
+        this.props.dashboard.state.itemsNotShown = newItemsNotShown;
+    }
+}


Deserves its own file imo

The tutorial solution doesn't share the same opinion

🤠 are we looking at the solution now

Well when the exercise says "code something you have no idea how to do and we give you no docs for with components you don't know the name of in a framework you don't know" I don't feel like trying

awesome_dashboard/static/src/dashboard/dashboard.js

cgun-odoo · 2025-09-25T08:40:11Z

awesome_dashboard/static/src/dashboard/dashboard.js

+
+        browser.localStorage.setItem("itemsNotShown", newItemsNotShown);
+
+        this.props.dashboard.state.itemsNotShown = newItemsNotShown;


uuuhh so you're getting the parent as a prop, then changing the state of the parent in the child. Why don't you handle all of this in the parent. You can create the toggleItem (or similar) function in the parent and pass the function to the child as a prop

I was gonna write a witty answer but instead I'll just commit another solution that will comply entirely with what I was gonna write & will probably irritate you even more

I hope you like it

awesome_dashboard/static/src/dashboard/dashboard.js

cgun-odoo · 2025-09-25T13:33:21Z

awesome_dashboard/static/src/dashboard/dashboard.js

    setup() {
        this.items = useState(this.props.items);
-        this.items.forEach((item) => { item.shown = !this.props.itemsNotShown.includes(item.id)});
+        this.items.forEach((item) => { item.shown = !this.props.dashboard.state.itemsNotShown.includes(item.id)});


I hate everything about this.
Good job 👍

That way I only have to pass 1 prop: the dashboard, and not: itemsNotShown and 15update methods 😄

cgun-odoo · 2025-09-25T14:11:05Z

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js

+            if (this.pieChart) {
+                this.pieChart.destroy();
+            }


Suggested change

if (this.pieChart) {

this.pieChart.destroy();

}

this.pieChart?.destroy();

cgun-odoo · 2025-09-25T14:11:21Z

awesome_dashboard/static/src/dashboard/pie_chart/pie_chart.js

+            this.buildChart();
+        });
+
+        onWillUnmount(() => { if (this.pieChart) {this.pieChart.destroy()}; });


Suggested change

onWillUnmount(() => { if (this.pieChart) {this.pieChart.destroy()}; });

onWillUnmount(() => {this.pieChart?.destroy(); });

Hum hum...

#967 (comment)

[IMP] awesome_owl: free me from this pain

dfc2387

trcazier requested a review from cgun-odoo September 22, 2025 14:19

cgun-odoo reviewed Sep 22, 2025

View reviewed changes

trcazier added 3 commits September 22, 2025 16:53

[IMP] awesome_owl: save this counter implementation because I like it…

f7b4680

… better than the actual solution

[IMP] awesome_owl: add up to section 7

dc2211e

[IMP] awesome_owl: apply PR suggestions

a22285a

cgun-odoo reviewed Sep 23, 2025

View reviewed changes

awesome_owl/static/src/counter/counter.js Outdated Show resolved Hide resolved

awesome_owl/static/src/counter/counter.js Outdated Show resolved Hide resolved

cgun-odoo reviewed Sep 23, 2025

View reviewed changes

awesome_owl/static/src/todo_list/todo_list.js Outdated Show resolved Hide resolved

awesome_owl/static/src/todo_list/todo_list.js Outdated Show resolved Hide resolved

awesome_owl/static/src/todo_list/todo_list.js Outdated Show resolved Hide resolved

trcazier force-pushed the 18.0-web-tutorial-trcaz branch from 88c95bf to bc43839 Compare September 23, 2025 08:19

trcazier and others added 5 commits September 23, 2025 10:29

[IMP] awesome_owl: add sections 8-10

8611d61

[IMP] awesome_owl: add section 11

70e3c05

[IMP] awesome_owl: replace redundant ternary operator with ||

aa4125a

Co-authored-by: Cemal Faruk Güney <[email protected]>

[IMP] awesome_owl: replace redundant ternary operator with if

bf99024

Co-authored-by: Cemal Faruk Güney <[email protected]>

[IMP] awesome_owl: add missing ;

03af1db

Co-authored-by: Cemal Faruk Güney <[email protected]>

trcazier force-pushed the 18.0-web-tutorial-trcaz branch from b73ff1c to 9d8ff02 Compare September 23, 2025 08:30

trcazier added 2 commits September 23, 2025 10:54

[IMP] awesome_owl: add section 12 and missing ;s

86806ec

[IMP] awesome_owl: add section 13

143eec9

trcazier force-pushed the 18.0-web-tutorial-trcaz branch from 8630778 to 143eec9 Compare September 23, 2025 08:55

trcazier added 4 commits September 23, 2025 10:57

[IMP] awesome_owl: set the starting todo index as 1

3156e29

[IMP] awesome_owl: add section 14

60483e6

[IMP] awesome_dashboard: add section 1

2209933

[IMP] awesome_dashboard: add section 2

adf412a

cgun-odoo reviewed Sep 23, 2025

View reviewed changes

awesome_owl/static/src/playground.xml Show resolved Hide resolved

trcazier added 6 commits September 23, 2025 15:21

[IMP] awesome_dashboard: add sections 3-4

ac47f9b

[IMP] awesome_dashboard: add section 5

71636b1

[IMP] awesome_dashboard: section 6

4115506

[IMP] awesome_dashboard: add section 7

82f496d

[IMP] awesome_dashboard: add section 8

cabcad9

[IMP] awesome_dashboard: add section 9

036b648

cgun-odoo reviewed Sep 24, 2025

View reviewed changes

trcazier added 5 commits September 24, 2025 11:55

[IMP] awesome_dashboard: remove console logs

164bc52

[IMP] awesome_dashboard: add section 10

a502aa5

[IMP] awesome_dashboard: add section 10

292c7b8

[MERGE] branch '18.0-web-tutorial-trcaz' of github.com:odoo-dev/tutor…

9f7c018

…ials into 18.0-web-tutorial-trcaz

[IMP] awesome_dashboard: move buttons into layout button bar

82c0d40

trcazier force-pushed the 18.0-web-tutorial-trcaz branch from 14a06af to 82c0d40 Compare September 24, 2025 11:24

[IMP] awesome_dashboard: rewrite xml ids using PascalCase

b62f551

cgun-odoo reviewed Sep 24, 2025

View reviewed changes

trcazier added 2 commits September 24, 2025 14:40

[IMP] awesome_dashboard: apply PR feedback

113773f

[IMP] awesome_dashboard: add section 11

6f4a297

cgun-odoo reviewed Sep 25, 2025

View reviewed changes

trcazier added 4 commits September 25, 2025 13:56

[IMP] awesome_dashboard: refactor settings dialog props

0ad1da4

[IMP] awesome_dashboard: change var name for clarity

6aacfbe

[IMP] awesome_dashboard: add newline to file end

3231834

[IMP] awesome_dashboard: apply PR suggestion

44e0d49

cgun-odoo reviewed Sep 25, 2025

View reviewed changes

	this.state = useState({ itemsNotShown: browser.localStorage.getItem("itemsNotShown")?.split(",") \|\| []});
	this.state = useState({ itemsNotShown: localStorage.getItem("itemsNotShown")?.split(",") \|\| []});


		browser.localStorage.setItem("itemsNotShown", newItemsNotShown);

		this.props.dashboard.state.itemsNotShown = newItemsNotShown;

	onWillUnmount(() => { if (this.pieChart) {this.pieChart.destroy()}; });
	onWillUnmount(() => {this.pieChart?.destroy(); });

Web Tutorial PR: trcaz #967

Are you sure you want to change the base?

Web Tutorial PR: trcaz #967

Uh oh!

Conversation

trcazier commented Sep 22, 2025

Uh oh!

robodoo commented Sep 22, 2025

Uh oh!

cgun-odoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cgun-odoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cgun-odoo commented Sep 24, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

trcazier commented Sep 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cgun-odoo Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

cgun-odoo Sep 25, 2025 •

edited

Loading

trcazier Sep 25, 2025 •

edited

Loading

trcazier Sep 25, 2025 •

edited

Loading