1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
odoo.define('point_of_sale.Gui', function (require) {
'use strict';
/**
* This module bridges the data classes (such as those defined in
* models.js) to the view (owl.Component) but not vice versa.
*
* The idea is to be able to perform side-effects to the user interface
* during calculation. Think of console.log during times we want to see
* the result of calculations. This is no different, except that instead
* of printing something in the console, we access a method in the user
* interface then the user interface reacts, e.g. calling `showPopup`.
*
* This however can be dangerous to the user interface as it can be possible
* that a rendered component is destroyed during the calculation. Because of
* this, we are going to limit external ui controls to those safe ones to
* use such as:
* - `showPopup`
* - `showTempScreen`
*
* IMPROVEMENT: After all, this Gui layer seems to be a good abstraction because
* there is a complete decoupling between data and view despite the data being
* able to use selected functionalities in the view layer. More formalized
* implementation is welcome.
*/
const config = {};
/**
* Call this when the user interface is ready. Provide the component
* that will be used to control the ui.
* @param {owl.component} component component having the ui methods.
*/
const configureGui = ({ component }) => {
config.component = component;
config.availableMethods = new Set([
'showPopup',
'showTempScreen',
'playSound',
'setSyncStatus',
]);
};
/**
* Import this and consume like so: `Gui.showPopup(<PopupName>, <props>)`.
* Like you would call `showPopup` in a component.
*/
const Gui = new Proxy(config, {
get(target, key) {
const { component, availableMethods } = target;
if (!component) throw new Error(`Call 'configureGui' before using Gui.`);
const isMounted = component.__owl__.status === 3 /* mounted */;
if (availableMethods.has(key) && isMounted) {
return component[key].bind(component);
}
},
});
return { configureGui, Gui };
});
|
