[IMP] awesome_owl: added markup(),props validation, sum counter

added markup() to render html element from component.
added props validation in content in Card component.
added calculateSum function to calculate sum of counter.

Author: danal-odoo

awesome_owl/static/src/card/card.js

@@ -4,6 +4,9 @@ export class Card extends Component {
     static template = "awesome_owl.card";
     static props = {
         title: String,
-        content: String
+        content: {
+            type: String,
+            validate: c => c == "World"
+        },
     };
 }

awesome_owl/static/src/card/card.xml

@@ -1,15 +1,37 @@
 <?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; border: 2px solid black; border-radius: 12px; margin-top: 10px; text-align:center;">
-            <div class="card-body">
-                <h4 class="card-title" style="background-color: blue; margin:0; border-radius:14px;">
-                    <t t-esc="props.title"/>
+        <div class="card d-inline-block m-2"
+             style="width: 18rem; 
+                    border: 2px solid #444; 
+                    border-radius: 16px; 
+                    margin-top: 10px; 
+                    text-align:center;">
+
+            <div class="card-body" style="padding: 16px;">
+
+                <h4 class="card-title"
+                    style="background-color: #4c6ef5;
+                        color: white;
+                        margin: 0; 
+                        padding: 10px 0;
+                        border-radius: 12px;
+                        font-size: 1.2rem;">
+                    <t t-out="props.title"/>
                 </h4>
-                <p class="card-text" style="background-color: green; margin:10px; border-radius:14px;">
-                    <t t-esc="props.content"/>
+
+                <p class="card-text"
+                   style="background-color: #69db7c;
+                        color: black;
+                        margin: 12px 0 0 0;
+                        padding: 10px;
+                        border-radius: 12px;
+                        font-size: 1rem;">
+                    <t t-out="props.content"/>
                 </p>
+
             </div>
         </div>
+
     </t>
 </templates>

awesome_owl/static/src/counter/counter.js

@@ -2,17 +2,25 @@ 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: 0 });
     }
 
     increment() {
         this.state.value++;
+        if (this.props.onChange){
+            this.props.onChange(1);
+        }
     }
 
     decrement() {
         this.state.value--;
+        if (this.props.onChange) {
+            this.props.onChange(-1);
+        }
     }
 
     reset() {

awesome_owl/static/src/counter/counter.xml

@@ -2,10 +2,23 @@
 <templates xml:space="preserve">
     <t t-name="awesome_owl.counter">
         <div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px; margin-top:10px;">
-            <p>Counter: <t t-esc="state.value"/></p>
-            <button class="btn btn-primary" t-on-click="increment">Increment</button>
-            <button class="btn btn-primary" t-on-click="decrement">Decrement</button>
-            <button t-if="state.value != 0" class="btn btn-primary" t-on-click="reset">Reset</button>
+            <p style="font-weight: bold;">Counter: <t t-esc="state.value"/></p>
+            <button 
+                t-on-click="increment"
+                style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
+                Increment
+            </button>
+            <button 
+                t-on-click="decrement"
+                style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px; margin-right: 5px">
+                Decrement
+            </button>
+            <button 
+                t-if="state.value != 0"
+                t-on-click="reset"
+                style="background:#6a5acd; color:white; border:none; padding:8px 18px; border-radius:8px;">
+                Reset
+            </button>
         </div>
     </t>
 </templates>

awesome_owl/static/src/playground.js

@@ -1,24 +1,24 @@
-import { Component, useState } from "@odoo/owl";
+import { markup, Component, useState } from "@odoo/owl";
 import { Counter } from "./counter/counter";
 import { Card } from "./card/card";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-    static components = {Counter,Card};
+    static components = { Counter, Card };
 
     setup() {
-        this.state = useState({ value: 0 });
+        this.state = useState({ 
+            content: markup('<h1>Welcome to your custom dashboard editor!</h1>'),
+            sum: 0
+        });
     }
 
-    increment() {
-        this.state.value++;
-    }
-
-    decrement() {
-        this.state.value--;
-    }
-
-    reset(){
-        this.state.value = 0;
+    calculateSum(newValue) {
+        if (newValue > 0){
+            this.state.sum++;
+        }
+        if (newValue < 0){
+            this.state.sum--;
+        }
     }
 }

awesome_owl/static/src/playground.xml

@@ -1,14 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.playground">
-        <div style="border: 2px solid black; border-radius: 12px; width: fit-content; padding: 10px; margin-top:5px;">
-            <p>Counter: <t t-esc="state.value"/></p>
-            <button class="btn btn-primary" t-on-click="increment">Increment</button>
-            <button class="btn btn-primary" t-on-click="decrement">Decrement</button>
-            <button t-if="state.value != 0" class="btn btn-primary" t-on-click="reset">Reset</button>
-        </div>
-        <Counter/>
-        <Card title="'Hello'" content="'word'"/>
-        <Card title="'New'" content="'Card'"/>
+        <Counter onChange.bind="calculateSum"/>
+        <Counter onChange.bind="calculateSum"/>
+        <Card title="'Hello'" content="'World'"/>
+        <t t-out="this.state.content"/>
+        <p style="font-weight: bold;">Sum: <t t-esc="state.sum"/></p>
     </t>
 </templates>