Skip to content

feat: add users and plugins frontend #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mihailkitrozoskicodechem wants to merge 11 commits into from
Closed

feat: add users and plugins frontend #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
79a9661
feat: add users and plugins frontend, add GetAllRoles backend endpoint
Mar 23, 2026
cf21296
refactor: change the Scriban version
Mar 23, 2026
983e9f3
refactor: fix the permissions table
Mar 23, 2026
7986d61
refactor: add expandable view rows for the controllers
Mar 24, 2026
3398825
Merge branch 'main' into feat/users-and-permissions-frontend
Mar 24, 2026
855d7c4
add effect on the description table items
Mar 24, 2026
81210d0
add toggle status and pill color based on the endpoint type
Mar 24, 2026
f9e8e8f
refactor: use lowercase for the interfaces properties
Mar 25, 2026
5f0637f
fix: use lowercase for interface properties
Mar 25, 2026
52e3917
Merge branch 'feat/users-and-permissions-frontend' of https://github.…
Mar 25, 2026
e739385
Revert "fix: use lowercase for interface properties"
Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions CCUI.DAPPI/src/app/services/auth/users-and-permissions-plugin.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { BASE_API_URL } from '../../../Constants';

export interface UsersAndPermissionsRoleItem {
Id: string;
Name: string;
IsDefaultForAuthenticatedUser: boolean;
}

export interface UsersAndPermissionsPermissionItem {
PermissionName: string;
Description: string;
Selected: boolean;
}

export type UsersAndPermissionsRolePermissionsResponse = Record<
string,
UsersAndPermissionsPermissionItem[]
>;

@Injectable({ providedIn: 'root' })
export class UsersAndPermissionsPluginService {
constructor(private http: HttpClient) {}

getAllRoles(): Observable<UsersAndPermissionsRoleItem[]> {
return this.http.get<UsersAndPermissionsRoleItem[]>(`${BASE_API_URL}usersandpermissions/roles`);
}

getRolePermissions(roleName: string): Observable<UsersAndPermissionsRolePermissionsResponse> {
const params = new HttpParams().set('roleName', roleName);

return this.http.get<UsersAndPermissionsRolePermissionsResponse>(
`${BASE_API_URL}usersandpermissions`,
{ params }
);
}
}
160 changes: 160 additions & 0 deletions CCUI.DAPPI/src/app/settings/settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,22 @@

<div class="settings-sidebar__divider"></div>

<div class="settings-sidebar__section">Plugins</div>

@if (usersAndPermissionsEnabled) {
<button
class="settings-sidebar__item"
[class.settings-sidebar__item--active]="activeTab === 'usersAndPermissionsPlugin'"
(click)="selectTab('usersAndPermissionsPlugin')"
aria-label="Users and permissions plugin"
>
<mat-icon>shield</mat-icon>
<span>Users & Permissions plugin</span>
</button>
}

<div class="settings-sidebar__divider"></div>

<div class="settings-sidebar__section">User Administration</div>

<button
Expand All @@ -43,6 +59,150 @@
<div class="container">
@if (activeTab === 'storage') {
<app-data-storage></app-data-storage>
} @else if (activeTab === 'usersAndPermissionsPlugin') {
<header class="plugin-header">
<div class="plugin-title-block">
<h1>Users & Permissions plugin</h1>
<p>View the roles and their permissions</p>
</div>
</header>

@if (usersAndPermissionsRolesError) {
<div class="plugin-error">{{ usersAndPermissionsRolesError }}</div>
}

@if (usersAndPermissionsRolesLoading) {
<div class="plugin-loading">
<mat-spinner diameter="40"></mat-spinner>
<p>Loading roles...</p>
</div>
} @else if (!usersAndPermissionsRoles.length) {
<div class="plugin-empty">
<img src="assets/illustration.svg" alt="No roles" />
<h2>There are no roles yet</h2>
<p>No roles were returned from the Users & Permissions plugin.</p>
</div>
} @else {
<div class="plugin-roles-layout">
<div class="plugin-roles-table-container" aria-label="Users and permissions roles list">
<table mat-table [dataSource]="usersAndPermissionsRoles" class="plugin-roles-table">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let role">{{ role.Name }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="usersAndPermissionsRoleColumns"></tr>
<tr
mat-row
*matRowDef="let role; columns: usersAndPermissionsRoleColumns"
class="plugin-role-row"
[class.plugin-role-row--active]="selectedUsersAndPermissionsRole?.Id === role.Id"
(click)="selectUsersAndPermissionsRole(role)"
></tr>
</table>
</div>

<section class="plugin-role-details" aria-label="Role details">
@if (selectedUsersAndPermissionsRole) {
<header class="plugin-role-details__header">
<h2>{{ selectedUsersAndPermissionsRole.Name }}</h2>
</header>

@if (usersAndPermissionsRoleDetailsError) {
<div class="plugin-error">{{ usersAndPermissionsRoleDetailsError }}</div>
}

@if (usersAndPermissionsRoleDetailsLoading) {
<div class="plugin-loading plugin-loading--details">
<mat-spinner diameter="32"></mat-spinner>
<p>Loading permissions...</p>
</div>
} @else if (!selectedUsersAndPermissionsRolePermissionGroups.length) {
<div class="plugin-empty plugin-empty--details">
<h3>No permissions found</h3>
<p>This role currently has no configured permissions response.</p>
</div>
} @else {
<div class="plugin-permissions-table-container">
<table class="plugin-permissions-table plugin-controllers-table">
<thead>
<tr>
<th>Controller</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@for (group of selectedUsersAndPermissionsRolePermissionGroups; track group.controller) {
<tr class="plugin-controller-row">
<td>
<button
class="plugin-controller-toggle"
type="button"
(click)="toggleController(group.controller)"
[attr.aria-label]="'Toggle ' + group.controller + ' permissions'"
>
<mat-icon class="plugin-controller-toggle__icon" [class.plugin-controller-toggle__icon--expanded]="isControllerExpanded(group.controller)">expand_more</mat-icon>
<span>{{ group.controller }}</span>
</button>
</td>
<td>
{{ group.allowedCount }}/{{ group.rows.length }} allowed
</td>
</tr>

@if (isControllerExpanded(group.controller)) {
<tr class="plugin-controller-details-row">
<td [attr.colspan]="usersAndPermissionsControllerColumns.length">
<div class="plugin-controller-details">
<table mat-table [dataSource]="group.rows" class="plugin-permissions-table">
<ng-container matColumnDef="permission">
<th mat-header-cell *matHeaderCellDef>Permission</th>
<td mat-cell *matCellDef="let row">{{ row.permissionName }}</td>
</ng-container>

<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef>Description</th>
<td mat-cell *matCellDef="let row">
<span
class="plugin-permission-description"
[style.background-color]="getEndpointMethodColor(row.description)"
>
{{ row.description }}
</span>
</td>
</ng-container>

<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let row">
<mat-button-toggle-group
class="plugin-status-toggle"
[value]="row.selected"
(change)="row.selected = $event.value"
aria-label="Permission status"
>
<mat-button-toggle [value]="true">Allowed</mat-button-toggle>
<mat-button-toggle [value]="false">Not Allowed</mat-button-toggle>
</mat-button-toggle-group>
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="usersAndPermissionsPermissionColumns"></tr>
<tr mat-row *matRowDef="let row; columns: usersAndPermissionsPermissionColumns"></tr>
</table>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
}
}
</section>
</div>
}
} @else if (activeTab === 'users') {
<app-users></app-users>
} @else {
Expand Down
Loading
Loading