Move create-list action to save

2026-06-16 07:03:39 +02:00
parent 359fcd61a0
commit d35afc0228
1 changed files with 63 additions and 50 deletions
@@ -180,11 +180,6 @@
                </section>
              </div>

-              <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
-                <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
-                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
-                </div>
-              </footer>
            </form>
          </div>
        </div>
@@ -205,13 +200,13 @@
      const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
      const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
      const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const overlayList = stage.querySelector('.sg-delete-confirmation-pattern__list');
      const createListForm = stage.querySelector('[data-create-list-form]');
      const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
      const createListTitle = stage.querySelector('[data-create-list-title]');
      const createListSegment = stage.querySelector('[data-create-list-form]');
      const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
      const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
-      const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
      const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
      const committedListIds = new Set(
        (stage.dataset.overlaySelectedLists ?? '')
@@ -220,7 +215,6 @@
          .filter(Boolean)
      );
      let draftListIds = new Set(committedListIds);
-      let updateCreateListButtonState = () => {};
      let resetAddToListDraftState = () => {};

      const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
@@ -242,23 +236,7 @@
        });
      };

-      if (confirmationInput && confirmationSubmitButton) {
-        const updateConfirmationState = () => {
-          const isValid = confirmationInput.value === expectedConfirmationValue;
-
-          confirmationSubmitButton.disabled = !isValid;
-          confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
-          confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
-        };
-
-        confirmationInput.addEventListener('input', updateConfirmationState);
-        updateConfirmationState();
-      }
-
-      if (overlayListButtons.length > 0) {
-        syncOverlayListState();
-
-        overlayListButtons.forEach((button) => {
+      const bindOverlayListButton = (button) => {
        button.addEventListener('click', (event) => {
          event.preventDefault();

@@ -275,30 +253,60 @@

          syncOverlayListState();
        });
-        });
+      };
+
+      const appendCreatedListButton = (title) => {
+        if (!overlayList) {
+          return null;
+        }
+
+        const listId = `created-${Date.now()}`;
+        const listItem = document.createElement('li');
+        listItem.className = 'sg-delete-confirmation-pattern__list-item';
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button';
+        button.dataset.overlayListToggle = '';
+        button.dataset.overlayListId = listId;
+        button.dataset.selected = 'true';
+        button.setAttribute('aria-pressed', 'true');
+
+        const icon = document.createElement('span');
+        icon.className = 'sg-delete-confirmation-pattern__list-icon';
+        icon.setAttribute('aria-hidden', 'true');
+
+        const label = document.createElement('span');
+        label.className = 'sg-delete-confirmation-pattern__list-label';
+        label.textContent = title;
+
+        button.append(icon, label);
+        listItem.appendChild(button);
+        overlayList.appendChild(listItem);
+        overlayListButtons.push(button);
+        bindOverlayListButton(button);
+
+        return listId;
+      };
+
+      if (confirmationInput && confirmationSubmitButton) {
+        const updateConfirmationState = () => {
+          const isValid = confirmationInput.value === expectedConfirmationValue;
+
+          confirmationSubmitButton.disabled = !isValid;
+          confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
+          confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+        };
+
+        confirmationInput.addEventListener('input', updateConfirmationState);
+        updateConfirmationState();
+      }
+
+      if (overlayListButtons.length > 0) {
+        syncOverlayListState();
      }

      if (createListForm && createListFormToggle) {
-        updateCreateListButtonState = () => {
-          if (!createListSubmitButton) {
-            return;
-          }
-
-          const hasName = Boolean(createListNameInput?.value.trim());
-          const hasDescription = Boolean(createListDescriptionInput?.value.trim());
-          const isActive = hasName || hasDescription;
-
-          createListSubmitButton.disabled = !isActive;
-          createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
-          createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
-        };
-
-        createListNameInput?.addEventListener('input', updateCreateListButtonState);
-        createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
-        createListForm.addEventListener('submit', (event) => {
-          event.preventDefault();
-        });
-
        resetAddToListDraftState = () => {
          draftListIds = new Set(committedListIds);
          syncOverlayListState();
@@ -319,11 +327,8 @@
          if (createListDescriptionInput) {
            createListDescriptionInput.value = '';
          }
-          updateCreateListButtonState();
        };

-        updateCreateListButtonState();
-
        createListFormToggle.addEventListener('click', (event) => {
          event.preventDefault();
          if (createListSegment) {
@@ -334,7 +339,6 @@
          createListFormToggle.classList.add('sg-button--inactive');
          createListFormToggle.disabled = true;
          createListFormToggle.setAttribute('aria-disabled', 'true');
-          updateCreateListButtonState();
        });
      }

@@ -388,6 +392,15 @@
        button.addEventListener('click', (event) => {
          event.preventDefault();
          if (isAddToListOverlay) {
+            const createdListTitle = createListNameInput?.value.trim() ?? '';
+            if (createdListTitle) {
+              const createdListId = appendCreatedListButton(createdListTitle);
+              if (createdListId) {
+                draftListIds.add(createdListId);
+                committedListIds.add(createdListId);
+              }
+            }
+
            committedListIds.clear();
            draftListIds.forEach((value) => committedListIds.add(value));
            stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');