role details and delete done

src/app/app-routing.module.ts

@@ -11,6 +11,8 @@ import { UserDeleteComponent } from './user/user-delete/user-delete.component';
 import { ShelterListComponent } from './shelter/shelter-list/shelter-list.component'
 import {RoleListComponent} from "./role/role-list/role-list.component";
 import {RoleCreateComponent} from "./role/role-create/role-create.component"
+import {RoleDeleteComponent} from "./role/role-delete/role-delete.component";
+import {RoleDetailComponent} from "./role/role-detail/role-detail.component";
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -24,6 +26,8 @@ const routes: Routes = [
   { path: 'shelters', component: ShelterListComponent},
   {path: 'role', component:RoleListComponent},
   {path: 'role/create', component:RoleCreateComponent},
+  {path:'role/:id/delete', component:RoleDeleteComponent},
+  {path:'role/:id', component:RoleDetailComponent},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -26,6 +26,8 @@ import {UserService} from './user/user.service';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import {RoleListComponent} from './role/role-list/role-list.component';
 import {RoleCreateComponent} from './role/role-create/role-create.component';
+import {RoleDeleteComponent} from "./role/role-delete/role-delete.component";
+import {RoleDetailComponent} from "./role/role-detail/role-detail.component";
 
 @NgModule({
   declarations: [
@@ -41,6 +43,8 @@ import {RoleCreateComponent} from './role/role-create/role-create.component';
     UserSearchComponent,
     RoleListComponent,
     RoleCreateComponent,
+    RoleDeleteComponent,
+    RoleDetailComponent,
   ],
   imports: [
     BrowserModule,

src/app/role/role-delete/role-delete.component.html

@@ -0,0 +1,14 @@
+<div class="panel panel-warning">
+  <div class="panel-heading">
+    <div class="panel-title">Please, confirm deletion:</div>
+  </div>
+  <div class="panel-body">
+    <div class="text-center">
+      <button id="deleteBtn" type="button" (click)="delete()"
+              class="btn btn-outline-danger m-1">Delete</button>
+      <button id="listBtn" type="button" [routerLink]="['/role', role.id]"
+              class="btn btn-outline-primary m-1">Cancel</button>
+    </div>
+  </div>
+</div>
+

src/app/role/role-delete/role-delete.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RoleService } from '../roleService';
+import { Role } from '../role';
+
+@Component({
+  selector: 'app-role-delete',
+  templateUrl: './role-delete.component.html'
+})
+export class RoleDeleteComponent implements OnInit {
+  public role: Role = new Role();
+  private id: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private roleService: RoleService
+  ) {}
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.roleService.getResource(this.id).subscribe(
+      role => this.role = role
+    );
+  }
+
+  delete(): void {
+    this.roleService.deleteResource(this.role).subscribe(
+      () => {
+        this.router.navigate(['/role']);
+      }
+    );
+  }
+}

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

@@ -0,0 +1,28 @@
+<div class="card mb-4">
+  <div class="card-block">
+    <h4 class="card-title col-md-12 p-3">{{role.name}}</h4>
+    <div class="card-body row m-1">
+      <div class="col-md-4 p-3">
+        <h6 class="card-subtitle text-muted">Role Name</h6>
+        <p class="card-text">{{role.name}}</p>
+      </div>
+      <div class="col-md-4 p-3">
+        <h6 class="card-subtitle text-muted">Role ID</h6>
+        <p class="card-text">{{role.id}}</p>
+      </div>
+      <!-- You can add more role-related details here -->
+    </div>
+    <div class="card-footer text-right">
+      <button id="listBtn" type="button" [routerLink]="['/role']"
+              class="btn m-1 btn-outline-primary">Role List
+      </button>
+      <button id="editBtn" type="button" [routerLink]="['edit']"
+              class="btn m-1 btn-outline-success">Edit
+      </button>
+      <button id="deleteBtn" type="button" [routerLink]="['delete']"
+              class="btn m-1 btn-outline-danger">Delete
+      </button>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RoleService } from '../roleService'; // Asegúrate de que la ruta sea correcta
+import { Role } from '../role';
+import { AuthenticationBasicService } from '../../login-basic/authentication-basic.service';
+
+@Component({
+  selector: 'app-role-detail',
+  templateUrl: './role-detail.component.html'
+})
+export class RoleDetailComponent implements OnInit {
+  public role: Role = new Role();
+
+  constructor(
+    private route: ActivatedRoute,
+    private roleService: RoleService,
+    private authenticationService: AuthenticationBasicService
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.roleService.getResource(id).subscribe(
+      role => {
+        this.role = role;
+      }
+    );
+  }
+
+  getCurrentRole(): Role {
+    return this.roleService.getCurrentRole();
+  }
+}

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

@@ -1,14 +1,25 @@
-<div class="card mb-1" *ngFor="let role of roles">
-  <div class="card-block row m-1 col-12">
-    <div class="card-body row align-items-center">
-      <div class="col-6 mt-1">
-        <h6 class="card-subtitle text-muted">Name</h6>
-        <a class="card-text" [routerLink]="['/roles', role.id]">{{role.name}}</a>
+<div class="container mt-4">
+  <!-- Título de la página -->
+  <div class="row mb-3">
+    <div class="col-12">
+      <h2>Role List</h2>
+    </div>
+  </div>
+
+  <!-- Lista de roles -->
+  <div class="card mb-1" *ngFor="let role of roles">
+    <div class="card-block row m-1 col-12">
+      <div class="card-body row align-items-center">
+        <div class="col-6 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <a class="card-text" [routerLink]="['/role', role.id]">{{role.name}}</a>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<ngb-pagination class="d-flex justify-content-center"
-                [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalRoles"
-                (pageChange)="changePage()"></ngb-pagination>
+  <!-- Paginación -->
+  <ngb-pagination class="d-flex justify-content-center"
+                  [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalRoles"
+                  (pageChange)="changePage()"></ngb-pagination>
+</div>

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

@@ -26,6 +26,7 @@ export class RoleListComponent implements OnInit {
       })
       .subscribe((page: PagedResourceCollection<Role>) => {
         this.roles = page.resources;
+        console.log(this.roles);
         this.totalRoles = page.totalElements;
       });
   }

src/app/role/role.ts

@@ -2,11 +2,16 @@ import { HateoasResource, Resource } from '@lagoshny/ngx-hateoas-client';
 
 @HateoasResource('roles')
 export class Role extends Resource {
-  id: number;
   name: string;
+  uri: string;
 
   constructor(values: object = {}) {
     super();
     Object.assign(this as any, values);
   }
+
+  public get id (): String {
+    let uriArray =this.uri.split('/');
+    return uriArray.pop();
+}
 }

src/app/role/roleService.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HateoasResourceOperation, ResourceCollection } from '@lagoshny/ngx-hateoas-client';
-import { Role } from "./role"; // Asegúrate de importar la clase Role correctamente
+import { Role } from "./role";
+import {User} from "../login-basic/user"; // Asegúrate de importar la clase Role correctamente
 
 @Injectable({ providedIn: 'root' })
 export class RoleService extends HateoasResourceOperation<Role> {
@@ -13,4 +14,8 @@ export class RoleService extends HateoasResourceOperation<Role> {
   public findByName(query: string): Observable<ResourceCollection<Role>> {
     return this.searchCollection('findByName', { params: { text: query } });
   }
+
+  getCurrentRole(): Role {
+    return new Role(JSON.parse(localStorage.getItem('currentRole')));
+  }
 }