gitea_admin/erp_naurua
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile bestellungen detail view

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-17 14:17:17 +02:00
parent 818bca5aff
commit c1d4f6d1e9
2 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/shared/auth/ui/home.php
+87
View File
@@ -551,6 +551,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " const currentTable = getTable();";
echo " return parseInt((currentTable ? currentTable.dataset.bestellungenPageSize : null) || '20', 10);";
echo " };";
echo " const isMobileDetailMode = () => window.matchMedia('(max-width: 767px)').matches;";
echo " const escapeHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[character] || character));";
echo " let bestellungenListSnapshot = '';";
echo " let bestellungenDetailOpen = false;";
echo " const syncSearchState = () => {";
echo " const input = getSearchInput();";
echo " const wrap = getSearchWrap();";
@@ -559,6 +563,48 @@ 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 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 " '<div data-bestellungen-mobile-detail=\"true\">',";
echo " '<div class=\"sg-navigation-card-layout\">',";
echo " '<div class=\"sg-navigation-card-block\">',";
echo " '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigations-Card\">',";
echo " '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">',";
echo " '<div class=\"sg-navigation-card-center\">',";
echo " '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>schliessen</button>',";
echo " '</div>',";
echo " '</div>',";
echo " '</article>',";
echo " '</div>',";
echo " '</div>',";
echo " '<article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Bestell-Details\">',";
echo " '<header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\">',";
echo " '<div class=\"sg-strong\">Bestell-Details</div>',";
echo " '</header>',";
echo " '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">',";
echo " '<p class=\"sg-body\"><strong>Bestellnummer:</strong> <span>' + escapeHtml(orderNumber) + '</span></p>',";
echo " '<p class=\"sg-body\"><strong>Bestelldatum:</strong> <span>' + escapeHtml(orderDate) + '</span></p>',";
echo " '<p class=\"sg-body\"><strong>Lieferadresse:</strong></p>',";
echo " '<p class=\"sg-body\">' + escapeHtml(streetLine) + '</p>',";
echo " '<p class=\"sg-body\">' + escapeHtml(cityLine) + '</p>',";
echo " '<p class=\"sg-body\">' + escapeHtml(country) + '</p>',";
echo " '<p class=\"sg-body\"><strong>Gesamtsumme:</strong> <span>' + escapeHtml(total) + '</span></p>',";
echo " '<p class=\"sg-body\">Detailinhalt wird noch definiert.</p>',";
echo " '</div>',";
echo " '</article>',";
echo " '</div>'";
echo " ].join('');";
echo " };";
echo " const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
echo " const setDrawerState = (open) => {";
@@ -579,6 +625,10 @@ 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 " openMobileDetail(trigger);";
echo " return;";
echo " }";
echo " const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
echo " const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
echo " const drawerOrderDate = drawer.querySelector('[data-order-drawer-order-date]');";
@@ -608,6 +658,27 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " button.setAttribute('aria-expanded', String(button === trigger));";
echo " });";
echo " };";
echo " const restoreBestellungenList = () => {";
echo " if (bestellungenListSnapshot === '') { return; }";
echo " contentRoot.innerHTML = bestellungenListSnapshot;";
echo " bestellungenListSnapshot = '';";
echo " bestellungenDetailOpen = false;";
echo " bindTable();";
echo " };";
echo " const openMobileDetail = (trigger) => {";
echo " bestellungenListSnapshot = contentRoot.innerHTML;";
echo " contentRoot.innerHTML = renderMobileDetail(trigger);";
echo " bestellungenDetailOpen = true;";
echo " window.history.pushState({ bestellungenView: 'detail', orderId: trigger.dataset.orderId || '' }, '', window.location.href);";
echo " };";
echo " const closeMobileDetail = () => {";
echo " if (!bestellungenDetailOpen) { return; }";
echo " if (window.history.state && window.history.state.bestellungenView === 'detail') {";
echo " window.history.back();";
echo " return;";
echo " }";
echo " restoreBestellungenList();";
echo " };";
echo " const buildUrl = (params) => {";
echo " const url = new URL(window.location.href);";
echo " url.hash = '';";
@@ -631,6 +702,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " return false;";
echo " }";
echo " contentRoot.innerHTML = fragment.innerHTML;";
echo " bestellungenListSnapshot = '';";
echo " bestellungenDetailOpen = false;";
echo " table = getTable();";
echo " return !!table;";
echo " };";
@@ -773,6 +846,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " openDrawer(openTrigger);";
echo " return;";
echo " }";
echo " const detailBackTrigger = event.target.closest('[data-bestellungen-detail-back]');";
echo " if (detailBackTrigger) {";
echo " event.preventDefault();";
echo " closeMobileDetail();";
echo " return;";
echo " }";
echo " const closeTrigger = event.target.closest('[data-order-drawer-close]');";
echo " if (closeTrigger) {";
echo " event.preventDefault();";
@@ -812,6 +891,14 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " closeDrawer();";
echo " }";
echo " });";
echo " window.addEventListener('popstate', (event) => {";
echo " if (bestellungenDetailOpen && (!event.state || event.state.bestellungenView !== 'detail')) {";
echo " restoreBestellungenList();";
echo " }";
echo " });";
echo " if (!window.history.state || window.history.state.bestellungenView !== 'list') {";
echo " window.history.replaceState({ bestellungenView: 'list' }, '', window.location.href);";
echo " }";
echo " }";
echo " bindTable();";
echo " connectBestellungenRealtime();";
public/assets/styles.portal.css
+4
View File
@@ -123,3 +123,7 @@ body.sg-otc-order-overlay-open {
.sg-large-table--bestellungen .sg-large-table__cell--header.sg-large-table__cell--amount .sg-large-table__sort-button {
justify-content: flex-end;
}
[data-bestellungen-mobile-detail] .sg-navigation-card-layout {
margin-top: 0;
}