Skip to content

Commit 7b546c2

Browse files
sergiohidalgocaceressergiohidalgocaceres
committed
Clase 04
1 parent 7dc9ce6 commit 7b546c2

22 files changed

+451
-73
lines changed

‎ambulance/src/app/medics/domain/medic.entity.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export interface MedicEntity {
2-
id: string;
2+
id: string | number;
33
name: string;
44
surname: string;
55
lastname: string;

‎ambulance/src/app/medics/medics.module.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,18 @@ import { HttpClientModule } from '@angular/common/http';
77
import { PageMedicsComponent } from './presentation/pages/page-medics/page-medics.component';
88
import { MedicsRoutingModule } from './medics-routing.module';
99
import { SharedModule } from '../shared/shared.module';
10+
import { FormMedicComponent } from './presentation/views/form-medic/form-medic.component';
11+
import { ReactiveFormsModule } from '@angular/forms';
1012

1113
@NgModule({
12-
declarations: [PageMedicsComponent],
13-
imports: [CommonModule, HttpClientModule, MedicsRoutingModule, SharedModule],
14+
declarations: [PageMedicsComponent, FormMedicComponent],
15+
imports: [
16+
CommonModule,
17+
HttpClientModule,
18+
MedicsRoutingModule,
19+
SharedModule,
20+
ReactiveFormsModule,
21+
],
1422
providers: [
1523
MedicUseCase,
1624
{ provide: MedicOperationRepository, useClass: MedicOperation },

‎ambulance/src/app/medics/mocks/medic-metadatacolumn.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[
2+
{
3+
"field": "id",
4+
"title": "ID"
5+
},
6+
{ "field": "name", "title": "Nombre" },
7+
{ "field": "lastname", "title": "Apellido" },
8+
{ "field": "cmp", "title": "Colegiatura" },
9+
{ "field": "dni", "title": "Documento de Identidad" }
10+
]

‎ambulance/src/app/medics/mocks/medics.json‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[
2+
{
3+
"id": 1,
4+
"name": "Carmen",
5+
"surname": "Luisa",
6+
"lastname": "Alegría",
7+
"cmp": "45625",
8+
"dni": "78652416",
9+
"email": "cluisa@correo.com",
10+
"photo": "carmen.jpg",
11+
"isActive": true
12+
},
13+
{
14+
"id": 2,
15+
"name": "Carmen",
16+
"surname": "Luisa",
17+
"lastname": "Alegría",
18+
"cmp": "45625",
19+
"dni": "78652416",
20+
"email": "cluisa@correo.com",
21+
"photo": "carmen.jpg",
22+
"isActive": true
23+
},
24+
{
25+
"id": 3,
26+
"name": "Carmen",
27+
"surname": "Luisa",
28+
"lastname": "Alegría",
29+
"cmp": "45625",
30+
"dni": "78652416",
31+
"email": "cluisa@correo.com",
32+
"photo": "carmen.jpg",
33+
"isActive": true
34+
},
35+
{
36+
"id": 4,
37+
"name": "Carmen",
38+
"surname": "Luisa",
39+
"lastname": "Alegría",
40+
"cmp": "45625",
41+
"dni": "78652416",
42+
"email": "cluisa@correo.com",
43+
"photo": "carmen.jpg",
44+
"isActive": true
45+
},
46+
{
47+
"id": 5,
48+
"name": "Carmen",
49+
"surname": "Luisa",
50+
"lastname": "Alegría",
51+
"cmp": "45625",
52+
"dni": "78652416",
53+
"email": "cluisa@correo.com",
54+
"photo": "carmen.jpg",
55+
"isActive": true
56+
},
57+
{
58+
"id": 6,
59+
"name": "Carmen",
60+
"surname": "Luisa",
61+
"lastname": "Alegría",
62+
"cmp": "45625",
63+
"dni": "78652416",
64+
"email": "cluisa@correo.com",
65+
"photo": "carmen.jpg",
66+
"isActive": true
67+
}
68+
]

‎ambulance/src/app/medics/presentation/pages/page-medics/page-medics.component.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.align-right {
2+
text-align: right;
3+
}

‎ambulance/src/app/medics/presentation/pages/page-medics/page-medics.component.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@
33
<amb-table [metaDataColumns]="metaDataColumns" [data]="data">
44
<ng-container matColumnDef="actions">
55
<th mat-header-cell *matHeaderCellDef></th>
6-
<td mat-cell *matCellDef="let row">
7-
<button mat-button color="primary">
6+
<td mat-cell *matCellDef="let row" class="align-right">
7+
<button
8+
mat-button
9+
color="primary"
10+
matTooltip="EDITAR"
11+
(click)="openForm(row)"
12+
>
813
<mat-icon>edit</mat-icon>
914
</button>
10-
<button mat-button color="accent">
15+
<button mat-button color="accent" matTooltip="ELIMINAR">
1116
<mat-icon>delete</mat-icon>
1217
</button>
1318
</td>

‎ambulance/src/app/medics/presentation/pages/page-medics/page-medics.component.ts‎

Lines changed: 19 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,36 @@
11
import { Component, OnInit } from '@angular/core';
22
import { MedicUseCase } from 'src/app/medics/application/medic.usecase';
3+
import { MedicEntity } from 'src/app/medics/domain/medic.entity';
34
import { IMetaDataColumn } from 'src/app/shared/interfaces/metadatacolumn.interface';
4-
5+
import { UtilsService } from 'src/app/shared/services/utils.service';
6+
import { FormMedicComponent } from '../../views/form-medic/form-medic.component';
7+
import mocksMedics from '../../../mocks/medics.json';
8+
import mocksMedicMetaDataColumn from '../../../mocks/medic-metadatacolumn.json';
59
@Component({
610
selector: 'amb-page-medics',
711
templateUrl: './page-medics.component.html',
812
styleUrls: ['./page-medics.component.css'],
913
})
1014
export class PageMedicsComponent implements OnInit {
11-
metaDataColumns: IMetaDataColumn[] = [
12-
{
13-
field: 'id',
14-
title: 'ID',
15-
},
16-
{ field: 'name', title: 'Nombre' },
17-
{ field: 'lastname', title: 'Apellido' },
18-
{ field: 'cmp', title: 'Colegiatura' },
19-
{ field: 'dni', title: 'Documento de Identidad' },
20-
];
21-
22-
data: any[] = [
23-
{
24-
id: 1,
25-
name: 'Carmen',
26-
lastname: 'Alegría',
27-
cmp: '45625',
28-
dni: '78652416',
29-
},
30-
{
31-
id: 2,
32-
name: 'Carmen',
33-
lastname: 'Alegría',
34-
cmp: '45625',
35-
dni: '78652416',
36-
},
37-
{
38-
id: 3,
39-
name: 'Carmen',
40-
lastname: 'Alegría',
41-
cmp: '45625',
42-
dni: '78652416',
43-
},
44-
{
45-
id: 4,
46-
name: 'Carmen',
47-
lastname: 'Alegría',
48-
cmp: '45625',
49-
dni: '78652416',
50-
},
51-
{
52-
id: 5,
53-
name: 'Carmen',
54-
lastname: 'Alegría',
55-
cmp: '45625',
56-
dni: '78652416',
57-
},
58-
{
59-
id: 6,
60-
name: 'Carmen',
61-
lastname: 'Alegría',
62-
cmp: '45625',
63-
dni: '78652416',
64-
},
65-
];
15+
metaDataColumns: IMetaDataColumn[] = mocksMedicMetaDataColumn;
16+
data: MedicEntity[] = mocksMedics;
6617

67-
constructor(private readonly medicUseCase: MedicUseCase) {}
18+
constructor(
19+
private readonly medicUseCase: MedicUseCase,
20+
private readonly utils: UtilsService
21+
) {}
6822

6923
ngOnInit(): void {}
7024

7125
listar() {
7226
this.medicUseCase.getAll().subscribe(console.log, console.log);
7327
}
28+
29+
openForm(row: MedicEntity | any = null) {
30+
this.utils.openModal(FormMedicComponent, {
31+
disableClose: true,
32+
panelClass: 'container-modal',
33+
data: row,
34+
});
35+
}
7436
}

‎ambulance/src/app/medics/presentation/views/form-medic/form-medic.component.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.container-modal {
2+
width: 650px;
3+
}
4+
5+
.container-modal mat-dialog-container {
6+
padding: 0;
7+
}
8+
9+
.container-modal mat-toolbar {
10+
color: 444;
11+
background: #ececec;
12+
background: -webkit-linear-gradient(#ffffff 0%, #e0e0e0);
13+
background: -moz-linear-gradient(#ffffff 0%, #e0e0e0);
14+
background: -ms-linear-gradient(#ffffff 0%, #e0e0e0);
15+
background: linear-gradient(#ffffff 0%, #e0e0e0);
16+
border-bottom: 1px solid rgb(128, 128, 128);
17+
}
18+
19+
.container-modal mat-dialog-content {
20+
margin: 0;
21+
padding: 24px;
22+
}
23+
24+
.container-modal .container-buttons {
25+
border-top: 1px solid rgba(0, 0, 0, 0.3);
26+
padding-top: 10px;
27+
}

‎ambulance/src/app/medics/presentation/views/form-medic/form-medic.component.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<mat-toolbar fxLayout fxLayoutAlign="space-between center">
2+
<h3>{{ title }}</h3>
3+
<button mat-icon-button mat-dialog-close>
4+
<mat-icon>close</mat-icon>
5+
</button>
6+
</mat-toolbar>
7+
<mat-dialog-content>
8+
<form fxLayout="column" [formGroup]="group">
9+
<div fxLayout fxLayoutAlign="space-between" fxLayoutGap="10px">
10+
<div fxFlex="1 1 33%">
11+
<amb-photo></amb-photo>
12+
</div>
13+
<div fxFlex="1 1 33%">
14+
<mat-form-field appearance="outline">
15+
<mat-label>Nombre</mat-label>
16+
<input type="text" matInput formControlName="name" required />
17+
<mat-error>El campo es obligatorio</mat-error>
18+
</mat-form-field>
19+
<mat-form-field appearance="outline">
20+
<mat-label>Segundo nombre</mat-label>
21+
<input type="text" matInput formControlName="surname" required />
22+
<mat-error>El campo es obligatorio</mat-error>
23+
</mat-form-field>
24+
<mat-form-field appearance="outline">
25+
<mat-label>Apellido</mat-label>
26+
<input type="text" matInput formControlName="lastname" required />
27+
<mat-error>El campo es obligatorio</mat-error>
28+
</mat-form-field>
29+
</div>
30+
<div fxFlex="1 1 33%" fxLayout="column">
31+
<mat-form-field appearance="outline">
32+
<mat-label>Correo</mat-label>
33+
<input type="text" matInput formControlName="email" required />
34+
<mat-error *ngIf="group.get('email').hasError('required')"
35+
>El campo es obligatorio</mat-error
36+
>
37+
<mat-error *ngIf="group.get('email').hasError('emailInvalid')"
38+
>Debe ser un correo</mat-error
39+
>
40+
</mat-form-field>
41+
<mat-form-field appearance="outline">
42+
<mat-label>DNI</mat-label>
43+
<input type="text" matInput formControlName="dni" required />
44+
<mat-error>El campo es obligatorio</mat-error>
45+
</mat-form-field>
46+
<mat-form-field appearance="outline">
47+
<mat-label>CMP</mat-label>
48+
<input type="text" matInput formControlName="cmp" required />
49+
<mat-error>El campo es obligatorio</mat-error>
50+
</mat-form-field>
51+
</div>
52+
</div>
53+
<div
54+
fxLayout
55+
fxLayoutAlign="end center"
56+
fxLayoutGap="20px"
57+
class="container-buttons"
58+
>
59+
<button mat-button mat-dialog-close color="primary">Cancelar</button>
60+
<button
61+
mat-raised-button
62+
color="primary"
63+
(click)="save()"
64+
[disabled]="group.invalid"
65+
>
66+
Guardar
67+
</button>
68+
</div>
69+
</form>
70+
</mat-dialog-content>

0 commit comments

Comments
 (0)