Solusi Tutorial Owl Components - Card and Sum

 solusi untuk tutorial https://www.odoo.com/documentation/18.0/developer/tutorials/discover_js_framework/01_owl_components.html bagian card dan sum

Card:

Buat file baru card/card.js

import { Component, useState } from "@odoo/owl";

export class Card extends Component {

    static template = "awesome_owl.Card";

    static props = {

        title: String,

        slots: {

            type: Object,

            shape: {

                default: true

            },

        }

    };

    setup() {

        this.state = useState({ isOpen: true });

    }

    toggleContent() {

        this.state.isOpen = !this.state.isOpen;

    }

}

buat file baru card/card.xml

<?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;">

            <div class="card-body">

                <h5 class="card-title">

                    <t t-out="props.title"/>

                    <button class="btn" t-on-click="toggleContent">Toggle</button>

                </h5>

                <p class="card-text" t-if="state.isOpen">

                    <t t-slot="default"/>

                </p>

            </div>

        </div>

    </t>

</templates>

file counter/counter.js

/** @odoo-module **/

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();

        }

    }

}

file playground.js

/** @odoo-module **/

import { Component, markup, 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 };

    setup() {

        this.str1 = "<div class='text-primary'>some content</div>";

        this.str2 = markup("<div class='text-primary'>some content</div>");

        this.sum = useState({ value:0 });

    }

    incrementSum(){

        this.sum.value++;

    }

}

file playground.xml

<?xml version="1.0" encoding="UTF-8" ?>

<templates xml:space="preserve">

    <t t-name="awesome_owl.playground">

        <div class="p-3">

            <p>Hello World</p>

            <Counter onChange.bind="incrementSum" />

            <Counter onChange.bind="incrementSum" />

            <div>The sum is: <t t-esc="sum.value"/></div>

        </div>

        <div>

            <Card title="'card 1'">

                <t t-out="str1"/>

            </Card>

            <Card title="'card 2'">

                <t t-out="str2"/>

                <Counter />

            </Card>

        </div>        

    </t>

</templates>