19.0 tutorial dacat

.oxfmtrc.json

@@ -0,0 +1,6 @@
+{
+  "ignorePatterns": [],
+   "printWidth": 125,
+  "tabWidth": 4,
+  "useTabs": true
+}

awesome_dashboard/static/src/dashboard.js

@@ -1,8 +1,41 @@
-import { Component } from "@odoo/owl";
+import { Component, onWillStart } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { rpc } from "@web/core/network/rpc";
+import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { DashboardItem } from "./dashboard_item/dashboard_item";
 
 class AwesomeDashboard extends Component {
-    static template = "awesome_dashboard.AwesomeDashboard";
+	static template = "awesome_dashboard.AwesomeDashboard";
+	static components = { DashboardItem, Layout };
+
+	setup() {
+		this.display = {
+			controlPanel: {},
+		};
+		this.action = useService("action");
+		this.statistics = {};
+		onWillStart(async () => {
+			// Fetch data from the controller route
+			this.statistics = await rpc("/awesome_dashboard/statistics");
+		});
+	}
+
+	openCustomersView() {
+		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, "form"],
+				[false, "list"],
+			],
+		});
+	}
 }
 
 registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: grey;
+}

awesome_dashboard/static/src/dashboard.xml

@@ -1,8 +1,43 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-        hello dashboard
+		<Layout display="display" className="'o_dashboard h-100'">
+			hello dashboard
+			<t t-set-slot="layout-buttons">
+                <button class="btn btn-primary" t-on-click="openCustomersView">Customers</button>
+                <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
+            </t>
+			<DashboardItem size="1">
+				<div class="text-muted text-uppercase fw-bold small">New Orders</div>
+				<div class="h3"><t t-esc="statistics.nb_new_orders"/></div>
+			</DashboardItem>
+
+			<DashboardItem size="1">
+				<div class="text-muted text-uppercase fw-bold small">Total Amount</div>
+				<div class="h3 text-success">
+					<t t-esc="statistics.total_amount"/> €
+				</div>
+			</DashboardItem>
+
+			<DashboardItem size="1">
+				<div class="text-muted text-uppercase fw-bold small">Avg T-Shirts/Order</div>
+				<div class="h3"><t t-esc="statistics.average_quantity"/></div>
+			</DashboardItem>
+
+			<DashboardItem size="1">
+				<div class="text-muted text-uppercase fw-bold small">Cancelled Orders</div>
+				<div class="h3 text-danger"><t t-esc="statistics.nb_cancelled_orders"/></div>
+			</DashboardItem>
+
+			<DashboardItem size="2">
+				<div class="text-muted text-uppercase fw-bold small">Avg. Processing Time</div>
+				<div class="h3">
+					<t t-esc="statistics.average_time"/> Days
+				</div>
+				<div class="text-muted small">From 'New' to 'Sent/Cancelled'</div>
+			</DashboardItem>
+		</Layout>
     </t>
 
 </templates>

awesome_dashboard/static/src/dashboard_item/dashboard_item.js

@@ -0,0 +1,18 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+	static template = "awesome_dashboard.DashboardItem";
+	static props = {
+		slots: {
+			type: Object,
+			shape: {
+				default: Object,
+			},
+		},
+		size: {
+			type: Number,
+			default: 1,
+			optional: true,
+		},
+	};
+}

awesome_dashboard/static/src/dashboard_item/dashboard_item.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.DashboardItem">
+		<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>
+

awesome_owl/static/src/card/card.js

@@ -0,0 +1,22 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Card extends Component {
+	static template = "awesome_owl.Card";
+	static props = {
+		title: String,
+		slots: {
+			type: Object,
+			shape: {
+				default: true,
+			},
+		},
+	};
+
+	setup() {
+		this.state = useState({ isOpen: true });
+	}
+
+	toggleOpen() {
+		this.state.isOpen = !this.state.isOpen;
+	}
+}

awesome_owl/static/src/card/card.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+	<t t-name="awesome_owl.Card">
+		<div class="card d-inline-block m-2" style="width: 18rem;">
+			<div class="card-body">
+				<h5 class="card-title">
+					<t t-out="props.title"/>
+					<button class="btn" t-on-click="toggleOpen">Toggle</button>
+				</h5>
+				<p class="card-text" t-if="state.isOpen">
+					<t t-slot="default"/>
+				</p>
+			</div>
+		</div>
+    </t>
+</templates>

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,17 @@
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+	static template = "awesome_owl.Counter";
+	static props = {onChange: {type: Function, optional: true}};
+
+	setup() {
+		this.state = useState({ value: 1 });
+	}
+
+	increment() {
+		this.state.value++;
+		if (this.props.onChange) {
+			this.props.onChange();
+		}
+	}
+}

awesome_owl/static/src/counter/counter.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+	<t t-name="awesome_owl.Counter">
+		<div class="m-2 p-2 border d-inline-block">
+            <span class="me-2">Counter: <t t-esc="state.value"/></span>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/playground.js

@@ -1,5 +1,20 @@
-import { Component } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Card } from "./card/card";
+import { TodoList } from "./todo_list/todo_list";
 
 export class Playground extends Component {
-    static template = "awesome_owl.playground";
+	static template = "awesome_owl.Playground";
+	static components = { Counter, Card, TodoList };
+	static props = [];
+
+	setup() {
+		this.str1 = "<div class='text-primary'>some content</div>";
+        this.str2 = markup("<div class='text-primary'>some content</div>");
+		this.sum = useState({value: 2})
+	}
+
+	incrementSum() {
+		this.sum.value++;
+	}
 }

awesome_owl/static/src/playground.xml

@@ -1,10 +1,20 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-
-    <t t-name="awesome_owl.playground">
+	<t t-name="awesome_owl.Playground">
         <div class="p-3">
             hello world
+            <Counter onChange.bind="incrementSum" />
+            <Counter onChange.bind="incrementSum" />
+            <div>The sum is: <t t-esc="sum.value"/></div>
         </div>
+        <div>
+            <Card title="'card 1'">
+                content of card 1
+            </Card>
+            <Card title="'card 2'">
+                <Counter />
+            </Card>
+        </div>
+        <TodoList />
     </t>
-
 </templates>

awesome_owl/static/src/todo_list/todo_item.js

@@ -0,0 +1,21 @@
+import { Component } from "@odoo/owl";
+
+export class TodoItem extends Component {
+	static template = "awesome_owl.TodoItem";
+	static props = {
+		todo: {
+			type: Object,
+			shape: { id: Number, description: String, isCompleted: Boolean },
+		},
+		toggleState: { type: Function },
+		removeTodo: { type: Function },
+	};
+
+	onChange() {
+		this.props.toggleState(this.props.todo.id);
+	}
+
+	onDelete() {
+		this.props.removeTodo(this.props.todo.id);
+	}
+}

awesome_owl/static/src/todo_list/todo_item.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.TodoItem">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" t-att-id="props.todo.id" t-att-checked="props.todo.isCompleted" t-on-change="onChange"/>
+            <label t-att-for="props.todo.id" t-att-class="props.todo.isCompleted ? 'text-decoration-line-through text-muted' : '' ">
+                <t t-esc="props.todo.id"/>.
+                <t t-esc="props.todo.description"/>
+            </label>
+            <span role="button" class="fa fa-trash ms-3 text-danger" t-on-click="onDelete"/>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/todo_list/todo_list.js

@@ -0,0 +1,37 @@
+import { Component, useState } from "@odoo/owl";
+import { TodoItem } from "./todo_item"
+import { useAutoFocusInput } from "../utils"
+
+export class TodoList extends Component {
+	static template = "awesome_owl.TodoList";
+	static components = { TodoItem };
+	static props = [];
+
+
+	setup() {
+		this.todo_id = 0;
+		this.todos = useState([]);
+		useAutoFocusInput("input");
+	}
+
+	addTodo(ev) {
+		if (ev.keyCode !== 13 || ev.target.value.length === 0) {
+			return
+		}
+		this.todos.push({ id: this.todo_id++, description: ev.target.value, isCompleted: false });
+		ev.target.value = "";
+	}
+
+	toggleTodo(todoId) {
+		const todo = this.todos.find(e => e.id === todoId);
+		if (todo) {
+			todo.isCompleted = !todo.isCompleted;
+		}
+	}
+	removeTodo(todoId) {
+		const todo_index = this.todos.findIndex((elem) => elem.id === todoId);
+		if (todo_index >= 0) {
+			this.todos.splice(todo_index, 1);
+		}
+	}
+}

awesome_owl/static/src/todo_list/todo_list.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+	<t t-name="awesome_owl.TodoList">
+		<div class="d-inline-block border p-2 m-2">
+            <input class="form-control mb-3" type="text" placeholder="Enter a new task" t-on-keyup="addTodo" t-ref="input"/>
+            <t t-foreach="todos" t-as="todo" t-key="todo.id">
+                <TodoItem todo="todo" toggleState.bind="toggleTodo" removeTodo.bind="removeTodo"/>
+            </t>
+        </div>
+    </t>
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,8 @@
+import { useRef, onMounted } from "@odoo/owl";
+
+export function useAutoFocusInput(refName) {
+	const inputRef = useRef(refName);
+	onMounted(() => {
+		inputRef.el.focus();
+	})
+}

estate/__init__.py

@@ -0,0 +1 @@
+from . import models

estate/__manifest__.py

@@ -0,0 +1,25 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+
+{
+    'name': 'estate',
+    'category': 'Tutorials',
+    'depends': [
+        'base',
+    ],
+    'data': [
+        'security/ir.model.access.csv',
+        'views/estate_property_offer_views.xml',
+        'views/estate_property_tag_views.xml',
+        'views/estate_property_type_views.xml',
+        'views/estate_property_views.xml',
+        'views/res_users_views.xml',
+        'views/estate_menus.xml',
+    ],
+    'application': True,
+    'installable': True,
+    'auto_install': True,
+    'author': 'Odoo S.A.',
+    'license': 'LGPL-3',
+
+}

estate/models/__init__.py

@@ -0,0 +1,5 @@
+from . import estate_property
+from . import estate_property_type
+from . import estate_property_tag
+from . import estate_property_offer
+from . import res_users