-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from UdL-EPS-SoftArch/roles-frontend
Roles frontend
- Loading branch information
Showing
16 changed files
with
377 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <form id="role-form" (ngSubmit)="onSubmit()" #form="ngForm" [formGroup]="roleForm" class="needs-validation" novalidate> | ||
| <div class="mb-3"> | ||
| <!-- Etiqueta y campo de entrada para el nombre del rol --> | ||
| <label for="name" class="form-label">Name*</label> | ||
| <input id="name" name="name" formControlName="name" type="text" class="form-control" [(ngModel)]="role.name" required> | ||
| <!-- Mostrar mensaje de error si el nombre es requerido --> | ||
| <div class="invalid-feedback" *ngIf="name.invalid && (name.dirty || name.touched)"> | ||
| Name is required. | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Botones de acción --> | ||
| <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4"> | ||
| <!-- Botón para regresar --> | ||
| <button id="listBtn" type="button" [routerLink]="['..']" class="btn btn-outline-primary me-2">Back</button> | ||
| <!-- Botón para enviar el formulario --> | ||
| <button id="submit" type="submit" [disabled]="!form.valid" class="btn btn-success">Submit</button> | ||
| </div> | ||
| </form> | ||
|
|
||
| <!-- Pop-up de éxito --> | ||
| <div *ngIf="showSuccessMessage" class="alert alert-success alert-dismissible fade show" role="alert"> | ||
| Role created successfully! | ||
| <button type="button" class="btn-close" (click)="closeSuccessMessage()" aria-label="Close"></button> | ||
| </div> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| 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; | ||
| showSuccessMessage: boolean = false; | ||
| 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<Role>) => { | ||
| 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(); | ||
| }); | ||
| this.showSuccessMessage = true; | ||
| } | ||
| closeSuccessMessage(): void { | ||
| // Oculta el mensaje de éxito cuando se hace clic en el botón de cierre | ||
| this.showSuccessMessage = false; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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']); | ||
| } | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <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> | ||
|
|
||
| <!-- Paginación --> | ||
| <ngb-pagination class="d-flex justify-content-center" | ||
| [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalRoles" | ||
| (pageChange)="changePage()"></ngb-pagination> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 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', | ||
| templateUrl: './role-list.component.html', | ||
| }) | ||
| 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<Role>) => { | ||
| this.roles = page.resources; | ||
| console.log(this.roles); | ||
| this.totalRoles = page.totalElements; | ||
| }); | ||
| } | ||
|
|
||
| changePage(): void { | ||
| this.roleService | ||
| .getPage({ | ||
| pageParams: { page: this.page - 1, size: this.pageSize }, | ||
| sort: { name: 'ASC' }, | ||
| }) | ||
| .subscribe( | ||
| (page: PagedResourceCollection<Role>) => (this.roles = page.resources) | ||
| ); | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { HateoasResource, Resource } from '@lagoshny/ngx-hateoas-client'; | ||
|
|
||
| @HateoasResource('roles') | ||
| export class Role extends Resource { | ||
| 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(); | ||
| } | ||
| } |
Oops, something went wrong.