121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
(() => {
|
|
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 um-shell">
|
|
<div class="window-app-frame um-frame">
|
|
<main class="window-app-main um-main">
|
|
<div class="window-app-panel um-panel">
|
|
<section class="window-app-card um-card">
|
|
<p class="um-message is-error">${String(message || 'User Management konnte nicht geladen werden.')}</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const bindInteractions = (host, loadRoute) => {
|
|
host.querySelectorAll('a[href]').forEach((link) => {
|
|
if (link.dataset.umBound === '1') {
|
|
return;
|
|
}
|
|
|
|
const href = String(link.getAttribute('href') || '');
|
|
if (!href.startsWith('/admin/users/')) {
|
|
return;
|
|
}
|
|
|
|
link.dataset.umBound = '1';
|
|
link.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
loadRoute(href);
|
|
});
|
|
});
|
|
|
|
host.querySelectorAll('form[action]').forEach((form) => {
|
|
if (form.dataset.umBound === '1') {
|
|
return;
|
|
}
|
|
|
|
const action = String(form.getAttribute('action') || '');
|
|
if (!action.startsWith('/admin/users/')) {
|
|
return;
|
|
}
|
|
|
|
form.dataset.umBound = '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}`);
|
|
}
|
|
|
|
host.innerHTML = html;
|
|
bindInteractions(host, loadRoute);
|
|
} catch (error) {
|
|
renderError(host, error?.message || 'Formular konnte nicht verarbeitet werden.');
|
|
} finally {
|
|
host.classList.remove('is-loading');
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
window.initUserManagementApp = function initUserManagementApp(host, options = {}) {
|
|
if (!(host instanceof Element)) {
|
|
return;
|
|
}
|
|
|
|
if (host.dataset.umAppBound === '1') {
|
|
return;
|
|
}
|
|
|
|
host.dataset.umAppBound = '1';
|
|
|
|
const entryRoute = String(options.entryRoute || '/admin/users/');
|
|
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 || 'User Management konnte nicht geladen werden.');
|
|
} finally {
|
|
host.classList.remove('is-loading');
|
|
}
|
|
};
|
|
|
|
if (options.standalone) {
|
|
bindInteractions(host, loadRoute);
|
|
return;
|
|
}
|
|
|
|
loadRoute(entryRoute);
|
|
};
|
|
})();
|