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('pos_restaurant.EditableTable', function(require) {
'use strict';
const { onPatched, onMounted } = owl.hooks;
const { useListener } = require('web.custom_hooks');
const PosComponent = require('point_of_sale.PosComponent');
const Registries = require('point_of_sale.Registries');
class EditableTable extends PosComponent {
constructor() {
super(...arguments);
useListener('resize-end', this._onResizeEnd);
useListener('drag-end', this._onDragEnd);
onPatched(this._setElementStyle.bind(this));
onMounted(this._setElementStyle.bind(this));
}
_setElementStyle() {
const table = this.props.table;
function unit(val) {
return `${val}px`;
}
const style = {
width: unit(table.width),
height: unit(table.height),
'line-height': unit(table.height),
top: unit(table.position_v),
left: unit(table.position_h),
'border-radius': table.shape === 'round' ? unit(1000) : '3px',
};
if (table.color) {
style.background = table.color;
}
if (table.height >= 150 && table.width >= 150) {
style['font-size'] = '32px';
}
Object.assign(this.el.style, style);
}
_onResizeEnd(event) {
const { size, loc } = event.detail;
const table = this.props.table;
table.width = size.width;
table.height = size.height;
table.position_v = loc.top;
table.position_h = loc.left;
this.trigger('save-table', this.props.table);
}
_onDragEnd(event) {
const { loc } = event.detail;
const table = this.props.table;
table.position_v = loc.top;
table.position_h = loc.left;
this.trigger('save-table', this.props.table);
}
}
EditableTable.template = 'EditableTable';
Registries.Component.add(EditableTable);
return EditableTable;
});
|
