Benutzer, Ticketzuweißungen

public/js/pages/users.js

@@ -18,6 +18,20 @@ function formatName(u) {
   return a.length ? a.map((x) => esc(String(x))).join(' ') : '—';
 }
 
+function roleOptionsHtml(current) {
+  const opts = [
+    ['viewer', 'Viewer'],
+    ['after_sales', 'After-Sales'],
+    ['admin', 'Administrator'],
+  ];
+  return opts
+    .map(
+      ([val, label]) =>
+        `<option value="${esc(val)}"${current === val ? ' selected' : ''}>${esc(label)}</option>`,
+    )
+    .join('');
+}
+
 function renderRows(users) {
   const tbody = document.getElementById('users-table-body');
   tbody.innerHTML = users
@@ -26,7 +40,11 @@ function renderRows(users) {
             <tr data-id="${esc(u.id)}">
               <td>${esc(u.username)}</td>
               <td class="muted">${formatName(u)}</td>
-              <td><span class="badge">${u.role === 'admin' ? 'Admin' : 'Benutzer'}</span></td>
+              <td>
+                <select id="role-${esc(u.id)}" class="user-role-select" data-user-id="${esc(u.id)}" data-role-prev="${esc(u.role)}" aria-label="Rolle">
+                  ${roleOptionsHtml(u.role)}
+                </select>
+              </td>
               <td class="muted">${u.source === 'ldap' ? 'LDAP' : 'Lokal'}</td>
               <td>${u.active ? 'Ja' : 'Nein'}</td>
               <td class="users-actions">
@@ -56,6 +74,24 @@ async function run() {
   };
 
   const root = document.getElementById('page-main');
+  root.querySelectorAll('.user-role-select').forEach((sel) => {
+    sel.addEventListener('change', async () => {
+      const id = sel.getAttribute('data-user-id');
+      const prev = sel.getAttribute('data-role-prev');
+      const role = sel.value;
+      sel.disabled = true;
+      try {
+        await apiPut(`/users/${id}`, { role });
+        sel.setAttribute('data-role-prev', role);
+      } catch (e) {
+        window.alert(e.message || 'Rolle konnte nicht gespeichert werden.');
+        sel.value = prev;
+      } finally {
+        sel.disabled = false;
+      }
+    });
+  });
+
   root.querySelectorAll('.btn-pw').forEach((btn) => {
     btn.onclick = async () => {
       const uid = btn.getAttribute('data-id');