From 3a56a24b00ac2b7564daeed8eb9d68ad42b97119 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Sun, 6 Sep 2026 21:18:37 +0200 Subject: [PATCH] Bestellungen mobil denselben Drawer wie Desktop verwenden --- modules/shared/auth/ui/home.php | 64 +++++++-------------------------- public/assets/styles.portal.css | 10 ++++++ 2 files changed, 23 insertions(+), 51 deletions(-) diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php index eadbece..102e95f 100644 --- a/modules/shared/auth/ui/home.php +++ b/modules/shared/auth/ui/home.php @@ -870,7 +870,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " const isMobileDetailMode = () => window.matchMedia('(max-width: 767px)').matches;"; echo " const escapeHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' }[character] || character));"; echo " let bestellungenMobileDetailHost = null;"; - echo " let bestellungenDetailOpen = false;"; + echo " let bestellungenDetailOpen = false; let bestellungenOpeningMobileDetail = false;"; echo " const syncSearchState = () => {"; echo " const input = getSearchInput();"; echo " const wrap = getSearchWrap();"; @@ -879,47 +879,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " wrap.setAttribute('data-has-value', String(hasValue));"; echo " wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';"; echo " };"; - echo " const renderMobileDetail = (trigger) => {"; - echo " const orderNumber = trigger.dataset.orderNumber || '';"; - echo " const orderDate = trigger.dataset.orderDate || '';"; - echo " const total = trigger.dataset.orderTotal || '';"; - echo " const street = trigger.dataset.orderStreet || '';"; - echo " const houseNumber = trigger.dataset.orderHouseNumber || '';"; - echo " const zip = trigger.dataset.orderZip || '';"; - echo " const city = trigger.dataset.orderCity || '';"; - echo " const country = trigger.dataset.orderCountry || '';"; - echo " const formatDate = (value) => value ? new Date(value).toLocaleString('de-CH', { dateStyle: 'short', timeStyle: 'short' }) : 'Nicht vorhanden';"; - echo " const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();"; - echo " const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();"; - echo " return ["; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '
',"; - echo " '

Bestellnummer: ' + escapeHtml(orderNumber) + '

',"; - echo " '

Bestelldatum: ' + escapeHtml(orderDate) + '

',"; - echo " '

Lieferadresse:

',"; - echo " '

' + escapeHtml(streetLine) + '

',"; - echo " '

' + escapeHtml(cityLine) + '

',"; - echo " '

' + escapeHtml(country) + '

',"; - echo " '

Gesamtsumme: ' + escapeHtml(total) + '

',"; - echo " '

Detailinhalt wird noch definiert.

',"; - echo " '
',"; - echo " '
',"; - echo " '
'"; - echo " ].join('');"; - echo " };"; - echo " const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');"; + echo " const renderMobileDetail = () => {"; + echo " return '
';"; + echo " };"; + echo " const getDrawer = () => document.querySelector('[data-bestellungen-mobile-drawer]') || contentRoot.querySelector('[data-bestellungen-drawer]');"; echo " const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');"; echo " const setDrawerState = (open) => {"; echo " const drawer = getDrawer();"; @@ -940,7 +903,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " const openDrawer = (trigger) => {"; echo " const drawer = getDrawer();"; echo " if (!drawer) { return; }"; - echo " if (isMobileDetailMode()) {"; + echo " if (isMobileDetailMode() && !bestellungenOpeningMobileDetail) {"; echo " openMobileDetail(trigger);"; echo " return;"; echo " }"; @@ -965,7 +928,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " });"; echo " };"; echo " const restoreBestellungenList = () => {"; - echo " if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) {"; + echo " if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) { const mobileDrawer = bestellungenMobileDetailHost.querySelector('[data-bestellungen-mobile-drawer]'); if (mobileDrawer) { contentRoot.appendChild(mobileDrawer); mobileDrawer.removeAttribute('data-bestellungen-mobile-drawer'); mobileDrawer.dataset.open = 'false'; mobileDrawer.setAttribute('aria-hidden', 'true'); } document.body.classList.remove('sg-card-list-page-drawer-open');"; echo " bestellungenMobileDetailHost.parentNode.removeChild(bestellungenMobileDetailHost);"; echo " }"; echo " bestellungenMobileDetailHost = null;"; @@ -975,14 +938,13 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " };"; echo " const openMobileDetail = (trigger) => {"; echo " restoreBestellungenList();"; + echo " const sourceDrawer = contentRoot.querySelector('[data-bestellungen-drawer]');"; + echo " if (!sourceDrawer) { return; }"; echo " const host = document.createElement('div');"; - echo " host.innerHTML = renderMobileDetail(trigger);"; + echo " host.innerHTML = renderMobileDetail();"; echo " bestellungenMobileDetailHost = host.firstElementChild;"; - echo " if (bestellungenMobileDetailHost) {"; - echo " document.body.appendChild(bestellungenMobileDetailHost);"; - echo " document.body.classList.add('sg-bestellungen-mobile-detail-open');"; - echo " }"; - echo " fetch('/api/bestellungen/detail.php?id=' + encodeURIComponent(trigger.dataset.orderId || ''), { credentials: 'same-origin' }).then((response) => response.ok ? response.json() : Promise.reject(new Error('Bestelldetails konnten nicht geladen werden.'))).then((payload) => { if (!payload.ok || !bestellungenMobileDetailHost) { throw new Error('Bestelldetails konnten nicht geladen werden.'); } const order = payload.order; const cards = bestellungenMobileDetailHost.querySelector('[data-bestellungen-mobile-cards]'); const lines = (order.lines || []).map((line) => '

' + escapeHtml(line.item_name) + ' · ' + escapeHtml(line.item_code) + ' · Menge: ' + escapeHtml(String(line.qty)) + ' · Status: ' + escapeHtml(line.line_status) + '

').join(''); const allocations = (order.lines || []).flatMap((line) => (line.product_allocations || []).map((item) => '

' + escapeHtml(item.product_name) + ': ' + escapeHtml(item.lot_number || 'Nicht zugeordnet') + ' · ' + escapeHtml(item.allocation_status || 'Nicht vorhanden') + '

')).join(''); if (cards) { cards.innerHTML = '
Bestellübersicht

Bestellnummer: ' + escapeHtml(order.external_ref) + '

Bestelldatum: ' + escapeHtml(formatDate(order.order_date)) + '

Verkaufskanal: ' + escapeHtml(order.order_source) + '

Status: ' + escapeHtml(order.order_status) + '

Bestellte Artikel
' + (lines || '

Keine Artikel vorhanden.

') + '
Chargenzuordnung
' + (allocations || '

Keine Chargenzuordnung vorhanden.

') + '
'; } }).catch((error) => { const cards = bestellungenMobileDetailHost?.querySelector('[data-bestellungen-mobile-cards]'); if (cards) { cards.innerHTML = '

' + escapeHtml(error.message) + '

'; } });"; + echo " if (bestellungenMobileDetailHost) { const mobileDrawer = sourceDrawer; mobileDrawer.dataset.bestellungenMobileDrawer = 'true'; mobileDrawer.dataset.open = 'true'; mobileDrawer.setAttribute('aria-hidden', 'false'); bestellungenMobileDetailHost.appendChild(mobileDrawer); document.body.appendChild(bestellungenMobileDetailHost); document.body.classList.add('sg-bestellungen-mobile-detail-open'); }"; + echo " bestellungenOpeningMobileDetail = true; openDrawer(trigger); bestellungenOpeningMobileDetail = false;"; echo " bestellungenDetailOpen = true;"; echo " window.history.pushState({ bestellungenView: 'detail', orderId: trigger.dataset.orderId || '' }, '', window.location.href);"; echo " };"; @@ -1136,7 +1098,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best echo " closeMobileDetail();"; echo " }"; echo " });"; - echo " contentRoot.addEventListener('click', (event) => {"; + echo " document.addEventListener('click', (event) => {"; echo " const openTrigger = event.target.closest('[data-order-drawer-open]');"; echo " if (openTrigger) {"; echo " event.preventDefault();"; diff --git a/public/assets/styles.portal.css b/public/assets/styles.portal.css index 6d03b3f..9ae7644 100644 --- a/public/assets/styles.portal.css +++ b/public/assets/styles.portal.css @@ -106,6 +106,16 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) { overflow: visible; } +.sg-bestellungen-mobile-detail-host .sg-card-list-page-drawer { + position: static; + display: flex; + width: 100%; + max-width: none; + transform: none; + box-shadow: none; + overflow: visible; +} + .sg-mobile-detail-back-card, .sg-mobile-detail-back-card * { cursor: pointer;