Skip to content

[ADD] AwesomeOwl: OWL Tutorial PR #798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: 18.0
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions awesome_dashboard/__manifest__.py
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# -*- coding: utf-8 -*-
{
'name': "Awesome Dashboard",
'name': 'Awesome Dashboard',

'summary': """
Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
Expand All @@ -10,8 +10,8 @@
Starting module for "Discover the JS framework, chapter 2: Build a dashboard"
""",

'author': "Odoo",
'website': "https://www.odoo.com/",
'author': 'Odoo',
'website': 'https://www.odoo.com/',
'category': 'Tutorials/AwesomeDashboard',
'version': '0.1',
'application': True,
Expand All @@ -24,7 +24,11 @@
'assets': {
'web.assets_backend': [
'awesome_dashboard/static/src/**/*',
('remove', 'awesome_dashboard/static/src/dashboard/**/*'),
],
'awesome_dashboard.dashboard': [
'awesome_dashboard/static/src/dashboard/**/*',
]
},
'license': 'AGPL-3'
}
119 changes: 119 additions & 0 deletions awesome_dashboard/i18n/fr.po
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# Translation of Odoo Server.
# This file contains the translation of the following modules:
# * awesome_dashboard
#
msgid ""
msgstr ""
"Project-Id-Version: Odoo Server 18.0+e\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2025-05-30 09:40+0000\n"
"PO-Revision-Date: 2025-05-30 09:40+0000\n"
"Last-Translator: \n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n"
"Plural-Forms: \n"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Average amount of t-shirt"
msgstr "Montant moyen des t-shirts"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Average amount of t-shirt by order this month"
msgstr "Montant moyen des t-shirts par commande ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Average time for an order"
msgstr "Temps moyen pour une commande"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Average time for an order to go from 'new' to 'sent' or 'cancelled'"
msgstr ""
"Temps moyen pour qu'une commande passe de « nouvelle » à « envoyée » ou « "
"annulée »"

#. module: awesome_dashboard
#: model:ir.ui.menu,name:awesome_dashboard.menu_root
msgid "Awesome Dashboard"
msgstr "Tableau de bord génial"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Cancelled orders this month"
msgstr "Commandes annulées ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
msgid "Customers"
msgstr "Clients"

#. module: awesome_dashboard
#: model:ir.actions.client,name:awesome_dashboard.dashboard
#: model:ir.ui.menu,name:awesome_dashboard.dashboard_menu
msgid "Dashboard"
msgstr "Tableau de bord"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
msgid "Done"
msgstr "Terminé"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
msgid "Leads"
msgstr "Pistes"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "New orders this month"
msgstr "Nouvelles commandes ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Number of cancelled orders this month"
msgstr "Nombre de commandes annulées ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Number of new orders this month"
msgstr "Nombre de nouvelles commandes ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Shirt orders by size"
msgstr "Commandes de t-shirts par taille"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "Total amount of new orders this month"
msgstr "Montant total des nouvelles commandes ce mois-ci"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard.xml:0
msgid "Which cards do you whish to see ?"
msgstr "Quelles cartes souhaitez-vous voir ?"

#. module: awesome_dashboard
#. odoo-javascript
#: code:addons/awesome_dashboard/static/src/dashboard/dashboard_items.js:0
msgid "amount orders this month"
msgstr "montant des commandes ce mois-ci"
10 changes: 0 additions & 10 deletions awesome_dashboard/static/src/dashboard.js

This file was deleted.

8 changes: 0 additions & 8 deletions awesome_dashboard/static/src/dashboard.xml

This file was deleted.

86 changes: 86 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/** @odoo-module **/

import { Component, useState } from "@odoo/owl";
import { LazyComponent } from "@web/core/assets";
import { browser } from "@web/core/browser/browser";
import { CheckBox } from "@web/core/checkbox/checkbox";
import { Dialog } from "@web/core/dialog/dialog";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Layout } from "@web/search/layout";
import { PieChart } from "../pie_chart/pie_chart";
import { DashboardItem } from "./dashboard_item/dashboard_item";

class AwesomeDashboard extends Component {
static template = "awesome_dashboard.dashboard";
static components = { Layout, DashboardItem, PieChart, LazyComponent }
async setup() {
super.setup();
this.display = {
controlPanel: {},
};
this.action = useService("action");
this.statistics = useState(useService("awesome_dashboard.statistics"));
this.items = registry.category("awesome_dashboard").getAll();
this.dialog = useService("dialog");
this.state = useState({
uncheckedItems: browser.localStorage.getItem("uncheckedItems")?.split(",") || [],
});
}

openCustomers() {
this.action.doAction("base.action_partner_form");
}

openLeads() {
this.action.doAction({
type: "ir.actions.act_window",
name: "All leads",
res_model: "crm.lead",
views: [
[false, "list"],
[false, "form"],
],
});
}

openConfigurations() {
this.dialog.add(DashboardConfiguration, {
items: this.items,
uncheckedItems: this.state.uncheckedItems,
update: this.update.bind(this),
});
}

update(updatedUncheckedItems) {
this.state.uncheckedItems = updatedUncheckedItems;
}
}

class DashboardConfiguration extends Component {
static template = "awesome_dashboard.dashboard_configuration";
static components = { Dialog, CheckBox };
static props = ["close", "items", "uncheckedItems", "update"];

setup() {
this.items = useState(this.props.items.map((item) => {
return {
...item,
enabled: !this.props.uncheckedItems.includes(item.id),
}
}));
}

done() {
const updatedUncheckedItems = this.items.filter((i) => !i.enabled).map((i) => i.id);
browser.localStorage.setItem("uncheckedItems", updatedUncheckedItems);
this.props.update(updatedUncheckedItems);
this.props.close();
}

update(ev, item) {
item.enabled = ev.target.checked;
}
}

registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);
3 changes: 3 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.o_dashboard {
background-color: #7f5a7b;
}
40 changes: 40 additions & 0 deletions awesome_dashboard/static/src/dashboard/dashboard.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="awesome_dashboard.dashboard">
<Layout display="display" className="'o_dashboard h-100'">
<t t-set-slot="layout-buttons">
<button t-on-click="openCustomers" class="btn btn-primary">Customers</button>
<button t-on-click="openLeads" class="btn btn-primary">Leads</button>
<button t-on-click="openConfigurations" class="btn p-0 ms-1 border-0">
<i class="fa fa-gear"></i>
</button>
</t>
<div class="d-flex flex-wrap">
<t t-foreach="items" t-as="item" t-key="item.id">
<DashboardItem size="item.size || 1" t-if="!state.uncheckedItems?.includes(item.id)">
<t t-set="itemProp" t-value="item.props ? item.props(statistics) : {'data': statistics}"/>
<t t-component="item.Component" t-props="itemProp" />
</DashboardItem>
</t>
</div>
</Layout>
</t>

<t t-name="awesome_dashboard.dashboard_configuration">
<Dialog title="'Dashboard items configuration'">
Which cards do you whish to see ?
<t t-foreach="items" t-as="item" t-key="item.id">
<CheckBox value="item.enabled" t-on-change="(ev) => this.update(ev, item)">
<t t-esc="item.description"/>
</CheckBox>
</t>

<t t-set-slot="footer">
<button class="btn btn-primary" t-on-click="done">
Done
</button>
</t>
</Dialog>
</t>
</templates>
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Component } from "@odoo/owl";

export class DashboardItem extends Component {
static template = "awesome_dashboard.dashboard_item";
static props = {
"size": {
type: Number,
optional: true,
default: 1
},
slots: {
type: Object,
shape: {
default: true
},
}
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
<t t-name="awesome_dashboard.dashboard_item">
<div class="card m-2 border-dark" t-attf-style="width: {{18*props.size}}rem;">
<div class="card-body">
<t t-slot="default"/>
</div>
</div>
</t>
</templates>
Loading