[FEATURE] Allow editing of task groups within the scheduler module

Currently, users have to use the list module and click
on the root page to add/edit/remove a task group.

This has been changed by adding editing features for
groups within the module.

Resolves: #99874
Releases: main
Change-Id: I0103ca853649382cf055d612dd4f4d657d90dc64
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/77781
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Markus Klein <markus.klein@typo3.org>

Build/Sources/Sass/backend.scss

@@ -104,3 +104,4 @@
 @import "module/tstemplate";
 @import "module/viewpage";
 @import "module/workspaces";
+@import "module/scheduler";

Build/Sources/Sass/module/_scheduler.scss

@@ -0,0 +1,16 @@
+//
+// Scheduler module
+//
+.scheduler-group-dragitem {
+    cursor: move;
+
+    [editable="true"],
+    a,
+    button {
+        cursor: initial;
+    }
+}
+
+.scheduler-group-panel {
+    overflow: unset;
+}

Build/Sources/TypeScript/scheduler/scheduler-add-group.ts

@@ -0,0 +1,114 @@
+/*
+ * 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 Modal from '@typo3/backend/modal';
+import { html, TemplateResult } from 'lit';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface';
+import Notification from '@typo3/backend/notification';
+import { lll } from '@typo3/core/lit-helper';
+
+/**
+ * Module: @typo3/scheduler/scheduler-add-groups
+ * @exports @typo3/scheduler/scheduler-add-groups
+ */
+class SchedulerAddGroups {
+  selector: string = '.t3js-create-group';
+
+  constructor() {
+    this.initialize();
+  }
+
+  public initialize(): void {
+    const element = document.querySelector(this.selector) as HTMLElement;
+    if(element) {
+      element.addEventListener('click', (button: MouseEvent) => {
+        button.preventDefault();
+        const content: TemplateResult = html`<form name="scheduler-create-group" @submit=${this.createGroup}><label>Group name</label> <input required="" name="action[createGroup]" autofocus type="text" class="form-control"></form>`
+
+        const modal = Modal.advanced({
+          content: content,
+          title: lll('scheduler.createGroup') || 'New group',
+          size: Modal.sizes.small,
+          buttons: [
+            {
+              trigger: (): void => Modal.dismiss(),
+              text: lll('scheduler.modalCancel') || 'Cancel',
+              btnClass: 'btn-default',
+              name: 'cancel'
+            },{
+              trigger: (): void => {
+                const form: HTMLFormElement = Modal.currentModal.querySelector('form[name="scheduler-create-group"]')
+                form.requestSubmit();
+              },
+              text: lll('scheduler.modalOk') || 'Create group',
+              btnClass: 'btn-primary',
+              name: 'ok'
+            }
+          ]
+        });
+
+        modal.addEventListener('typo3-modal-shown', (): void => {
+          const input: HTMLInputElement = Modal.currentModal.querySelector('input[name="action[createGroup]"]')
+          input.focus();
+        });
+      })
+    }
+  }
+
+  private createGroup(e: Event): Promise<ResponseInterface | void> {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const name = formData.get('action[createGroup]').toString();
+    const newUid = 'NEW' + Math.random().toString(36).slice(2, 7);
+    const params = '&data[tx_scheduler_task_group][' + newUid + '][pid]=0' +
+      '&data[tx_scheduler_task_group][' + newUid + '][groupName]=' + encodeURIComponent(name);
+
+    return (new AjaxRequest(TYPO3.settings.ajaxUrls.record_process)).post(params, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
+    })
+      .then(async (response: AjaxResponse): Promise<ResponseInterface> => {
+        return await response.resolve();
+      }).then((result: ResponseInterface): ResponseInterface => {
+        if (result.hasErrors) {
+          Notification.error(lll('scheduler.group.error.title'), lll('scheduler.group.error.message') + ' "' + name + '"!');
+        }
+
+        result.messages.forEach((message) => {
+          Notification.info(message.title, message.message);
+        });
+
+        return result;
+      }).catch(() => {
+        Notification.error(lll('scheduler.group.error.title'), lll('scheduler.group.error.message') + ' "' + name + '"!');
+      }).finally(() => {
+        const select = (document as Document).querySelector('#task_group');
+        if(select) {
+          // This is an ugly hack to pre-select the created group.
+          const form = ((document as Document).forms[0] as HTMLFormElement);
+          const selectLatestGroup: HTMLInputElement = form.querySelector('[name="tx_scheduler[select_latest_group]"]');
+
+          selectLatestGroup.value = '1';
+          form.submit();
+        } else {
+          window.location.reload();
+        }
+
+        Modal.dismiss();
+      })
+  }
+}
+
+export default new SchedulerAddGroups();

Build/Sources/TypeScript/scheduler/scheduler-editable-group-name.ts

@@ -0,0 +1,219 @@
+/*
+ * 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 { lll } from '@typo3/core/lit-helper';
+import { html, css, LitElement, TemplateResult, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import '../backend/element/icon-element';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface';
+import Notification from '@typo3/backend/notification';
+
+@customElement('typo3-scheduler-editable-group-name')
+class EditableGroupName extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      --border-color: #bebebe;
+      --hover-bg: #cacaca;
+      --hover-border-color: #bebebe;
+      --focus-bg: #cacaca;
+      --focus-border-color: #bebebe;
+    }
+
+    input {
+      outline: none;
+      background: transparent;
+      font-weight: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+      padding: 0;
+      border: 0;
+      border-top: 1px solid transparent;
+      border-bottom: 1px dashed var(--border-color);
+      margin: 0;
+    }
+
+    input:hover {
+      border-bottom: 1px dashed var(--hover-border-color);
+    }
+
+    input:focus {
+      border-bottom: 1px dashed var(--focus-border-color);
+    }
+
+    .wrapper {
+      position: relative;
+      margin: -1px 0;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: inherit;
+      line-height: inherit;
+      border: 0;
+      padding: 10px;
+      height: 1em;
+      width: 1em;
+      top: 0;
+      border-radius: 2px;
+      overflow: hidden;
+      outline: none;
+      border: 1px solid transparent;
+      background: transparent;
+      opacity: 1;
+      transition: all .2s ease-in-out;
+    }
+
+    button:hover {
+      background: var(--hover-bg);
+      border-color: var(--hover-border-color);
+      cursor: pointer;
+    }
+
+    button:focus {
+      opacity: 1;
+      background: var(--focus-bg);
+      border-color: var(--focus-border-color);
+    }
+
+    button[data-action="edit"] {
+      right: 0;
+    }
+
+    button[data-action="save"] {
+      right: calc(1em + 10px);
+    }
+
+    button[data-action="close"] {
+      right: 0;
+    }
+    `;
+  @property({ type: String }) groupName: string = '';
+  @property({ type: Number }) groupId: number = 0;
+  @property({ type: Boolean }) editable: boolean = false;
+  @state() _isEditing: boolean = false;
+  @state() _isSubmitting: boolean = false;
+
+  private static updateInputSize(target: EventTarget): void {
+    const input = target as HTMLInputElement;
+    if (input.value.length < 10) {
+      input.size = 10;
+    } else {
+      input.size = input.value.length + 2;
+    }
+  }
+
+  async startEditing(): Promise<void> {
+    if (this.isEditable()) {
+      this._isEditing = true;
+      await this.updateComplete;
+      this.shadowRoot.querySelector('input')?.focus();
+    }
+  }
+
+  protected render(): TemplateResult | symbol {
+    if (this.groupName === '') {
+      return nothing;
+    }
+
+    if (!this.isEditable()) {
+      return html`
+        <div class="wrapper">${this.groupName}</div>`;
+    }
+
+    let content;
+
+    if (!this._isEditing) {
+      content = html`
+        <div class="wrapper">
+          <span @dblclick="${(): void => { this.startEditing(); }}">${this.groupName}</span>
+          ${this.composeEditButton()}
+        </div>`;
+    } else {
+      content = this.composeEditForm();
+    }
+
+    return content;
+  }
+
+  private isEditable(): boolean {
+    return this.editable && this.groupId > 0;
+  }
+
+  private endEditing(): void {
+    if (this.isEditable()) {
+      this._isEditing = false;
+    }
+  }
+
+  private updateGroupName(e: SubmitEvent): void {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const submittedData = Object.fromEntries(formData);
+    const newGroupName = submittedData.newGroupName.toString();
+
+    if (this.groupName === newGroupName) {
+      this.endEditing();
+      return;
+    }
+
+    this._isSubmitting = true;
+
+    const params = '&data[tx_scheduler_task_group][' + this.groupId + '][groupName]=' + encodeURIComponent(newGroupName) + '&redirect=' + encodeURIComponent(document.location.href);
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.record_process)).post(params, {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
+    }).then(async (response: AjaxResponse): Promise<ResponseInterface> => {
+      return await response.resolve();
+    }).then((result: ResponseInterface): ResponseInterface => {
+      result.messages.forEach((message) => {
+        Notification.info(message.title, message.message);
+        // Reload to avoid inconsistent UI, in case the
+        // renamed group name is not unique
+        window.location.href = result.redirect;
+      });
+
+      return result;
+    }).then(() => {
+      this.groupName = newGroupName;
+    }).finally(() => {
+      this.endEditing();
+      this._isSubmitting = false;
+    });
+  }
+
+  private composeEditButton(): TemplateResult {
+    return html`
+      <button data-action="edit" type="button" aria-label="${lll('editGroupName')}" @click="${(): void => { this.startEditing(); }}">
+        <typo3-backend-icon identifier="actions-open" size="small"></typo3-backend-icon>
+      </button>`;
+  }
+
+  private composeEditForm(): TemplateResult {
+    return html`
+      <form class="wrapper" @submit="${ this.updateGroupName }">
+        <input autocomplete="off" name="newGroupName" required size="${this.groupName.length + 2}" ?disabled="${this._isSubmitting}" value="${this.groupName}" @keydown="${(e: KeyboardEvent): void => { EditableGroupName.updateInputSize(e.target); if (e.key === 'Escape') { this.endEditing(); } }}">
+        <button data-action="save" type="submit" ?disabled="${this._isSubmitting}">
+          <typo3-backend-icon identifier="actions-check" size="small"></typo3-backend-icon>
+        </button>
+        <button data-action="close" type="button" ?disabled="${this._isSubmitting}" @click="${(): void => { this.endEditing(); }}">
+          <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
+        </button>
+      </form>`;
+  }
+}