reneco-hierarchized-picker 0.4.2-beta.1 → 0.4.2-beta.10
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/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js +171 -21
- package/dist/collection/components/hierarchized-picker/hierarchized-picker.js +37 -9
- package/dist/collection/components/treejs/index.js +14 -9
- package/dist/collection/features/tree/tree-utils.js +32 -23
- package/dist/custom-elements/index.js +171 -21
- package/dist/esm/reneco-hierarchized-picker_2.entry.js +171 -21
- package/dist/esm-es5/reneco-hierarchized-picker_2.entry.js +1 -1
- package/dist/reneco-hierarchized-picker/p-1a128ef2.system.entry.js +3 -0
- package/dist/reneco-hierarchized-picker/p-73168a50.system.js +1 -1
- package/dist/reneco-hierarchized-picker/p-c5e8c2f8.entry.js +1 -0
- package/dist/reneco-hierarchized-picker/reneco-hierarchized-picker.esm.js +1 -1
- package/dist/types/components/hierarchized-picker/hierarchized-picker.d.ts +3 -1
- package/dist/types/features/tree/tree-utils.d.ts +0 -1
- package/package.json +1 -1
- package/dist/reneco-hierarchized-picker/p-308071e7.entry.js +0 -1
- package/dist/reneco-hierarchized-picker/p-91521a4a.system.entry.js +0 -3
|
@@ -44,6 +44,96 @@ var vanillaContextMenu = createCommonjsModule(function (module, exports) {
|
|
|
44
44
|
|
|
45
45
|
const VanillaContextMenu = /*@__PURE__*/getDefaultExportFromCjs(vanillaContextMenu);
|
|
46
46
|
|
|
47
|
+
let curDraggingItem = null;
|
|
48
|
+
let lastDraggedOverNodeId = null;
|
|
49
|
+
let lastDraggedOverTimeForAscendent = new Date().getTime();
|
|
50
|
+
let lastDraggedOverTimeForLevel = new Date().getTime();
|
|
51
|
+
const acceptableDelayBetweenSimilarActions = 300;
|
|
52
|
+
/**
|
|
53
|
+
* Handles the drag start event.
|
|
54
|
+
*/
|
|
55
|
+
function onItemDragStart(el, e) {
|
|
56
|
+
curDraggingItem = el;
|
|
57
|
+
el.classList.add('dragging');
|
|
58
|
+
e.stopPropagation();
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Handles the drag end event.
|
|
62
|
+
*/
|
|
63
|
+
function onItemDragEnd(el, e) {
|
|
64
|
+
el.classList.remove('dragging');
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
clearDragOverStyles(el.parentElement);
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Handles the drag over event.
|
|
70
|
+
*/
|
|
71
|
+
function onItemDragOver(el, e) {
|
|
72
|
+
const now = new Date().getTime();
|
|
73
|
+
if (now - lastDraggedOverTimeForAscendent < 50 && el.dataset.nodeId !== lastDraggedOverNodeId) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
lastDraggedOverTimeForAscendent = now;
|
|
77
|
+
if (el.dataset.nodeId === lastDraggedOverNodeId) {
|
|
78
|
+
if (now - lastDraggedOverTimeForLevel < acceptableDelayBetweenSimilarActions) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
lastDraggedOverTimeForLevel = now;
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
lastDraggedOverNodeId = el.dataset.nodeId;
|
|
85
|
+
}
|
|
86
|
+
clearDragOverStyles(el);
|
|
87
|
+
if (el === curDraggingItem) {
|
|
88
|
+
el.classList.remove('dragover');
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
const pos = getDragOverPosition(el, e);
|
|
92
|
+
el.classList.add(`dragover-${pos}`);
|
|
93
|
+
el.classList.add('dragover');
|
|
94
|
+
e.stopPropagation();
|
|
95
|
+
e.preventDefault();
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Handles the drag leave event.
|
|
99
|
+
*/
|
|
100
|
+
function onItemDragLeave(el, e) {
|
|
101
|
+
clearDragOverStyles(el);
|
|
102
|
+
el.classList.remove('dragover');
|
|
103
|
+
e.stopPropagation();
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Handles the drop event.
|
|
107
|
+
*/
|
|
108
|
+
function onItemDrop(el, e, dropCallback) {
|
|
109
|
+
clearDragOverStyles(el);
|
|
110
|
+
el.classList.remove('dragover');
|
|
111
|
+
e.stopPropagation();
|
|
112
|
+
if (curDraggingItem) {
|
|
113
|
+
const pos = getDragOverPosition(el, e);
|
|
114
|
+
dropCallback(curDraggingItem, el, pos);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
/**
|
|
118
|
+
* Determines the drop position based on the mouse event.
|
|
119
|
+
*/
|
|
120
|
+
function getDragOverPosition(el, e) {
|
|
121
|
+
const h = el.offsetHeight;
|
|
122
|
+
const before = h / 4;
|
|
123
|
+
const after = h - before;
|
|
124
|
+
const y = e.offsetY;
|
|
125
|
+
return y <= before ? 'before' : y >= after ? 'after' : 'over';
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Clears the drag-over styles from the element.
|
|
129
|
+
*/
|
|
130
|
+
function clearDragOverStyles(el) {
|
|
131
|
+
if (!el)
|
|
132
|
+
return;
|
|
133
|
+
const prevClasses = Array.from(el.classList).filter(name => name.startsWith('dragover-'));
|
|
134
|
+
prevClasses.forEach(name => el.classList.remove(name));
|
|
135
|
+
}
|
|
136
|
+
|
|
47
137
|
function deepClone(obj) {
|
|
48
138
|
return JSON.parse(JSON.stringify(obj));
|
|
49
139
|
}
|
|
@@ -191,15 +281,16 @@ Tree.prototype.buildTree = function (nodes, depth) {
|
|
|
191
281
|
};
|
|
192
282
|
Tree.prototype.bindEvent = function (ele) {
|
|
193
283
|
var _a;
|
|
194
|
-
const that = this;
|
|
195
284
|
if (!this.options.parentApi.isDisabled) {
|
|
196
285
|
const contextMenu = this.options.parentApi.theOptions.contextMenu;
|
|
197
286
|
if ((_a = contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.items) === null || _a === void 0 ? void 0 : _a.length) {
|
|
198
287
|
new VanillaContextMenu(Object.assign(Object.assign({}, contextMenu), { scope: ele, menuItems: contextMenu.items.map(item => {
|
|
199
288
|
return typeof item === 'string'
|
|
200
289
|
? item
|
|
201
|
-
: Object.assign(Object.assign({}, item), { callback: e => {
|
|
202
|
-
|
|
290
|
+
: Object.assign(Object.assign({}, item), { callback: async (e) => {
|
|
291
|
+
const pickerValue = await this.options.parentApi.getValue();
|
|
292
|
+
const treeJsNodeInfo = Object.assign({}, this.options.parentApi.loadedTreeJs.nodesById[pickerValue.nodeid]);
|
|
293
|
+
let targetOutput = Object.assign(Object.assign({}, treeJsNodeInfo), { hasChildren: treeJsNodeInfo.children.length > 0 });
|
|
203
294
|
delete targetOutput.children;
|
|
204
295
|
this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
|
|
205
296
|
} });
|
|
@@ -240,7 +331,7 @@ Tree.prototype.bindEvent = function (ele) {
|
|
|
240
331
|
if (this.options.parentApi.theOptions.origin == 'classification') {
|
|
241
332
|
// WS Call
|
|
242
333
|
this.options.rawDataManager
|
|
243
|
-
.getFromClassification(this.options.parentApi.
|
|
334
|
+
.getFromClassification(this.options.parentApi.getContextualApiURL(), this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId })))
|
|
244
335
|
.then(data => {
|
|
245
336
|
this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
|
|
246
337
|
});
|
|
@@ -575,19 +666,21 @@ Tree.prototype.createLiEle = function (node, closed) {
|
|
|
575
666
|
if (this.options.parentApi.theOptions.dragAndDropEnabled) {
|
|
576
667
|
li.setAttribute('draggable', 'true');
|
|
577
668
|
li.addEventListener('dragstart', e => {
|
|
578
|
-
|
|
669
|
+
onItemDragStart(li, e);
|
|
579
670
|
});
|
|
580
671
|
li.addEventListener('dragend', e => {
|
|
581
|
-
|
|
672
|
+
onItemDragEnd(li, e);
|
|
582
673
|
});
|
|
583
674
|
li.addEventListener('dragover', e => {
|
|
584
|
-
|
|
675
|
+
onItemDragOver(li, e);
|
|
585
676
|
});
|
|
586
677
|
li.addEventListener('dragleave', e => {
|
|
587
|
-
|
|
678
|
+
onItemDragLeave(li, e);
|
|
588
679
|
});
|
|
589
680
|
li.addEventListener('drop', e => {
|
|
590
|
-
|
|
681
|
+
onItemDrop(li, e, (dragEl, dropEl, position) => {
|
|
682
|
+
this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
|
|
683
|
+
});
|
|
591
684
|
});
|
|
592
685
|
}
|
|
593
686
|
return li;
|
|
@@ -18291,6 +18384,27 @@ function getPropertyFromNode(node, property, logerror = true) {
|
|
|
18291
18384
|
function findNodeById(tree, nodeId) {
|
|
18292
18385
|
return tree.nodesById[nodeId] || null;
|
|
18293
18386
|
}
|
|
18387
|
+
// TODO Deprecated ?
|
|
18388
|
+
// export function getNodesFromSearch(data: any, searched: string): any[] {
|
|
18389
|
+
// let toret: any[] = [];
|
|
18390
|
+
// if (data && data.children) {
|
|
18391
|
+
// data.children.forEach(value => {
|
|
18392
|
+
// if (value && value.valueTranslated) {
|
|
18393
|
+
// if (value.valueTranslated.toLowerCase().includes(searched.toLowerCase())) {
|
|
18394
|
+
// toret.push({
|
|
18395
|
+
// id: value.key,
|
|
18396
|
+
// fullpath: value.fullpath,
|
|
18397
|
+
// fullpathTranslated: value.fullpathTranslated,
|
|
18398
|
+
// text: value.valueTranslated,
|
|
18399
|
+
// deprecated: value.deprecated,
|
|
18400
|
+
// });
|
|
18401
|
+
// }
|
|
18402
|
+
// toret = toret.concat(getNodesFromSearch(value, searched));
|
|
18403
|
+
// }
|
|
18404
|
+
// });
|
|
18405
|
+
// }
|
|
18406
|
+
// return toret;
|
|
18407
|
+
// }
|
|
18294
18408
|
/**
|
|
18295
18409
|
* Fills the tree with nodes based on the provided object.
|
|
18296
18410
|
*/
|
|
@@ -18298,7 +18412,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
|
|
|
18298
18412
|
const searchResultPresentsUnMatched = options.searchResultPresentsUnMatched;
|
|
18299
18413
|
if (myObject && myObject.length) {
|
|
18300
18414
|
myObject.forEach(value => {
|
|
18301
|
-
var _a, _b, _c;
|
|
18415
|
+
var _a, _b, _c, _d, _e;
|
|
18302
18416
|
let keyPropFromNode = null;
|
|
18303
18417
|
let valueTranslatedPropFromNode = null;
|
|
18304
18418
|
let fullpathPropFromNode = null;
|
|
@@ -18306,8 +18420,15 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
|
|
|
18306
18420
|
if (options.origin == "classification") {
|
|
18307
18421
|
keyPropFromNode = getPropertyFromNode(value, 'ID');
|
|
18308
18422
|
valueTranslatedPropFromNode = (_a = getPropertyFromNode(value, 'Translations')[options.language]) === null || _a === void 0 ? void 0 : _a.translated_name;
|
|
18309
|
-
|
|
18310
|
-
|
|
18423
|
+
// TODO Not sure this is correct in the latest versions, may require review during second half of 2025
|
|
18424
|
+
if (searched) {
|
|
18425
|
+
fullpathPropFromNode = (_b = getPropertyFromNode(value, 'Properties')) === null || _b === void 0 ? void 0 : _b.System_FullPath;
|
|
18426
|
+
fullpathTranslatedPropFromNode = (_c = getPropertyFromNode(value, 'fullpathTranslated')[options.language]) === null || _c === void 0 ? void 0 : _c.translated_fullpath;
|
|
18427
|
+
}
|
|
18428
|
+
else {
|
|
18429
|
+
fullpathPropFromNode = (_d = getPropertyFromNode(value, 'Properties')) === null || _d === void 0 ? void 0 : _d.System_Fullpath;
|
|
18430
|
+
fullpathTranslatedPropFromNode = (_e = getPropertyFromNode(value, 'Translations')[options.language]) === null || _e === void 0 ? void 0 : _e.translated_fullpath;
|
|
18431
|
+
}
|
|
18311
18432
|
}
|
|
18312
18433
|
else {
|
|
18313
18434
|
keyPropFromNode = getPropertyFromNode(value, 'key');
|
|
@@ -18319,6 +18440,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
|
|
|
18319
18440
|
const deprecated = getPropertyFromNode(value, 'deprecated', false);
|
|
18320
18441
|
const objToPush = {
|
|
18321
18442
|
id: keyPropFromNode,
|
|
18443
|
+
nodeId: keyPropFromNode,
|
|
18322
18444
|
depth,
|
|
18323
18445
|
text: valueTranslatedPropFromNode,
|
|
18324
18446
|
fullpath: fullpathPropFromNode,
|
|
@@ -18676,7 +18798,6 @@ const HierarchizedPickerComponent = class {
|
|
|
18676
18798
|
this.setOptions(newoptions);
|
|
18677
18799
|
}
|
|
18678
18800
|
setNewFilter(newfilter) {
|
|
18679
|
-
console.log("newfilter is ", newfilter);
|
|
18680
18801
|
this.filterTree(newfilter);
|
|
18681
18802
|
}
|
|
18682
18803
|
optionsChange(newValue, oldValue) {
|
|
@@ -18802,6 +18923,7 @@ const HierarchizedPickerComponent = class {
|
|
|
18802
18923
|
}
|
|
18803
18924
|
let autoAssignReach = true;
|
|
18804
18925
|
let defaultFromFullpaths = undefined;
|
|
18926
|
+
// TODO Revoir cette partie ? utilite ? (case == null ?)
|
|
18805
18927
|
if (!this.isDisabled)
|
|
18806
18928
|
this.isDisabled = false;
|
|
18807
18929
|
if (this.optionsManager.getOptions().readonly !== undefined)
|
|
@@ -18819,7 +18941,7 @@ const HierarchizedPickerComponent = class {
|
|
|
18819
18941
|
if (!this.optionsManager.getOptions().displayRootNode)
|
|
18820
18942
|
this.optionsManager.getOptions().displayRootNode = false;
|
|
18821
18943
|
if (!this.optionsManager.getOptions().dragAndDropEnabled)
|
|
18822
|
-
this.optionsManager.getOptions().dragAndDropEnabled =
|
|
18944
|
+
this.optionsManager.getOptions().dragAndDropEnabled = false;
|
|
18823
18945
|
if (!this.optionsManager.getOptions().defaultValueIsFullpath)
|
|
18824
18946
|
this.optionsManager.getOptions().defaultValueIsFullpath = false;
|
|
18825
18947
|
if (!this.optionsManager.getOptions() && this.optionsManager.getOptions().errorsInInput !== false)
|
|
@@ -18982,6 +19104,37 @@ const HierarchizedPickerComponent = class {
|
|
|
18982
19104
|
return this.optionsManager.getOptions().url.substring(0, this.optionsManager.getOptions().url.lastIndexOf('/')) + '/GetTreeFromSearch';
|
|
18983
19105
|
}
|
|
18984
19106
|
}
|
|
19107
|
+
getContextualApiURL() {
|
|
19108
|
+
if (this.optionsManager.getOptions().options.Reach) {
|
|
19109
|
+
const url = new URL(this.optionsManager.getOptions().url);
|
|
19110
|
+
const pathSegments = url.pathname.split('/');
|
|
19111
|
+
const dynamicType = pathSegments[pathSegments.length - 2];
|
|
19112
|
+
const newPathname = `/api/v1/classification/reach/${dynamicType}/${this.optionsManager.getOptions().options.Reach}`;
|
|
19113
|
+
return `${url.origin}${newPathname}`;
|
|
19114
|
+
}
|
|
19115
|
+
else
|
|
19116
|
+
return this.optionsManager.getOptions().url;
|
|
19117
|
+
}
|
|
19118
|
+
getContextualApiParams(options = null) {
|
|
19119
|
+
if (!options)
|
|
19120
|
+
options = this.optionsManager.getOptions().options;
|
|
19121
|
+
if (options.Reach) {
|
|
19122
|
+
let optionsToReturn = Object.assign({}, options);
|
|
19123
|
+
delete optionsToReturn.Reach;
|
|
19124
|
+
if ("startNode" in optionsToReturn) {
|
|
19125
|
+
optionsToReturn.startingnode = optionsToReturn.startNode;
|
|
19126
|
+
delete optionsToReturn.startNode;
|
|
19127
|
+
}
|
|
19128
|
+
else if ("StartNodeID" in optionsToReturn) {
|
|
19129
|
+
optionsToReturn.startingnode = optionsToReturn.StartNodeID;
|
|
19130
|
+
delete optionsToReturn.StartNodeID;
|
|
19131
|
+
}
|
|
19132
|
+
console.log("JE RETOURNE", optionsToReturn);
|
|
19133
|
+
return optionsToReturn;
|
|
19134
|
+
}
|
|
19135
|
+
else
|
|
19136
|
+
return options;
|
|
19137
|
+
}
|
|
18985
19138
|
translateDataForTree(dataToLoad, searchID = null, searched = null) {
|
|
18986
19139
|
if (searched && searched != "") {
|
|
18987
19140
|
this.loadSearchDataInCurrentTree(searchID, searched);
|
|
@@ -19016,9 +19169,6 @@ const HierarchizedPickerComponent = class {
|
|
|
19016
19169
|
if (this.theOptions.origin == 'classification') {
|
|
19017
19170
|
// WS Call
|
|
19018
19171
|
this.rawDataManager.getFromClassification(this.getApiSearchURL(), {
|
|
19019
|
-
StartNodeID: this.theOptions.options.startNode,
|
|
19020
|
-
lng: this.theOptions.options.lng,
|
|
19021
|
-
deprecated: this.theOptions.options.IsDeprecated,
|
|
19022
19172
|
searchedValue: searched
|
|
19023
19173
|
})
|
|
19024
19174
|
.then((data) => {
|
|
@@ -19156,11 +19306,12 @@ const HierarchizedPickerComponent = class {
|
|
|
19156
19306
|
onItemContextMenuItemClick(e) {
|
|
19157
19307
|
this.itemContextMenuItemClick.emit(e);
|
|
19158
19308
|
}
|
|
19159
|
-
|
|
19309
|
+
setNodeAsSelected(id, treeToUpdate, userClick) {
|
|
19160
19310
|
// TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
|
|
19161
19311
|
if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
|
|
19162
|
-
(this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
|
|
19312
|
+
(this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
|
|
19163
19313
|
return;
|
|
19314
|
+
}
|
|
19164
19315
|
if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
|
|
19165
19316
|
return;
|
|
19166
19317
|
this.ignoreOptionsChanges = true;
|
|
@@ -19313,7 +19464,6 @@ const HierarchizedPickerComponent = class {
|
|
|
19313
19464
|
}
|
|
19314
19465
|
// Search a value in the tree and triggers a search when necessary
|
|
19315
19466
|
search(searched) {
|
|
19316
|
-
console.log("search ", searched);
|
|
19317
19467
|
let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
|
|
19318
19468
|
if (this.optionsManager.getOptions().mode == 'input' && searchinput) {
|
|
19319
19469
|
searchinput.classList.remove('fieldError');
|
|
@@ -19368,7 +19518,7 @@ const HierarchizedPickerComponent = class {
|
|
|
19368
19518
|
loadDataForTree(init, loader) {
|
|
19369
19519
|
if (this.optionsManager.getOptions().source == 'webservice') {
|
|
19370
19520
|
if (this.optionsManager.getOptions().origin == 'classification') {
|
|
19371
|
-
this.rawDataManager.getFromClassification(this.
|
|
19521
|
+
this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), loader).then((data) => {
|
|
19372
19522
|
this.rawData = data;
|
|
19373
19523
|
if (init) {
|
|
19374
19524
|
this.formatDefaultValue();
|
|
@@ -142,7 +142,6 @@ export class HierarchizedPickerComponent {
|
|
|
142
142
|
this.setOptions(newoptions);
|
|
143
143
|
}
|
|
144
144
|
setNewFilter(newfilter) {
|
|
145
|
-
console.log("newfilter is ", newfilter);
|
|
146
145
|
this.filterTree(newfilter);
|
|
147
146
|
}
|
|
148
147
|
optionsChange(newValue, oldValue) {
|
|
@@ -263,6 +262,7 @@ export class HierarchizedPickerComponent {
|
|
|
263
262
|
}
|
|
264
263
|
let autoAssignReach = true;
|
|
265
264
|
let defaultFromFullpaths = undefined;
|
|
265
|
+
// TODO Revoir cette partie ? utilite ? (case == null ?)
|
|
266
266
|
if (!this.isDisabled)
|
|
267
267
|
this.isDisabled = false;
|
|
268
268
|
if (this.optionsManager.getOptions().readonly !== undefined)
|
|
@@ -280,7 +280,7 @@ export class HierarchizedPickerComponent {
|
|
|
280
280
|
if (!this.optionsManager.getOptions().displayRootNode)
|
|
281
281
|
this.optionsManager.getOptions().displayRootNode = false;
|
|
282
282
|
if (!this.optionsManager.getOptions().dragAndDropEnabled)
|
|
283
|
-
this.optionsManager.getOptions().dragAndDropEnabled =
|
|
283
|
+
this.optionsManager.getOptions().dragAndDropEnabled = false;
|
|
284
284
|
if (!this.optionsManager.getOptions().defaultValueIsFullpath)
|
|
285
285
|
this.optionsManager.getOptions().defaultValueIsFullpath = false;
|
|
286
286
|
if (!this.optionsManager.getOptions() && this.optionsManager.getOptions().errorsInInput !== false)
|
|
@@ -446,6 +446,37 @@ export class HierarchizedPickerComponent {
|
|
|
446
446
|
return this.optionsManager.getOptions().url.substring(0, this.optionsManager.getOptions().url.lastIndexOf('/')) + '/GetTreeFromSearch';
|
|
447
447
|
}
|
|
448
448
|
}
|
|
449
|
+
getContextualApiURL() {
|
|
450
|
+
if (this.optionsManager.getOptions().options.Reach) {
|
|
451
|
+
const url = new URL(this.optionsManager.getOptions().url);
|
|
452
|
+
const pathSegments = url.pathname.split('/');
|
|
453
|
+
const dynamicType = pathSegments[pathSegments.length - 2];
|
|
454
|
+
const newPathname = `/api/v1/classification/reach/${dynamicType}/${this.optionsManager.getOptions().options.Reach}`;
|
|
455
|
+
return `${url.origin}${newPathname}`;
|
|
456
|
+
}
|
|
457
|
+
else
|
|
458
|
+
return this.optionsManager.getOptions().url;
|
|
459
|
+
}
|
|
460
|
+
getContextualApiParams(options = null) {
|
|
461
|
+
if (!options)
|
|
462
|
+
options = this.optionsManager.getOptions().options;
|
|
463
|
+
if (options.Reach) {
|
|
464
|
+
let optionsToReturn = Object.assign({}, options);
|
|
465
|
+
delete optionsToReturn.Reach;
|
|
466
|
+
if ("startNode" in optionsToReturn) {
|
|
467
|
+
optionsToReturn.startingnode = optionsToReturn.startNode;
|
|
468
|
+
delete optionsToReturn.startNode;
|
|
469
|
+
}
|
|
470
|
+
else if ("StartNodeID" in optionsToReturn) {
|
|
471
|
+
optionsToReturn.startingnode = optionsToReturn.StartNodeID;
|
|
472
|
+
delete optionsToReturn.StartNodeID;
|
|
473
|
+
}
|
|
474
|
+
console.log("JE RETOURNE", optionsToReturn);
|
|
475
|
+
return optionsToReturn;
|
|
476
|
+
}
|
|
477
|
+
else
|
|
478
|
+
return options;
|
|
479
|
+
}
|
|
449
480
|
translateDataForTree(dataToLoad, searchID = null, searched = null) {
|
|
450
481
|
if (searched && searched != "") {
|
|
451
482
|
this.loadSearchDataInCurrentTree(searchID, searched);
|
|
@@ -480,9 +511,6 @@ export class HierarchizedPickerComponent {
|
|
|
480
511
|
if (this.theOptions.origin == 'classification') {
|
|
481
512
|
// WS Call
|
|
482
513
|
this.rawDataManager.getFromClassification(this.getApiSearchURL(), {
|
|
483
|
-
StartNodeID: this.theOptions.options.startNode,
|
|
484
|
-
lng: this.theOptions.options.lng,
|
|
485
|
-
deprecated: this.theOptions.options.IsDeprecated,
|
|
486
514
|
searchedValue: searched
|
|
487
515
|
})
|
|
488
516
|
.then((data) => {
|
|
@@ -620,11 +648,12 @@ export class HierarchizedPickerComponent {
|
|
|
620
648
|
onItemContextMenuItemClick(e) {
|
|
621
649
|
this.itemContextMenuItemClick.emit(e);
|
|
622
650
|
}
|
|
623
|
-
|
|
651
|
+
setNodeAsSelected(id, treeToUpdate, userClick) {
|
|
624
652
|
// TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
|
|
625
653
|
if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
|
|
626
|
-
(this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1))
|
|
654
|
+
(this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
|
|
627
655
|
return;
|
|
656
|
+
}
|
|
628
657
|
if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
|
|
629
658
|
return;
|
|
630
659
|
this.ignoreOptionsChanges = true;
|
|
@@ -777,7 +806,6 @@ export class HierarchizedPickerComponent {
|
|
|
777
806
|
}
|
|
778
807
|
// Search a value in the tree and triggers a search when necessary
|
|
779
808
|
search(searched) {
|
|
780
|
-
console.log("search ", searched);
|
|
781
809
|
let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
|
|
782
810
|
if (this.optionsManager.getOptions().mode == 'input' && searchinput) {
|
|
783
811
|
searchinput.classList.remove('fieldError');
|
|
@@ -832,7 +860,7 @@ export class HierarchizedPickerComponent {
|
|
|
832
860
|
loadDataForTree(init, loader) {
|
|
833
861
|
if (this.optionsManager.getOptions().source == 'webservice') {
|
|
834
862
|
if (this.optionsManager.getOptions().origin == 'classification') {
|
|
835
|
-
this.rawDataManager.getFromClassification(this.
|
|
863
|
+
this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), loader).then((data) => {
|
|
836
864
|
this.rawData = data;
|
|
837
865
|
if (init) {
|
|
838
866
|
this.formatDefaultValue();
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import VanillaContextMenu from 'vanilla-context-menu';
|
|
2
|
+
import { onItemDragStart, onItemDragEnd, onItemDragOver, onItemDragLeave, onItemDrop } from '../../features/tree/drag-drop';
|
|
2
3
|
function deepClone(obj) {
|
|
3
4
|
return JSON.parse(JSON.stringify(obj));
|
|
4
5
|
}
|
|
@@ -146,7 +147,7 @@ Tree.prototype.buildTree = function (nodes, depth) {
|
|
|
146
147
|
};
|
|
147
148
|
Tree.prototype.bindEvent = function (ele) {
|
|
148
149
|
var _a;
|
|
149
|
-
const that = this;
|
|
150
|
+
// const that = this;
|
|
150
151
|
// let parentOptions:any = {};
|
|
151
152
|
// try{
|
|
152
153
|
// parentOptions = JSON.parse(this.options.parentApi.theOptions);
|
|
@@ -164,8 +165,10 @@ Tree.prototype.bindEvent = function (ele) {
|
|
|
164
165
|
new VanillaContextMenu(Object.assign(Object.assign({}, contextMenu), { scope: ele, menuItems: contextMenu.items.map(item => {
|
|
165
166
|
return typeof item === 'string'
|
|
166
167
|
? item
|
|
167
|
-
: Object.assign(Object.assign({}, item), { callback: e => {
|
|
168
|
-
|
|
168
|
+
: Object.assign(Object.assign({}, item), { callback: async (e) => {
|
|
169
|
+
const pickerValue = await this.options.parentApi.getValue();
|
|
170
|
+
const treeJsNodeInfo = Object.assign({}, this.options.parentApi.loadedTreeJs.nodesById[pickerValue.nodeid]);
|
|
171
|
+
let targetOutput = Object.assign(Object.assign({}, treeJsNodeInfo), { hasChildren: treeJsNodeInfo.children.length > 0 });
|
|
169
172
|
delete targetOutput.children;
|
|
170
173
|
this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
|
|
171
174
|
} });
|
|
@@ -206,7 +209,7 @@ Tree.prototype.bindEvent = function (ele) {
|
|
|
206
209
|
if (this.options.parentApi.theOptions.origin == 'classification') {
|
|
207
210
|
// WS Call
|
|
208
211
|
this.options.rawDataManager
|
|
209
|
-
.getFromClassification(this.options.parentApi.
|
|
212
|
+
.getFromClassification(this.options.parentApi.getContextualApiURL(), this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId })))
|
|
210
213
|
.then(data => {
|
|
211
214
|
this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
|
|
212
215
|
});
|
|
@@ -542,19 +545,21 @@ Tree.prototype.createLiEle = function (node, closed) {
|
|
|
542
545
|
if (this.options.parentApi.theOptions.dragAndDropEnabled) {
|
|
543
546
|
li.setAttribute('draggable', 'true');
|
|
544
547
|
li.addEventListener('dragstart', e => {
|
|
545
|
-
|
|
548
|
+
onItemDragStart(li, e);
|
|
546
549
|
});
|
|
547
550
|
li.addEventListener('dragend', e => {
|
|
548
|
-
|
|
551
|
+
onItemDragEnd(li, e);
|
|
549
552
|
});
|
|
550
553
|
li.addEventListener('dragover', e => {
|
|
551
|
-
|
|
554
|
+
onItemDragOver(li, e);
|
|
552
555
|
});
|
|
553
556
|
li.addEventListener('dragleave', e => {
|
|
554
|
-
|
|
557
|
+
onItemDragLeave(li, e);
|
|
555
558
|
});
|
|
556
559
|
li.addEventListener('drop', e => {
|
|
557
|
-
|
|
560
|
+
onItemDrop(li, e, (dragEl, dropEl, position) => {
|
|
561
|
+
this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
|
|
562
|
+
});
|
|
558
563
|
});
|
|
559
564
|
}
|
|
560
565
|
return li;
|
|
@@ -23,26 +23,27 @@ export function getPropertyFromNode(node, property, logerror = true) {
|
|
|
23
23
|
export function findNodeById(tree, nodeId) {
|
|
24
24
|
return tree.nodesById[nodeId] || null;
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
26
|
+
// TODO Deprecated ?
|
|
27
|
+
// export function getNodesFromSearch(data: any, searched: string): any[] {
|
|
28
|
+
// let toret: any[] = [];
|
|
29
|
+
// if (data && data.children) {
|
|
30
|
+
// data.children.forEach(value => {
|
|
31
|
+
// if (value && value.valueTranslated) {
|
|
32
|
+
// if (value.valueTranslated.toLowerCase().includes(searched.toLowerCase())) {
|
|
33
|
+
// toret.push({
|
|
34
|
+
// id: value.key,
|
|
35
|
+
// fullpath: value.fullpath,
|
|
36
|
+
// fullpathTranslated: value.fullpathTranslated,
|
|
37
|
+
// text: value.valueTranslated,
|
|
38
|
+
// deprecated: value.deprecated,
|
|
39
|
+
// });
|
|
40
|
+
// }
|
|
41
|
+
// toret = toret.concat(getNodesFromSearch(value, searched));
|
|
42
|
+
// }
|
|
43
|
+
// });
|
|
44
|
+
// }
|
|
45
|
+
// return toret;
|
|
46
|
+
// }
|
|
46
47
|
/**
|
|
47
48
|
* Fills the tree with nodes based on the provided object.
|
|
48
49
|
*/
|
|
@@ -50,7 +51,7 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
|
|
|
50
51
|
const searchResultPresentsUnMatched = options.searchResultPresentsUnMatched;
|
|
51
52
|
if (myObject && myObject.length) {
|
|
52
53
|
myObject.forEach(value => {
|
|
53
|
-
var _a, _b, _c;
|
|
54
|
+
var _a, _b, _c, _d, _e;
|
|
54
55
|
let keyPropFromNode = null;
|
|
55
56
|
let valueTranslatedPropFromNode = null;
|
|
56
57
|
let fullpathPropFromNode = null;
|
|
@@ -58,8 +59,15 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
|
|
|
58
59
|
if (options.origin == "classification") {
|
|
59
60
|
keyPropFromNode = getPropertyFromNode(value, 'ID');
|
|
60
61
|
valueTranslatedPropFromNode = (_a = getPropertyFromNode(value, 'Translations')[options.language]) === null || _a === void 0 ? void 0 : _a.translated_name;
|
|
61
|
-
|
|
62
|
-
|
|
62
|
+
// TODO Not sure this is correct in the latest versions, may require review during second half of 2025
|
|
63
|
+
if (searched) {
|
|
64
|
+
fullpathPropFromNode = (_b = getPropertyFromNode(value, 'Properties')) === null || _b === void 0 ? void 0 : _b.System_FullPath;
|
|
65
|
+
fullpathTranslatedPropFromNode = (_c = getPropertyFromNode(value, 'fullpathTranslated')[options.language]) === null || _c === void 0 ? void 0 : _c.translated_fullpath;
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
fullpathPropFromNode = (_d = getPropertyFromNode(value, 'Properties')) === null || _d === void 0 ? void 0 : _d.System_Fullpath;
|
|
69
|
+
fullpathTranslatedPropFromNode = (_e = getPropertyFromNode(value, 'Translations')[options.language]) === null || _e === void 0 ? void 0 : _e.translated_fullpath;
|
|
70
|
+
}
|
|
63
71
|
}
|
|
64
72
|
else {
|
|
65
73
|
keyPropFromNode = getPropertyFromNode(value, 'key');
|
|
@@ -71,6 +79,7 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
|
|
|
71
79
|
const deprecated = getPropertyFromNode(value, 'deprecated', false);
|
|
72
80
|
const objToPush = {
|
|
73
81
|
id: keyPropFromNode,
|
|
82
|
+
nodeId: keyPropFromNode,
|
|
74
83
|
depth,
|
|
75
84
|
text: valueTranslatedPropFromNode,
|
|
76
85
|
fullpath: fullpathPropFromNode,
|