Skip to content

Commit

Permalink
feat: udistrital/sisifo_documentacion#295 Cambio de interfaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@K3vinchaparro
K3vinchaparro committed Nov 30, 2024
1 parent 24fe484 commit 424d084
Show file tree
Hide file tree
Showing 13 changed files with 673 additions and 611 deletions.
3 changes: 3 additions & 0 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,5 +113,8 @@
}
}
}
},
"cli": {
"analytics": false
}
}
31 changes: 31 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start": "ng serve --port 4202",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
Expand All @@ -23,6 +23,7 @@
"@angular/platform-browser-dynamic": "^17.3.12",
"@angular/router": "^17.3.12",
"rxjs": "~7.8.0",
"bootstrap": "^5.3.0",
"single-spa": ">=4.0.0",
"single-spa-angular": "^9.1.2",
"sweetalert2": "^11.12.1",
Expand Down
195 changes: 125 additions & 70 deletions src/app/modules/gestion-usuarios/actualizar-usuario/actualizar-usuario.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,136 @@
<br />
<br />
<br />
<br />

<div class="container-border">
<div *ngIf="loading" class="spinner-container">
<mat-progress-spinner
class="spinner"
[diameter]="50"
[strokeWidth]="5"
mode="indeterminate"
></mat-progress-spinner>
</div>
<div class="container">
<mat-card class="p-4">
<div class="row">
<div class="col-12">
<h2 style="color: var(--md-primary-700)">Actualizar Usuario(a)</h2>

<div *ngIf="loading" class="spinner-container">
<mat-progress-spinner
class="spinner"
[diameter]="50"
[strokeWidth]="5"
mode="indeterminate"
></mat-progress-spinner>
</div>
<div
class="d-flex justify-content-center align-items-center fondo-acento-50 my-4"
>
<mat-icon class="mx-2"> info </mat-icon>
<p class="mx-2">Información del usuario</p>
</div>

<h2 class="titulo">Actualizar Usuario(a)</h2>
<div class="row">
<!-- Documento de identidad -->
<mat-form-field class="col-12 col-md-6 col-lg-4" appearance="outline">
<mat-label>Documento de identidad:</mat-label>
<mat-icon matSuffix color="primary">badge</mat-icon>
<input type="text" matInput #documentoInput [disabled]="true" />
</mat-form-field>

<div class="inputs">
<mat-form-field appearance="fill">
<mat-label>Documento de identidad:</mat-label>
<input type="text" matInput #documentoInput readonly />
</mat-form-field>
<!-- Correo -->
<mat-form-field class="col-12 col-md-6 col-lg-4" appearance="outline">
<mat-label>Correo:</mat-label>
<mat-icon matSuffix color="primary">email</mat-icon>
<input type="text" matInput #emailInput [disabled]="true" />
</mat-form-field>

<mat-form-field appearance="fill" class="correo">
<mat-label>Correo:</mat-label>
<input type="text" matInput #emailInput readonly />
</mat-form-field>
</div>
<!-- Nombres y Apellidos -->
<mat-form-field class="col-12 col-md-6 col-lg-4" appearance="outline">
<mat-label>Nombres y Apellidos:</mat-label>
<mat-icon matSuffix color="primary">person</mat-icon>
<input
type="text"
matInput
[value]="nombreCompleto"
[disabled]="true"
/>
</mat-form-field>
</div>

<div class="nombre">
<mat-form-field appearance="fill">
<mat-label>Nombres y Apellidos:</mat-label>
<input type="text" matInput [value]="nombreCompleto" readonly />
</mat-form-field>
</div>
<div
class="d-flex justify-content-center align-items-center fondo-acento-50 mt-4 mb-3"
>
<mat-icon> info </mat-icon>
<p class="mx-2">Información del rol</p>
</div>

<div class="selector">
<mat-form-field appearance="fill" class="rol">
<mat-label>Rol:</mat-label>
<input type="text" matInput #rolInput readonly />
</mat-form-field>
<div class="row">
<!-- Rol -->
<mat-form-field class="col-12 col-md-6 col-lg-3" appearance="outline">
<mat-label>Rol:</mat-label>
<mat-icon matSuffix color="primary">account_circle</mat-icon>
<input type="text" matInput #rolInput disabled />
</mat-form-field>

<mat-form-field>
<mat-label>Estado:</mat-label>
<mat-select [(ngModel)]="estadoPeriodo">
<mat-option *ngFor="let estado of estados" [value]="estado">
{{ estado }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Fecha Inicial -->
<mat-form-field class="col-12 col-md-6 col-lg-3" appearance="outline">
<mat-label>Fecha Inicial Rol:</mat-label>
<input
matInput
[matDatepicker]="picker1"
[(ngModel)]="fechaInicioRol"
disabled
/>
<mat-datepicker-toggle
matIconSuffix
[for]="picker1"
></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<div class="fechas">
<mat-form-field>
<mat-label>Fecha Inicial Rol:</mat-label>
<input matInput [matDatepicker]="picker1" [(ngModel)]="fechaInicioRol" readonly />
<mat-datepicker-toggle
matIconSuffix
[for]="picker1"
disabled
></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<!-- Fecha Final -->
<mat-form-field class="col-12 col-md-6 col-lg-3" appearance="outline">
<mat-label>Fecha Final Rol:</mat-label>
<input
matInput
[matDatepicker]="picker2"
[(ngModel)]="fechaFinRol"
disabled
/>
<mat-datepicker-toggle
matIconSuffix
[for]="picker2"
></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

<mat-form-field>
<mat-label>Fecha Final Rol:</mat-label>
<input matInput [matDatepicker]="picker2" [(ngModel)]="fechaFinRol" />
<mat-datepicker-toggle
matIconSuffix
[for]="picker2"
></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
<!-- Estado -->
<mat-form-field class="col-12 col-md-6 col-lg-3" appearance="outline">
<mat-label>Estado:</mat-label>
<mat-icon matSuffix color="primary">radio_button_checked</mat-icon>
<mat-select [(ngModel)]="estadoPeriodo">
<mat-option *ngFor="let estado of estados" [value]="estado">
{{ estado }}
</mat-option>
</mat-select>
</mat-form-field>
</div>

<div class="button-container">
<button mat-raised-button class="Bcancelar">Cancelar</button>
<button mat-raised-button color="primary" (click)="ActualizarPeriodo()">Guardar</button>
</div>
<div class="d-flex justify-content-center align-items-center mt-3 mb-2">
<mat-icon color="primary"> info </mat-icon>
<p class="mx-2">¿Actualizar el estado del usuario?</p>
</div>
</div>
<mat-dialog-actions align="center">
<button
mat-stroked-button
color="primary"
style="border: 1px solid var(--md-primary-500)"
[mat-dialog-close]
class="mx-1 mb-sm"
>
<mat-icon>close</mat-icon>No, cancelar
</button>
<button
mat-raised-button
color="primary"
(click)="ActualizarPeriodo()"
class="mx-1 mb-sm"
>
<mat-icon>cloud_upload</mat-icon>
Sí, actualizar
</button>
</mat-dialog-actions>
</div>
</mat-card>
</div>
Loading

0 comments on commit 424d084

Please sign in to comment.