diff --git a/public/images/shield.png b/public/images/shield.png new file mode 100644 index 0000000..45cb698 Binary files /dev/null and b/public/images/shield.png differ diff --git a/public/javascript/main.js b/public/javascript/main.js index 2a68229..21f2573 100644 --- a/public/javascript/main.js +++ b/public/javascript/main.js @@ -1225,12 +1225,6 @@ window.addEventListener('resize', () => { tableEl.before(container); - // Höhe messen → thead offset setzen - requestAnimationFrame(()=>{ - const h = container.getBoundingClientRect().height; - tableEl.style.setProperty('--filter-height', h + 'px'); - }); - if(!filterConfig.hideCounter) { filterState.counterEl = document.createElement('div'); filterState.counterEl.className = 'live-counter'; @@ -1242,6 +1236,10 @@ window.addEventListener('resize', () => { const wrapperResizeObserver = new ResizeObserver(() => { // Filter-Header anpassen syncFilterWidth(container); + + // Höhe messen → thead offset setzen + const h = container.getBoundingClientRect().height; + tableEl.style.setProperty('--filter-height', h + 'px'); // Tabelle neu rendern rebuildPrefix(); diff --git a/public/javascript/rbacAPI.js b/public/javascript/rbacAPI.js index 88ea3b4..1615f7f 100644 --- a/public/javascript/rbacAPI.js +++ b/public/javascript/rbacAPI.js @@ -122,67 +122,67 @@ function createDropZone(el, type, target) { // 📋 TABLE (USERS) ////////////////////////////// -const rbacUsersVT = virtualTable({ - tableEl: document.querySelector('#rbacUsersTable'), - data: [], - rowHeight: 20, - buffer: 5, - groupKey: 'ObjectSourceName', - rowKey: 'ObjectGUID', - filterConfig: { - hideCounter: true, - exceptedColumns: ['', 'Rollen', 'Gruppen'], - columnModes: { - Aktiv: 'dropdown', - Online: 'dropdown' - } - }, +// const rbacUsersVT = virtualTable({ +// tableEl: document.querySelector('#rbacUsersTable'), +// data: [], +// rowHeight: 35, +// buffer: 10, +// groupKey: 'ObjectSourceName', +// rowKey: 'ObjectGUID', +// filterConfig: { +// hideCounter: true, +// exceptedColumns: ['', 'Rollen', 'Gruppen'], +// columnModes: { +// Aktiv: 'dropdown', +// Online: 'dropdown' +// } +// }, - customRender: (row, tr) => { +// customRender: (row, tr) => { - createDragZone(tr, row, 'user'); +// createDragZone(tr, row, 'user'); - tr.addEventListener('contextmenu', (evt) => { - evt.preventDefault(); +// tr.addEventListener('contextmenu', (evt) => { +// evt.preventDefault(); - ctxRBAC.setItems([ - { - label: "Details", - onClick: () => showAuthDetails(row.ObjectGUID) - } - ]); +// ctxRBAC.setItems([ +// { +// label: "Details", +// onClick: () => showAuthDetails(row.ObjectGUID) +// } +// ]); - ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); - }); +// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); +// }); - createTd(tr, - ``, { - styles: { - 'position': 'sticky', - 'left': '0px', - 'max-width': '20px', - 'z-index': '2' - }, classes: [ - 'text-align:left' - ], onclick: () => { - if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return; - deleteUser(row['ObjectGUID'], row['sAMAccountName']); - } - }); - createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } }); - createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } }); - createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } }); - createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } }); - createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } }); - createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] }); - } -}); +// createTd(tr, +// ``, { +// styles: { +// 'position': 'sticky', +// 'left': '0px', +// 'max-width': '20px', +// 'z-index': '2' +// }, classes: [ +// 'text-align:left' +// ], onclick: () => { +// if(row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001') return; +// deleteUser(row['ObjectGUID'], row['sAMAccountName']); +// } +// }); +// createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } }); +// createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } }); +// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } }); +// createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } }); +// createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } }); +// createTd(tr, row['Aktiv'], { classes: [ 'text-align:center' ] }); +// } +// }); @@ -190,62 +190,84 @@ const rbacUsersVT = virtualTable({ // 📋 TABLE (PERMISSIONS) ////////////////////////////// -const rbacPermissionsVT = virtualTable({ - tableEl: document.querySelector('#rbacPermissionsTable'), - data: [], - rowHeight: 20, - buffer: 5, - groupKey: null, - rowKey: 'ID', - filterConfig: { - hideCounter: true, - exceptedColumns: ['', 'ID'] - }, +// const rbacPermissionsVT = virtualTable({ +// tableEl: document.querySelector('#rbacPermissionsTable'), +// data: [], +// rowHeight: 20, +// buffer: 5, +// groupKey: null, +// rowKey: 'ID', +// filterConfig: { +// hideCounter: true, +// exceptedColumns: ['', 'ID'] +// }, - customRender: (row, tr) => { +// customRender: (row, tr) => { - createDragZone(tr, row, 'user'); +// createDragZone(tr, row, 'user'); - tr.addEventListener('contextmenu', (evt) => { - evt.preventDefault(); +// tr.addEventListener('contextmenu', (evt) => { +// evt.preventDefault(); - ctxRBAC.setItems([ - { - label: "Details", - onClick: () => showAuthDetails(row.ObjectGUID) - } - ]); +// ctxRBAC.setItems([ +// { +// label: "Details", +// onClick: () => showAuthDetails(row.ObjectGUID) +// } +// ]); - ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); - }); +// ctxRBAC.show(evt.pageX + 5, { y: evt.pageY + 5 }); +// }); - createTd(tr, - ``, { - styles: { - 'position': 'sticky', - 'left': '0px', - 'max-width': '20px', - 'z-index': '2' - }, classes: [ - 'text-align:left' - ], onclick: () => { - if(row['ID'] === 1) return; - deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`); - } - }); - createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } ); - createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] }); - createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); - createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } }); - createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); - createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } }); +// createTd(tr, +// ``, { +// styles: { +// 'position': 'sticky', +// 'left': '0px', +// 'max-width': '20px', +// 'z-index': '2' +// }, classes: [ +// 'text-align:left' +// ], onclick: () => { +// if(row['ID'] === 1) return; +// deletePermission(row['ID'], `${row['Scope']}.${row['Resource']}.${row['Action']}`); +// } +// }); +// createTd(tr, row['Permission_ID'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } } ); +// createTd(tr, row['GroupUserCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['TotalUserCount'], { classes: [ 'text-align:center' ] }); +// createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Scope'], { classes: [ 'text-align:right' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Resource'], { classes: [ 'text-align:center' ], styles: { 'width': '100px' } }); +// createTd(tr, row['Action'], { classes: [ 'text-align:left' ], styles: { 'width': '100px' } }); +// } +// }); + + +class Tile { + constructor(title, parent, options = {}) { + this.title = title; + this.parent = parent; + this.options = options; } -}); + + render() { + const tile = document.createElement('div'); + tile.classList.add('tile'); + tile.innerHTML = this.title; + + if(this.options.onclick) { + tile.addEventListener('click', this.options.onclick); + } + + this.parent.appendChild(tile); + } +} + ////////////////////////////// // 📥 LOADERS @@ -253,7 +275,14 @@ const rbacPermissionsVT = virtualTable({ async function loadUsers() { try { - rbacUsersVT.source(await RBAC.loadUsers()); + // rbacUsersVT.source(await RBAC.loadUsers()); + const users = await RBAC.loadUsers(); + + users.forEach(user => { + const tile = new Tile(`[${user.UserCount}] ${user.sAMAccountName}`, document.querySelector('#rbacTabContents') , { onclick: () => showAuthDetails(user.ObjectGUID) }); + tile.render(); + }) + } catch (err) { console.error(err); } @@ -528,7 +557,7 @@ async function deletePermission(id, name) { // 🚀 INIT ////////////////////////////// - loadUsers(); - loadGroups(); - loadRoles(); - loadPermissions(); \ No newline at end of file +loadUsers(); +// loadGroups(); +// loadRoles(); +// loadPermissions(); \ No newline at end of file diff --git a/public/styles/default.css b/public/styles/default.css index 48b3ca8..498ee77 100644 --- a/public/styles/default.css +++ b/public/styles/default.css @@ -38,14 +38,14 @@ button:not(:disabled).yellowbutton:hover { background:var(--theme-button-yellow- /* #region Container */ -.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100%; flex-direction: column;} +.container.static { width:calc(100% - 10px); margin:5px auto; display:flex; gap:6px; min-height:0; overflow:auto; max-height:100vh; flex-direction: column;} /* .card.static { display:flex; flex-direction:column;flex: 0 0 auto; } */ .card.static.row { overflow:hidden; display:flex; flex-direction:row; flex-wrap: wrap;} .card.static { overflow:hidden; display:flex; flex-direction:column; } .container:not(.static) { width:calc(100% - 10px); margin:5px auto; display:grid; grid-template-columns:100%; gap:12px; min-height:0; overflow:auto; max-height:100%; } .container:not(.static) * { box-sizing:border-box; } -.card { border-width:1px; border-style:solid; border-radius:8px; padding:15px; } +.card { border-width:1px; border-style:solid; border-radius:8px; padding:10px; } .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); } /* #endregion */ diff --git a/public/styles/table.css b/public/styles/table.css index 0f89f9d..a44d4b1 100644 --- a/public/styles/table.css +++ b/public/styles/table.css @@ -56,7 +56,6 @@ td { overflow:hidden; text-overflow:ellipsis; /* verhindert, dass Inhalt die Zel left:0px; top:0px; width: 100% !important; - height: fit-content; /* z-index:20; */ padding:0px; border-radius:var(--border-raduis) var(--border-raduis) 0 0; diff --git a/public/views/rbac.hbs b/public/views/rbac.hbs index 5e96b85..1ff0306 100644 --- a/public/views/rbac.hbs +++ b/public/views/rbac.hbs @@ -59,12 +59,40 @@ section span { input { margin: 5px; } + + +.tile { + display:inline-flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + align-items: stretch; + height:60px; + padding: 5px; + width: 200px; + border: 1px solid #ccc; + border-radius: 8px; + margin: 0 2px 2px 0; + transition: background var(--times-transition-colors) ease, border-color var(--times-transition-colors) ease, color var(--times-transition-colors) ease; +} + +
+
+
+
Verwaltung
+
Benutzer & Gruppen
+
Rollen & Berechtigungen
+
+ +
+
+
-
+ {{!--
AD Synchronisation: @@ -146,7 +174,7 @@ input {
-
+
--}}