Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 64357a8

Browse files
aledruettaaledruetta
committed
updates angular material
1 parent 0b7c45d commit 64357a8

19 files changed

+364
-113
lines changed

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/app-routing.module.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
3+
import { AgregarEditarEmpleadoComponent } from './components/agregar-editar-empleado/agregar-editar-empleado.component';
4+
import { ListarEmpleadosComponent } from './components/listar-empleados/listar-empleados.component';
35

4-
const routes: Routes = [];
6+
const routes: Routes = [
7+
{ path: '', component: ListarEmpleadosComponent },
8+
{ path: 'add', component: AgregarEditarEmpleadoComponent },
9+
{ path: 'edit/:id', component: AgregarEditarEmpleadoComponent },
10+
{ path: '**', redirectTo: '', pathMatch: 'full' },
11+
];
512

613
@NgModule({
714
imports: [RouterModule.forRoot(routes)],

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/app.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
<app-navbar></app-navbar>
2-
<div style="margin: 10px;">
3-
<app-listar-empleados></app-listar-empleados>
4-
</div>
2+
<router-outlet></router-outlet>

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/app.module.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,28 @@ import { AppComponent } from './app.component';
99
import { NavbarComponent } from './components/navbar/navbar.component';
1010
import { AgregarEditarEmpleadoComponent } from './components/agregar-editar-empleado/agregar-editar-empleado.component';
1111
import { ListarEmpleadosComponent } from './components/listar-empleados/listar-empleados.component';
12+
import { MensajeConfirmarComponent } from './components/shared/mensaje-confirmar/mensaje-confirmar.component';
13+
import { MAT_DATE_LOCALE } from '@angular/material/core';
14+
import { ReactiveFormsModule } from '@angular/forms';
1215

1316
@NgModule({
1417
declarations: [
1518
AppComponent,
1619
NavbarComponent,
1720
AgregarEditarEmpleadoComponent,
18-
ListarEmpleadosComponent
21+
ListarEmpleadosComponent,
22+
MensajeConfirmarComponent,
1923
],
2024
imports: [
2125
BrowserModule,
2226
AppRoutingModule,
2327
BrowserAnimationsModule,
24-
AngularMaterialModule
28+
AngularMaterialModule,
29+
ReactiveFormsModule,
30+
],
31+
providers: [
32+
{provide: MAT_DATE_LOCALE, useValue: 'es-AR'},
2533
],
26-
providers: [],
2734
bootstrap: [AppComponent]
2835
})
2936
export class AppModule { }

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/components/agregar-editar-empleado/agregar-editar-empleado.component.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
img {
2+
width: 100%;
3+
}
4+
5+
:host {
6+
display: flex;
7+
flex-direction: column;
8+
align-items: flex-start;
9+
}
10+
11+
.mat-mdc-radio-button ~ .mat-mdc-radio-button {
12+
margin-left: 16px;
13+
}
14+
15+
.user-field {
16+
width: 100%;
17+
font-size: 16px;
18+
}
19+
20+
.radio-sexo {
21+
text-align: center;
22+
}
23+
24+
.btn-user {
25+
margin-top: 16px;
26+
margin-bottom: 16px;
27+
width: 48%;
28+
}

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/components/agregar-editar-empleado/agregar-editar-empleado.component.html‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,75 @@
1-
<p>agregar-empleado works!</p>
1+
<div class="container">
2+
3+
<div class="row">
4+
<div class="col-lg-6">
5+
<h2>Agregar Empleado</h2>
6+
</div>
7+
</div>
8+
9+
<div class="row">
10+
<div class="col-lg-4">
11+
<form [formGroup]="userForm">
12+
<div class="row">
13+
<span>{{ userForm.value | json }}</span>
14+
15+
<div class="col-lg-12">
16+
<mat-form-field class="user-field" appearance="outline">
17+
<mat-label>Nombre Completo</mat-label>
18+
<input matInput formControlName="nombreCompleto" required>
19+
</mat-form-field>
20+
</div>
21+
22+
<div class="col-lg-12">
23+
<mat-form-field class="user-field" appearance="outline">
24+
<mat-label>Correo</mat-label>
25+
<input matInput formControlName="email" required>
26+
</mat-form-field>
27+
</div>
28+
29+
<div class="col-lg-12">
30+
<mat-form-field class="user-field" appearance="outline">
31+
<mat-label>Fecha de Ingreso</mat-label>
32+
<input matInput [matDatepicker]="picker" formControlName="fechaIngreso">
33+
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
34+
<mat-datepicker #picker></mat-datepicker>
35+
</mat-form-field>
36+
</div>
37+
38+
<div class="col-lg-12">
39+
<mat-form-field class="user-field" appearance="outline">
40+
<mat-label>Teléfono</mat-label>
41+
<input matInput formControlName="telefono" required>
42+
</mat-form-field>
43+
</div>
44+
45+
<div class="col-lg-12">
46+
<mat-form-field class="user-field" appearance="outline">
47+
<mat-label>Estado Civil</mat-label>
48+
<mat-select formControlName="estadoCivil" required>
49+
<mat-option *ngFor="let estado of estadosCiviles" value="{{ estado | uppercase }}">{{ estado }}/a</mat-option>
50+
</mat-select>
51+
</mat-form-field>
52+
</div>
53+
54+
<div class="col-lg-12 radio-sexo">
55+
<mat-radio-group formControlName="sexo" required>
56+
<mat-radio-button value="masculino">Masculino</mat-radio-button>
57+
<mat-radio-button value="femenino">Femenino</mat-radio-button>
58+
</mat-radio-group>
59+
</div>
60+
61+
<div class="col-lg-12 d-flex justify-content-between">
62+
<button mat-raised-button color="warn" class="btn-user" routerLink="/">CANCELAR</button>
63+
<button mat-raised-button color="primary" class="btn-user">ACEPTAR</button>
64+
</div>
65+
66+
</div>
67+
</form>
68+
</div>
69+
70+
<div class="col-lg-7 offset-lg-1">
71+
<img src="../../../assets/img/user.png" alt="Usuario">
72+
</div>
73+
</div>
74+
75+
</div>

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/components/agregar-editar-empleado/agregar-editar-empleado.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@angular/core';
2+
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
23

34
@Component({
45
selector: 'app-agregar-editar-empleado',
@@ -7,4 +8,19 @@ import { Component } from '@angular/core';
78
})
89
export class AgregarEditarEmpleadoComponent {
910

11+
readonly estadosCiviles: string[];
12+
userForm: FormGroup;
13+
14+
constructor(private fb: FormBuilder) {
15+
this.estadosCiviles = ['Soltero', 'Casado', 'Separado', 'Divorciado', 'Viudo'];
16+
this.userForm = this.fb.group({
17+
nombreCompleto: new FormControl('', [Validators.required, Validators.minLength(5)]),
18+
email: new FormControl('', [Validators.required, Validators.email]),
19+
fechaIngreso: new FormControl('', [Validators.required]),
20+
telefono: new FormControl('', [Validators.required, Validators.pattern('^[0-9]*$')]),
21+
estadoCivil: new FormControl('', [Validators.required]),
22+
sexo: new FormControl('', [Validators.required]),
23+
});
24+
}
25+
1026
}

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/components/listar-empleados/listar-empleados.component.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ mat-paginator {
4040
margin: 16px;
4141
}
4242

43-
.pointer {
44-
cursor: pointer;
45-
}
46-
47-
.pointer-edit {
43+
.btn-edit {
4844
color: #5792cd;
4945
}
5046

51-
.pointer-delete {
47+
.btn-delete {
5248
color: #d04242;
5349
}
50+
51+
.col-lg-6.right-align {
52+
text-align: right;
53+
}

‎Programming_Languages/Angular/Udemy/Angular14GuiaCompleta/AngularMaterial/src/app/components/listar-empleados/listar-empleados.component.html‎

Lines changed: 74 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,87 @@
1-
<div>
2-
<mat-form-field>
3-
<mat-label>Filtro</mat-label>
4-
<input matInput (keyup)="applyFilter($event)" #input>
5-
</mat-form-field>
1+
<div class="container">
62

7-
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
3+
<div class="row">
4+
<div class="col-lg-6">
5+
<h2>Listado de Empleados</h2>
6+
</div>
7+
<div class="col-lg-6 right-align">
8+
<button mat-raised-button color="warn" routerLink="/add">AGREGAR</button>
9+
</div>
10+
</div>
11+
<div>
12+
<mat-form-field appearance="outline">
13+
<mat-label>Filtro</mat-label>
14+
<input matInput (keyup)="applyFilter($event)" #input>
15+
</mat-form-field>
816

9-
<!--- Note that these columns can be defined in any order.
10-
The actual rendered columns are set as a property on the row definition" -->
17+
<table mat-table [dataSource]="dataSource" matSort>
1118

12-
<!-- Nombre Id -->
13-
<ng-container matColumnDef="id">
14-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por id"> ID </th>
15-
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
16-
</ng-container>
19+
<!--- Note that these columns can be defined in any order.
20+
The actual rendered columns are set as a property on the row definition" -->
1721

18-
<!-- Nombre Column -->
19-
<ng-container matColumnDef="nombreCompleto">
20-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por nombre"> Nombre </th>
21-
<td mat-cell *matCellDef="let element"> {{element.nombreCompleto}} </td>
22-
</ng-container>
22+
<!-- Nombre Id -->
23+
<ng-container matColumnDef="id">
24+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por id"> ID </th>
25+
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
26+
</ng-container>
2327

24-
<!-- Telefono Column -->
25-
<ng-container matColumnDef="telefono">
26-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por teléfono"> Teléfono </th>
27-
<td mat-cell *matCellDef="let element"> {{element.telefono}} </td>
28-
</ng-container>
28+
<!-- Nombre Column -->
29+
<ng-container matColumnDef="nombreCompleto">
30+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por nombre"> Nombre </th>
31+
<td mat-cell *matCellDef="let element"> {{element.nombreCompleto}} </td>
32+
</ng-container>
2933

30-
<!-- Correo Column -->
31-
<ng-container matColumnDef="correo">
32-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por correo"> Correo </th>
33-
<td mat-cell *matCellDef="let element"> {{element.correo}} </td>
34-
</ng-container>
34+
<!-- Telefono Column -->
35+
<ng-container matColumnDef="telefono">
36+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por teléfono"> Teléfono </th>
37+
<td mat-cell *matCellDef="let element"> {{element.telefono}} </td>
38+
</ng-container>
3539

36-
<!-- FechaIngreso Column -->
37-
<ng-container matColumnDef="fechaIngreso">
38-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por fecha"> Fecha Ingreso </th>
39-
<td mat-cell *matCellDef="let element"> {{element.fechaIngreso | date:'dd/MM/yyyy'}} </td>
40-
</ng-container>
40+
<!-- Correo Column -->
41+
<ng-container matColumnDef="correo">
42+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por correo"> Correo </th>
43+
<td mat-cell *matCellDef="let element"> {{element.correo}} </td>
44+
</ng-container>
4145

42-
<!-- EstadoCivil Column -->
43-
<ng-container matColumnDef="estadoCivil">
44-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por estado civil"> Estado Civil </th>
45-
<td mat-cell *matCellDef="let element"> {{element.estadoCivil}} </td>
46-
</ng-container>
46+
<!-- FechaIngreso Column -->
47+
<ng-container matColumnDef="fechaIngreso">
48+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por fecha"> Fecha Ingreso </th>
49+
<td mat-cell *matCellDef="let element"> {{element.fechaIngreso | date:'dd/MM/yyyy'}} </td>
50+
</ng-container>
4751

48-
<!-- Sexo Column -->
49-
<ng-container matColumnDef="sexo">
50-
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por sexo"> Sexo </th>
51-
<td mat-cell *matCellDef="let element"> {{element.sexo}} </td>
52-
</ng-container>
52+
<!-- EstadoCivil Column -->
53+
<ng-container matColumnDef="estadoCivil">
54+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por estado civil"> Estado Civil </th>
55+
<td mat-cell *matCellDef="let element"> {{element.estadoCivil}} </td>
56+
</ng-container>
5357

54-
<!-- Acciones Column -->
55-
<ng-container matColumnDef="acciones">
56-
<th mat-header-cell *matHeaderCellDef> Acciones </th>
57-
<td mat-cell *matCellDef="let element">
58-
<a class="pointer pointer-edit" (click)="editarEmpleado(element.id)">
59-
<mat-icon fontIcon="edit"></mat-icon>
60-
</a>
61-
<a class="pointer pointer-delete" (click)="eliminarEmpleado(element.id)">
62-
<mat-icon fontIcon="delete"></mat-icon>
63-
</a>
64-
</td>
65-
</ng-container>
58+
<!-- Sexo Column -->
59+
<ng-container matColumnDef="sexo">
60+
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Ordenar por sexo"> Sexo </th>
61+
<td mat-cell *matCellDef="let element"> {{element.sexo}} </td>
62+
</ng-container>
6663

67-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
68-
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
69-
</table>
64+
<!-- Acciones Column -->
65+
<ng-container matColumnDef="acciones">
66+
<th mat-header-cell *matHeaderCellDef> Acciones </th>
67+
<td mat-cell *matCellDef="let element">
68+
<a class="pointer btn-edit" (click)="editarEmpleado(element.id)">
69+
<mat-icon fontIcon="edit"></mat-icon>
70+
</a>
71+
<a class="pointer btn-delete" (click)="eliminarEmpleado(element.id)">
72+
<mat-icon fontIcon="delete"></mat-icon>
73+
</a>
74+
</td>
75+
</ng-container>
76+
77+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
78+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
79+
</table>
80+
81+
<mat-paginator [pageSizeOptions]="pageSizeOptions"
82+
[pageSize]="pageSize"
83+
showFirstLastButtons>
84+
</mat-paginator>
85+
</div>
7086

71-
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
72-
showFirstLastButtons>
73-
</mat-paginator>
7487
</div>

0 commit comments

Comments
 (0)