How to get Odoo records in Javascript without RPC?

Question

I'm developing and extension for POS in Odoo 14.

I've created a new screen where I will be able to see all records from pos.order that are in a draft state.

In my javascript file I've created the screen and tried to get the records through my custom function.

JS File:

odoo.define('opens_pos_order.UnpaidOrdersScreen', function(require) { 
   'use strict'; 
    const PosComponent = require('point_of_sale.PosComponent'); 
    const ProductScreen = require('point_of_sale.ProductScreen'); 
    const {useListener} = require('web.custom_hooks'); 
    const Registries = require('point_of_sale.Registries'); 
    const models = require('point_of_sale.models'); 
    var rpc = require('web.rpc')

    class UnpaidOrdersScreen extends PosComponent { 
        constructor() { 
            super (... arguments);
            
            var orders = rpc.query({
                model: 'pos.session',
                method: 'get_unpaid_orders',
                args: [this.env.pos.pos_session.id]
            }).then(function (data) {
                return data;
            });

            var res = orders.then(data => console.log(data));
            
            console.log(res)

            this.orders = res;
       };

        back() { 
               this.trigger('close-temp-screen'); 
        }

    } 
    UnpaidOrdersScreen.template = 'UnpaidOrdersScreen'; 
    Registries.Component.add(UnpaidOrdersScreen); 
    return UnpaidOrdersScreen; 
});

Problem here is that with RPC, the return is a Promise object, so my variable this.orders can't get my expected result.

My function in python is this:

from odoo import api, fields, models, _
from odoo.exceptions import AccessError, UserError, ValidationError
import json

class PosSession(models.Model):
    _inherit = 'pos.session'


    @api.model
    def get_unpaid_orders(self, session_id=None):
        res = []
        orders = self.env['pos.order'].search([('session_id', '=', session_id), ('state', '=', 'draft')])
        for order in orders:
            o = {
                'id': order.id,
                'name': order.name,
                'price': order.amount_total,
            }
            res.append(o)
        return json.dumps(res)

And the idea is that I could see all the records in this xml file:

<?xml version="1.0" encoding="UTF-8"?> 
<templates id="template" xml:space="preserve"> 
    <t t-name="UnpaidOrdersScreen" owl="1"> 
        <div class="clientlist-screen screen"> 
            <div class="screen-content"> 
                <div class="top-content"> 
                    <div class="button back" t-on-click="back"> 
                        Back 
                    </div> 
                </div> 
                <section class="full-content"> 
                    <div class="client-window"> 
                        <section class="subwindow list">
                            <div class="subwindow-container">
                                <div class="subwindow-container-fix scrollable-y"> 
                                    <table class="client-list"> 
                                        <thead> 
                                            <tr> 
                                                <th> Name </th> 
                                                <th> Orders </th> 
                                            </tr> 
                                        </thead> 
                                        <tbody>
                                            <t t-foreach="categories" t-as="categ" t-key="categ.id"> 
                                                <tr> 
                                                    <td> <t t-esc="categ.name"/> </td> 
                                                </tr> 
                                            </t>
                                        </tbody> 
                                    </table> 
                                </div> 
                            </div> 
                        </section> 
                    </div> 
                </section> 
            </div> 
        </div> 
    </t> 
</templates>

Is there any other way to get the records from a table in Javascript? Or how could I return a non Promise object from my function?

Answer 1

For Odoo14, you can extend point_of_sale.OrderWidget to get orders for example:

odoo.define('custom_module_name.OrderWidget', function(require) {
    'use strict';

    const OrderWidget = require('point_of_sale.OrderWidget');
    const Registries = require('point_of_sale.Registries');
    
const PosCuOrderWidget = OrderWidget => class extends OrderWidget {
     _updateSummary() {
            
            var order_lines = this.env.pos.get_order_list();
           
           // Do some operations
        }
    };
    Registries.Component.extend(OrderWidget, PosCuOrderWidget);
    return OrderWidget;

});

Answer 2

I think if you call it asynchronously in a separate method, it might work. Please try this.

class UnpaidOrdersScreen extends PosComponent { 
    constructor() { 
        super (... arguments);
        
        var orders = this.get_orders()
        var res = orders.then(data => console.log(data));
        
        console.log(res)

        this.orders = res;
   };

    back() { 
           this.trigger('close-temp-screen'); 
    }

    async get_orders(){
        var result = await this.rpc({
            model: 'pos.session',
            method: 'get_unpaid_orders',
            args: [this.env.pos.pos_session.id]
        })
        return result
    }

} 

Answer 3

This solves your problem using models.js. Here's an example:

In models.js:

...
},
example: function(){
    this.unpaid_orders = this.get_unpaid_orders_example();
    this.unpaid_orders.then(result => this.unpaid_orders = result);
},
get_unpaid_orders_example: function() {
    self = this;
    return rpc.query({
        model: 'pos.session',
        method: 'get_unpaid_orders',
        args: [self.env.pos.pos_session.id],
    }).then(function(result){
        return result;
    });
},
...