fdsa

bookie/src/app/roles/role-detail/role-detail.component.html

@@ -1,39 +1,45 @@
-<h2>Role</h2>
-<form class="flex-col">
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+} @else if (itemResource.error()) {
+  <app-error-state (retryAction)="itemResource.reload()" />
+} @else {
+  <h2>Role</h2>
+  <form class="flex-col">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" />
+      </mat-form-field>
+    </div>
+
+    <div class="two-col">
+      <div class="col">
+        <h3>Permissions</h3>
+        @for (p of form.permissions; track p; let i = $index) {
+          <div class="row-container">
+            <mat-checkbox
+              [formField]="p.enabled"
+              [disabled]="impliedPermissions().has(p.id().value())"
+              class="flex-auto"
+              >{{ p.name().value() }}</mat-checkbox
+            >
+          </div>
+        }
+      </div>
+
+      <div class="col">
+        <h3>Includes Roles</h3>
+        @for (r of form.includedRoles; track r; let i = $index) {
+          <div class="row-container">
+            <mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
+          </div>
+        }
+      </div>
+    </div>
+  </form>
+
   <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput [formField]="form.name" />
-    </mat-form-field>
+    <button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
+    <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   </div>
-
-  <div class="two-col">
-    <div class="col">
-      <h3>Permissions</h3>
-      @for (p of form.permissions; track p; let i = $index) {
-        <div class="row-container">
-          <mat-checkbox
-            [formField]="p.enabled"
-            [disabled]="impliedPermissions().has(p.id().value())"
-            class="flex-auto"
-            >{{ p.name().value() }}</mat-checkbox
-          >
-        </div>
-      }
-    </div>
-
-    <div class="col">
-      <h3>Includes Roles</h3>
-      @for (r of form.includedRoles; track r; let i = $index) {
-        <div class="row-container">
-          <mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
-        </div>
-      }
-    </div>
-  </div>
-</form>
-
-<div class="row-container">
-  <button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
-  <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-</div>
+}

bookie/src/app/roles/role-detail/role-detail.component.ts

@@ -9,6 +9,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { Role } from '../role';
 import { RoleService } from '../role.service';
 
@@ -22,7 +24,15 @@ export interface RoleDetailFormData {
   selector: 'app-role-detail',
   templateUrl: './role-detail.component.html',
   styleUrls: ['./role-detail.component.css'],
-  imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, FormField],
+  imports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormField,
+    ErrorStateComponent,
+    SkeletonLoaderComponent,
+  ],
 })
 export class RoleDetailComponent {
   private router = inject(Router);

bookie/src/app/roles/role-list/role-list.component.html

@@ -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>
+}

bookie/src/app/roles/role-list/role-list.component.ts

@@ -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);