Use compact document removal controls

modules/shared/auth/ui/home.php

@@ -326,7 +326,7 @@ function auth_render_lager_documents(array $documents, bool $editable, string $s
         foreach ($documents as $document) {
             $documentId = (int) ($document['id'] ?? 0);
             $filename = (string) ($document['original_filename'] ?? 'Dokument');
-            $html .= '<div class="sg-form-sections-card__field-group" data-lager-document-edit-row="' . $documentId . '"><span class="sg-body">' . auth_escape_html($filename) . '</span><button class="sg-interaction-element sg-button sg-button--warning" type="button" data-lager-document-delete="' . $documentId . '">Löschen</button><article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" role="dialog" aria-modal="true" aria-labelledby="lager-document-delete-title-' . $documentId . '" data-lager-document-confirmation="' . $documentId . '" hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-document-delete-title-' . $documentId . '"><strong>Dokument löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-document-delete-input="' . $documentId . '"></label><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-document-delete-cancel="' . $documentId . '">Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled data-lager-document-delete-confirm="' . $documentId . '">Löschen</button></div></div></article></div>';
+            $html .= '<div class="sg-form-sections-card__field-group" data-lager-document-edit-row="' . $documentId . '"><span class="sg-body">' . auth_escape_html($filename) . ' <span class="sg-tab-button-group" role="tablist" aria-label="Dokument entfernen" data-component="tab-navigation" data-component-size="compact"><button class="sg-interaction-element sg-button sg-tab-button sg-tab-button--compact" type="button" role="tab" aria-selected="false" data-component-part="tab-button" aria-label="Dokument entfernen: ' . auth_escape_html($filename) . '" data-lager-document-delete="' . $documentId . '">×</button></span></span></div>';
         }
         $html .= '<div class="sg-file-upload" data-pattern="file-upload" data-lager-document-upload-form="' . auth_escape_html($scope) . '"><div class="sg-file-input" data-component="file-input"><div class="sg-file-upload__dropzone sg-labeled-input-row"><label class="sg-label" for="lager-document-file-' . auth_escape_html($scope) . '">Dateien auswählen</label><input class="sg-file-input__control" id="lager-document-file-' . auth_escape_html($scope) . '" type="file" multiple aria-describedby="lager-document-file-status-' . auth_escape_html($scope) . '" data-lager-document-file><button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button" data-lager-document-file-trigger>Dateien auswählen</button></div></div><ul class="sg-file-upload__files" data-lager-document-selected-files hidden></ul><p class="sg-body sg-file-upload__status" id="lager-document-file-status-' . auth_escape_html($scope) . '" data-lager-document-status aria-live="polite">Noch keine Dateien ausgewählt.</p></div>';
         $html .= '</div>';
@@ -853,10 +853,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  };";
     echo "  const getLagerWarningTitle = (trigger) => trigger.dataset.lagerDrawerForecastStatus === 'depleted' ? 'Warnung: Charge ist aufgebraucht' : (trigger.dataset.lagerDrawerForecastMhdWarning === 'true' ? 'Warnung: MHD wird vor Chargenende erreicht' : (trigger.dataset.lagerDrawerForecastWarning === 'true' ? 'Warnung: Charge wird innerhalb von drei Monaten aufgebraucht sein' : 'Keine Warnung'));";
     echo "  const escapeLagerHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[character] || character));";
-    echo "  const renderLagerDocumentRows = (documents, editable) => { if (!documents.length) { return '<p class=\"sg-body\">Keine Dokumente vorhanden.</p>'; } return documents.map((document) => { const id = Number(document.id || 0); const filename = escapeLagerHtml(document.original_filename || 'Dokument'); if (!editable) { return '<p class=\"sg-body\" data-lager-document-row=\"' + id + '\"><a class=\"sg-hyperlink\" href=\"/api/lager-document.php?id=' + id + '\" data-component=\"hyperlink\">' + filename + '</a></p>'; } return '<div class=\"sg-form-sections-card__field-group\" data-lager-document-edit-row=\"' + id + '\"><span class=\"sg-body\">' + filename + '</span><button class=\"sg-interaction-element sg-button sg-button--warning\" type=\"button\" data-lager-document-delete=\"' + id + '\">Löschen</button></div>'; }).join(''); };";
+    echo "  const renderLagerDocumentRows = (documents, editable) => { if (!documents.length) { return '<p class=\"sg-body\">Keine Dokumente vorhanden.</p>'; } return documents.map((document) => { const id = Number(document.id || 0); const filename = escapeLagerHtml(document.original_filename || 'Dokument'); if (!editable) { return '<p class=\"sg-body\" data-lager-document-row=\"' + id + '\"><a class=\"sg-hyperlink\" href=\"/api/lager-document.php?id=' + id + '\" data-component=\"hyperlink\">' + filename + '</a></p>'; } return '<div class=\"sg-form-sections-card__field-group\" data-lager-document-edit-row=\"' + id + '\"><span class=\"sg-body\">' + filename + ' <span class=\"sg-tab-button-group\" role=\"tablist\" aria-label=\"Dokument entfernen\" data-component=\"tab-navigation\" data-component-size=\"compact\"><button class=\"sg-interaction-element sg-button sg-tab-button sg-tab-button--compact\" type=\"button\" role=\"tab\" aria-selected=\"false\" data-component-part=\"tab-button\" aria-label=\"Dokument entfernen: ' + filename + '\" data-lager-document-delete=\"' + id + '\">×</button></span></span></div>'; }).join(''); };";
     echo "  const syncLagerDocumentViews = (root, documents) => { const read = root?.querySelector('[data-lager-documents-read]'); const edit = root?.querySelector('[data-lager-documents-edit]'); const upload = root?.querySelector('[data-lager-document-upload-form]'); if (read) { read.innerHTML = renderLagerDocumentRows(documents, false); } if (edit) { edit.innerHTML = renderLagerDocumentRows(documents, true); if (upload) { edit.appendChild(upload); } } };";
     echo "  const syncLagerCurrentDocuments = (trigger) => { const drawer = getDrawer(); if (!drawer) { return; } let documents = []; try { documents = JSON.parse(trigger.dataset.lagerDrawerDocuments || '[]'); } catch (error) { documents = []; } syncLagerDocumentViews(drawer.querySelector('[data-lager-documents=\"current-read\"]'), documents); syncLagerDocumentViews(drawer.querySelector('[data-lager-documents=\"current-edit\"]'), documents); };";
-    echo "  const renderLagerSelectedFiles = (scope) => { const input = scope?.querySelector('[data-lager-document-file]'); const list = scope?.querySelector('[data-lager-document-selected-files]'); const status = scope?.querySelector('[data-lager-document-status]'); if (!input || !list) { return; } const files = Array.from(input.files || []); list.replaceChildren(...files.map((file, index) => { const item = document.createElement('li'); item.className = 'sg-file-upload__file'; const name = document.createElement('span'); name.className = 'sg-file-upload__file-name sg-body'; name.append(document.createTextNode(file.name + ' ')); const remove = document.createElement('button'); remove.className = 'sg-interaction-element sg-button sg-tab-button sg-tab-button--compact sg-file-upload__remove'; remove.type = 'button'; remove.setAttribute('role', 'tab'); remove.setAttribute('aria-selected', 'false'); remove.setAttribute('data-component-part', 'tab-button'); remove.setAttribute('aria-label', 'Datei entfernen: ' + file.name); remove.dataset.lagerDocumentRemoveIndex = String(index); remove.textContent = '×'; name.append(remove); item.append(name); return item; })); list.hidden = files.length === 0; if (status && !status.textContent.includes('Upload') && !status.textContent.includes('hochgeladen')) { status.textContent = files.length ? files.length + ' Datei(en) ausgewählt.' : 'Noch keine Dateien ausgewählt.'; } };";
+    echo "  const renderLagerSelectedFiles = (scope) => { const input = scope?.querySelector('[data-lager-document-file]'); const list = scope?.querySelector('[data-lager-document-selected-files]'); const status = scope?.querySelector('[data-lager-document-status]'); if (!input || !list) { return; } const files = Array.from(input.files || []); list.replaceChildren(...files.map((file, index) => { const item = document.createElement('li'); item.className = 'sg-file-upload__file'; const name = document.createElement('span'); name.className = 'sg-file-upload__file-name sg-body'; name.append(document.createTextNode(file.name + ' ')); const navigation = document.createElement('span'); navigation.className = 'sg-tab-button-group'; navigation.setAttribute('role', 'tablist'); navigation.setAttribute('aria-label', 'Datei entfernen'); navigation.dataset.component = 'tab-navigation'; navigation.dataset.componentSize = 'compact'; const remove = document.createElement('button'); remove.className = 'sg-interaction-element sg-button sg-tab-button sg-tab-button--compact sg-file-upload__remove'; remove.type = 'button'; remove.setAttribute('role', 'tab'); remove.setAttribute('aria-selected', 'false'); remove.setAttribute('data-component-part', 'tab-button'); remove.setAttribute('aria-label', 'Datei entfernen: ' + file.name); remove.dataset.lagerDocumentRemoveIndex = String(index); remove.textContent = '×'; navigation.append(remove); name.append(navigation); item.append(name); return item; })); list.hidden = files.length === 0; if (status && !status.textContent.includes('Upload') && !status.textContent.includes('hochgeladen')) { status.textContent = files.length ? files.length + ' Datei(en) ausgewählt.' : 'Noch keine Dateien ausgewählt.'; } };";
     echo "  const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };";
     echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } const drawer = getDrawer(); const forecast = drawer?.querySelector('[data-lager-drawer-forecast-value]'); if (forecast) { forecast.textContent = trigger.dataset.lagerDrawerForecast || 'Keine Prognose'; } syncLagerCurrentDocuments(trigger); });";
     echo "  const getLagerForecastWarningText = (forecast, trigger, text) => { if (forecast?.status === 'depleted' || trigger?.dataset.lagerDrawerForecastStatus === 'depleted') { return 'Die Charge ist aufgebraucht. Voraussichtlich leer: ' + text + '.'; } if (trigger?.dataset.lagerDrawerForecastMhdWarning === 'true') { const expiry = trigger.dataset.lagerDrawerExpiryDate ? new Date(trigger.dataset.lagerDrawerExpiryDate + 'T00:00:00').toLocaleDateString('de-CH') : 'dem MHD'; return 'Das MHD wird am ' + expiry + ' erreicht, bevor das Lager leer ist. Voraussichtlich leer: ' + text + '.'; } if (trigger?.dataset.lagerDrawerForecastWarning === 'true') { return 'Voraussichtlich leer: ' + text + '.'; } return 'Keine akute Warnung.'; };";
@@ -878,9 +878,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  document.addEventListener('drop', (event) => { const dropzone = event.target.closest('[data-lager-document-upload-form] .sg-file-upload__dropzone'); if (!dropzone) { return; } event.preventDefault(); delete dropzone.dataset.dragOver; const input = dropzone.closest('[data-lager-document-upload-form]')?.querySelector('[data-lager-document-file]'); if (input && event.dataTransfer?.files) { input.files = event.dataTransfer.files; input.dispatchEvent(new Event('change', { bubbles: true })); } });";
     echo "  document.addEventListener('change', (event) => { const input = event.target.closest('[data-lager-document-file]'); if (!input) { return; } const form = input.closest('[data-lager-document-upload-form]'); renderLagerSelectedFiles(form); });";
     echo "  const uploadLagerDocuments = async (scope, lotId) => { const files = Array.from(scope?.querySelectorAll('[data-lager-document-file]') || []).flatMap((input) => Array.from(input.files || [])); if (!files.length) { return []; } const status = scope.querySelector('[data-lager-document-status]'); const uploaded = []; const errorMessage = (error) => error instanceof Error ? error.message : 'Upload fehlgeschlagen'; if (files.some((file) => file.size > 52428800)) { const error = new Error('Dokument darf maximal 50 MB groß sein.'); if (status) { status.textContent = error.message; } throw error; } if (status) { status.textContent = 'Upload läuft …'; } try { for (const file of files) { const data = new FormData(); data.append('action', 'upload_document'); data.append('csrfToken', contentRoot.querySelector('[data-lager-csrf-token]')?.dataset.lagerCsrfToken || ''); data.append('lotId', lotId || ''); data.append('document', file); const response = await fetch('/api/lager-charge.php', { method: 'POST', body: data }); const result = await response.json(); if (!response.ok || result.ok !== true) { throw new Error(result.error || 'Upload fehlgeschlagen'); } uploaded.push(result.document); } } catch (error) { if (status) { status.textContent = errorMessage(error); } throw error; } if (status) { status.textContent = files.length + ' Datei(en) hochgeladen.'; } return uploaded; };";
-    echo "  document.addEventListener('click', (event) => { const open = event.target.closest('[data-lager-document-delete]'); if (!open) { return; } const row = open.closest('[data-lager-document-edit-row]'); const id = open.dataset.lagerDocumentDelete; if (row?.querySelector('[data-lager-document-confirmation]')) { return; } const confirmation = document.createElement('article'); confirmation.className = 'sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card'; confirmation.setAttribute('role', 'dialog'); confirmation.setAttribute('aria-modal', 'true'); confirmation.dataset.lagerDocumentConfirmation = id; confirmation.innerHTML = '<div class=\"sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body\"><p class=\"sg-body sg-delete-confirmation-pattern__text\"><strong>Dokument löschen?</strong></p><p class=\"sg-body sg-delete-confirmation-pattern__text\">Bestätige durch Eingabe von <span class=\"sg-delete-confirmation-pattern__code\">DELETE</span>.</p><label class=\"sg-labeled-input-row\"><span class=\"sg-label\">Bestätigung</span><input class=\"sg-interaction-element sg-input-single-line\" type=\"text\" data-lager-document-delete-input=\"' + id + '\"></label><div class=\"sg-delete-confirmation-pattern__actions\"><button class=\"sg-interaction-element sg-button sg-button--active\" type=\"button\" data-lager-document-delete-cancel=\"' + id + '\">Abbrechen</button><button class=\"sg-interaction-element sg-button sg-button--process sg-button--process-inactive\" type=\"button\" disabled data-lager-document-delete-confirm=\"' + id + '\">Löschen</button></div></div>'; row.appendChild(confirmation); });";
+    echo "  document.addEventListener('click', async (event) => { const remove = event.target.closest('[data-lager-document-delete]'); if (!remove) { return; } remove.disabled = true; try { await postLagerChange({ action: 'delete_document', documentId: remove.dataset.lagerDocumentDelete }); window.location.reload(); } catch (error) { remove.disabled = false; remove.setCustomValidity(error instanceof Error ? error.message : 'Dokument konnte nicht entfernt werden'); remove.reportValidity(); } });";
-    echo "  document.addEventListener('input', (event) => { const input = event.target.closest('[data-lager-document-delete-input]'); if (!input) { return; } const button = input.closest('[data-lager-document-confirmation]')?.querySelector('[data-lager-document-delete-confirm]'); const valid = input.value === 'DELETE'; if (button) { button.disabled = !valid; button.setAttribute('aria-disabled', String(!valid)); button.classList.toggle('sg-button--process-inactive', !valid); } });";
-    echo "  document.addEventListener('click', async (event) => { const open = event.target.closest('[data-lager-document-delete]'); if (open) { const id = open.dataset.lagerDocumentDelete; const confirmation = open.closest('[data-lager-document-edit-row]')?.querySelector('[data-lager-document-confirmation=\"' + id + '\"]'); if (confirmation) { confirmation.hidden = false; } return; } const cancel = event.target.closest('[data-lager-document-delete-cancel]'); if (cancel) { const confirmation = cancel.closest('[data-lager-document-confirmation]'); if (confirmation) { confirmation.hidden = true; } return; } const confirm = event.target.closest('[data-lager-document-delete-confirm]'); if (!confirm || confirm.disabled) { return; } const confirmation = confirm.closest('[data-lager-document-confirmation]'); const id = confirm.dataset.lagerDocumentDeleteConfirm; confirm.disabled = true; try { await postLagerChange({ action: 'delete_document', documentId: id }); window.location.reload(); } catch (error) { confirm.disabled = false; const input = confirmation?.querySelector('[data-lager-document-delete-input]'); if (input) { input.setCustomValidity(error instanceof Error ? error.message : 'Dokument konnte nicht gelöscht werden'); input.reportValidity(); } } });";
     echo "  document.addEventListener('click', (event) => { const editButton = event.target.closest('[data-lager-edit-open]'); if (editButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = false; } return; } const closeButton = event.target.closest('[data-lager-edit-close]'); if (closeButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = true; } } });";
     echo "  const setLagerEditMode = (editing) => { const drawer = getDrawer(); const readView = drawer?.querySelector('[data-lager-read-view]'); const readDocuments = drawer?.querySelector('[data-lager-documents=\"current-read\"]'); const editForm = drawer?.querySelector('[data-lager-edit-form]'); const documents = drawer?.querySelector('[data-lager-edit-documents=\"current-edit\"]'); const actions = drawer?.querySelector('[data-lager-edit-actions]'); if (readView) { readView.hidden = editing; } if (readDocuments) { readDocuments.hidden = editing; } if (editForm) { editForm.hidden = !editing; } if (documents) { documents.hidden = !editing; } if (actions) { actions.hidden = !editing; } };";
     echo "  document.addEventListener('click', (event) => { if (event.target.closest('[data-lager-edit-open]')) { setLagerEditMode(true); } if (event.target.closest('[data-lager-edit-close]')) { clearLagerMovementInputs(); setLagerEditMode(false); } });";