@gisce/ooui 2.39.0 → 2.40.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/Image.d.ts +7 -0
- package/dist/Image.d.ts.map +1 -1
- package/dist/Kanban.d.ts +80 -0
- package/dist/Kanban.d.ts.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/ooui.es.js +1184 -1008
- package/dist/ooui.es.js.map +1 -1
- package/package.json +1 -1
- package/src/Image.ts +34 -0
- package/src/Kanban.ts +285 -0
- package/src/index.ts +2 -0
- package/src/spec/Image.spec.ts +28 -0
- package/src/spec/Kanban.spec.ts +364 -0
package/package.json
CHANGED
package/src/Image.ts
CHANGED
|
@@ -4,9 +4,43 @@ import Field from "./Field";
|
|
|
4
4
|
* Image base64 field
|
|
5
5
|
*/
|
|
6
6
|
class Image extends Field {
|
|
7
|
+
_width?: number;
|
|
8
|
+
get width(): number | undefined {
|
|
9
|
+
return this._width;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
set width(value: number | undefined) {
|
|
13
|
+
this._width = value;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
_height?: number;
|
|
17
|
+
get height(): number | undefined {
|
|
18
|
+
return this._height;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
set height(value: number | undefined) {
|
|
22
|
+
this._height = value;
|
|
23
|
+
}
|
|
24
|
+
|
|
7
25
|
get showControls(): boolean {
|
|
8
26
|
return this.parsedWidgetProps?.showControls ?? true;
|
|
9
27
|
}
|
|
28
|
+
|
|
29
|
+
constructor(props: any) {
|
|
30
|
+
super(props);
|
|
31
|
+
|
|
32
|
+
if (props) {
|
|
33
|
+
if (props.width) {
|
|
34
|
+
const parsedWidth = parseInt(props.width);
|
|
35
|
+
this._width = isNaN(parsedWidth) ? undefined : parsedWidth;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if (props.height) {
|
|
39
|
+
const parsedHeight = parseInt(props.height);
|
|
40
|
+
this._height = isNaN(parsedHeight) ? undefined : parsedHeight;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
10
44
|
}
|
|
11
45
|
|
|
12
46
|
export default Image;
|
package/src/Kanban.ts
ADDED
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import WidgetFactory from "./WidgetFactory";
|
|
2
|
+
import Widget from "./Widget";
|
|
3
|
+
import Button from "./Button";
|
|
4
|
+
import { replaceEntities } from "./helpers/attributeParser";
|
|
5
|
+
import { parseBoolAttribute, ParsedNode } from "./helpers/nodeParser";
|
|
6
|
+
import * as txml from "txml";
|
|
7
|
+
import { parseContext } from "./helpers/contextParser";
|
|
8
|
+
|
|
9
|
+
export type KanbanField = Widget & {
|
|
10
|
+
sum?: string; // Aggregation label (e.g., "Total hours")
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export type KanbanButton = Button & {
|
|
14
|
+
states?: string; // Comma-separated states where button should show
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
class Kanban {
|
|
18
|
+
/**
|
|
19
|
+
* Object containing fields specification of the kanban.
|
|
20
|
+
*/
|
|
21
|
+
_fields: any;
|
|
22
|
+
get fields() {
|
|
23
|
+
return this._fields;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Array of field widgets to display in cards
|
|
28
|
+
*/
|
|
29
|
+
_card_fields: KanbanField[] = [];
|
|
30
|
+
get card_fields(): KanbanField[] {
|
|
31
|
+
return this._card_fields;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Array of button widgets to display in cards
|
|
36
|
+
*/
|
|
37
|
+
_buttons: KanbanButton[] = [];
|
|
38
|
+
get buttons(): KanbanButton[] {
|
|
39
|
+
return this._buttons;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
_string: string | null = null;
|
|
43
|
+
get string(): string | null {
|
|
44
|
+
return this._string;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Widget type
|
|
49
|
+
*/
|
|
50
|
+
_type: string = "kanban";
|
|
51
|
+
get type(): string {
|
|
52
|
+
return this._type;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Field that defines the columns (e.g., "state")
|
|
57
|
+
*/
|
|
58
|
+
_column_field: string | null = null;
|
|
59
|
+
get column_field(): string | null {
|
|
60
|
+
return this._column_field;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Enable dragging cards between columns
|
|
65
|
+
*/
|
|
66
|
+
_drag: boolean = true;
|
|
67
|
+
get drag(): boolean {
|
|
68
|
+
return this._drag;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Enable sorting cards within columns
|
|
73
|
+
*/
|
|
74
|
+
_sort: boolean = true;
|
|
75
|
+
get sort(): boolean {
|
|
76
|
+
return this._sort;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Enable setting max cards per column (WIP limits)
|
|
81
|
+
*/
|
|
82
|
+
_set_max_cards: boolean = false;
|
|
83
|
+
get set_max_cards(): boolean {
|
|
84
|
+
return this._set_max_cards;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Color expression value (e.g., "blue:state=='draft';green:state=='done'")
|
|
89
|
+
*/
|
|
90
|
+
_colors: string | null = null;
|
|
91
|
+
get colors(): string | null {
|
|
92
|
+
return this._colors;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Context for each field in the kanban
|
|
97
|
+
*/
|
|
98
|
+
_contextForFields: Record<string, any> = {};
|
|
99
|
+
get contextForFields(): Record<string, any> {
|
|
100
|
+
return this._contextForFields;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
set contextForFields(value: Record<string, any>) {
|
|
104
|
+
this._contextForFields = value;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Map of fields that have sum aggregation
|
|
109
|
+
* Key: field name, Value: sum label (e.g., "Total hours")
|
|
110
|
+
*/
|
|
111
|
+
_aggregations: Record<string, string> = {};
|
|
112
|
+
get aggregations(): Record<string, string> {
|
|
113
|
+
return this._aggregations;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
constructor(fields: Object) {
|
|
117
|
+
this._fields = fields;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
parse(xml: string) {
|
|
121
|
+
const view = txml
|
|
122
|
+
.parse(xml)
|
|
123
|
+
.filter((el: ParsedNode) => el.tagName === "kanban")[0];
|
|
124
|
+
|
|
125
|
+
// Parse kanban attributes
|
|
126
|
+
this._string = view.attributes.string || null;
|
|
127
|
+
if (this._string) {
|
|
128
|
+
this._string = replaceEntities(this._string);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
this._column_field = view.attributes.column_field || null;
|
|
132
|
+
if (!this._column_field) {
|
|
133
|
+
throw new Error("Kanban view must have a column_field attribute");
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
this._drag =
|
|
137
|
+
view.attributes.drag !== undefined
|
|
138
|
+
? parseBoolAttribute(view.attributes.drag)
|
|
139
|
+
: true;
|
|
140
|
+
this._sort =
|
|
141
|
+
view.attributes.sort !== undefined
|
|
142
|
+
? parseBoolAttribute(view.attributes.sort)
|
|
143
|
+
: true;
|
|
144
|
+
this._set_max_cards =
|
|
145
|
+
view.attributes.set_max_cards !== undefined
|
|
146
|
+
? parseBoolAttribute(view.attributes.set_max_cards)
|
|
147
|
+
: false;
|
|
148
|
+
|
|
149
|
+
this._colors = view.attributes.colors || null;
|
|
150
|
+
if (this._colors) {
|
|
151
|
+
this._colors = replaceEntities(this._colors);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
const widgetFactory = new WidgetFactory();
|
|
155
|
+
|
|
156
|
+
// Parse children (fields and buttons)
|
|
157
|
+
view.children.forEach((element: ParsedNode) => {
|
|
158
|
+
const { tagName, attributes } = element;
|
|
159
|
+
|
|
160
|
+
if (tagName === "field") {
|
|
161
|
+
this._parseField(element, attributes, widgetFactory);
|
|
162
|
+
} else if (tagName === "button") {
|
|
163
|
+
this._parseButton(element, attributes);
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
private _parseField(
|
|
169
|
+
_element: ParsedNode,
|
|
170
|
+
attributes: any,
|
|
171
|
+
widgetFactory: WidgetFactory,
|
|
172
|
+
) {
|
|
173
|
+
const { name, widget, sum } = attributes;
|
|
174
|
+
|
|
175
|
+
if (!name) {
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
if (!this._fields[name]) {
|
|
180
|
+
throw new Error(`Field ${name} doesn't exist in fields definition`);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const fieldDef = this._fields[name];
|
|
184
|
+
let widgetType = fieldDef.type;
|
|
185
|
+
|
|
186
|
+
// Handle domain override
|
|
187
|
+
if (
|
|
188
|
+
((Array.isArray(fieldDef?.domain) && fieldDef?.domain.length === 0) ||
|
|
189
|
+
fieldDef?.domain === false) &&
|
|
190
|
+
attributes.domain &&
|
|
191
|
+
attributes.domain.length > 0
|
|
192
|
+
) {
|
|
193
|
+
delete fieldDef.domain;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// Parse context
|
|
197
|
+
const widgetContext = parseContext({
|
|
198
|
+
context: attributes.context || fieldDef.context,
|
|
199
|
+
values: {},
|
|
200
|
+
fields: this._fields,
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
const mergedAttrs = {
|
|
204
|
+
...fieldDef,
|
|
205
|
+
...attributes,
|
|
206
|
+
fieldsWidgetType: fieldDef?.type,
|
|
207
|
+
context: widgetContext,
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
this._contextForFields[name] = widgetContext;
|
|
211
|
+
|
|
212
|
+
// Override widget type if specified
|
|
213
|
+
if (widget) {
|
|
214
|
+
widgetType = widget;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// Create the widget
|
|
218
|
+
if (!mergedAttrs.invisible) {
|
|
219
|
+
const fieldWidget = widgetFactory.createWidget(
|
|
220
|
+
widgetType,
|
|
221
|
+
mergedAttrs,
|
|
222
|
+
) as KanbanField;
|
|
223
|
+
|
|
224
|
+
// Handle aggregation (sum)
|
|
225
|
+
if (sum) {
|
|
226
|
+
fieldWidget.sum = replaceEntities(sum);
|
|
227
|
+
this._aggregations[name] = replaceEntities(sum);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
this._card_fields.push(fieldWidget);
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
private _parseButton(_element: ParsedNode, attributes: any) {
|
|
235
|
+
const { name, type, string, states } = attributes;
|
|
236
|
+
|
|
237
|
+
if (!name) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
const buttonProps = {
|
|
242
|
+
...attributes,
|
|
243
|
+
name,
|
|
244
|
+
buttonType: type || "object",
|
|
245
|
+
string: string || "",
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
const button = new Button(buttonProps) as KanbanButton;
|
|
249
|
+
|
|
250
|
+
// Parse states attribute (e.g., "draft,open")
|
|
251
|
+
if (states) {
|
|
252
|
+
button.states = states;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
this._buttons.push(button);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Find the widgets matching with param id
|
|
260
|
+
* @param {string} id id to find
|
|
261
|
+
*/
|
|
262
|
+
findById(id: string): Widget | null {
|
|
263
|
+
const foundField = this._card_fields.find((item) => {
|
|
264
|
+
if (item.findById) {
|
|
265
|
+
return item.findById(id);
|
|
266
|
+
}
|
|
267
|
+
return false;
|
|
268
|
+
});
|
|
269
|
+
|
|
270
|
+
if (foundField) {
|
|
271
|
+
return foundField;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const foundButton = this._buttons.find((item) => {
|
|
275
|
+
if (item.findById) {
|
|
276
|
+
return item.findById(id);
|
|
277
|
+
}
|
|
278
|
+
return false;
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
return foundButton || null;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
export default Kanban;
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import Avatar from "./Avatar";
|
|
2
2
|
import Form from "./Form";
|
|
3
3
|
import Tree from "./Tree";
|
|
4
|
+
import Kanban from "./Kanban";
|
|
4
5
|
import Char from "./Char";
|
|
5
6
|
import Container from "./Container";
|
|
6
7
|
import ContainerWidget from "./ContainerWidget";
|
|
@@ -86,6 +87,7 @@ export {
|
|
|
86
87
|
Widget,
|
|
87
88
|
Form,
|
|
88
89
|
Tree,
|
|
90
|
+
Kanban,
|
|
89
91
|
NewLine,
|
|
90
92
|
Boolean,
|
|
91
93
|
One2many,
|
package/src/spec/Image.spec.ts
CHANGED
|
@@ -16,4 +16,32 @@ describe("Image", () => {
|
|
|
16
16
|
const image = new Image(props);
|
|
17
17
|
expect(image.showControls).toBe(false);
|
|
18
18
|
});
|
|
19
|
+
it("should parse width property", () => {
|
|
20
|
+
const props = { width: "100" };
|
|
21
|
+
const image = new Image(props);
|
|
22
|
+
expect(image.width).toBe(100);
|
|
23
|
+
});
|
|
24
|
+
it("should parse height property", () => {
|
|
25
|
+
const props = { height: "50" };
|
|
26
|
+
const image = new Image(props);
|
|
27
|
+
expect(image.height).toBe(50);
|
|
28
|
+
});
|
|
29
|
+
it("should parse both width and height properties", () => {
|
|
30
|
+
const props = { width: "200", height: "150" };
|
|
31
|
+
const image = new Image(props);
|
|
32
|
+
expect(image.width).toBe(200);
|
|
33
|
+
expect(image.height).toBe(150);
|
|
34
|
+
});
|
|
35
|
+
it("should handle undefined width and height", () => {
|
|
36
|
+
const props = {};
|
|
37
|
+
const image = new Image(props);
|
|
38
|
+
expect(image.width).toBeUndefined();
|
|
39
|
+
expect(image.height).toBeUndefined();
|
|
40
|
+
});
|
|
41
|
+
it("should handle invalid width and height", () => {
|
|
42
|
+
const props = { width: "invalid", height: "invalid" };
|
|
43
|
+
const image = new Image(props);
|
|
44
|
+
expect(image.width).toBeUndefined();
|
|
45
|
+
expect(image.height).toBeUndefined();
|
|
46
|
+
});
|
|
19
47
|
});
|