exercise submission

docs/playground/samples/exercise/exercise.css

@@ -1,3 +1,17 @@
+.child, .no-child {
+  min-width: min(100%, 10em);
+  min-height: 5em;
+  padding: 1em;
+}
+
+.child {
+  border: solid 1px black;
+}
+
+.no-child {
+  border: dashed 1px gray;
+}
+
 .row {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;

docs/playground/samples/exercise/exercise.js

@@ -1,8 +1,72 @@
 // In this example, we show how components can be defined and created.
 import { Component, useEnv, useSubEnv, useState, mount } from "@odoo/owl";
 
+export class Child extends Component {
+  static template = "oca_training.Child";
+  static props = { id: Number, unset: Function };
+
+  setup() {
+    this.editMode = useState({ value: true });
+    this.title = useState({ value: "Title" });
+    this.counter = useState({ value: 0 });
+    this.init();
+  }
+  init() {
+    switch (this.props.id) {
+      case 0:
+        this.title.value = "Days without nuclear breakdown";
+        this.counter.value = 23;
+        this.editMode.value = false;
+        break;
+      case 1:
+        this.title.value = "Days with no new requirements";
+        break;
+      case 2:
+        this.title.value = "Days without bugs";
+        this.editMode.value = false;
+        break;
+      case 3:
+        this.title.value = "Days where I learned new things";
+        this.counter.value = 20000000;
+        this.editMode.value = false;
+        break;
+      case 4:
+        this.title.value = "People angry with IT team";
+        this.counter.value = 1234123545;
+        this.editMode.value = false;
+        break;
+    }
+  }
+  edit() {
+    this.editMode.value = true;
+  }
+  save() {
+    this.editMode.value = false;
+  }
+  del() {
+    this.props.unset();
+  }
+  increment() {
+    this.counter.value += 1;
+  }
+}
+
 export class Parent extends Component {
-   static template = 'training_oca.Parent';
+  static template = "oca_training.Parent";
+  static components = { Child };
+  setup() {
+    this.state = useState({ children: [0, 1, 2, 3, 4] });
+  }
+
+  addChild() {
+    this.state.children.push(null);
+  }
+  initChild(id) {
+    this.state.children[id] = id;
+  }
+  unsetChild(id) {
+    this.state.children[id] = null;
+  }
 }
 
 mount(Parent, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/exercise/exercise.xml

@@ -1,5 +1,42 @@
 <templates xml:space="preserve">
-    <t t-name="training_oca.Parent">
-        <div>To Fill</div>
+    <t t-name="oca_training.Parent">
+        <h1>Exercise: Dashboard of Counters</h1>
+        <p>
+            <button t-on-click="addChild">Add children</button>
+            <span> (<t t-esc="state.children.length"/>
+ existing)</span>
+        </p>
+        <div class="row">
+            <t t-foreach="state.children" t-as="child" t-key="child_index">
+                <t t-if="child != null">
+                    <Child id="child_index" unset.bind="() => this.unsetChild(child_index)"/>
+                </t>
+                <t t-else="">
+                    <div class="col no-child">
+                        <button t-on-click="() => this.initChild(child_index)">add</button>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+    <t t-name="oca_training.Child">
+        <div class="col child">
+            <!-- buttons -->
+            <button t-if="editMode.value" t-on-click="save">Save</button>
+            <button t-else="" t-on-click="edit">Edit</button>
+            <button title="delete" t-on-click="del">X</button>
+            <!-- text -->
+            <input t-if="editMode.value" type="text" t-model="title.value" placeholder="title"/>
+            <div t-else="">
+                <t t-esc="title.value"/>
+            </div>
+            <!-- counter -->
+            <input t-if="editMode.value" type="number" t-model="counter.value" placeholder="0"/>
+            <div t-else="">
+                <t t-esc="counter.value"/><br/>
+                <button t-on-click="increment">+1</button>
+            </div>
+
+        </div>
     </t>
 </templates>