reneco-hierarchized-picker 0.4.2-beta.1 → 0.4.2-beta.11
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 +172 -21
- package/dist/collection/components/hierarchized-picker/hierarchized-picker.js +38 -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 +172 -21
- package/dist/esm/reneco-hierarchized-picker_2.entry.js +172 -21
- package/dist/esm-es5/reneco-hierarchized-picker_2.entry.js +1 -1
- package/dist/reneco-hierarchized-picker/p-1250bf7d.entry.js +1 -0
- package/dist/reneco-hierarchized-picker/p-73168a50.system.js +1 -1
- package/dist/reneco-hierarchized-picker/p-9191110a.system.entry.js +3 -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,38 @@ 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
|
+
const { options, url } = this.optionsManager.getOptions();
|
|
19109
|
+
if (options.Reach) {
|
|
19110
|
+
// Use a base URL for relative paths
|
|
19111
|
+
const base = window.location.origin; // fallback for relative URLs
|
|
19112
|
+
const parsedUrl = new URL(url, base);
|
|
19113
|
+
const pathSegments = parsedUrl.pathname.split('/');
|
|
19114
|
+
const dynamicType = pathSegments[pathSegments.length - 2];
|
|
19115
|
+
const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
|
|
19116
|
+
return `${parsedUrl.origin}${newPathname}`;
|
|
19117
|
+
}
|
|
19118
|
+
return url;
|
|
19119
|
+
}
|
|
19120
|
+
getContextualApiParams(options = null) {
|
|
19121
|
+
if (!options)
|
|
19122
|
+
options = this.optionsManager.getOptions().options;
|
|
19123
|
+
if (options.Reach) {
|
|
19124
|
+
let optionsToReturn = Object.assign({}, options);
|
|
19125
|
+
delete optionsToReturn.Reach;
|
|
19126
|
+
if ("startNode" in optionsToReturn) {
|
|
19127
|
+
optionsToReturn.startingnode = optionsToReturn.startNode;
|
|
19128
|
+
delete optionsToReturn.startNode;
|
|
19129
|
+
}
|
|
19130
|
+
else if ("StartNodeID" in optionsToReturn) {
|
|
19131
|
+
optionsToReturn.startingnode = optionsToReturn.StartNodeID;
|
|
19132
|
+
delete optionsToReturn.StartNodeID;
|
|
19133
|
+
}
|
|
19134
|
+
return optionsToReturn;
|
|
19135
|
+
}
|
|
19136
|
+
else
|
|
19137
|
+
return options;
|
|
19138
|
+
}
|
|
18985
19139
|
translateDataForTree(dataToLoad, searchID = null, searched = null) {
|
|
18986
19140
|
if (searched && searched != "") {
|
|
18987
19141
|
this.loadSearchDataInCurrentTree(searchID, searched);
|
|
@@ -19016,9 +19170,6 @@ const HierarchizedPickerComponent = class {
|
|
|
19016
19170
|
if (this.theOptions.origin == 'classification') {
|
|
19017
19171
|
// WS Call
|
|
19018
19172
|
this.rawDataManager.getFromClassification(this.getApiSearchURL(), {
|
|
19019
|
-
StartNodeID: this.theOptions.options.startNode,
|
|
19020
|
-
lng: this.theOptions.options.lng,
|
|
19021
|
-
deprecated: this.theOptions.options.IsDeprecated,
|
|
19022
19173
|
searchedValue: searched
|
|
19023
19174
|
})
|
|
19024
19175
|
.then((data) => {
|
|
@@ -19156,11 +19307,12 @@ const HierarchizedPickerComponent = class {
|
|
|
19156
19307
|
onItemContextMenuItemClick(e) {
|
|
19157
19308
|
this.itemContextMenuItemClick.emit(e);
|
|
19158
19309
|
}
|
|
19159
|
-
|
|
19310
|
+
setNodeAsSelected(id, treeToUpdate, userClick) {
|
|
19160
19311
|
// TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
|
|
19161
19312
|
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))
|
|
19313
|
+
(this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
|
|
19163
19314
|
return;
|
|
19315
|
+
}
|
|
19164
19316
|
if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
|
|
19165
19317
|
return;
|
|
19166
19318
|
this.ignoreOptionsChanges = true;
|
|
@@ -19313,7 +19465,6 @@ const HierarchizedPickerComponent = class {
|
|
|
19313
19465
|
}
|
|
19314
19466
|
// Search a value in the tree and triggers a search when necessary
|
|
19315
19467
|
search(searched) {
|
|
19316
|
-
console.log("search ", searched);
|
|
19317
19468
|
let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
|
|
19318
19469
|
if (this.optionsManager.getOptions().mode == 'input' && searchinput) {
|
|
19319
19470
|
searchinput.classList.remove('fieldError');
|
|
@@ -19368,7 +19519,7 @@ const HierarchizedPickerComponent = class {
|
|
|
19368
19519
|
loadDataForTree(init, loader) {
|
|
19369
19520
|
if (this.optionsManager.getOptions().source == 'webservice') {
|
|
19370
19521
|
if (this.optionsManager.getOptions().origin == 'classification') {
|
|
19371
|
-
this.rawDataManager.getFromClassification(this.
|
|
19522
|
+
this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), loader).then((data) => {
|
|
19372
19523
|
this.rawData = data;
|
|
19373
19524
|
if (init) {
|
|
19374
19525
|
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,38 @@ 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
|
+
const { options, url } = this.optionsManager.getOptions();
|
|
451
|
+
if (options.Reach) {
|
|
452
|
+
// Use a base URL for relative paths
|
|
453
|
+
const base = window.location.origin; // fallback for relative URLs
|
|
454
|
+
const parsedUrl = new URL(url, base);
|
|
455
|
+
const pathSegments = parsedUrl.pathname.split('/');
|
|
456
|
+
const dynamicType = pathSegments[pathSegments.length - 2];
|
|
457
|
+
const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
|
|
458
|
+
return `${parsedUrl.origin}${newPathname}`;
|
|
459
|
+
}
|
|
460
|
+
return url;
|
|
461
|
+
}
|
|
462
|
+
getContextualApiParams(options = null) {
|
|
463
|
+
if (!options)
|
|
464
|
+
options = this.optionsManager.getOptions().options;
|
|
465
|
+
if (options.Reach) {
|
|
466
|
+
let optionsToReturn = Object.assign({}, options);
|
|
467
|
+
delete optionsToReturn.Reach;
|
|
468
|
+
if ("startNode" in optionsToReturn) {
|
|
469
|
+
optionsToReturn.startingnode = optionsToReturn.startNode;
|
|
470
|
+
delete optionsToReturn.startNode;
|
|
471
|
+
}
|
|
472
|
+
else if ("StartNodeID" in optionsToReturn) {
|
|
473
|
+
optionsToReturn.startingnode = optionsToReturn.StartNodeID;
|
|
474
|
+
delete optionsToReturn.StartNodeID;
|
|
475
|
+
}
|
|
476
|
+
return optionsToReturn;
|
|
477
|
+
}
|
|
478
|
+
else
|
|
479
|
+
return options;
|
|
480
|
+
}
|
|
449
481
|
translateDataForTree(dataToLoad, searchID = null, searched = null) {
|
|
450
482
|
if (searched && searched != "") {
|
|
451
483
|
this.loadSearchDataInCurrentTree(searchID, searched);
|
|
@@ -480,9 +512,6 @@ export class HierarchizedPickerComponent {
|
|
|
480
512
|
if (this.theOptions.origin == 'classification') {
|
|
481
513
|
// WS Call
|
|
482
514
|
this.rawDataManager.getFromClassification(this.getApiSearchURL(), {
|
|
483
|
-
StartNodeID: this.theOptions.options.startNode,
|
|
484
|
-
lng: this.theOptions.options.lng,
|
|
485
|
-
deprecated: this.theOptions.options.IsDeprecated,
|
|
486
515
|
searchedValue: searched
|
|
487
516
|
})
|
|
488
517
|
.then((data) => {
|
|
@@ -620,11 +649,12 @@ export class HierarchizedPickerComponent {
|
|
|
620
649
|
onItemContextMenuItemClick(e) {
|
|
621
650
|
this.itemContextMenuItemClick.emit(e);
|
|
622
651
|
}
|
|
623
|
-
|
|
652
|
+
setNodeAsSelected(id, treeToUpdate, userClick) {
|
|
624
653
|
// TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
|
|
625
654
|
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))
|
|
655
|
+
(this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
|
|
627
656
|
return;
|
|
657
|
+
}
|
|
628
658
|
if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
|
|
629
659
|
return;
|
|
630
660
|
this.ignoreOptionsChanges = true;
|
|
@@ -777,7 +807,6 @@ export class HierarchizedPickerComponent {
|
|
|
777
807
|
}
|
|
778
808
|
// Search a value in the tree and triggers a search when necessary
|
|
779
809
|
search(searched) {
|
|
780
|
-
console.log("search ", searched);
|
|
781
810
|
let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
|
|
782
811
|
if (this.optionsManager.getOptions().mode == 'input' && searchinput) {
|
|
783
812
|
searchinput.classList.remove('fieldError');
|
|
@@ -832,7 +861,7 @@ export class HierarchizedPickerComponent {
|
|
|
832
861
|
loadDataForTree(init, loader) {
|
|
833
862
|
if (this.optionsManager.getOptions().source == 'webservice') {
|
|
834
863
|
if (this.optionsManager.getOptions().origin == 'classification') {
|
|
835
|
-
this.rawDataManager.getFromClassification(this.
|
|
864
|
+
this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), loader).then((data) => {
|
|
836
865
|
this.rawData = data;
|
|
837
866
|
if (init) {
|
|
838
867
|
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,
|