[IMP] estate: add additional checks while marking property as sold or cancel, add missing eod

Author: jcha-odoo

awesome_owl/__manifest__.py

@@ -36,6 +36,7 @@
             ('include', 'web._assets_core'),
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'awesome_owl/static/src/**/*',
+            'awesome_owl/static/css/**'
         ],
     },
     'license': 'AGPL-3'

awesome_owl/static/css/style.css

@@ -0,0 +1,10 @@
+.fade-in {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.fade-in.show {
+  opacity: 1;
+  transform: translateY(0);
+}

awesome_owl/static/src/components/card/card.js

@@ -1,16 +1,21 @@
-import { Component, markup } from '@odoo/owl'
+import { Component, markup, useState } from '@odoo/owl'
 
 export class Card extends Component {
     static template = "awesome_owl.Card"
     static components = {}
     static props = {
-        title: { type: String, default: "Card Title" },
-        body: { type: String, default: "Card Body" },
+        title: { type: String, default: "Card Title", required: true },
+        slots: { type: Object },
         visit: { type: String, default: "Visit us", optional: true }
     }
 
     setup() {
         super.setup();
+        this.state = useState({ isOpen: true })
         this.markup_visit = markup(this.props.visit)
     }
+
+    toggleCard() {
+        this.state.isOpen = !this.state.isOpen;
+    }
 }

awesome_owl/static/src/components/card/card.xml

@@ -1,15 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <template xml:space="preserve">
     <t t-name="awesome_owl.Card">
-        <div class="card d-inline-block m-2" style="width: 18rem;">
+        <div class="card d-inline-block m-2" style="width: 28rem;">
             <div class="card-body">
-                <h5 class="card-title"><t t-esc="props.title"/></h5>
-                <p class="card-text">
-                <t t-esc="props.body"/>
-                </p>
-                <t t-if="props.visit">
-                    <t t-out="markup_visit"></t>
-                </t>
+                <div class="d-flex mb-3" style="justify-content: space-between">
+                    <h5 class="card-title"><t t-esc="props.title"/></h5>
+                    <button class="btn btn-sm text-bg-light" t-on-click="toggleCard">
+                        <t t-if="state.isOpen">
+                            Close
+                        </t>
+                        <t t-else="">
+                            Open
+                        </t>
+                    </button>
+                </div>
+                <div t-if="state.isOpen">
+                    <p class="card-text">
+                        <t t-slot="default"/>
+                    </p>
+                    <t t-if="props.visit">
+                        <t t-out="markup_visit"></t>
+                    </t>
+                </div>
             </div>
         </div>
     </t>

awesome_owl/static/src/components/counter/counter.xml

@@ -5,7 +5,7 @@
             <div class="card-body">
                 <h2 class="card-title">Counter</h2>
                 <div class="d-flex" style="align-items: center; justify-content: space-between">
-                    <button class="btn btn-success" t-on-click="increment" style="background-color: 'blue'">Increment</button>
+                    <button class="btn text-bg-success" t-on-click="increment" style="background-color: 'blue'">Increment</button>
                     <p class="card-text">Value: <t t-esc="state.value"/></p>
                 </div>
             </div>

awesome_owl/static/src/components/playground/playground.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, useState, useEffect } from "@odoo/owl";
+import { Component, useEffect, useState } from "@odoo/owl";
 import { Counter } from "../counter/counter";
 import { Card } from "../card/card";
 import { TodoList } from "../todo/todolist/todolist";
@@ -11,10 +11,11 @@ export class Playground extends Component {
     static props = {}
 
     setup() {
-        this.state = useState({ counters: 2, sum: 0 });
+        super.setup();
+        this.state = useState({ counters: 2, sum: 2 });
 
         useEffect(() => {
-            this.state.sum = this.state.counters;
+            this.state.sum += this.state.counters;
         },()=>[this.state.counters]);
 
         this.cards = [
@@ -53,6 +54,5 @@ export class Playground extends Component {
 
     incrementSum() {
         this.state.sum++;
-        
     }
 }

awesome_owl/static/src/components/playground/playground.xml

@@ -20,7 +20,17 @@
         <div class="mt-4">
             <h2>Card Components</h2>
             <t t-foreach="cards" t-as="card" t-key="card_index">
-                <Card t-props="card_value"/>
+                <Card t-props="{
+                    title: card.title,
+                    visit: card.visit
+                }">
+                    <t t-if="card_last or card_first">
+                        <Counter onChange.bind="incrementSum"/>
+                    </t>
+                    <t t-else="">
+                        <t t-esc="card.body"/>
+                    </t>
+                </Card>
             </t>
         </div>
 

awesome_owl/static/src/components/todo/todoitem/todoitem.js

@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl"
+import { Component, onMounted, useRef } from "@odoo/owl"
 import { Card } from "../../card/card"
 
 export class TodoItem extends Component {
@@ -7,16 +7,30 @@ export class TodoItem extends Component {
     static props = {
         id: { type: Number },
         description: { type: String },
-        isCompleted: { type: Boolean, default: false }
+        isCompleted: { type: Boolean, default: false },
+        markTodocallback: { type: Function },
+        deleteTodocallback: { type: Function }
     }
 
     setup() {
-        this.state = useState({
-            todo: {
-                id: String(this.props.id),
-                description: this.props.description,
-                isCompleted: this.props.isCompleted
-            }
-        })
+        super.setup();
+        this.todo_ref = useRef("todo_ref");
+        this.todo_togglestatus = useRef("todo_togglestatus");
+
+        onMounted(() => {
+            requestAnimationFrame(() => {
+                this.todo_ref.el.classList.add("show");
+            });
+
+            this.todo_togglestatus.el.addEventListener("change", () => {
+                this.props.markTodocallback(this.props.id);
+                
+            })
+        });
+
+    }
+    
+    deleteTodo() {
+        this.props.deleteTodocallback(this.props.id)
     }
 }

awesome_owl/static/src/components/todo/todoitem/todoitem.xml

@@ -1,13 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.todoitem">
-        <div class="card d-inline-block m-2" style="width: 18rem;" t-att-class="{'text-muted': !state.todo.isCompleted, 'text-decoration-line-through': !state.todo.isCompleted, 'bg-body-tertiary': !state.todo.isCompleted, 'text-body-tertiary': !state.todo.isCompleted}">
+        <div t-ref="todo_ref" class="card d-inline-block m-2 fade-in" style="width: 18rem;" t-att-class="{'text-muted': props.isCompleted, 'text-decoration-line-through': props.isCompleted, 'bg-body-tertiary': props.isCompleted, 'text-body-tertiary': props.isCompleted}">
             <div class="card-body">
                 <h3 class="card-title">
-                    <t t-esc="state.todo.id"/>
+                    <div class="d-flex gap-3" style="justify-content: space-between">
+                        <div class="d-flex gap-3">
+                        <input t-att-id="'todo-' + props.id" style="accent-color: grey; width: 18px" t-ref="todo_togglestatus" type="checkbox" />
+                        <label
+                            t-att-for="'todo-' + props.id"
+                            class="cursor-pointer"
+                        >
+                        <t t-esc="props.id"/>
+                        </label>
+                        </div>
+                        <button
+                            class="btn btn-sm text-bg-danger"
+                            style="text-decoration: none"
+                            t-on-click="deleteTodo"
+                        >
+                            <i class="fa fa-trash fa-lg"></i>
+                        </button>
+                    </div>
                 </h3>
                 <p class="card-text">
-                    <t t-esc="state.todo.description"/>
+                    <t t-esc="props.description"/>
                 </p>
             </div>
         </div>

awesome_owl/static/src/components/todo/todolist/todolist.js

@@ -1,21 +1,45 @@
-import { Component, useState } from "@odoo/owl"
+import { Component, useState, useRef } from "@odoo/owl"
 import { TodoItem } from "../todoitem/todoitem";
+import { useAutofocus } from '../../../utils.js';
+
 
 export class TodoList extends Component {
     static template = "awesome_owl.todolist"
     static components = { TodoItem }
     static props = {}
 
     setup() {
-        this.todos = useState([
-            { id: 1, description: "Buy milk", isCompleted: false },
-            { id: 2, description: "Walk the dog", isCompleted: true },
-            { id: 3, description: "Write blog post", isCompleted: false },
-            { id: 4, description: "Call mom", isCompleted: true },
-            { id: 5, description: "Clean the house", isCompleted: false },
-            { id: 6, description: "Pay bills", isCompleted: false },
-            { id: 7, description: "Read a book", isCompleted: true },
-            { id: 8, description: "Exercise", isCompleted: false }
-        ]);
+        super.setup();
+        this.todos = useState([]);
+        this.todoInputRef = useRef("todoInputRef");
+        this.markTodo = this.markTodo.bind(this);
+
+        useAutofocus("todoInputRef");
+
+    }
+
+    addTodo(ev) {
+        if(ev.keyCode == 13) {
+            let max_id = Math.max(...this.todos.map(todo => todo.id), 0);
+            let new_description = this.todoInputRef.el.value;
+            this.todos.push({ id: max_id + 1, description: new_description, isCompleted: false});
+            this.todoInputRef.el.value = "";
+        }
+    }
+
+    markTodo(todo_id) {
+        this.todos.forEach((todo, index) => {
+            if (todo.id == todo_id) {
+                todo.isCompleted = !todo.isCompleted;
+            }
+        });
+    }
+
+    deleteTodo(todo_id) {
+        this.todos.forEach((todo, index) => {
+            if (todo.id == todo_id) {
+                this.todos.splice(index,1)
+            }
+        });
     }
 }