add some new code

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.languageServer": "None"
+}

awesome_tshirt/static/src/card/card.js

@@ -0,0 +1,16 @@
+/** @odoo-module */
+
+const { Component } = owl;
+
+export class Card extends Component {}
+
+Card.template = "awesome_tshirt.Card";
+Card.props = {    
+    slots: {
+        type: Object,
+        shape: {
+            default: Object,
+            title: { type: Object, optional: true },
+        },
+    },
+};

awesome_tshirt/static/src/card/card.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+    <t t-name="awesome_tshirt.Card" owl="1">
+        <div class="card" style="width: 18rem;">
+            <div class="card-body">
+                <t t-if="props.slots.title"> 
+                    <h5 class="card-title"><t t-slot="title"/></h5>
+                </t>
+                <p class="card-text"><t t-slot="default"/></p>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_tshirt/static/src/dashboard.js

@@ -1,11 +1,42 @@
 /** @odoo-module **/
-
-import { Component } from "@odoo/owl";
+import { Component,useSubEnv, onWillStart } from "@odoo/owl";
 import { registry } from "@web/core/registry";
+import { Layout } from "@web/search/layout";
+import {getDefaultConfig} from "@web/views/view";
+import {useService} from "@web/core/utils/hooks";
+import { Card } from "./card/card";
+
+class AwesomeDashboard extends Component {
+    setup() {
+        useSubEnv({
+            config: {
+                ...getDefaultConfig(),
+                ...this.env.config,
+            },
+        });
+        this.display = {
+            controlPanel: { "top-right": false, "bottom-right": false },
+        };
+        this.action = useService("action");
+        this.rpc = useService("rpc");
 
-class AwesomeDashboard extends Component {}
+        this.keyToString = {
+            average_quantity: "Average amount of t-shirt by order this month",
+            average_time: "Average time for an order to go from 'new' to 'sent' or 'cancelled'",
+            nb_cancelled_orders: "Number of cancelled orders this month",
+            nb_new_orders: "Number of new orders this month",
+            total_amount: "Total amount of new orders this month",
+        };
+        onWillStart(async () => {
+            this.statistics = await this.rpc("/awesome_tshirt/statistics");
+        });
+    }
 
-AwesomeDashboard.components = {};
+    openCustomerView() {
+        this.action.doAction("base.action_partner_form");
+    }
+}
+AwesomeDashboard.components = { Layout, Card };
 AwesomeDashboard.template = "awesome_tshirt.clientaction";
 
 registry.category("actions").add("awesome_tshirt.dashboard", AwesomeDashboard);

awesome_tshirt/static/src/dashboard.xml

@@ -1,8 +1,25 @@
-<?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
     <t t-name="awesome_tshirt.clientaction" owl="1">
+        <Layout display="display">
+            <t t-set-slot="control-panel-bottom-left">
+                <!-- Hello owl -->
+                <button class="btn btn-primary" t-on-click="openCustomerView"> Customers </button>
+                <button class="btn btn-primary" t-on-click="openLast7DaysOrders"> New Orders </button>
+                <button class="btn btn-primary" t-on-click="openLast7DaysCancelledOrders"> Cancelled Orders </button>
+            </t>
+        </Layout>
 
+        <t t-name="awesome_tshirt.clientaction.statistics" owl="1">
+            <div class="d-flex flex-nowrap">
+                <div t-foreach="keyToString" t-as="key" t-key="key" class="m-2">
+                    <Card>
+                        <t t-set-slot="title"><t t-esc="keyToString[key]"/></t>
+                        <p class="card-text"><t t-esc="statistics[key]"/></p>
+                    </Card>   
+                </div>      
+            </div>
+        </t>
     </t>
 
-</templates>
+</templates>

awesome_tshirt/static/src/image_preview_field/image_preview_field.js

@@ -0,0 +1,14 @@
+/** @odoo-module */
+
+import { registry } from "@web/core/registry";
+import { CharField } from "@web/views/fields/char/char_field";
+
+const { Component } = owl;
+
+class ImagePreviewField extends Component {}
+
+ImagePreviewField.template = "awesome_tshirt.ImagePreviewField";
+ImagePreviewField.components = { CharField };
+ImagePreviewField.supportedTypes = ["char"];
+
+registry.category("fields").add("image_preview", ImagePreviewField);

awesome_tshirt/static/src/image_preview_field/image_preview_field.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_tshirt.ImagePreviewField" owl="1">
+        <CharField t-props="props"/>
+        <t t-if="props.value.length === 0">
+            <p class="text-danger">MISSING TSHIRT DESIGN</p>
+        </t>
+        <img t-att-src="props.value"/>
+    </t>
+</templates>

awesome_tshirt/views/views.xml

@@ -22,7 +22,7 @@
                 <field name="is_late"/>
               </group>
               <group>
-                <field name="image_url"/>
+                <field name="image_url" widget="image_preview"/>
               </group>
             </group>
           </sheet>
@@ -43,7 +43,7 @@
             <field name="customer_id"/>
             <field name="size"/>
             <field name="quantity"/>
-            <field name="image_url"/>
+            <field name="image_url" widget="image_preview"/>
           </group>
         </form>
       </field>

owl_playground/static/src/card/card.js

@@ -0,0 +1,16 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+export class Card extends Component {
+
+    static template = "owl_playground.card"
+    static props = {
+        slots: {
+            type: Object,
+            shape: {
+                title: { type: Object, optional: true },
+                default: Object
+            },
+        },
+    };
+}

owl_playground/static/src/card/card.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates xml:space="preserve">
+    <t t-name="owl_playground.card" owl="1">
+        <div class="card" style="width: 18rem;">
+            <div class="card-body">
+                <div class="card-body">
+                    <t t-if="props.slots.title"> 
+                        <h5 class="card-title"><t t-slot="title"/></h5>
+                    </t>
+                    <p class="card-text"><t t-slot="default"/></p>
+                    <!-- <a href="https://www.odoo.com/" class="btn btn-primary">Go somewhere</a> -->
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

owl_playground/static/src/counter/counter.js

@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "owl_playground.counter";
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+    }
+    restart() {
+        this.state.value = 0;
+    }
+}
+

owl_playground/static/src/counter/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="owl_playground.counter" owl="1">
+        <div class="p-3">
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+            <button class="btn btn-secondry" t-on-click="restart">Restart</button>
+        </div>
+    </t>
+
+</templates>

owl_playground/static/src/playground.js

@@ -1,7 +1,16 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
-
+import { Component, useState } from "@odoo/owl";
+import { Counter } from "./counter/counter";
+import { Todo } from "./todo/todo";
+import {Todolist} from "./todolist/todolist";
+import { Card } from "./card/card";
 export class Playground extends Component {
+    static components = { Counter,Todo,Todolist,Card };
     static template = "owl_playground.playground";
+
+    setup() {
+        this.todo = { id: 3, description: "buy milk", done: true };
+    }
 }
+

owl_playground/static/src/playground.xml

@@ -1,10 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" ?>
+
 <templates xml:space="preserve">
 
     <t t-name="owl_playground.playground" owl="1">
-        <div class="p-3">
-            hello world
+    <div style="position:relative;">
+        <Counter/>
+        <div style="position:absolute;top:50%;left:50%" ><Todolist/></div>
+
         </div>
+        <!-- <Card>
+            <t t-set-slot="title">Card title</t>
+            <p class="card-text">Some quick example text...</p>
+            <a href="https://www.odoo.com/" class="btn btn-primary">Go somewhere</a>
+        </Card> -->
     </t>
-
-</templates>
+</templates>

owl_playground/static/src/todo/todo.js

@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class Todo extends Component {
+    static template = "owl_playground.todo";
+}
+Todo.props = {
+    id: {type:Number},
+    description: {type:String},
+    done: {type:Boolean},
+    toggleState: { type:Function },
+    removeTodo: { type:Function },  
+};
+

owl_playground/static/src/todo/todo.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+    <t t-name="owl_playground.todo" owl="1">
+        <p t-att-class="newspaper props.done ? 'text-decoration-line-through text-muted' : '' ">
+            <input class="form-check-input" type="checkbox" t-att-checked="props.done" t-on-click="ev => props.toggleState(props.id)"/>
+            <t t-esc="props.id"/>.
+            <t t-esc="props.description"/> 
+            <span role= "button" class="fa fa-remove text-danger" t-on-click="ev => props.removeTodo(props.id)"/>
+        </p>
+    </t>
+</templates>

owl_playground/static/src/todolist/todolist.js

@@ -0,0 +1,45 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+import { Todo } from "../todo/todo";
+import { useAutofocus } from "../utils";
+
+
+export class Todolist extends Component {
+    static components = { Todo };
+    static template = "owl_playground.todolist";
+
+    setup() {
+        this.todoList = [];
+        this.todoList = useState([{ id: 1, description: "Task 1", done: false },{ id: 2, description: "Task 2", done: false },{ id: 3, description: "Task 3", done: false }]);
+        this.nextId = this.todoList.length+1;
+        this.inputred = useAutofocus("inputElement");
+    }
+
+    addTodo(ev) {
+        if(ev.keyCode === 13){
+            if (ev.target.value.trim() != "") {
+                this.todoList.push({ id: this.nextId++, description: ev.target.value, done: false });
+            }
+            ev.target.value = "";
+        }
+    }
+
+    toggleState(todoId) {
+
+        const todo = this.todoList.find((todo) => todo.id === todoId);
+        if (todo) {
+            todo.done = !todo.done;
+        }
+    }
+    removeTodo(todoId) {
+        const index = this.todoList.findIndex((todo) => todo.id === todoId);
+        if (index >= 0) {
+            this.todoList.splice(index, 1);
+        }
+    }
+
+    resetList(){
+        this.todoList.splice(0);
+    }
+}

owl_playground/static/src/todolist/todolist.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+
+    <t t-name="owl_playground.todolist" owl="1">
+        <input type="text" placeholder="Add a todo" t-on-keyup="addTodo" t-ref="inputElement"/>
+        <button class="btn btn-primary" t-on-click="resetList">Reset</button>
+        <t t-foreach="todoList" t-as="todo" t-key="todo.id">
+            <Todo id="todo.id" description="todo.description" done="todo.done" toggleState.bind="toggleState" removeTodo.bind="removeTodo" />
+        </t>
+    </t>
+
+</templates>

owl_playground/static/src/utils.js

@@ -0,0 +1,9 @@
+/** @odoo-module **/
+
+
+import { onMounted, useRef } from "@odoo/owl";
+
+export function useAutofocus(Input) {
+    const inputRef = useRef(Input);
+    onMounted(() => inputRef.el.focus());
+}

owl_playground/views/templates.xml

@@ -1,6 +1,6 @@
 <odoo>
     <data>
-          <template id="owl_playground.playground" name="Awesome T-Shirt thank you">
+        <template id="owl_playground.playground" name="Awesome T-Shirt thank you">
             <html>
                 <head>
                     <t t-call-assets="owl_playground.assets_playground"/>
@@ -9,6 +9,6 @@
                 <body>
                 </body>
             </html>
-          </template>
+        </template>
     </data>
 </odoo>