public/js/admin.js

@@ -11,6 +11,8 @@
      totdat de beheerder het venster zelf sluit, zodat wachtwoorden niet
      meteen weer verdwijnen na een reload() */
   let resetResults = null;
+  /* actief tabblad, blijft behouden over her-renders heen (na elke actie) */
+  let adminTab = "gebruikers";
 
   const esc = s => String(s ?? "").replace(/&/g,"&amp;").replace(/</g,"&lt;");
   const h = (tag, cls, text)=>{
@@ -264,11 +266,8 @@
     return box;
   }
 
-  function render(){
-    modal.innerHTML = "";
-
   /* super: schoolkiezer + nieuwe school */
-    if(currentUser.role==="super"){
+  function renderScholenPanel(panel){
     const bar = h("div","am-add");
     const sel = h("select","am-sel");
     sel.appendChild(new Option(T("amAllSchools"), ""));
@@ -290,18 +289,14 @@
       }catch(e){ msg(e.message); }
     });
     bar.appendChild(add);
-      modal.appendChild(bar);
+    panel.appendChild(bar);
   }
 
-    modal.appendChild(h("div","am-msg"));
-    const rp = resetPanel();
-    if(rp) modal.appendChild(rp);
-
   /* klassen (admin/super binnen een school) */
+  function renderKlassenPanel(panel){
     const schoolChosen = currentUser.role!=="super" || !!selSchool;
+    if(!schoolChosen) return;
     const canResetPw = can("schools.resetPasswords");
-    if(schoolChosen){
-      modal.appendChild(h("h3","am-h3", T("amClasses")));
     const cwrapEl = h("div","am-classes");
     CLASSES.forEach(c=>{
       const chip = h("span","am-chip", c.name);
@@ -327,7 +322,7 @@
       }
       cwrapEl.appendChild(chip);
     });
-      modal.appendChild(cwrapEl);
+    panel.appendChild(cwrapEl);
     if(canResetPw){
       const f = h("div","am-add");
       const inp = h("input","am-inp");
@@ -343,7 +338,7 @@
         }catch(e){ msg(e.message); }
       });
       f.appendChild(go);
-        modal.appendChild(f);
+      panel.appendChild(f);
 
       /* multireset: alle leerlingwachtwoorden van de hele school in één keer */
       const rsAll = h("button","am-btn","🔄 "+T("amResetSchool"));
@@ -359,12 +354,12 @@
           render();
         }catch(e){ msg(e.message); }
       });
-        modal.appendChild(rsAll);
+      panel.appendChild(rsAll);
     }
   }
 
-    /* gebruikers */
+  /* gebruikers: lijst (altijd, ook zonder gekozen school) + aanmaak-formulieren */
-    modal.appendChild(h("h3","am-h3", T("amUsers")));
+  function renderGebruikersPanel(panel){
     const list = h("div","am-list");
     const groups = [["super", T("amSuperGroup")], ["admin", T("roleAdmin")], ["teacher", T("roleTeacher")], ["pupil", T("rolePupil")]];
     groups.forEach(([role, label])=>{
@@ -373,13 +368,53 @@
       list.appendChild(h("div","am-group", label));
       us.forEach(u=>list.appendChild(userRow(u)));
     });
-    modal.appendChild(list);
+    panel.appendChild(list);
 
     /* toevoegen - welke rollen deze gebruiker mag aanmaken (CREATABLE_ROLES) */
+    const schoolChosen = currentUser.role!=="super" || !!selSchool;
     const creatable = CREATABLE_ROLES[currentUser.role];
     if(schoolChosen){
-      ["pupil","teacher","admin"].forEach(r=>{ if(creatable.includes(r)) modal.appendChild(addForm(r)); });
+      ["pupil","teacher","admin"].forEach(r=>{ if(creatable.includes(r)) panel.appendChild(addForm(r)); });
     }
-    if(creatable.includes("super")) modal.appendChild(addForm("super"));
+    if(creatable.includes("super")) panel.appendChild(addForm("super"));
+  }
+
+  function switchAdminTab(tab){
+    adminTab = tab;
+    modal.querySelectorAll(".ed-tabs button").forEach(b=>b.classList.toggle("active", b.dataset.tab===tab));
+    modal.querySelectorAll(".am-tabpanel").forEach(p=>{ p.style.display = p.dataset.panel===tab ? "block" : "none"; });
+  }
+
+  function render(){
+    modal.innerHTML = "";
+    modal.appendChild(h("div","am-msg"));
+    const rp = resetPanel();
+    if(rp) modal.appendChild(rp);
+
+    const tabDefs = [];
+    if(currentUser.role==="super") tabDefs.push(["scholen", T("amSchools")]);
+    tabDefs.push(["klassen", T("amClasses")]);
+    tabDefs.push(["gebruikers", T("amUsers")]);
+    if(!tabDefs.some(([t])=>t===adminTab)) adminTab = tabDefs[0][0];
+
+    const tabsBar = h("div","ed-tabs");
+    tabDefs.forEach(([t, label])=>{
+      const b = h("button", null, label);
+      b.type = "button";
+      b.dataset.tab = t;
+      b.addEventListener("click", ()=>switchAdminTab(t));
+      tabsBar.appendChild(b);
+    });
+    modal.appendChild(tabsBar);
+
+    const panels = { scholen: renderScholenPanel, klassen: renderKlassenPanel, gebruikers: renderGebruikersPanel };
+    tabDefs.forEach(([t])=>{
+      const panel = h("div","am-tabpanel");
+      panel.dataset.panel = t;
+      panels[t](panel);
+      modal.appendChild(panel);
+    });
+
+    switchAdminTab(adminTab);
   }
 })();