Solusi Tutorial Owl Components - Counter

 Solusi untuk tutorial Owl Components bagian Counter

Link tutorial https://www.odoo.com/documentation/18.0/developer/tutorials/discover_js_framework/01_owl_components.html

Buat file awesome_owl/static/src/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();

        }

    }

}

Buat file awesome_owl/static/src/counter/counter.xml

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

<templates xml:space="preserve">

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

        <div class="m-2 p-2 border d-inline-block">

            <span class="me-2">Counter: <t t-esc="state.value"/></span>

            <button class="btn btn-primary" t-on-click="increment">Increment</button>

        </div>

    </t>

</templates>

Ubah file awesome_owl/static/src/playground.js

/** @odoo-module **/

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

import { Counter } from "./counter/counter";

export class Playground extends Component {

    static template = "awesome_owl.playground";

    static components = { Counter };

}

ubah file awesome_owl/static/src/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/>

            <Counter/>

        </div>

    </t>

</templates>