typo3-typescript-sources 13.4.20

package/backend/form-engine/container/flex-form-container-container.ts

@@ -0,0 +1,166 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { Collapse } from 'bootstrap';
+import SecurityUtility from '@typo3/core/security-utility';
+import Modal from '@typo3/backend/modal';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Severity from '@typo3/backend/severity';
+import { selector } from '@typo3/core/literals';
+import ClientStorage from '@typo3/backend/storage/client';
+import type FlexFormSectionContainer from './flex-form-section-container';
+
+enum Selectors {
+  toggleSelector = '[data-bs-toggle="flexform-inline"]',
+  actionFieldSelector = '.t3js-flex-control-action',
+  controlSectionSelector = '.t3js-formengine-irre-control',
+  sectionContentContainerSelector = '.t3js-flex-section-content',
+  sectionContainerLabelSelector = '.t3js-formengine-label',
+  deleteContainerButtonSelector = '.t3js-delete',
+  contentPreviewSelector = '.content-preview',
+}
+
+interface ContainerStatus {
+  id: string;
+  collapsed: boolean;
+}
+
+class FlexFormContainerContainer {
+  private readonly securityUtility: SecurityUtility;
+  private readonly parentContainer: FlexFormSectionContainer;
+  private readonly container: HTMLElement;
+  private readonly containerContent: HTMLElement;
+  private readonly containerId: string;
+  private readonly toggleKeyInLocalStorage: string;
+
+  private readonly panelHeading: HTMLElement;
+  private readonly panelButton: HTMLElement;
+
+  constructor(parentContainer: FlexFormSectionContainer, container: HTMLElement) {
+    this.securityUtility = new SecurityUtility();
+    this.parentContainer = parentContainer;
+    this.container = container;
+    this.containerContent = container.querySelector(Selectors.sectionContentContainerSelector);
+    this.containerId = container.dataset.flexformContainerId;
+    this.toggleKeyInLocalStorage = `formengine-flex-${parentContainer.getSectionContainer().id}-${this.containerId}-collapse`;
+
+    this.panelHeading = container.querySelector(selector`[data-bs-target="#flexform-container-${this.containerId}"]`);
+    this.panelButton = this.panelHeading.querySelector(selector`[aria-controls="flexform-container-${this.containerId}"]`);
+
+    this.registerEvents();
+  }
+
+  private static getCollapseInstance(container: HTMLElement, toggle: boolean): Collapse {
+    return Collapse.getInstance(container) ?? new Collapse(container, { toggle });
+  }
+
+  public getStatus(): ContainerStatus {
+    return {
+      id: this.containerId,
+      collapsed: this.panelButton.getAttribute('aria-expanded') === 'false',
+    };
+  }
+
+  private registerEvents(): void {
+    if (this.parentContainer.isRestructuringAllowed()) {
+      this.registerDelete();
+    }
+
+    this.registerPanelToggle();
+    this.registerToggle();
+  }
+
+  private registerDelete(): void {
+    new RegularEvent('click', (): void => {
+      const title = TYPO3.lang['flexform.section.delete.title'] || 'Delete this container?';
+      const content = TYPO3.lang['flexform.section.delete.message'] || 'Are you sure you want to delete this container?';
+      const modal = Modal.confirm(title, content, Severity.warning, [
+        {
+          text: TYPO3.lang['buttons.confirm.delete_record.no'] || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'no',
+        },
+        {
+          text: TYPO3.lang['buttons.confirm.delete_record.yes'] || 'Yes, delete this container',
+          btnClass: 'btn-warning',
+          name: 'yes',
+        },
+      ]);
+      modal.addEventListener('button.clicked', (modalEvent: Event): void => {
+        if ((modalEvent.target as HTMLAnchorElement).name === 'yes') {
+          const actionField = this.container.querySelector(Selectors.actionFieldSelector) as HTMLInputElement;
+          actionField.value = 'DELETE';
+
+          this.container.appendChild(actionField);
+          this.container.classList.add('t3-flex-section--deleted');
+          this.container.closest('.t3-form-field-container.t3-form-flex')?.querySelector(Selectors.sectionContainerLabelSelector)?.classList.add('has-change');
+          new RegularEvent('transitionend', (): void => {
+            this.container.classList.add('hidden');
+
+            const event = new CustomEvent('formengine:flexform:container-deleted', {
+              detail: {
+                containerId: this.containerId
+              }
+            });
+            this.parentContainer.getContainer().dispatchEvent(event);
+          }).bindTo(this.container);
+        }
+
+        modal.hideModal();
+      });
+    }).bindTo(this.container.querySelector(Selectors.deleteContainerButtonSelector));
+  }
+
+  private registerToggle(): void {
+    const isCollapsed = (ClientStorage.get(this.toggleKeyInLocalStorage) ?? '1') === '1';
+    const collapseInstance = FlexFormContainerContainer.getCollapseInstance(this.containerContent, !isCollapsed);
+    this.generatePreview();
+
+    new RegularEvent('click', (): void => {
+      collapseInstance.toggle();
+    }).delegateTo(this.container, `${Selectors.toggleSelector} .form-irre-header-cell:not(${Selectors.controlSectionSelector}`);
+  }
+
+  private registerPanelToggle(): void {
+    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName: string): void => {
+      new RegularEvent(eventName, (e: Event): void => {
+        const collapseTriggered = e.type === 'hide.bs.collapse';
+        ClientStorage.set(this.toggleKeyInLocalStorage, collapseTriggered ? '1' : '0');
+
+        this.panelButton.setAttribute('aria-expanded', collapseTriggered ? 'false' : 'true');
+        this.panelButton.parentElement.classList.toggle('collapsed', collapseTriggered);
+
+        this.generatePreview();
+      }).bindTo(this.containerContent);
+    });
+  }
+
+  private generatePreview(): void {
+    let previewContent = '';
+    if (this.getStatus().collapsed) {
+      const formFields: NodeListOf<HTMLInputElement|HTMLTextAreaElement> = this.containerContent.querySelectorAll('input[type="text"], textarea');
+      for (const field of formFields) {
+        let content = this.securityUtility.stripHtml(field.value);
+        if (content.length > 50) {
+          content = content.substring(0, 50) + '...';
+        }
+        previewContent += (previewContent ? ' / ' : '') + content;
+      }
+    }
+
+    this.panelHeading.querySelector(Selectors.contentPreviewSelector).textContent = previewContent;
+  }
+}
+
+export default FlexFormContainerContainer;

package/backend/form-engine/container/flex-form-section-container.ts

@@ -0,0 +1,210 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { Collapse } from 'bootstrap';
+import Sortable from 'sortablejs';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import DocumentService from '@typo3/core/document-service';
+import FlexFormContainerContainer from './flex-form-container-container';
+import FormEngine from '@typo3/backend/form-engine';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { JavaScriptItemProcessor } from '@typo3/core/java-script-item-processor';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+enum Selectors {
+  toggleAllSelector = '.t3-form-flexsection-toggle',
+  addContainerSelector = '.t3js-flex-container-add',
+  actionFieldSelector = '.t3js-flex-control-action',
+  sectionContainerSelector = '.t3js-flex-section',
+  sectionContentContainerSelector = '.t3js-flex-section-content',
+  sectionContainerLabelSelector = '.t3js-formengine-label',
+  sortContainerButtonSelector = '.t3js-sortable-handle',
+}
+
+class FlexFormSectionContainer {
+  private container: HTMLElement;
+  private sectionContainer: HTMLElement;
+  private allowRestructure: boolean = false;
+  private flexformContainerContainers: FlexFormContainerContainer[] = [];
+
+  /**
+   * @param {string} elementId
+   */
+  constructor(elementId: string) {
+    DocumentService.ready().then((document: Document): void => {
+      this.container = <HTMLElement>document.getElementById(elementId);
+      this.sectionContainer = this.container.querySelector(this.container.dataset.section) as HTMLElement;
+      this.allowRestructure = this.sectionContainer.dataset.t3FlexAllowRestructure === '1';
+
+      this.registerEvents();
+      this.registerContainers();
+    });
+  }
+
+  private static getCollapseInstance(container: HTMLElement): Collapse {
+    return Collapse.getInstance(container) ?? new Collapse(container, { toggle: false });
+  }
+
+  public getContainer(): HTMLElement {
+    return this.container;
+  }
+
+  public getSectionContainer(): HTMLElement {
+    return this.sectionContainer;
+  }
+
+  public isRestructuringAllowed(): boolean {
+    return this.allowRestructure;
+  }
+
+  private registerEvents(): void {
+    if (this.allowRestructure) {
+      this.registerSortable();
+      this.registerContainerDeleted();
+    }
+
+    this.registerToggleAll();
+    this.registerCreateNewContainer();
+    this.registerPanelToggle();
+  }
+
+  private registerContainers(): void {
+    const sectionContainerContainers: NodeListOf<HTMLElement> = this.container.querySelectorAll(Selectors.sectionContainerSelector);
+    for (const sectionContainerContainer of sectionContainerContainers) {
+      this.flexformContainerContainers.push(new FlexFormContainerContainer(this, sectionContainerContainer));
+    }
+
+    this.updateToggleAllState();
+  }
+
+  private getToggleAllButton(): HTMLButtonElement {
+    return this.container.querySelector(Selectors.toggleAllSelector) as HTMLButtonElement;
+  }
+
+  private registerSortable(): void {
+    new Sortable(this.sectionContainer, {
+      group: this.sectionContainer.id,
+      handle: Selectors.sortContainerButtonSelector,
+      onSort: this.updateSorting,
+    });
+  }
+
+  private readonly updateSorting = (e: Sortable.SortableEvent): void => {
+    const actionFields: NodeListOf<HTMLInputElement> = this.container.querySelectorAll(Selectors.actionFieldSelector);
+    actionFields.forEach((element: HTMLInputElement, key: number): void => {
+      element.value = key.toString();
+    });
+
+    this.updateToggleAllState();
+    this.flexformContainerContainers.splice(e.newIndex, 0, this.flexformContainerContainers.splice(e.oldIndex, 1)[0]);
+    document.dispatchEvent(new Event('formengine:flexform:sorting-changed'));
+  };
+
+  private registerToggleAll(): void {
+    new RegularEvent('click', (e: Event): void => {
+      const trigger = e.target as HTMLButtonElement;
+      const showAll = trigger.dataset.expandAll === 'true';
+      const collapsibles: NodeListOf<HTMLElement> = this.container.querySelectorAll(Selectors.sectionContentContainerSelector);
+
+      for (const collapsible of collapsibles) {
+        if (showAll) {
+          FlexFormSectionContainer.getCollapseInstance(collapsible).show();
+        } else {
+          FlexFormSectionContainer.getCollapseInstance(collapsible).hide();
+        }
+      }
+    }).bindTo(this.getToggleAllButton());
+  }
+
+  private registerCreateNewContainer(): void {
+    new RegularEvent('click', (e: Event, target: HTMLElement): void => {
+      e.preventDefault();
+      this.createNewContainer(target.dataset);
+    }).delegateTo(this.container, Selectors.addContainerSelector);
+  }
+
+  private createNewContainer(dataset: DOMStringMap): void {
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.record_flex_container_add)).post({
+      vanillaUid: dataset.vanillauid,
+      databaseRowUid: dataset.databaserowuid,
+      command: dataset.command,
+      tableName: dataset.tablename,
+      fieldName: dataset.fieldname,
+      recordTypeValue: dataset.recordtypevalue,
+      dataStructureIdentifier: JSON.parse(dataset.datastructureidentifier),
+      flexFormSheetName: dataset.flexformsheetname,
+      flexFormFieldName: dataset.flexformfieldname,
+      flexFormContainerName: dataset.flexformcontainername,
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      const createdContainer = new DOMParser().parseFromString(data.html, 'text/html').body.firstElementChild as HTMLElement;
+
+      this.flexformContainerContainers.push(new FlexFormContainerContainer(this, createdContainer));
+
+      const sectionContainer = document.querySelector(dataset.target);
+      sectionContainer.insertAdjacentElement('beforeend', createdContainer);
+
+      if (data.scriptItems instanceof Array && data.scriptItems.length > 0) {
+        const processor = new JavaScriptItemProcessor();
+        processor.processItems(data.scriptItems);
+      }
+
+      if (data.stylesheetFiles && data.stylesheetFiles.length > 0) {
+        for (const stylesheetFile of data.stylesheetFiles) {
+          const element = document.createElement('link');
+          element.rel = 'stylesheet';
+          element.type = 'text/css';
+          element.href = stylesheetFile;
+          document.head.appendChild(element);
+        }
+      }
+
+      this.updateToggleAllState();
+
+      FormEngine.reinitialize();
+      FormEngine.Validation.initializeInputFields();
+      FormEngine.Validation.validate(sectionContainer);
+
+      this.container.querySelector(Selectors.sectionContainerLabelSelector)?.classList.add('has-change');
+    });
+  }
+
+  private registerContainerDeleted(): void {
+    new RegularEvent('formengine:flexform:container-deleted', (e: CustomEvent): void => {
+      const deletedContainerId = e.detail.containerId;
+      this.flexformContainerContainers = this.flexformContainerContainers.filter(
+        flexformContainerContainer => flexformContainerContainer.getStatus().id !== deletedContainerId
+      );
+
+      FormEngine.Validation.validate(this.container);
+      this.updateToggleAllState();
+    }).bindTo(this.container);
+  }
+
+  private registerPanelToggle(): void {
+    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName: string): void => {
+      new RegularEvent(eventName, (): void => {
+        this.updateToggleAllState();
+      }).delegateTo(this.container, Selectors.sectionContentContainerSelector);
+    });
+  }
+
+  private updateToggleAllState(): void {
+    if (this.flexformContainerContainers.length > 0) {
+      const firstContainer = this.flexformContainerContainers.find(Boolean);
+      this.getToggleAllButton().dataset.expandAll = firstContainer.getStatus().collapsed === true ? 'true' : 'false';
+    }
+  }
+}
+
+export default FlexFormSectionContainer;