[TASK] Migrate SelectElementTree to TypeScript
[Packages/TYPO3.CMS.git] / Build / Sources / TypeScript / backend / Resources / Public / TypeScript / FormEngine / Element / SelectTreeElement.ts
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 import SelectTree = require('TYPO3/CMS/Backend/FormEngine/Element/SelectTree');
15
16 class SelectTreeElement {
17 private readonly treeWrapper: HTMLElement = null;
18 private readonly recordField: HTMLInputElement = null;
19 private readonly callback: Function = null;
20
21 constructor(treeWrapperId: string, treeRecordFieldId: string, callback: Function) {
22 this.treeWrapper = <HTMLElement>document.querySelector('#' + treeWrapperId);
23 this.recordField = <HTMLInputElement>document.querySelector('#' + treeRecordFieldId);
24 this.callback = callback;
25
26 this.initialize();
27 }
28
29 private initialize(): void {
30 const dataUrl = this.generateRequestUrl();
31 const tree = new SelectTree();
32
33 const settings = {
34 dataUrl: dataUrl,
35 showIcons: true,
36 showCheckboxes: true,
37 readOnlyMode: parseInt(this.recordField.dataset.readOnly, 10) === 1,
38 input: this.recordField,
39 exclusiveNodesIdentifiers: this.recordField.dataset.treeExclusiveKeys,
40 validation: JSON.parse(this.recordField.dataset.formengineValidationRules)[0],
41 expandUpToLevel: this.recordField.dataset.treeExpandUpToLevel,
42 };
43 const initialized = tree.initialize(this.treeWrapper, settings);
44 if (!initialized) {
45 return;
46 }
47
48 tree.dispatch.on('nodeSelectedAfter.requestUpdate', this.callback);
49
50 if (this.recordField.dataset.treeShowToolbar) {
51 require(['TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar'], (TreeToolbar: any): void => {
52 const selectTreeToolbar = new TreeToolbar();
53 selectTreeToolbar.initialize(this.treeWrapper);
54 });
55 }
56 }
57
58 private generateRequestUrl(): string {
59 const params = {
60 tableName: this.recordField.dataset.tablename,
61 fieldName: this.recordField.dataset.fieldname,
62 uid: this.recordField.dataset.uid,
63 recordTypeValue: this.recordField.dataset.recordtypevalue,
64 dataStructureIdentifier: this.recordField.dataset.datastructureidentifier !== ''
65 ? JSON.parse(this.recordField.dataset.datastructureidentifier)
66 : '',
67 flexFormSheetName: this.recordField.dataset.flexformsheetname,
68 flexFormFieldName: this.recordField.dataset.flexformfieldname,
69 flexFormContainerName: this.recordField.dataset.flexformcontainername,
70 flexFormContainerIdentifier: this.recordField.dataset.flexformcontaineridentifier,
71 flexFormContainerFieldName: this.recordField.dataset.flexformcontainerfieldname,
72 flexFormSectionContainerIsNew: this.recordField.dataset.flexformsectioncontainerisnew,
73 command: this.recordField.dataset.command,
74 };
75 return TYPO3.settings.ajaxUrls.record_tree_data + '&' + $.param(params);
76 }
77 }
78
79 export = SelectTreeElement;