Untitled-1.js

// js - model
// xml - view

// điịnh nghiĩa 1 caái model js
// taạo js
// gõ

odoo.define('omi_core.chat_client_action', function (require) {
    "use strict";

    var Widget = require("web.Widget");

    // định nghĩa chat status bar duùng extent
    var ChatStatusBar = Widget.extend({
        template: 'omi_core.chat_status_bar',

        // môột widget bao gồm caác phương thưức sao

        init: function (parent, options) { // truyêền tuùy ý biêến theo nhu cầu sử duụng
            // odoo hay truyêền parent , option, dâata
            // arguments là thâm sô đăặc biêệt trong js bao gồm tất cả tham số truyêền vaào
            // daạng maảng: vd : coonsolog(arguments) => [parent , option, data]
            this._super.apply(this, arguments); // super giôống python, cuũng có thể gán res=super
            this.parent = parent;
            this.options = options;

            this.status = options.status;

            // thươờng duùng để taạo đối tượng mà dưx liêệu đươợc lấy từ thằng cha tạo ra nó và tham số tùy ý miình chủ đọng truyền vào

        },

        willStart: function () {
            // được goọi trươớc khi caái  ChatStatusBar naày được render ra html
            // thuươờng duùng để lấy dữ liệu từ daâdatabase trươớc khi hiển thị bằng ajax
            var def = this._fetchData(this.model); // lâấy dữ liệu
            return $.when(this._super.apply(this, arguments), def); // lấy xong thì mới tra về\
            // $.when đaảm bảo cho việc gửi requesst lên server thành công thì mới trả về
            // js là ngôn ngữ bất đồng bộ:
            -
            khi guưửi reesquest seerver nó sẽ ko chờ server trả về kết quả rồi mới chạy dòng lệnh tiếp theo
                -
                khaái niệm vể promise và defered( * )
        },


        render: function() {
            // lấy template từ this.tempalte và rend ra htlm
        }


        start: function() {
            // chạy sau render
            this._super.apply(this, arguments);
            // thao tác với giao diện thôi
            // khi mà có giao diện thì mình làm gì với nó
        },


        destroy: function() {
            // hamf huy
        }

    }

    return {
        ChatStatusBar: ChatStatusBar,
        ChatStatusBar2: ChatStatusBar2,
    }

});

// Tạo xong file js thì làm gì?
// để nó vào assets backend hoặc frontend

`
<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <template id="omi_assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/omi_core/static/src/js/chat_client_action.js"/>
            </xpath>
        </template>

    </data>
</odoo>
`


// TEMPALTE VIẾT THẾ NÀO?

<t t-name="omi_core.chat_status_bar">
    <div class="o_form_view">
        <div class="o_form_statusbar">
            <div class="o_statusbar_status">
                <button data-value="new" t-attf-class="btn btn-sm o_arrow_button js_channel_status btn-default {{widget.options.status == 'new' ? 'btn-primary disabled' : ''}}">
                    New
                </button>
            </div>
        </div>
    </div>
</t>

// ĐẶT t-name
// template sẽ tự động nhận 1 biến tên là widget = ChatStatusBar
// nếu mà mình muốn hiển thị option trên view thì sao
//      <t t-esc="widget.options"/>
//      <t t-esc="widget.status"/>


// cách gọi 1 widget
var option = {
    status: 'quotation';
}

// hiển thị trên giao diện
var bar = new ChatStatusBar(this,option);
bar.appendTo($('.omi_floating_screen'));