[IMP] awesome_owl: add some facy UI for completed todos

Use dynamic attributes to have a fancy UI for completed todos.

Author: clom-odoo

awesome_owl/static/src/todolist/todoitem.js

@@ -2,7 +2,8 @@
 import { Component, useState, xml } from "@odoo/owl";
 
 export class TodoItem extends Component {
-    static template = xml`<div><t t-esc="todo.value.id"/><br/><t t-esc="todo.value.description"/></div>`;
+    static template = xml`<div t-att-class="{'text-muted': this.todo.value.isCompleted, 'text-decoration-line-through': this.todo.value.isCompleted}">
+        <t t-esc="todo.value.id"/>. <t t-esc="todo.value.description"/></div>`;
     static props = {
         todo : {
             id: { type: Number },

awesome_owl/static/src/todolist/todolist.js

@@ -7,7 +7,11 @@ export class TodoList extends Component {
     static components = { TodoItem };
 
     setup() {
-        this.todos = useState([{ id: 3, description: "buy milk", isCompleted: false }]);
+        this.todos = useState([
+            { id: 3, description: "buy milk", isCompleted: false },
+            { id: 4, description: "Go to work", isCompleted: true },
+
+        ]);
     }
 
 }