Modulo Administradores
En esta apartado vamos a publicar como terminamos el módulo de administradores en la parte front-end primero que nada vamos a crear un component llamado listadmin
ng g c dashboard/listadmin
Creamos otro component para el díalogo de actualizar lo nombramos updateadmindialog
ng g c dashboard/updateadmindialog
Ahora creamos un component de díalogo para eliminar administradores lo nombramos eliconfirmadmin
ng g c dashboard/eliconfirmadmin
Ahora modificamos el archivo que se llama administrador.service.ts lo dejamos de la siguiente manera:
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, catchError,throwError } from 'rxjs';
import { Administrador } from './administrador';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class AdministradorService {
private httpHeaders = new HttpHeaders({'Content-Type':'application/json'})
constructor(private http:HttpClient) {}
getAdministradores():Observable<Administrador[]>
{
return this.http.get<Administrador[]>(environment.urlApi+"/admin")
}
getAdministrador(email:string):Observable<Administrador>
{
return this.http.get<Administrador>(environment.urlApi+"/admin/"+email).pipe(
catchError(this.handleError)
)
}
crearAdministrador(admin:Administrador):Observable<Administrador>
{
return this.http.post<Administrador>(environment.urlApi+"/admin",admin).pipe(
catchError(this.handleError)
)
}
update(admin:Administrador):Observable<any>{
return this.http.put<any>(environment.urlApi+"/admin/"+admin.idAdmin,admin,{headers:this.httpHeaders}).pipe(
catchError(e=>{
console.error(e.error.mensaje);
return throwError(e);
})
)
}
deleteAdmin(id:number):Observable<any>{
return this.http.delete<any>(environment.urlApi+"/admin/"+id).pipe(
catchError(e=>{
console.error(e.error.mensaje);
return throwError(e);
})
)
}
private handleError(error:HttpErrorResponse){
if(error.status===0){
console.error('Se ha producio un error ', error.error);
}
else{
console.error('Backend retornó el código de estado ', error.status, error.error);
}
return throwError(()=> new Error('Algo falló. Por favor intente nuevamente.'));
}
}
El archivo app.module.ts queda de la siguiente manera:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { LoginComponent } from './pages/login/login.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import { MenuComponent } from './shared/menu/menu.component';
import {MatTableModule} from '@angular/material/table';
import { MatInputModule} from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import { FormadminComponent } from './dashboard/formadmin/formadmin.component';
import { CreateuserdialogComponent } from './dashboard/createuserdialog/createuserdialog.component';
import {MatDialogModule} from '@angular/material/dialog';
import { JwtInterceptorService } from './services/aut/jwt-interceptor.service';
import { ErrorInterceptorService } from './services/aut/error-interceptor.service';
import { ListadminComponent } from './dashboard/listadmin/listadmin.component';
import {MatIconModule} from '@angular/material/icon';
import { UpdateadmindialogComponent } from './dashboard/updateadmindialog/updateadmindialog.component';
import { EliconfirmadminComponent } from './dashboard/eliconfirmadmin/eliconfirmadmin.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
LoginComponent,
DashboardComponent,
MenuComponent,
FormadminComponent,
CreateuserdialogComponent,
ListadminComponent,
UpdateadmindialogComponent,
EliconfirmadminComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatMenuModule,
MatButtonModule,
MatCardModule,
MatInputModule,
ReactiveFormsModule,
HttpClientModule,
MatDialogModule,
MatTableModule,
MatIconModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Vamos a modifcar el archivo eliconfirmadmin.component.ts dejando de la siguiente manera:
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AdministradorService } from 'src/app/services/administrador.service';
@Component({
selector: 'app-eliconfirmadmin',
templateUrl: './eliconfirmadmin.component.html',
styleUrls: ['./eliconfirmadmin.component.css']
})
export class EliconfirmadminComponent implements OnInit {
constructor( public dialogRef: MatDialogRef<EliconfirmadminComponent>,@Inject(MAT_DIALOG_DATA) public data: any,
private adminService:AdministradorService) { }
ngOnInit(): void {
}
eliminar(){
console.log("El id es: "+this.data)
this.adminService.deleteAdmin(this.data).subscribe(
response => {
this.dialogRef.close();
} );
}
}
En el archivo eliconfirmadmin.component.html escribimos:
<h1 mat-dialog-title>Confirmación</h1>
<div mat-dialog-content>Estas seguro que quieres elminar el administrador?</div>
<div mat-dialog-actions class="mt-15">
<button mat-raised-button color="primary" (click)="eliminar()">Si</button>
<button mat-raised-button mat-dialog-close>No</button>
</div>
Vamos con el dialogo de actualización modificamos el archivo updateadmindialog.component.ts
import { ChangeDetectorRef, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatTable } from '@angular/material/table';
import { Router } from '@angular/router';
import { Administrador } from 'src/app/services/administrador';
import { AdministradorService } from 'src/app/services/administrador.service';
@Component({
selector: 'app-updateadmindialog',
templateUrl: './updateadmindialog.component.html',
styleUrls: ['./updateadmindialog.component.css']
})
export class UpdateadmindialogComponent implements OnInit {
@ViewChild(MatTable) myTable?: MatTable<any>;
adminError:string="";
adminForm : FormGroup;
administradores:Administrador[] =[];
constructor(public dialogRef: MatDialogRef<UpdateadmindialogComponent>
, @Inject(MAT_DIALOG_DATA) public data: Administrador,private adminService:AdministradorService,private router:Router
,private cd: ChangeDetectorRef
) {
this.adminForm = new FormGroup({
"idAdmin": new FormControl(''),
"nombre": new FormControl(''),
"apellidoPaterno": new FormControl(''),
"apellidoMaterno": new FormControl(''),
"correo": new FormControl(''),
"celular": new FormControl(''),
"password": new FormControl(''),
"rol": new FormControl(''),
"enabled": new FormControl(''),
"credentialsNonExpired":new FormControl(''),
"accountNonExpired":new FormControl(''),
"authorities":new FormControl(''),
"accountNonLocked":new FormControl(''),
"username":new FormControl('')
});
this.adminForm.setValue(data);
}
ngOnInit(): void {
}
actualizarAdmin(){
this.adminService.update(this.adminForm.value as Administrador)
.subscribe({
next:(userData)=>{
console.log(userData);
},
error:(errorData)=>{
console.error(errorData);
this.adminError=errorData;
},
complete:()=>{
this.dialogRef.close();
}
})
}
}
Creamos el archivo html updateadmindialog.component.html
<h1 mat-dialog-title>Actualizar administrador</h1>
<div mat-dialog-content>
<form [formGroup]="adminForm">
<p class="text-danger">{{adminError}}</p>
<p>
<mat-form-field>
<input type="text" formControlName="idAdmin" matInput placeholder="Introducir Nombre" readonly>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="text" formControlName="nombre" matInput placeholder="Introducir Nombre">
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="text" formControlName="apellidoPaterno" matInput placeholder="Introducir Apellido Paterno">
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="text" formControlName="apellidoMaterno" matInput placeholder="Introducir Apellido Materno">
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="text" formControlName="correo" matInput placeholder="Introducir email">
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="text" formControlName="celular" matInput placeholder="Introducir celular">
</mat-form-field>
</p>
<p>
<mat-form-field>
<input type="password" formControlName="password" matInput placeholder="Introducir Password" readonly>
</mat-form-field>
</p>
<mat-form-field appearance="fill">
<mat-label>Perfil Administrador</mat-label>
<select matNativeControl required formControlName="rol">
<option value="USER">Usuario</option>
<option value="ADMIN">Administrador</option>
</select>
</mat-form-field>
</form>
</div>
<div class="mt-5" mat-dialog-actions>
<button mat-raised-button color="primary" [disabled]="adminForm.dirty && adminForm.errors" (click)="actualizarAdmin()" cdkFocusInitial>Yes</button>
<button mat-raised-button mat-dialog-close>No</button>
</div>
Lo que sigue ahora es modficar la lista de administradores escribmos en el archivo listadmin.component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Administrador } from 'src/app/services/administrador';
import { AdministradorService } from 'src/app/services/administrador.service';
import { HelperService } from 'src/app/services/helper.service';
import { UpdateadmindialogComponent } from '../updateadmindialog/updateadmindialog.component';
import { AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { EliconfirmadminComponent } from '../eliconfirmadmin/eliconfirmadmin.component';
@Component({
selector: 'app-listadmin',
templateUrl: './listadmin.component.html',
styleUrls: ['./listadmin.component.css']
})
export class ListadminComponent implements OnInit {
public userAdminOn:boolean=false;
administradores:Administrador[] =[];
columnas: string[] = ['idAdmin','nombre','apellidoPaterno','apellidoMaterno','correo','celular','rol','acciones'];
constructor(private formBuilder:FormBuilder,private adminService:AdministradorService,private helper: HelperService,
public dialog: MatDialog) { }
ngOnInit(): void {
this.helper.customRolOn.subscribe(
{
next:(userAdminOn)=>{
this.userAdminOn=userAdminOn;
console.log("El dato es igual:"+this.userAdminOn);
}
}
);
this.adminService.getAdministradores().subscribe(
administradores => this.administradores=administradores
);
}
edit(data: Administrador) {
const dialogRef = this.dialog.open(UpdateadmindialogComponent, {
width: '400px',
data: data
});
dialogRef.afterClosed().subscribe(result => {
this.adminService.getAdministradores().subscribe(
administradores => this.administradores=administradores
);
});
}
delete(id: any) {
console.log(id);
const dialogRef = this.dialog.open(EliconfirmadminComponent,{
data:id
});
dialogRef.afterClosed().subscribe(result => {
this.adminService.getAdministradores().subscribe(
administradores => this.administradores=administradores
);
});
}
}
ahora escribmos el html listadmin.component.html
<app-menu>
</app-menu>
<mat-card class="example-card">
<mat-card-content>
<mat-card-title>Administradores</mat-card-title>
<div *ngIf="userAdminOn">
<table #myTable mat-table [dataSource]="administradores" class="mat-elevation-z8">
<ng-container matColumnDef="idAdmin">
<th mat-header-cell *matHeaderCellDef> ID ADMIN</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.idAdmin}} </td>
</ng-container>
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef> Nombre</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.nombre}} </td>
</ng-container>
<ng-container matColumnDef="apellidoPaterno">
<th mat-header-cell *matHeaderCellDef>Apellido Paterno</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.apellidoPaterno}} </td>
</ng-container>
<ng-container matColumnDef="apellidoMaterno">
<th mat-header-cell *matHeaderCellDef>Apellido Materno</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.apellidoMaterno}} </td>
</ng-container>
<ng-container matColumnDef="correo">
<th mat-header-cell *matHeaderCellDef>Email</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.correo}} </td>
</ng-container>
<ng-container matColumnDef="celular">
<th mat-header-cell *matHeaderCellDef>Celular</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.celular}} </td>
</ng-container>
<ng-container matColumnDef="rol">
<th mat-header-cell *matHeaderCellDef>rol</th>
<td mat-cell *matCellDef="let administrador"> {{administrador.rol}} </td>
</ng-container>
<ng-container matColumnDef="acciones">
<th mat-header-cell *matHeaderCellDef> Acciones </th>
<td mat-cell *matCellDef="let administrador">
<button mat-icon-button color="accent" (click)="edit(administrador)">
<mat-icon aria-label="Edit">edit</mat-icon>
</button>
<button mat-icon-button (click)="delete(administrador.idAdmin)">
<mat-icon mat-icon-button color="warn">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</table>
</div>
</mat-card-content>
<div *ngIf="!userAdminOn">
<mat-card-content>
<mat-card-title>No tienes permiso para ver los administradores</mat-card-title>
</mat-card-content>
</div>
</mat-card>
Colocamos en la de la lista de administradores en el archivo app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { LoginComponent } from './pages/login/login.component';
import { FormadminComponent } from './dashboard/formadmin/formadmin.component';
import { ListadminComponent } from './dashboard/listadmin/listadmin.component';
const routes: Routes = [
{path:'',redirectTo:'/inicio', pathMatch:'full'},
{path:'inicio',component:DashboardComponent},
{path:'login',component:LoginComponent},
{path:'crearAdmin',component:FormadminComponent} ,
{path:'listarAdmin',component:ListadminComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Para invocar los administradores registrados los colocamos en el menú modifcando el siguiente archivo menu.component.ts
<button mat-button [matMenuTriggerFor]="inicioMenu">Inicio</button>
<mat-menu #inicioMenu="matMenu" yPosition="above">
<button *ngIf="!userLoginOn" mat-menu-item routerLink="/login">Iniciar Sesión</button>
<button *ngIf="userLoginOn" mat-menu-item routerLink="/crearAdmin">Crear Administrador</button>
<button *ngIf="userLoginOn" mat-menu-item routerLink="/listarAdmin">Listar Administrador</button>
<button *ngIf="userLoginOn" (click)="logout()" mat-menu-item routerLink="/inicio">Cerrar Sesión</button>
</mat-menu>
Por último le hacemos una modifcación al archivo formadmin.component.ts Para que cuando se cree el administrador se mande a llamar automáticamente la lista de administradores quedando el archivo de la siguiente manera.
import { Component, OnInit } from '@angular/core';
import {AbstractControl, FormBuilder,Validators} from '@angular/forms';
import { Router } from '@angular/router';
import {MatDialog} from '@angular/material/dialog';
import { CreateuserdialogComponent } from '../createuserdialog/createuserdialog.component';
import { AdministradorService } from 'src/app/services/administrador.service';
import { Administrador } from 'src/app/services/administrador';
import { HelperService } from 'src/app/services/helper.service';
@Component({
selector: 'app-formadmin',
templateUrl: './formadmin.component.html',
styleUrls: ['./formadmin.component.css']
})
export class FormadminComponent implements OnInit {
public userAdminOn:boolean=false;
adminError:string="";
adminForm=this.formBuilder.group({
nombre:['',Validators.required],
apellidoPaterno:['',Validators.required],
apellidoMaterno:'',
correo:['',[Validators.required,Validators.email]],
celular:['',[Validators.required,Validators.pattern("^[0-9]*$")]],
password:['',Validators.required],
rol:''
}
)
constructor(private formBuilder:FormBuilder,public dialog: MatDialog,
private adminService:AdministradorService,private router:Router,
private helper: HelperService
) { }
ngOnInit(): void {
this.helper.customRolOn.subscribe(
{
next:(userAdminOn)=>{
this.userAdminOn=userAdminOn;
console.log("El dato es igual:"+this.userAdminOn);
}
}
);
}
get f(): { [key: string]: AbstractControl } {
return this.adminForm.controls;
}
insertarAdmin(){
if(this.adminForm.valid){
this.adminService.crearAdministrador(this.adminForm.value as Administrador).subscribe({
next:(userData)=>{
console.log(userData);
},
error:(errorData)=>{
console.error(errorData);
this.adminError=errorData;
},
complete:()=>{
this.dialog.open(CreateuserdialogComponent);
this.router.navigateByUrl('/listarAdmin');
this.adminForm.reset();
}
})
}
else{
this.adminForm.markAllAsTouched();
//alert("Ingresar los datos correctamente");
}
}
}