desktop/system/apps/admin-apps/assets/app.js

(() => {
    const normalizeUrl = (url) => {
        const next = new URL(url, window.location.origin);
        next.searchParams.set('partial', '1');
        return next.toString();
    };

    const renderError = (host, message) => {
        host.innerHTML = `
            <div class="window-app-shell aa-shell">
                <div class="window-app-frame aa-frame">
                    <main class="window-app-main aa-main">
                        <div class="window-app-panel aa-panel">
                            <section class="window-app-card aa-card">
                                <p class="aa-message is-error">${String(message || 'Admin Apps konnte nicht geladen werden.')}</p>
                            </section>
                        </div>
                    </main>
                </div>
            </div>
        `;
    };

    const bindInteractions = (host, loadRoute) => {
        host.querySelectorAll('[data-aa-open-modal]').forEach((button) => {
            if (button.dataset.aaBound === '1') {
                return;
            }

            button.dataset.aaBound = '1';
            button.addEventListener('click', () => {
                const modalId = button.getAttribute('data-aa-open-modal') || '';
                const modal = host.querySelector(`[data-aa-modal="${CSS.escape(modalId)}"]`);
                if (modal instanceof HTMLDialogElement) {
                    modal.showModal();
                }
            });
        });

        host.querySelectorAll('[data-aa-close-modal]').forEach((button) => {
            if (button.dataset.aaBound === '1') {
                return;
            }

            button.dataset.aaBound = '1';
            button.addEventListener('click', () => {
                const modal = button.closest('dialog');
                if (modal instanceof HTMLDialogElement) {
                    modal.close();
                }
            });
        });

        host.querySelectorAll('dialog[data-aa-modal]').forEach((dialog) => {
            if (dialog.dataset.aaBound === '1') {
                return;
            }

            dialog.dataset.aaBound = '1';
            dialog.addEventListener('click', (event) => {
                const rect = dialog.getBoundingClientRect();
                const inside = event.clientX >= rect.left
                    && event.clientX <= rect.right
                    && event.clientY >= rect.top
                    && event.clientY <= rect.bottom;

                if (!inside) {
                    dialog.close();
                }
            });
        });

        host.querySelectorAll('a[href]').forEach((link) => {
            if (link.dataset.aaBound === '1') {
                return;
            }

            const href = String(link.getAttribute('href') || '');
            if (!href.startsWith('/admin/apps/')) {
                return;
            }

            link.dataset.aaBound = '1';
            link.addEventListener('click', (event) => {
                event.preventDefault();
                loadRoute(href);
            });
        });

        host.querySelectorAll('form[action]').forEach((form) => {
            if (form.dataset.aaBound === '1') {
                return;
            }

            const action = String(form.getAttribute('action') || '');
            if (!action.startsWith('/admin/apps/')) {
                return;
            }

            form.dataset.aaBound = '1';
            form.addEventListener('submit', async (event) => {
                event.preventDefault();

                try {
                    host.classList.add('is-loading');
                    const response = await fetch(normalizeUrl(action), {
                        method: 'POST',
                        credentials: 'same-origin',
                        body: new FormData(form),
                    });

                    const html = await response.text();
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }

                    const modal = form.closest('dialog');
                    if (modal instanceof HTMLDialogElement) {
                        modal.close();
                    }

                    host.innerHTML = html;
                    bindInteractions(host, loadRoute);
                } catch (error) {
                    renderError(host, error?.message || 'Admin Apps konnte nicht gespeichert werden.');
                } finally {
                    host.classList.remove('is-loading');
                }
            });
        });
    };

    window.initAdminAppsApp = function initAdminAppsApp(host, options = {}) {
        if (!(host instanceof Element)) {
            return;
        }

        if (host.dataset.aaAppBound === '1') {
            return;
        }

        host.dataset.aaAppBound = '1';

        const entryRoute = String(options.entryRoute || '/admin/apps/');
        const loadRoute = async (route) => {
            try {
                host.classList.add('is-loading');
                const response = await fetch(normalizeUrl(route), {
                    credentials: 'same-origin',
                    headers: { Accept: 'text/html' },
                });
                const html = await response.text();
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }

                host.innerHTML = html;
                bindInteractions(host, loadRoute);
            } catch (error) {
                renderError(host, error?.message || 'Admin Apps konnte nicht geladen werden.');
            } finally {
                host.classList.remove('is-loading');
            }
        };

        if (options.standalone) {
            bindInteractions(host, loadRoute);
            return;
        }

        loadRoute(entryRoute);
    };
})();