https://www.nrw-kultur.de/_assets/34f280d531096d94f3051dc4a8778b79/JavaScript/HelpField.js?bust=202609181

1import DataTable from '@iconate/nrwks-fas-general/ext/datatables/datatables.min.js';
2import languageDE from '@iconate/nrwks-fas-general/ext/datatables/languages/de-DE.mjs';
3import AjaxRequest from '@typo3/core/ajax/ajax-request.js';
4import Notification from '@typo3/backend/notification.js';
5import { renderSelect2 } from '@iconate/nrwks-fas-general/select2.js';
6import { basicSearchInput } from '@iconate/nrwks-fas-general/Backend/SearchHelper.js';
7import { executeWithDelay } from '@iconate/nrwks-fas-general/execute-with-delay.js';
8import ModuleCollection from '@iconate/module-collection/module-collection.js';
9import { AssistanceRule } from "@iconate/nrwks-fas-helpsystem/AssistanceRule.js";
10
11
12/**
13 * Class HelpField
14 */
15export class HelpField {
16    constructor() {
17        this.assistanceRule = new AssistanceRule();
18    }
19    // Function for index action
20    indexAction() {
21        this.#initDatatable();
22    }
23
24    newAction() {
25        this.#registerAddRuleButton();
26    }
27
28    editAction() {
29        this.#registerAddRuleButton();
30    }
31
32    // Init Datatable
33    #initDatatable() {
34        let helpFieldObject = this;
35        let helpFieldDatatable = new DataTable('#tx-nrwkultur-fas-help-system-index-datatable', {
36            createdRow: (row, data) => {
37                // Add event listener on delete button
38                row.querySelector('.delete-action')?.addEventListener('click', (event) => this.#deleteRecordEventHandler(event, data));
39            },
40            columnDefs: [
41                {'targets': 2, visible: false},
42            ],
43            language: languageDE,
44            layout: {
45                topStart: null,
46                topEnd: null,
47                bottomStart: 'info',
48                bottomEnd: 'paging'
49            },
50            order: [
51                [0, 'asc'],
52                [1, 'asc'],
53            ],
54            pageLength: 25,
55        });
56
57        // Add basic search function
58        basicSearchInput();
59
60        // Register key up event for search field
61        let searchFilter = document.querySelector('#search-filter');
62        executeWithDelay(searchFilter, 'keyup', () => {
63            // Search given string in datatable
64            helpFieldDatatable.search(searchFilter.value).draw();
65        }, 1000);
66
67        // Get select to add new help field
68        let selectNewHelpField = document.querySelector('select#new-help-field');
69
70        // Render select2 with change event - NEW ACTION
71        renderSelect2(selectNewHelpField, {}, {
72            change: (event) => {
73                // Prepare selected help field and get current top item link
74                let selectedHelpField  = event.target.options[event.target.selectedIndex];
75                let currentTopItemLink = document.querySelector('.tx-module-collection-navigation.top-level-navigation-wrapper .module-collection-navigation-item.active .item-link');
76
77                // Redirect to new action
78                ModuleCollection.renderActionContent({
79                    linkModuleId:   currentTopItemLink.dataset.identifier,
80                    linkPath:       currentTopItemLink.dataset.path,
81                    controller:     'HelpField',
82                    action:         'new',
83                    arguments:      {
84                        helpField: {
85                            'formKey'   : selectedHelpField.dataset.formkey,
86                            'fieldType' : selectedHelpField.dataset.fieldtype,
87                            'fieldKey'  : event.target.value,
88                        }
89                    },
90                });
91            }
92        });
93
94    }
95
96    // Register add rule button
97    #registerAddRuleButton() {
98        document.getElementById('add-rule').addEventListener('click', () => {
99                this.assistanceRule.addAction();
100            }
101        );
102    }
103
104    // Handling for delete
105    #deleteRecordEventHandler(event, data) {
106        // Get the modal element
107        let modalConfirmDelete = document.querySelector('.modal.modal-delete-help-field');
108        if (modalConfirmDelete) {
109            // Replace help field title in modal delete text
110            let textElement = modalConfirmDelete.querySelector('.modal-delete-text');
111            let text = textElement.innerText;
112            let replaceString = text.slice(text.indexOf("#"), text.lastIndexOf("#") + 1);
113            textElement.innerText = text.replace(replaceString, "'" + data[1] + "' (" + data[0] + ")");
114
115            // Get all possible closing buttons
116            modalConfirmDelete.querySelectorAll('.btn-delete-help-field-cancel, .modal-close').forEach(btn => {
117                // Add a click event
118                btn.addEventListener('click', () => {
119                    // Handling to hide modal
120                    modalConfirmDelete.ariaHidden = 'true';
121                    modalConfirmDelete.classList.remove('is-visible');
122                    modalConfirmDelete.classList.add('hidden');
123                });
124            });
125
126            // Get the confirmation button and register a click event
127            modalConfirmDelete.querySelector('.btn-delete-help-field-really')?.addEventListener('click', () => {
128                // Create ajax request
129                let request = new AjaxRequest(TYPO3.settings.ajaxUrls.nrw_kultur_fas_help_system__fas_help_system__delete_help_field);
130                request.post({
131                    helpField: data[2],
132                }).then(async (response) => {
133                    // Resolve response
134                    response = await response.resolve();
135
136                    // Show notification for success
137                    Notification.success(
138                        '',
139                        response.message
140                    );
141
142                    // Get current top item link
143                    let currentTopItemLink = document.querySelector('.tx-module-collection-navigation.top-level-navigation-wrapper .module-collection-navigation-item.active .item-link');
144
145                    // Get select for help fields
146                    let helpFieldSelect = document.getElementById('new-help-field');
147
148                    // Add removed help field as option of select-group
149                    document.querySelector('#new-help-field optgroup[data-optgroup="'+ response.formKey + '"]').prepend(
150                        '<option value="' + response.fieldKey + '" data-formKey="' + response.formKey + '" data-fieldType="' + response.fieldType + '">' + response.fieldLabel + '</option>'
151                    );
152
153                    // Render select
154                    renderSelect2(helpFieldSelect, 'destroy');
155                    renderSelect2(helpFieldSelect);
156
157                    // Reload
158                    ModuleCollection.renderActionContent({
159                        linkModuleId:   currentTopItemLink.dataset.identifier,
160                        linkPath:       currentTopItemLink.dataset.path,
161                        controller:     'HelpField',
162                        action:         'index',
163                        arguments:      {},
164                    });
165                });
166            });
167
168            // Show the modal
169            modalConfirmDelete.classList.remove('hidden');
170            modalConfirmDelete.ariaHidden = 'false';
171            modalConfirmDelete.classList.add('is-visible');
172        }
173    }
174}