style fixes
This commit is contained in:
manuel.sowada
@@ -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();
|
||||
|
||||
@@ -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,
|
||||
`<button class="redbutton"
|
||||
${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ?
|
||||
'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' :
|
||||
''
|
||||
}>X</button>`, {
|
||||
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,
|
||||
// `<button class="redbutton"
|
||||
// ${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ?
|
||||
// 'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' :
|
||||
// ''
|
||||
// }>X</button>`, {
|
||||
// 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,
|
||||
`<button class="redbutton"
|
||||
${row['ID'] === 1 ?
|
||||
'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
|
||||
''
|
||||
}>X</button>`, {
|
||||
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,
|
||||
// `<button class="redbutton"
|
||||
// ${row['ID'] === 1 ?
|
||||
// 'disabled data-tooltip="Die SYSTEM-Berechtigung kann nicht gelöscht werden"' :
|
||||
// ''
|
||||
// }>X</button>`, {
|
||||
// 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();
|
||||
loadUsers();
|
||||
// loadGroups();
|
||||
// loadRoles();
|
||||
// loadPermissions();
|
||||
Reference in New Issue
Block a user