18.0 tutorial webfw cgun

awesome_dashboard/__init__.py

@@ -1,3 +1,4 @@
 # -*- coding: utf-8 -*-
 
 from . import controllers
+from . import models

awesome_dashboard/models/__init__.py

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

awesome_dashboard/models/res_user_settings.py

@@ -0,0 +1,7 @@
+from odoo import fields, models
+
+
+class ResUsersSettings(models.Model):
+    _inherit = 'res.users.settings'
+
+    dashboard_config = fields.Json(string="Dashboard Configuration", readonly=True)

awesome_dashboard/static/src/dashboard/configuration_dialog/configuration_dialog.js

@@ -0,0 +1,26 @@
+import { Component, useState } from "@odoo/owl";
+import { Dialog } from "@web/core/dialog/dialog";
+import { useChildRef } from "@web/core/utils/hooks";
+import { user } from "@web/core/user";
+
+export class ConfigurationDialog extends Component {
+  static template = "awesome_dashboard.ConfigurationDialog";
+  static components = { Dialog };
+  static props = { items: Array };
+
+  setup() {
+    super.setup();
+    this.modalRef = useChildRef();
+    this.state = useState({
+      config: JSON.parse(user.settings.dashboard_config || "null"),
+    });
+  }
+
+  async onCloseClicked() {
+    await user.setUserSettings(
+      "dashboard_config",
+      JSON.stringify(this.state.config)
+    );
+    this.props.close?.();
+  }
+}

awesome_dashboard/static/src/dashboard/configuration_dialog/configuration_dialog.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates xml:space="preserve">
+
+
+
+    <t t-name="awesome_dashboard.ConfigurationDialog">
+        <style>
+    .conf-div {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        padding: 5px
+    }
+    .item-span {
+        display: flex-wrap;
+        flex-direction: row;
+        justify-content: flex-start;
+        margin: 5px
+    }
+    .title {
+        font-weight: bold;
+        font-size: 12pt
+    }
+
+        </style>
+        <Dialog size="'lg'" modalRef="modalRef" withBodyPadding="false">
+            <t t-set-slot="header">
+                <p class="title">Dashboard item configuration</p>
+            </t>
+            <div class="conf-div">
+                <span class="item-span">Which cards do you wish to see?</span>
+            </div>
+            <t t-foreach="props.items" t-as="i" t-key="i.id">
+                <div class="conf-div">
+                    <span class="item-span">
+                        <input type="checkbox" class="me-2" t-model="this.state.config[i.id]" />
+                        <t t-out='i.description' />
+                    </span>
+                </div>
+            </t>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" type="button" t-on-click="onCloseClicked">Done</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard.js

@@ -0,0 +1,76 @@
+import { Component, useState, reactive } from "@odoo/owl";
+import { _t } from "@web/core/l10n/translation";
+import { Layout } from "@web/search/layout";
+import { useService } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
+import { DashboardItem } from "./dashboard_item";
+import { ConfigurationDialog } from "./configuration_dialog/configuration_dialog";
+import { user } from "@web/core/user";
+
+class AwesomeDashboard extends Component {
+  static template = "awesome_dashboard.AwesomeDashboard";
+
+  setup() {
+    this.action = useService("action");
+    this.state = useState({ statistics: useService("statistics"), config: {} });
+    this.items = registry.category("awesome_dashboard").getAll();
+
+    if (!user.settings.dashboard_config) {
+      this.state.config = this.initializeDashboardConfig();
+    } else {
+      this.state.config = JSON.parse(user.settings.dashboard_config);
+    }
+    this.dialogService = useService("dialog");
+  }
+
+  initializeDashboardConfig() {
+    const dashboard_config = this.items.reduce((acc, item) => {
+      acc[item.id] = true;
+      return acc;
+    }, {});
+
+    user.setUserSettings("dashboard_config", JSON.stringify(dashboard_config));
+    return dashboard_config;
+  }
+
+  updateUserSettings() {
+    this.state.config = JSON.parse(user.settings.dashboard_config);
+  }
+  sDSA;
+
+  showCustomers() {
+    this.action.doAction("base.action_partner_form");
+  }
+
+  showLeads() {
+    this.action.doAction({
+      type: "ir.actions.act_window",
+      name: _t("Leads"),
+      target: "current",
+      res_model: "crm.lead",
+      views: [
+        [false, "list"],
+        [false, "form"],
+      ],
+    });
+  }
+
+  showConfigurationDialog(ev) {
+    console.log(user.settings);
+    ev?.stopPropagation();
+    this.dialogService.add(
+      ConfigurationDialog,
+      {
+        items: this.items,
+      },
+      {
+        context: this,
+        onClose: this.updateUserSettings.bind(this),
+      }
+    );
+  }
+
+  static components = { Layout, DashboardItem, ConfigurationDialog };
+}
+
+registry.category("lazy_components").add("AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -0,0 +1,3 @@
+.o_dashboard {
+    background-color: rgb(255, 215, 142);
+}

awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.AwesomeDashboard">
+        <Layout display="{controlPanel:{}}" className="'o_dashboard h-100'">
+            <t t-set-slot="control-panel-create-button">
+                <button class="btn btn-primary" type="button" t-on-click="showCustomers">Customers</button>
+                <button class="btn btn-primary" type="button" t-on-click="showLeads">Leads</button>
+            </t>
+            <t t-set-slot="control-panel-additional-actions">
+                <button class="d-inline-block px-2 py-0 btn btn-link" t-on-click="showConfigurationDialog">
+                    <i class="fa fa-gear" role="img"/>
+                </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="this.state.config[item.id]">
+                        <t t-set="itemProp" t-value="item.props ? item.props(this.state.statistics) : {'data': this.state.statistics}"/>
+                        <t t-component="item.Component" t-props="itemProp" />
+                    </DashboardItem>
+                </t>
+            </div>
+        </Layout>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/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/dashboard_item.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.DashboardItem">
+        <div class="card border m-2" t-attf-style="width: {{18*props.size}}rem; background-color: rgb(255, 235, 199);">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+
+        <style>
+            @media (max-width: 767px) {
+                .card {
+                width: 100% !important;
+                }
+            }
+        </style>
+    </t>
+
+</templates>

awesome_dashboard/static/src/dashboard/dashboard_items.js

@@ -0,0 +1,70 @@
+import { NumberCard } from "./number_card/number_card";
+import { PieChartCard } from "./pie_chart/pie_chart_card";
+import { _t } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+const dashboard_items = [
+  {
+    id: "average_quantity",
+    description: _t("Average amount of t-shirt"),
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Average amount of t-shirt by order this month",
+      value: data.average_quantity,
+    }),
+  },
+  {
+    id: "average_time",
+    description: _t("Average time for an order"),
+    Component: NumberCard,
+    size: 2,
+    props: (data) => ({
+      title:
+        "Average time for an order to go from new to 'sent' or 'cancelled'",
+      value: data.average_time,
+    }),
+  },
+  {
+    id: "nb_new_orders",
+    description: _t("Number of new orders"),
+    Component: NumberCard,
+    props: (data) => ({
+      title: "Number of new orders this month",
+      value: data.nb_new_orders,
+    }),
+  },
+  {
+    id: "nb_cancelled_orders",
+    description: _t("Number of cancelled orders"),
+    Component: NumberCard,
+    size: 2,
+    props: (data) => ({
+      title: "Number of cancelled orders this month",
+      value: data.nb_cancelled_orders,
+    }),
+  },
+  {
+    id: "total_amount",
+    description: _t("Total amount of new orders"),
+    Component: NumberCard,
+    size: 2,
+    props: (data) => ({
+      title: "Total amount of new orders this month",
+      value: data.total_amount,
+    }),
+  },
+  {
+    id: "orders_by_size",
+    description: _t("Shirt orders by size"),
+    Component: PieChartCard,
+    size: 2,
+    props: (data) => ({
+      title: "Shirt orders by size",
+      value: data.orders_by_size,
+    }),
+  },
+];
+
+for (const item of dashboard_items) {
+  registry.category("awesome_dashboard").add(item.id, item);
+}

awesome_dashboard/static/src/dashboard/number_card/number_card.js

@@ -0,0 +1,9 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+  static template = "awesome_dashboard.NumberCard";
+  static props = {
+    title: String,
+    value: Number,
+  };
+}

awesome_dashboard/static/src/dashboard/number_card/number_card.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.NumberCard">
+        <t t-esc="props.title"/>
+        <div class="fs-1 fw-bold text-warning text-center">
+            <t t-esc="props.value"/>
+        </div>
+    </t>
+
+</templates>

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

@@ -0,0 +1,41 @@
+import { Component, onWillStart, useRef, onMounted } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+  static template = "awesome_dashboard.PieChart";
+
+  static props = {
+    data: Object,
+    title: String,
+  };
+
+  setup() {
+    this.canvasRef = useRef("canvas");
+    onWillStart(async () => {
+      await loadJS("/web/static/lib/Chart/Chart.js");
+    });
+    onMounted(() => {
+      this.renderChart();
+    });
+  }
+
+  renderChart() {
+    const labels = Object.keys(this.props.data);
+    const data = Object.values(this.props.data);
+    const color = ["#ff6384", "#36a2eb", "#cc65fe"];
+    this.chart = new Chart(this.canvasRef.el, {
+      type: "pie",
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: this.props.title,
+            data: data,
+            backgroundColor: color,
+          },
+        ],
+      },
+      options: { aspectRatio: 1 },
+    });
+  }
+}