This commit is contained in:
2026-08-29 21:09:42 +00:00
parent 10448e8b12
commit 85a063c1a7
132 changed files with 4377 additions and 3348 deletions
@@ -1,47 +1,53 @@
<h2 class="row-container space-between">
<span>Roles</span>
<a mat-button [routerLink]="['/roles', 'new']">
<mat-icon>add_box</mat-icon>
Add
</a>
</h2>
<mat-table #table [dataSource]="dataSource()" aria-label="Elements">
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let row"
><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
>
</ng-container>
@if (listResource.isLoading()) {
<app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
<app-error-state (retryAction)="listResource.reload()" />
} @else {
<h2 class="row-container space-between">
<span>Roles</span>
<a mat-button [routerLink]="['/roles', 'new']">
<mat-icon>add_box</mat-icon>
Add
</a>
</h2>
<mat-table #table [dataSource]="dataSource()" aria-label="Elements">
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let row"
><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
>
</ng-container>
<!-- Included Roles Column (NEW) -->
<ng-container matColumnDef="includedRoles">
<mat-header-cell *matHeaderCellDef>Includes</mat-header-cell>
<mat-cell *matCellDef="let row">
@if (row.includedRoles?.length) {
<!-- Included Roles Column (NEW) -->
<ng-container matColumnDef="includedRoles">
<mat-header-cell *matHeaderCellDef>Includes</mat-header-cell>
<mat-cell *matCellDef="let row">
@if (row.includedRoles?.length) {
<ul>
@for (r of row.includedRoles; track r) {
<li>{{ r }}</li>
}
</ul>
} @else {
<span>-</span>
}
</mat-cell>
</ng-container>
<!-- Permissions Column -->
<ng-container matColumnDef="permissions">
<mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
@for (r of row.includedRoles; track r) {
<li>{{ r }}</li>
@for (permission of row.permissions; track permission) {
<li>{{ permission }}</li>
}
</ul>
} @else {
<span>-</span>
}
</mat-cell>
</ng-container>
</mat-cell>
</ng-container>
<!-- Permissions Column -->
<ng-container matColumnDef="permissions">
<mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
@for (permission of row.permissions; track permission) {
<li>{{ permission }}</li>
}
</ul>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
}
@@ -4,12 +4,14 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { RouterLink } from '@angular/router';
import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
import { RoleService } from '../role.service';
@Component({
selector: 'app-role-list',
templateUrl: './role-list.component.html',
styleUrls: ['./role-list.component.css'],
imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink, ErrorStateComponent, SkeletonLoaderComponent],
})
export class RoleListComponent {
private roleService = inject(RoleService);