Kostenpositions-Overlay ohne zusaetzlichen Observer binden

modules/shared/auth/ui/home.php

@@ -1188,9 +1188,9 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
     echo "  const marketCostItemObserver = new MutationObserver(() => enhanceMarketCostItems(contentRoot)); marketCostItemObserver.observe(contentRoot, { childList: true, subtree: true }); enhanceMarketCostItems(contentRoot);";
     echo "  const normalizeMarketCostItems = (root) => { root.querySelectorAll('[data-market-edit-form][data-market-edit-scope=participation]').forEach((form) => { const field = form.querySelector('[data-market-cost-items-editor]')?.parentElement; if (!field || field.dataset.marketCostItemsNormalized === 'true') { return; } const chapter = document.createElement('section'); chapter.className = 'sg-form-sections-card__chapter'; const title = document.createElement('h2'); title.className = 'sg-strong sg-form-sections-card__chapter-title'; title.textContent = 'Kostenpositionen'; chapter.appendChild(title); while (field.firstChild) { chapter.appendChild(field.firstChild); } field.replaceWith(chapter); form._marketCostItemsField = chapter; const render = form._marketCostItemRender; form._marketCostItemRender = () => { render(); form.querySelectorAll('[data-market-cost-item-save], [data-market-cost-item-delete], [data-market-cost-item-cancel]').forEach((button) => button.remove()); form.querySelectorAll('[data-market-cost-item-row] .sg-component-row').forEach((actions) => actions.remove()); }; form._marketCostItemRender(); chapter.dataset.marketCostItemsNormalized = 'true'; }); }; const collectMarketCostItems = (form) => Array.from(form.querySelectorAll('[data-market-cost-item-row]')).map((row) => { const item = Object.fromEntries(Array.from(row.querySelectorAll('[data-market-cost-field]')).map((input) => [input.dataset.marketCostField, input.value])); if (row.dataset.marketCostItemId) { item.id = Number(row.dataset.marketCostItemId); } return item; });";
     echo "  const marketCostItemsNormalizationObserver = new MutationObserver(() => normalizeMarketCostItems(contentRoot)); marketCostItemsNormalizationObserver.observe(contentRoot, { childList: true, subtree: true }); normalizeMarketCostItems(contentRoot);";
-    echo "  const enhanceMarketCostTypeControls = (root) => { const drawer = getMarketDrawer(); const payload = drawer?.dataset.marketPayload ? JSON.parse(drawer.dataset.marketPayload) : null; const types = Array.isArray(payload?.occurrence?.reference_options?.cost_types) ? payload.occurrence.reference_options.cost_types : []; root.querySelectorAll('[data-market-edit-form][data-market-edit-scope=participation] [data-market-cost-item-row]').forEach((row, index) => { const old = row.querySelector('[data-market-cost-field=cost_type]'); if (old && old.tagName === 'INPUT') { const select = document.createElement('select'); select.className = 'sg-interaction-element sg-input-single-line sg-pulldown'; select.dataset.marketCostField = 'cost_type_id'; select.innerHTML = types.map((type) => '<option value=\"' + marketEscape(type.id) + '\">' + marketEscape(type.name) + '</option>').join('') + '<option value=\"__new__\">Neue Kostenart anlegen</option>'; const selected = types.find((type) => String(type.name) === String(old.value)); select.value = selected ? String(selected.id) : ''; old.replaceWith(select); } const select = row.querySelector('[data-market-cost-field=cost_type_id]'); if (!select || select.dataset.marketCostTypeBound === 'true') { return; } const syncNew = () => { row.querySelector('[data-market-new-cost-type]')?.remove(); if (select.value === '__new__') { row.insertAdjacentHTML('beforeend', '<label class=\"sg-labeled-input-row\" data-market-new-cost-type><span class=\"sg-label\">Neue Kostenart</span><input class=\"sg-interaction-element sg-input-single-line\" type=\"text\" data-market-cost-field=\"cost_type_name\" required></label>'); } }; select.addEventListener('change', syncNew); select.dataset.marketCostTypeBound = 'true'; syncNew(); if (index > 0 && !row.querySelector('[data-market-cost-item-remove]')) { row.insertAdjacentHTML('beforeend', '<div class=\"market-cost-item-delete-actions\"><button class=\"sg-interaction-element sg-button sg-button--warning\" type=\"button\" data-market-cost-item-remove>Löschen</button></div>'); } }); }; const marketCostTypeObserver = new MutationObserver(() => enhanceMarketCostTypeControls(contentRoot)); marketCostTypeObserver.observe(contentRoot, { childList: true, subtree: true }); enhanceMarketCostTypeControls(contentRoot);";
+    echo "  const enhanceMarketCostTypeControls = (root) => { const drawer = getMarketDrawer(); const payload = drawer?.dataset.marketPayload ? JSON.parse(drawer.dataset.marketPayload) : null; const types = Array.isArray(payload?.occurrence?.reference_options?.cost_types) ? payload.occurrence.reference_options.cost_types : []; root.querySelectorAll('[data-market-edit-form][data-market-edit-scope=participation] [data-market-cost-item-row]').forEach((row, index) => { const old = row.querySelector('[data-market-cost-field=cost_type]'); if (old && old.tagName === 'INPUT') { const select = document.createElement('select'); select.className = 'sg-interaction-element sg-input-single-line sg-pulldown'; select.dataset.marketCostField = 'cost_type_id'; select.innerHTML = types.map((type) => '<option value=\"' + marketEscape(type.id) + '\">' + marketEscape(type.name) + '</option>').join('') + '<option value=\"__new__\">Neue Kostenart anlegen</option>'; const selected = types.find((type) => String(type.name) === String(old.value)); select.value = selected ? String(selected.id) : ''; old.replaceWith(select); } const select = row.querySelector('[data-market-cost-field=cost_type_id]'); if (!select || select.dataset.marketCostTypeBound === 'true') { return; } const syncNew = () => { row.querySelector('[data-market-new-cost-type]')?.remove(); if (select.value === '__new__') { row.insertAdjacentHTML('beforeend', '<label class=\"sg-labeled-input-row\" data-market-new-cost-type><span class=\"sg-label\">Neue Kostenart</span><input class=\"sg-interaction-element sg-input-single-line\" type=\"text\" data-market-cost-field=\"cost_type_name\" required></label>'); } }; select.addEventListener('change', syncNew); select.dataset.marketCostTypeBound = 'true'; syncNew(); if (index > 0 && !row.querySelector('[data-market-cost-item-remove]')) { row.insertAdjacentHTML('beforeend', '<div class=\"market-cost-item-delete-actions\"><button class=\"sg-interaction-element sg-button sg-button--warning\" type=\"button\" data-market-cost-item-remove>Löschen</button></div>'); } }); }; const marketCostTypeObserver = new MutationObserver(() => { enhanceMarketCostTypeControls(contentRoot); enhanceMarketCostDeletePatterns(contentRoot); }); marketCostTypeObserver.observe(contentRoot, { childList: true, subtree: true }); enhanceMarketCostTypeControls(contentRoot);";
     echo "  const marketCostDeleteConfirmation = () => '<article class=\"sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card\" aria-label=\"Löschbestätigung für Kostenposition\" role=\"dialog\" aria-modal=\"true\" data-overlay-dialog=\"delete\" data-shared-editable-card-delete-confirmation hidden><div class=\"sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body\"><p class=\"sg-body sg-delete-confirmation-pattern__text\"><strong>Möchtest du diese Kostenposition wirklich löschen?</strong></p><p class=\"sg-body sg-delete-confirmation-pattern__text\">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class=\"sg-delete-confirmation-pattern__code\">DELETE</span>.</p><label class=\"sg-labeled-input-row sg-delete-confirmation-pattern__input-row\"><span class=\"sg-label\">Bestätigung</span><input class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable\" type=\"text\" placeholder=\"DELETE\" aria-label=\"Löschbestätigung durch DELETE\" data-shared-editable-card-delete-input></label><p class=\"sg-body\" data-market-cost-item-delete-status aria-live=\"polite\"></p><div class=\"sg-delete-confirmation-pattern__actions\"><button class=\"sg-interaction-element sg-button sg-button--active\" type=\"button\" data-shared-editable-card-delete-cancel>Abbrechen</button><button class=\"sg-interaction-element sg-button sg-button--process sg-button--process-inactive\" type=\"button\" disabled aria-disabled=\"true\" data-shared-editable-card-delete-submit data-market-cost-item-delete-submit>Löschen</button></div></div></article>'";
-    echo "  const enhanceMarketCostDeletePatterns = (root) => { root.querySelectorAll('[data-market-edit-form][data-market-edit-scope=participation] [data-market-cost-item-row]').forEach((row, index) => { if (index === 0 || row.dataset.marketCostDeletePatternBound === 'true') { return; } const remove = row.querySelector('[data-market-cost-item-remove]'); if (!remove) { return; } const stage = document.createElement('div'); stage.className = 'sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host'; stage.dataset.pattern = 'overlay-card'; stage.dataset.dialogOpen = 'false'; const target = document.createElement('div'); target.className = 'sg-delete-confirmation-pattern__target'; target.dataset.sharedEditableActionCard = ''; target.dataset.sharedEditableDeleteToken = 'DELETE'; target.dataset.marketCostItemDeleteCard = 'true'; row.parentNode.insertBefore(stage, row); stage.appendChild(target); target.appendChild(row); remove.dataset.sharedEditableCardDelete = ''; const confirmation = document.createElement('div'); confirmation.innerHTML = marketCostDeleteConfirmation(); const confirmationCard = confirmation.firstElementChild; confirmationCard.setAttribute('aria-labelledby', 'market-cost-item-delete-title-' + (row.dataset.marketCostItemId || index)); confirmationCard.querySelector('strong').parentElement.id = 'market-cost-item-delete-title-' + (row.dataset.marketCostItemId || index); target.appendChild(confirmationCard); row.dataset.marketCostDeletePatternBound = 'true'; }); }; const marketCostDeletePatternObserver = new MutationObserver(() => enhanceMarketCostDeletePatterns(contentRoot)); marketCostDeletePatternObserver.observe(contentRoot, { childList: true, subtree: true }); enhanceMarketCostDeletePatterns(contentRoot);";
+    echo "  const enhanceMarketCostDeletePatterns = (root) => { root.querySelectorAll('[data-market-edit-form][data-market-edit-scope=participation] [data-market-cost-item-row]').forEach((row, index) => { if (index === 0 || row.dataset.marketCostDeletePatternBound === 'true') { return; } const remove = row.querySelector('[data-market-cost-item-remove]'); if (!remove) { return; } const stage = document.createElement('div'); stage.className = 'sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host'; stage.dataset.pattern = 'overlay-card'; stage.dataset.dialogOpen = 'false'; const target = document.createElement('div'); target.className = 'sg-delete-confirmation-pattern__target'; target.dataset.sharedEditableActionCard = ''; target.dataset.sharedEditableDeleteToken = 'DELETE'; target.dataset.marketCostItemDeleteCard = 'true'; row.parentNode.insertBefore(stage, row); stage.appendChild(target); target.appendChild(row); remove.dataset.sharedEditableCardDelete = ''; const confirmation = document.createElement('div'); confirmation.innerHTML = marketCostDeleteConfirmation(); const confirmationCard = confirmation.firstElementChild; confirmationCard.setAttribute('aria-labelledby', 'market-cost-item-delete-title-' + (row.dataset.marketCostItemId || index)); confirmationCard.querySelector('strong').parentElement.id = 'market-cost-item-delete-title-' + (row.dataset.marketCostItemId || index); target.appendChild(confirmationCard); row.dataset.marketCostDeletePatternBound = 'true'; }); };";
     echo "  const removeMarketCostChapterLabel = (root) => { root.querySelectorAll('[data-market-cost-items-editor]').forEach((editor) => { const chapter = editor.parentElement; const label = Array.from(chapter?.children || []).find((child) => child.matches('label.sg-labeled-input-row')); label?.remove(); }); }; const marketCostChapterLabelObserver = new MutationObserver(() => removeMarketCostChapterLabel(contentRoot)); marketCostChapterLabelObserver.observe(contentRoot, { childList: true, subtree: true }); removeMarketCostChapterLabel(contentRoot);";
     echo "  if (!marketsBindingsInstalled) {";
     echo "    marketsBindingsInstalled = true;";