[TASK] Refactor frontend pipeline

.ddev/config.yaml

@@ -18,7 +18,7 @@ web_environment:
     - typo3DatabaseName=t3func
     - typo3DatabasePassword=root
     - typo3DatabaseUsername=root
-nodejs_version: "16"
+nodejs_version: "v24"
 corepack_enable: false
 host_db_port: "59013"
 

.gitattributes

@@ -1,19 +1,15 @@
 # Folders
 /.ddev export-ignore
 /.github export-ignore
-/.vscode export-ignore
 /Build export-ignore
 /Tests export-ignore
 
 # Files
 .editorconfig export-ignore
 .gitattributes export-ignore
 .gitignore export-ignore
-.php-cs-fixer.dist.php export-ignore
-.phplint.yml export-ignore
-.stylelintrc export-ignore
 
-# Enforce checkout with linux lf consistent over all plattforms
+# Enforce checkout with linux lf consistent over all platforms
 *.xml text eol=lf
 *.html text eol=lf
 *.css text eol=lf

Build/Scripts/runTests.sh

@@ -184,6 +184,7 @@ cleanTestFiles() {
         typo3/sysext/core/Tests/AcceptanceTests-Job-* \
         typo3/sysext/core/Tests/Acceptance/Support/_generated \
         typo3temp/ \
+        var/ \
         config \
         composer.lock
     git checkout composer.json

Build/Sources/Sass/backend.scss

@@ -1,9 +1,4 @@
-//
-// Variables
-//
-@import 'variables';
-
 //
 // Specific
 //
-@import 'backend/sessionplaner';
+@use 'backend/sessionplaner';

Build/Sources/Sass/backend/_sessionplaner.scss

@@ -1,4 +1,5 @@
-@use "sass:map";
+@use '../variables' as v;
+@use 'sass:map';
 
 //
 // Sessionplaner
@@ -295,8 +296,8 @@
     border-radius: var(--sessionplaner-tag-border-radius);
     box-shadow: var(--sessionplaner-tag-shadow);
 }
-@each $name, $color in $session-colors {
-    .sessionbox-tag-#{$name} {
+@each $name, $color in v.$session-colors {
+    .sessionbox-tag-#{"" + $name} {
         --sessionplaner-tag-color: #{map.get($color, text)};
         --sessionplaner-tag-bg: #{map.get($color, bg)};
     }

Build/Sources/Sass/frontend.scss

@@ -1,19 +1,14 @@
-//
-// Variables
-//
-@import 'variables';
-
 //
 // Imports
 //
-@import 'frontend/general';
-@import 'frontend/day';
-@import 'frontend/tag';
-@import 'frontend/track';
-@import 'frontend/room';
-@import 'frontend/session';
-@import 'frontend/slot';
-@import 'frontend/speaker';
-@import 'frontend/bio';
-@import 'frontend/list';
-@import 'frontend/connect';
+@use 'frontend/general';
+@use 'frontend/day';
+@use 'frontend/tag';
+@use 'frontend/track';
+@use 'frontend/room';
+@use 'frontend/session';
+@use 'frontend/slot';
+@use 'frontend/speaker';
+@use 'frontend/bio';
+@use 'frontend/list';
+@use 'frontend/connect';

Build/Sources/Sass/frontend/_day.scss

@@ -1,3 +1,5 @@
+@use '../variables' as v;
+
 //
 // Day
 //
@@ -24,7 +26,7 @@
     .sessionplaner-day-list-item {
         padding: 10px;
         width: 100%;
-        @media only screen and (min-width: $session-breakpoint-md) {
+        @media only screen and (min-width: v.$session-breakpoint-md) {
             width: calc(100% / 2);
         }
     }

Build/Sources/Sass/frontend/_slot.scss

@@ -1,3 +1,5 @@
+@use '../variables' as v;
+
 //
 // Slot
 //
@@ -67,7 +69,7 @@
 // Variants
 //
 [data-sessionplaner-columns="2"] {
-    @media only screen and (min-width: $session-breakpoint-sm) {
+    @media only screen and (min-width: v.$session-breakpoint-sm) {
         &.sessionplaner-slot-header {
             display: flex;
         }
@@ -80,7 +82,7 @@
     }
 }
 [data-sessionplaner-columns="3"] {
-    @media only screen and (min-width: $session-breakpoint-md) {
+    @media only screen and (min-width: v.$session-breakpoint-md) {
         &.sessionplaner-slot-header {
             display: flex;
         }
@@ -93,12 +95,12 @@
     }
 }
 [data-sessionplaner-columns="4"] {
-    @media only screen and (min-width: $session-breakpoint-sm) {
+    @media only screen and (min-width: v.$session-breakpoint-sm) {
         .sessionplaner-slot-track {
             width: calc(100% / 2);
         }
     }
-    @media only screen and (min-width: $session-breakpoint-md) {
+    @media only screen and (min-width: v.$session-breakpoint-md) {
         &.sessionplaner-slot-header {
             display: flex;
         }
@@ -111,12 +113,12 @@
     }
 }
 [data-sessionplaner-columns="5"] {
-    @media only screen and (min-width: $session-breakpoint-sm) {
+    @media only screen and (min-width: v.$session-breakpoint-sm) {
         .sessionplaner-slot-track {
             width: calc(100% / 2);
         }
     }
-    @media only screen and (min-width: $session-breakpoint-lg) {
+    @media only screen and (min-width: v.$session-breakpoint-lg) {
         &.sessionplaner-slot-header {
             display: flex;
         }

Build/Sources/Sass/frontend/_tag.scss

@@ -1,4 +1,5 @@
-@use "sass:map";
+@use '../variables' as v;
+@use 'sass:map';
 
 //
 // Tag
@@ -30,7 +31,7 @@
     text-decoration-color: var(--session-tag-title-decoration-color);
 }
 
-@each $name, $color in $session-colors {
+@each $name, $color in v.$session-colors {
     .sessionplaner-tag-#{"" + $name} {
         --session-tag-bg: #{map.get($color, bg)};
         --session-tag-color: #{map.get($color, text)};

Build/Sources/TypeScript/backend/sessionplaner.ts

@@ -0,0 +1,109 @@
+// @ts-expect-error package is not available as a source in a composer installation
+import Notification from '@typo3/backend/notification.js';
+
+class Sessionplaner {
+  constructor() {
+    document.querySelectorAll('[data-sessionplaner-draggable="true"]').forEach((element: HTMLElement) => {
+      element.addEventListener('dragstart', (event: DragEvent) => {
+        const target = event.target as HTMLElement;
+        const session = {
+          uid: target.dataset.sessionUid
+        };
+        event.dataTransfer.setData('application/json', JSON.stringify(session));
+        event.dataTransfer.effectAllowed = 'move';
+      });
+    });
+
+    document.querySelectorAll('[data-sessionplaner-dragtarget]').forEach((element: HTMLElement) => {
+      element.addEventListener('dragleave', (event: DragEvent) => {
+        event.stopPropagation();
+        element.classList.remove('dragtarget');
+      }, { capture: true, passive: true });
+
+      element.addEventListener('dragover', (event: DragEvent) => {
+        event.stopPropagation();
+        const type = element.dataset.sessionplanerDragtarget;
+        let allowDrop = false;
+        if (type === 'slot' && element.children.length === 0) {
+          allowDrop = true;
+        } else if (type === 'stash') {
+          allowDrop = true;
+        }
+        if (allowDrop) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = 'move';
+          element.classList.add('dragtarget');
+        }
+      }, { capture: true });
+
+      element.addEventListener('drop', (event: DragEvent) => {
+        event.stopPropagation();
+        element.classList.remove('dragtarget');
+        const target = event.target as HTMLElement;
+        const session = JSON.parse(event.dataTransfer.getData('application/json') ?? '{}');
+        const sessionElement: HTMLElement = document.querySelector('[data-session-uid="' + session.uid + '"]');
+        if (sessionElement) {
+          this.updateSession(sessionElement, {
+            room: target.dataset.roomUid ?? null,
+            slot: target.dataset.slotUid ?? null,
+            day: target.dataset.dayUid ?? null,
+          });
+        }
+      });
+    });
+  }
+
+  updateSession(element: HTMLElement, data: {room: string | null, slot: string | null, day: string | null}) {
+    const endpoint = 'evoweb_sessionplaner_update';
+    const payload = {
+      session: {
+        uid: element.dataset.sessionUid,
+        room: data.room ?? null,
+        slot: data.slot ?? null,
+        day: data.day ?? null,
+      }
+    };
+    this.postData(endpoint, payload).then((response) => {
+      if (response.status === 'success') {
+        element.dataset.sessionRoom = response.data.session.room ?? null;
+        element.dataset.sessionSlot = response.data.session.slot ?? null;
+        element.dataset.sessionDay = response.data.session.day ?? null;
+        this.updateSessionPosition(element);
+      } else {
+        Notification.error('Error', response.message);
+      }
+    });
+  }
+
+  updateSessionPosition(element: HTMLElement) {
+    let slotSelector = '';
+    slotSelector += '[data-sessionplaner-dragtarget="slot"]';
+    slotSelector += '[data-room-uid="' + element.dataset.sessionRoom + '"]';
+    slotSelector += '[data-slot-uid="' + element.dataset.sessionSlot + '"]';
+    slotSelector += '[data-slot-uid="' + element.dataset.sessionSlot + '"]';
+
+    const slotElement = document.querySelector(slotSelector);
+    const stashElement = document.querySelector('[data-sessionplaner-dragtarget="stash"]');
+
+    if (slotElement) {
+      slotElement.append(element);
+    } else if (stashElement) {
+      stashElement.append(element);
+    }
+  }
+
+  async postData(endpoint: string = '', data = {}) {
+    const response = await fetch(TYPO3.settings.ajaxUrls[endpoint], {
+      method: 'POST',
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    return response.json();
+  }
+}
+
+new Sessionplaner();

Build/config/system/settings.php

@@ -1,8 +1,8 @@
 <?php
 return [
     'BE' => [
-        'installToolPassword' => '$argon2i$v=19$m=65536,t=16,p=1$aEw0N0dVLzR5RWZ6MTg3bQ$nU9io/R8eqYaZRM07wmCtj8FZQZBglMcrCkdbtZwEZQ',
         'debug' => true,
+        'installToolPassword' => '$argon2i$v=19$m=65536,t=16,p=1$aEw0N0dVLzR5RWZ6MTg3bQ$nU9io/R8eqYaZRM07wmCtj8FZQZBglMcrCkdbtZwEZQ',
         'passwordHashing' => [
             'className' => 'TYPO3\\CMS\\Core\\Crypto\\PasswordHashing\\Argon2iPasswordHash',
             'options' => [],
@@ -45,6 +45,10 @@
             'disablePageTsTCEFORM' => '0',
             'disablePageTsTCEMAIN' => '0',
         ],
+        'extensionmanager' => [
+            'automaticInstallation' => '1',
+            'offlineMode' => '0',
+        ],
     ],
     'FE' => [
         'cacheHash' => [