[IMP] owl_playground : ch1 tasks 4-6

Author: hazemayman1

awesome_owl/static/src/counter/counter.js

@@ -5,10 +5,14 @@ export class Counter extends Component {
     static template = "awesome_owl.counter";
 
     setup() {
-        this.state = useState({ counter: 0 });
+        this.state = useState({ counter: 1 });
     }
 
     incrementCounter() {
         this.state.counter++;
+        this.props.callback();
     }
+
+    static props = { callback: Function };
+
 }

awesome_owl/static/src/playground.js

@@ -1,12 +1,18 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, markup } 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 };
+    no_markup_value = "<div class='text-primary'>Testing no markup</div>";
+    markup_value = markup("<div class='text-primary'>Testing markup</div>");
     setup(){
+        this.state = useState({ sum: 2 });
+        this.incrementSum = this.incrementSum.bind(this);
+    }
 
+    incrementSum(){
+        this.state.sum += 1;
     }
 }

awesome_owl/static/src/playground.xml

@@ -3,12 +3,13 @@
     <t t-name="awesome_owl.playground">
         Hello My Friend
         <div>
-            <Counter />
-            <Counter />
+            <Counter callback.bind="incrementSum" />
+            <Counter callback.bind="incrementSum" />
         </div>
         <div>
-            <Card title="'Task 1'" content="'prepare things'"/>
-            <Card title="'Task 2'" content="'do stuff'"/>
+            <Card title="'Task 1'" content="no_markup_value"/>
+            <Card title="'Task 2'" content="markup_value"/>
         </div>
+        <p>Sum: <t t-esc="state.sum"/></p>
    </t>
 </templates>