private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

qwewqe
All checks were successful
Deploy / deploy-staging (push) Successful in 24s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-24 00:50:15 +02:00
parent 30d7456fde
commit 9ea248753e
7 changed files with 387 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/assets/apps/user-management/app.css
View File

@@ -171,6 +171,62 @@
resize: vertical;
}
#user-management-app .um-user-picker {
position: relative;
}
#user-management-app .um-user-picker-list {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 20;
display: grid;
gap: 8px;
max-height: 320px;
overflow: auto;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 16px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}
#user-management-app .um-user-picker-option {
display: grid;
gap: 2px;
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
background: rgba(248, 250, 252, 0.95);
color: #0f172a;
text-align: left;
font: inherit;
cursor: pointer;
}
#user-management-app .um-user-picker-option:hover {
border-color: rgba(37, 99, 235, 0.35);
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
background: #eff6ff;
}
#user-management-app .um-user-picker-option strong {
font-size: 14px;
}
#user-management-app .um-user-picker-option span,
#user-management-app .um-user-picker-empty {
font-size: 13px;
line-height: 1.45;
color: #475569;
}
#user-management-app .um-user-picker-empty {
padding: 8px 4px;
}
#user-management-app .um-fieldset {
margin: 0;
padding: 0;

111
public/assets/apps/user-management/app.js
View File

@@ -21,6 +21,114 @@
`;
};
const escapeHtml = (value) => String(value ?? '')
.replaceAll('&', '&')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&#39;');
const bindUserPickers = (host) => {
const dataNode = host.querySelector('#um-existing-users-data');
if (!(dataNode instanceof HTMLScriptElement)) {
return;
}
let users = [];
try {
const decoded = JSON.parse(dataNode.textContent || '[]');
if (Array.isArray(decoded)) {
users = decoded;
}
} catch (_error) {
users = [];
}
const normalizedUsers = users.map((user) => ({
username: String(user?.username || ''),
display_name: String(user?.display_name || ''),
email: String(user?.email || ''),
search: [
String(user?.username || ''),
String(user?.display_name || ''),
String(user?.email || ''),
].join(' ').toLowerCase(),
})).filter((user) => user.username !== '');
const closeAll = () => {
host.querySelectorAll('[data-user-picker-list]').forEach((list) => {
list.setAttribute('hidden', 'hidden');
list.innerHTML = '';
});
};
host.querySelectorAll('[data-user-picker]').forEach((picker) => {
const input = picker.querySelector('[data-user-picker-input]');
const list = picker.querySelector('[data-user-picker-list]');
if (!(input instanceof HTMLInputElement) || !(list instanceof HTMLElement)) {
return;
}
if (input.dataset.umPickerBound === '1') {
return;
}
input.dataset.umPickerBound = '1';
const renderMatches = () => {
const needle = input.value.trim().toLowerCase();
const matches = normalizedUsers
.filter((user) => needle === '' || user.search.includes(needle))
.slice(0, needle === '' ? 80 : 25);
list.innerHTML = '';
if (matches.length === 0) {
list.innerHTML = '<div class="um-user-picker-empty">Keine passenden Benutzer gefunden.</div>';
list.hidden = false;
return;
}
list.innerHTML = matches.map((user) => `
<button class="um-user-picker-option" type="button" data-user-picker-value="${escapeHtml(user.username)}">
<strong>${escapeHtml(user.username)}</strong>
<span>${escapeHtml(user.display_name || 'Ohne Anzeigename')}</span>
<span>${escapeHtml(user.email || 'Keine E-Mail')}</span>
</button>
`).join('');
list.hidden = false;
};
input.addEventListener('focus', renderMatches);
input.addEventListener('input', renderMatches);
list.addEventListener('click', (event) => {
const option = event.target.closest('[data-user-picker-value]');
if (!(option instanceof HTMLElement)) {
return;
}
input.value = String(option.dataset.userPickerValue || '');
list.hidden = true;
list.innerHTML = '';
input.dispatchEvent(new Event('change', { bubbles: true }));
});
});
if (!host.dataset.umPickerOutsideBound) {
host.dataset.umPickerOutsideBound = '1';
document.addEventListener('click', (event) => {
if (!(event.target instanceof Node) || !host.contains(event.target)) {
closeAll();
return;
}
const insidePicker = event.target instanceof Element && event.target.closest('[data-user-picker]');
if (!insidePicker) {
closeAll();
}
});
}
};
const bindInteractions = (host, loadRoute) => {
host.querySelectorAll('a[href]').forEach((link) => {
if (link.dataset.umBound === '1') {
@@ -68,6 +176,7 @@
host.innerHTML = html;
bindInteractions(host, loadRoute);
bindUserPickers(host);
} catch (error) {
renderError(host, error?.message || 'Formular konnte nicht verarbeitet werden.');
} finally {
@@ -103,6 +212,7 @@
host.innerHTML = html;
bindInteractions(host, loadRoute);
bindUserPickers(host);
} catch (error) {
renderError(host, error?.message || 'User Management konnte nicht geladen werden.');
} finally {
@@ -112,6 +222,7 @@
if (options.standalone) {
bindInteractions(host, loadRoute);
bindUserPickers(host);
return;
}