From f5482d5a9c3110d599f95fe837091205dbf26398 Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Tue, 14 May 2024 15:50:35 +0200 Subject: [PATCH 1/6] role-list.component.html and role-list.component.ts created --- src/app/role/role-list/role-list.component.html | 10 ++++++++++ src/app/role/role-list/role-list.component.ts | 11 +++++++++++ .../shelter-list.component.component.html | 1 + .../shelter-list.component.component.scss | 0 .../shelter-list.component.component.ts | 12 ++++++++++++ 5 files changed, 34 insertions(+) create mode 100644 src/app/role/role-list/role-list.component.html create mode 100644 src/app/role/role-list/role-list.component.ts create mode 100644 src/app/shelter-list.component/shelter-list.component.component.html create mode 100644 src/app/shelter-list.component/shelter-list.component.component.scss create mode 100644 src/app/shelter-list.component/shelter-list.component.component.ts diff --git a/src/app/role/role-list/role-list.component.html b/src/app/role/role-list/role-list.component.html new file mode 100644 index 0000000..04e75bc --- /dev/null +++ b/src/app/role/role-list/role-list.component.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + diff --git a/src/app/role/role-list/role-list.component.ts b/src/app/role/role-list/role-list.component.ts new file mode 100644 index 0000000..7cbf7b5 --- /dev/null +++ b/src/app/role/role-list/role-list.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-role-list', + standalone: true, + imports: [], + templateUrl: './role-list.component.html', +}) +export class RoleListComponent { + +} diff --git a/src/app/shelter-list.component/shelter-list.component.component.html b/src/app/shelter-list.component/shelter-list.component.component.html new file mode 100644 index 0000000..0d020b7 --- /dev/null +++ b/src/app/shelter-list.component/shelter-list.component.component.html @@ -0,0 +1 @@ +

shelter-list.component works!

diff --git a/src/app/shelter-list.component/shelter-list.component.component.scss b/src/app/shelter-list.component/shelter-list.component.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shelter-list.component/shelter-list.component.component.ts b/src/app/shelter-list.component/shelter-list.component.component.ts new file mode 100644 index 0000000..5fea7e0 --- /dev/null +++ b/src/app/shelter-list.component/shelter-list.component.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-shelter-list.component', + standalone: true, + imports: [], + templateUrl: './shelter-list.component.component.html', + styleUrl: './shelter-list.component.component.scss' +}) +export class ShelterListComponentComponent { + +} From 4734b712a294995555073b6d31295a8a95ae838f Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Wed, 15 May 2024 18:17:50 +0200 Subject: [PATCH 2/6] role list created --- src/app/app.module.ts | 2 + .../role/role-list/role-list.component.html | 22 ++++++---- src/app/role/role-list/role-list.component.ts | 41 +++++++++++++++++-- src/app/role/role.ts | 12 ++++++ src/app/role/roleService.ts | 16 ++++++++ 5 files changed, 80 insertions(+), 13 deletions(-) create mode 100644 src/app/role/role.ts create mode 100644 src/app/role/roleService.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b813871..97d16ae 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import {AuthenticationBasicService} from './login-basic/authentication-basic.ser import {LoggedInGuard} from './login-basic/loggedin.guard'; import {UserService} from './user/user.service'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import {RoleListComponent} from './role/role-list/role-list.component'; @NgModule({ declarations: [ @@ -37,6 +38,7 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy UserEditComponent, UserDeleteComponent, UserSearchComponent, + RoleListComponent ], imports: [ BrowserModule, diff --git a/src/app/role/role-list/role-list.component.html b/src/app/role/role-list/role-list.component.html index 04e75bc..b29ee64 100644 --- a/src/app/role/role-list/role-list.component.html +++ b/src/app/role/role-list/role-list.component.html @@ -1,10 +1,14 @@ - - - - - Title - - +
+
+
+
+
Name
+ {{role.name}} +
+
+
+
- - + diff --git a/src/app/role/role-list/role-list.component.ts b/src/app/role/role-list/role-list.component.ts index 7cbf7b5..4b6bce0 100644 --- a/src/app/role/role-list/role-list.component.ts +++ b/src/app/role/role-list/role-list.component.ts @@ -1,11 +1,44 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Role } from "../role"; // Asegúrate de importar la clase Role correctamente +import { Router } from "@angular/router"; +import { RoleService } from "../roleService"; // Asegúrate de importar el servicio de roles correctamente +import { PagedResourceCollection } from "@lagoshny/ngx-hateoas-client"; @Component({ selector: 'app-role-list', - standalone: true, - imports: [], templateUrl: './role-list.component.html', }) -export class RoleListComponent { +export class RoleListComponent implements OnInit { + public roles: Role[] = []; + public pageSize = 5; + public page = 1; + public totalRoles = 0; + constructor( + public router: Router, + private roleService: RoleService + ) {} + ngOnInit(): void { + this.roleService + .getPage({ + pageParams: { size: this.pageSize }, + sort: { name: 'ASC' }, + }) + .subscribe((page: PagedResourceCollection) => { + this.roles = page.resources; + this.totalRoles = page.totalElements; + }); + } + + changePage(): void { + this.roleService + .getPage({ + pageParams: { page: this.page - 1, size: this.pageSize }, + sort: { name: 'ASC' }, + }) + .subscribe( + (page: PagedResourceCollection) => (this.roles = page.resources) + ); + } } + diff --git a/src/app/role/role.ts b/src/app/role/role.ts new file mode 100644 index 0000000..06c24c6 --- /dev/null +++ b/src/app/role/role.ts @@ -0,0 +1,12 @@ +import { HateoasResource, Resource } from '@lagoshny/ngx-hateoas-client'; + +@HateoasResource('roles') +export class Role extends Resource { + id: number; + name: string; + + constructor(values: object = {}) { + super(); + Object.assign(this as any, values); + } +} diff --git a/src/app/role/roleService.ts b/src/app/role/roleService.ts new file mode 100644 index 0000000..aa78d5c --- /dev/null +++ b/src/app/role/roleService.ts @@ -0,0 +1,16 @@ +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 + +@Injectable({ providedIn: 'root' }) +export class RoleService extends HateoasResourceOperation { + + constructor() { + super(Role); + } + + public findByName(query: string): Observable> { + return this.searchCollection('findByName', { params: { text: query } }); + } +} From 2facdc4d85a5839949592a2766c40270037682aa Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Wed, 15 May 2024 18:45:53 +0200 Subject: [PATCH 3/6] create role created --- src/app/app-routing.module.ts | 4 + src/app/app.module.ts | 4 +- .../role-create/role-create.component.html | 19 ++++ .../role/role-create/role-create.component.ts | 90 +++++++++++++++++++ 4 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 src/app/role/role-create/role-create.component.html create mode 100644 src/app/role/role-create/role-create.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 823cd78..bada1a6 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,8 @@ import { UserRegisterComponent } from './user/user-register/user-register.compon import { UserEditComponent } from './user/user-edit/user-edit.component'; 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" const routes: Routes = [ { path: 'users/create', component: UserRegisterComponent}, @@ -20,6 +22,8 @@ const routes: Routes = [ { path: '404', component: NotFoundComponent}, { path: '', redirectTo: 'about', pathMatch: 'full'}, { path: 'shelters', component: ShelterListComponent}, + {path: 'role', component:RoleListComponent}, + {path: 'role/create', component:RoleCreateComponent}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 97d16ae..0fc2a13 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import {LoggedInGuard} from './login-basic/loggedin.guard'; 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'; @NgModule({ declarations: [ @@ -38,7 +39,8 @@ import {RoleListComponent} from './role/role-list/role-list.component'; UserEditComponent, UserDeleteComponent, UserSearchComponent, - RoleListComponent + RoleListComponent, + RoleCreateComponent, ], imports: [ BrowserModule, diff --git a/src/app/role/role-create/role-create.component.html b/src/app/role/role-create/role-create.component.html new file mode 100644 index 0000000..c0385ce --- /dev/null +++ b/src/app/role/role-create/role-create.component.html @@ -0,0 +1,19 @@ +
+
+ + + + +
+ Name is required. +
+
+ + +
+ + + + +
+
diff --git a/src/app/role/role-create/role-create.component.ts b/src/app/role/role-create/role-create.component.ts new file mode 100644 index 0000000..4e9df99 --- /dev/null +++ b/src/app/role/role-create/role-create.component.ts @@ -0,0 +1,90 @@ +import { Component, OnInit } from '@angular/core'; +import { Role } from "../role"; // Asegúrate de importar la clase Role correctamente +import { Router } from "@angular/router"; +import { RoleService } from "../roleService"; // Asegúrate de importar el servicio de roles correctamente +import { FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from "@angular/forms"; +import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap"; +import { PagedResourceCollection } from "@lagoshny/ngx-hateoas-client"; + +@Component({ + selector: 'app-role-create', + templateUrl: './role-create.component.html', +}) +export class RoleCreateComponent implements OnInit { + + closeResult = ''; + public isModalSaved: boolean = false; + public roles: Role[] = []; + public role: Role; + public roleNameInput: string = ''; + public roleForm: FormGroup; + + constructor( + private router: Router, + private roleService: RoleService, + private modalService: NgbModal + ) {} + + ngOnInit(): void { + this.role = new Role(); + this.roleForm = new FormGroup({ + name: new FormControl(this.role.name, [ + Validators.required, + ]), + }); + this.loadRoleList(); + } + + loadRoleList() { + this.roleService + .getPage({ + sort: { name: 'ASC' }, + }) + .subscribe((roles: PagedResourceCollection) => { + this.roles = roles.resources.sort((a, b) => + a.name.localeCompare(b.name) + ); + }); + } + + open(content) { + this.modalService + .open(content, { ariaLabelledBy: 'modal-basic-title' }) + .result.then( + (result) => { + this.closeResult = `Closed with: ${result}`; + }, + (reason) => { + this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; + } + ); + } + + private getDismissReason(reason: any): string { + if (reason === ModalDismissReasons.ESC) { + return 'by pressing ESC'; + } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { + return 'by clicking on a backdrop'; + } else { + return `with: ${reason}`; + } + } + + saveAndClose(modal: any) { + this.isModalSaved = true; + modal.close('Save click'); + } + + get name() { + return this.roleForm.get('name'); + } + + onSubmit(): void { + this.roleService + .createResource({ body: this.role }) + .subscribe((role: Role) => { + const uri = (role as any).uri; + this.router.navigate([uri]).then(); + }); + } +} From 00f1e66b43530269f835bcb2d5c58cebc119406f Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Wed, 15 May 2024 23:59:07 +0200 Subject: [PATCH 4/6] Role Navbar added --- src/app/navbar/navbar.component.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 55e04f2..4bfacdc 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -11,13 +11,23 @@ About
  • - -
    +
    List
    • +
  • + +
    + List + Create +
    +
      • From 37b7558759fba8b7f6af4fc1c8eb380ed8f14e3d Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Thu, 16 May 2024 00:05:26 +0200 Subject: [PATCH 5/6] improves to creations --- .../role-create/role-create.component.html | 37 +++++++++++-------- .../role/role-create/role-create.component.ts | 7 +++- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/app/role/role-create/role-create.component.html b/src/app/role/role-create/role-create.component.html index c0385ce..5be391a 100644 --- a/src/app/role/role-create/role-create.component.html +++ b/src/app/role/role-create/role-create.component.html @@ -1,19 +1,26 @@
      -
      - - - - -
      - Name is required. -
      +
      + + + + +
      + Name is required.
      +
      - -
      - - - - -
      + +
      + + + + +
      + + + + diff --git a/src/app/role/role-create/role-create.component.ts b/src/app/role/role-create/role-create.component.ts index 4e9df99..432c681 100644 --- a/src/app/role/role-create/role-create.component.ts +++ b/src/app/role/role-create/role-create.component.ts @@ -18,7 +18,7 @@ export class RoleCreateComponent implements OnInit { public role: Role; public roleNameInput: string = ''; public roleForm: FormGroup; - + showSuccessMessage: boolean = false; constructor( private router: Router, private roleService: RoleService, @@ -86,5 +86,10 @@ export class RoleCreateComponent implements OnInit { const uri = (role as any).uri; this.router.navigate([uri]).then(); }); + this.showSuccessMessage = true; } + closeSuccessMessage(): void { + // Oculta el mensaje de éxito cuando se hace clic en el botón de cierre + this.showSuccessMessage = false; + } } From 9ea44e50499cee906d7ff3e03f83c1e13b325c4e Mon Sep 17 00:00:00 2001 From: Hdelegido Date: Sat, 18 May 2024 12:39:51 +0200 Subject: [PATCH 6/6] role details and delete done --- src/app/app-routing.module.ts | 4 +++ src/app/app.module.ts | 4 +++ .../role-delete/role-delete.component.html | 14 ++++++++ .../role/role-delete/role-delete.component.ts | 34 +++++++++++++++++++ .../role-detail/role-detail.component.html | 28 +++++++++++++++ .../role/role-detail/role-detail.component.ts | 32 +++++++++++++++++ .../role/role-list/role-list.component.html | 31 +++++++++++------ src/app/role/role-list/role-list.component.ts | 1 + src/app/role/role.ts | 7 +++- src/app/role/roleService.ts | 7 +++- 10 files changed, 150 insertions(+), 12 deletions(-) create mode 100644 src/app/role/role-delete/role-delete.component.html create mode 100644 src/app/role/role-delete/role-delete.component.ts create mode 100644 src/app/role/role-detail/role-detail.component.html create mode 100644 src/app/role/role-detail/role-detail.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index bada1a6..0c9462c 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0fc2a13..a5d08df 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/role/role-delete/role-delete.component.html b/src/app/role/role-delete/role-delete.component.html new file mode 100644 index 0000000..fb0b82d --- /dev/null +++ b/src/app/role/role-delete/role-delete.component.html @@ -0,0 +1,14 @@ +
      +
      +
      Please, confirm deletion:
      +
      +
      +
      + + +
      +
      +
      + diff --git a/src/app/role/role-delete/role-delete.component.ts b/src/app/role/role-delete/role-delete.component.ts new file mode 100644 index 0000000..a216819 --- /dev/null +++ b/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']); + } + ); + } +} diff --git a/src/app/role/role-detail/role-detail.component.html b/src/app/role/role-detail/role-detail.component.html new file mode 100644 index 0000000..0237045 --- /dev/null +++ b/src/app/role/role-detail/role-detail.component.html @@ -0,0 +1,28 @@ +
      +
      +

      {{role.name}}

      +
      +
      +
      Role Name
      +

      {{role.name}}

      +
      +
      +
      Role ID
      +

      {{role.id}}

      +
      + +
      +
      + + + +
      +
      +
      + diff --git a/src/app/role/role-detail/role-detail.component.ts b/src/app/role/role-detail/role-detail.component.ts new file mode 100644 index 0000000..8cc168a --- /dev/null +++ b/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(); + } +} diff --git a/src/app/role/role-list/role-list.component.html b/src/app/role/role-list/role-list.component.html index b29ee64..38a7269 100644 --- a/src/app/role/role-list/role-list.component.html +++ b/src/app/role/role-list/role-list.component.html @@ -1,14 +1,25 @@ -
      -
      -
      -
      -
      Name
      - {{role.name}} +
      + +
      +
      +

      Role List

      +
      +
      + + +
      +
      +
      +
      +
      Name
      + {{role.name}} +
      -
      - + + +
      diff --git a/src/app/role/role-list/role-list.component.ts b/src/app/role/role-list/role-list.component.ts index 4b6bce0..147fe55 100644 --- a/src/app/role/role-list/role-list.component.ts +++ b/src/app/role/role-list/role-list.component.ts @@ -26,6 +26,7 @@ export class RoleListComponent implements OnInit { }) .subscribe((page: PagedResourceCollection) => { this.roles = page.resources; + console.log(this.roles); this.totalRoles = page.totalElements; }); } diff --git a/src/app/role/role.ts b/src/app/role/role.ts index 06c24c6..2568c3e 100644 --- a/src/app/role/role.ts +++ b/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(); +} } diff --git a/src/app/role/roleService.ts b/src/app/role/roleService.ts index aa78d5c..81a0358 100644 --- a/src/app/role/roleService.ts +++ b/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 { @@ -13,4 +14,8 @@ export class RoleService extends HateoasResourceOperation { public findByName(query: string): Observable> { return this.searchCollection('findByName', { params: { text: query } }); } + + getCurrentRole(): Role { + return new Role(JSON.parse(localStorage.getItem('currentRole'))); + } }