|
|
@@ -8,16 +8,10 @@
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Nombre(s)</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el nombre"
|
|
|
- formControlName="nombre"
|
|
|
- required
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el nombre" formControlName="nombre" required />
|
|
|
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
|
|
|
- <mat-error *ngIf="nombre!.invalid"
|
|
|
- >{{
|
|
|
- nombre!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
+ <mat-error *ngIf="nombre!.invalid">{{
|
|
|
+ nombre!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -26,15 +20,9 @@
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Apellido Paterno</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el apellido paterno"
|
|
|
- formControlName="ape_p"
|
|
|
- required
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el apellido paterno" formControlName="ape_p" required />
|
|
|
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
|
|
|
- <mat-error *ngIf="ape_p!.invalid"
|
|
|
- >{{ ape_p!.hasError("required") ? "Debe ingresar este campo" : "" }}
|
|
|
+ <mat-error *ngIf="ape_p!.invalid">{{ ape_p!.hasError("required") ? "Debe ingresar este campo" : "" }}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
@@ -42,108 +30,66 @@
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Apellido Materno</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el apellido materno"
|
|
|
- formControlName="ape_m"
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el apellido materno" formControlName="ape_m" />
|
|
|
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
- <mat-label>Correo Electrónico</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el correo electrónico"
|
|
|
- formControlName="email"
|
|
|
- required
|
|
|
- />
|
|
|
+ <mat-label>Correo electrónico</mat-label>
|
|
|
+ <input matInput placeholder="Ingrese el correo electrónico" formControlName="email" required
|
|
|
+ pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" />
|
|
|
<mat-icon matSuffix>email</mat-icon>
|
|
|
- <mat-error *ngIf="email!.invalid"
|
|
|
- >{{
|
|
|
- email!.hasError("email") || email!.hasError("required")
|
|
|
- ? "El correo electrónico no es válido"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="email!.invalid">{{
|
|
|
+ email!.hasError("email") || email!.hasError("required")
|
|
|
+ ? "El correo electrónico no es válido"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
|
|
|
- <mat-grid-tile
|
|
|
- colspan="4"
|
|
|
- *ngIf="titulo != 'Modificar'"
|
|
|
- >
|
|
|
+ <mat-grid-tile colspan="4" *ngIf="titulo != 'Modificar'">
|
|
|
<mat-form-field hintLabel="Mínimo 8 caracteres" appearance="standard">
|
|
|
<mat-label>Contraseña</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- [type]="hide1 ? 'password' : 'text'"
|
|
|
- placeholder="Ingrese la contraseña"
|
|
|
+ <input matInput [type]="hide1 ? 'password' : 'text'" placeholder="Ingrese la contraseña"
|
|
|
pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
|
|
|
- formControlName="password"
|
|
|
- autocomplete="on"
|
|
|
- required
|
|
|
- />
|
|
|
+ formControlName="password" autocomplete="on" required />
|
|
|
|
|
|
- <a
|
|
|
- class="mat-form-field"
|
|
|
- mat-icon-button
|
|
|
- matSuffix
|
|
|
- (click)="hide1 = !hide1"
|
|
|
- [attr.aria-label]="'Hide password'"
|
|
|
- [attr.aria-pressed]="hide1"
|
|
|
- >
|
|
|
+ <a class="mat-form-field" mat-icon-button matSuffix (click)="hide1 = !hide1"
|
|
|
+ [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
|
|
|
<mat-icon>{{ hide1 ? "visibility_off" : "visibility" }}</mat-icon>
|
|
|
</a>
|
|
|
- <mat-hint align="end"
|
|
|
- ><a class="generarContrasena" (click)="generatePassword()"
|
|
|
- ><b>Generar Contraseña</b></a
|
|
|
- ></mat-hint
|
|
|
- >
|
|
|
+ <mat-hint align="end"><a class="generarContrasena" (click)="generatePassword()"><b>Generar Contraseña</b></a>
|
|
|
+ </mat-hint>
|
|
|
<mat-error *ngIf="password!.invalid">
|
|
|
{{
|
|
|
- password!.hasError("minlength")
|
|
|
- ? "Mínimo 8 caracteres"
|
|
|
- : "Debe tener al menos una minúscula,
|
|
|
+ password!.hasError("minlength")
|
|
|
+ ? "Mínimo 8 caracteres"
|
|
|
+ : "Debe tener al menos una minúscula,
|
|
|
mayúscula, un dígito y un caracter especial"
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
|
|
|
- <mat-grid-tile
|
|
|
- colspan="4"
|
|
|
- *ngIf="titulo != 'Modificar'"
|
|
|
- >
|
|
|
+ <mat-grid-tile colspan="4" *ngIf="titulo != 'Modificar'">
|
|
|
<mat-form-field hintLabel="Mínimo 8 caracteres" appearance="standard">
|
|
|
<mat-label>Repita Contraseña</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- [type]="hide2 ? 'password' : 'text'"
|
|
|
- placeholder="Repita la contraseña"
|
|
|
- autocomplete="on"
|
|
|
+ <input matInput [type]="hide2 ? 'password' : 'text'" placeholder="Repita la contraseña" autocomplete="on"
|
|
|
pattern="^(?=(?:.*\d){1})(?=(?:.*[a-z]){1})(?=(?:.*[A-Z]){1})(?=(?:.*[ñÑ\-_^¿.#¡!@$&+=*]){1})\S{8,20}$"
|
|
|
- formControlName="password_confirmation"
|
|
|
- required
|
|
|
- />
|
|
|
- <a
|
|
|
- class="mat-form-field"
|
|
|
- mat-icon-button
|
|
|
- matSuffix
|
|
|
- (click)="hide2 = !hide2"
|
|
|
- [attr.aria-label]="'Hide password'"
|
|
|
- [attr.aria-pressed]="hide1"
|
|
|
- >
|
|
|
+ formControlName="password_confirmation" required />
|
|
|
+ <a class="mat-form-field" mat-icon-button matSuffix (click)="hide2 = !hide2"
|
|
|
+ [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
|
|
|
<mat-icon>{{ hide2 ? "visibility_off" : "visibility" }}</mat-icon>
|
|
|
</a>
|
|
|
|
|
|
<mat-error *ngIf="password_confirmation!.invalid">
|
|
|
{{
|
|
|
- password_confirmation!.hasError("minlength")
|
|
|
- ? "Mínimo 8 caracteres"
|
|
|
- : "Debe tener al menos una minúscula,
|
|
|
+ password_confirmation!.hasError("minlength")
|
|
|
+ ? "Mínimo 8 caracteres"
|
|
|
+ : "Debe tener al menos una minúscula,
|
|
|
mayúscula, un dígito y un caracter especial"
|
|
|
}}
|
|
|
</mat-error>
|
|
|
@@ -153,19 +99,12 @@
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>R.F.C</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el RFC personal"
|
|
|
- formControlName="rfc_usuario"
|
|
|
- maxlength="13"
|
|
|
- required
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el RFC personal" formControlName="rfc_usuario" maxlength="13" required />
|
|
|
<mat-icon matSuffix>badge</mat-icon>
|
|
|
- <mat-error *ngIf="rfc_usuario!.invalid"
|
|
|
- >{{
|
|
|
- rfc_usuario!.hasError("required")
|
|
|
- ? "Debe ingresar este campo"
|
|
|
- : "Ingrese un R.F.C válido"
|
|
|
+ <mat-error *ngIf="rfc_usuario!.invalid">{{
|
|
|
+ rfc_usuario!.hasError("required")
|
|
|
+ ? "Debe ingresar este campo"
|
|
|
+ : "Ingrese un R.F.C válido"
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -178,18 +117,12 @@
|
|
|
<mat-grid-tile colspan="4" *ngIf="titulo != 'Modificar'">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Número de Empleado</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el número de empleado"
|
|
|
- formControlName="numero_empleado"
|
|
|
- required
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el número de empleado" formControlName="numero_empleado" required />
|
|
|
<mat-icon matSuffix>tag</mat-icon>
|
|
|
- <mat-error *ngIf="numero_empleado!.invalid"
|
|
|
- >{{
|
|
|
- numero_empleado!.hasError("required")
|
|
|
- ? "Debe ingresar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="numero_empleado!.invalid">{{
|
|
|
+ numero_empleado!.hasError("required")
|
|
|
+ ? "Debe ingresar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -198,16 +131,10 @@
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>ID del Empleado</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese el número de empleado"
|
|
|
- formControlName="id_usuario"
|
|
|
- required
|
|
|
- />
|
|
|
+ <input matInput placeholder="Ingrese el número de empleado" formControlName="id_usuario" required />
|
|
|
<mat-icon matSuffix>tag</mat-icon>
|
|
|
- <mat-error *ngIf="id_usuario!.invalid"
|
|
|
- >{{
|
|
|
- id_usuario!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
+ <mat-error *ngIf="id_usuario!.invalid">{{
|
|
|
+ id_usuario!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -222,11 +149,10 @@
|
|
|
</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>business</mat-icon>
|
|
|
- <mat-error *ngIf="rfc_unidad_negocio!.invalid"
|
|
|
- >{{
|
|
|
- rfc_unidad_negocio!.hasError("required")
|
|
|
- ? "Debe ingresar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="rfc_unidad_negocio!.invalid">{{
|
|
|
+ rfc_unidad_negocio!.hasError("required")
|
|
|
+ ? "Debe ingresar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -241,11 +167,10 @@
|
|
|
</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>account_circle</mat-icon>
|
|
|
- <mat-error *ngIf="tipo_usuario!.invalid"
|
|
|
- >{{
|
|
|
- tipo_usuario!.hasError("required")
|
|
|
- ? "Debe ingresar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="tipo_usuario!.invalid">{{
|
|
|
+ tipo_usuario!.hasError("required")
|
|
|
+ ? "Debe ingresar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -255,14 +180,12 @@
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Política</mat-label>
|
|
|
<mat-select formControlName="politica">
|
|
|
- <mat-option *ngFor="let item of politicas" [value]="item"
|
|
|
- >{{ item.NOMBREPOLITICA }}
|
|
|
+ <mat-option *ngFor="let item of politicas" [value]="item">{{ item.NOMBREPOLITICA }}
|
|
|
</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>receipt_long</mat-icon>
|
|
|
- <mat-error *ngIf="politica!.invalid"
|
|
|
- >{{
|
|
|
- politica!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
+ <mat-error *ngIf="politica!.invalid">{{
|
|
|
+ politica!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -274,36 +197,26 @@
|
|
|
<mat-select formControlName="turno">
|
|
|
<mat-option *ngFor="let item of turnos" [value]="item">{{
|
|
|
item.turno
|
|
|
- }}</mat-option>
|
|
|
+ }}</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>perm_contact_calendar</mat-icon>
|
|
|
<mat-error *ngIf="turno!.invalid">{{
|
|
|
turno!.hasError("required") ? "Debe ingresar este campo" : ""
|
|
|
- }}</mat-error>
|
|
|
+ }}</mat-error>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
|
|
|
<mat-grid-tile colspan="4">
|
|
|
<mat-form-field appearance="standard">
|
|
|
<mat-label>Fecha de Ingreso</mat-label>
|
|
|
- <input
|
|
|
- matInput
|
|
|
- placeholder="Ingrese la fecha de ingreso →"
|
|
|
- formControlName="fecha_ingreso_laboral"
|
|
|
- [max]="today_day"
|
|
|
- [matDatepicker]="picker"
|
|
|
- [value]="fecha_ingreso_laboral"
|
|
|
- />
|
|
|
- <mat-datepicker-toggle
|
|
|
- matSuffix
|
|
|
- [for]="picker"
|
|
|
- ></mat-datepicker-toggle>
|
|
|
+ <input matInput placeholder="Ingrese la fecha de ingreso →" formControlName="fecha_ingreso_laboral"
|
|
|
+ [max]="today_day" [matDatepicker]="picker" [value]="fecha_ingreso_laboral" />
|
|
|
+ <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
|
<mat-datepicker #picker></mat-datepicker>
|
|
|
- <mat-error *ngIf="fecha_ingreso_laboral!.invalid"
|
|
|
- >{{
|
|
|
- fecha_ingreso_laboral!.hasError("required")
|
|
|
- ? "Debe ingresar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="fecha_ingreso_laboral!.invalid">{{
|
|
|
+ fecha_ingreso_laboral!.hasError("required")
|
|
|
+ ? "Debe ingresar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -322,11 +235,10 @@
|
|
|
</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>perm_contact_calendar</mat-icon>
|
|
|
- <mat-error *ngIf="id_jefe_directo!.invalid"
|
|
|
- >{{
|
|
|
- id_jefe_directo!.hasError("required")
|
|
|
- ? "Debe seleccionar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="id_jefe_directo!.invalid">{{
|
|
|
+ id_jefe_directo!.hasError("required")
|
|
|
+ ? "Debe seleccionar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
@@ -341,35 +253,25 @@
|
|
|
</mat-option>
|
|
|
</mat-select>
|
|
|
<mat-icon matSuffix>perm_contact_calendar</mat-icon>
|
|
|
- <mat-error *ngIf="id_jefe_sustituto!.invalid"
|
|
|
- >{{
|
|
|
- id_jefe_sustituto!.hasError("required")
|
|
|
- ? "Debe seleccionar este campo"
|
|
|
- : ""
|
|
|
+ <mat-error *ngIf="id_jefe_sustituto!.invalid">{{
|
|
|
+ id_jefe_sustituto!.hasError("required")
|
|
|
+ ? "Debe seleccionar este campo"
|
|
|
+ : ""
|
|
|
}}
|
|
|
</mat-error>
|
|
|
</mat-form-field>
|
|
|
</mat-grid-tile>
|
|
|
|
|
|
<mat-grid-tile colspan="12">
|
|
|
- <a
|
|
|
- mat-raised-button
|
|
|
- [routerLink]="['/admin/mcomau']"
|
|
|
- class="mr-3"
|
|
|
- color="warn"
|
|
|
- >
|
|
|
+ <a mat-raised-button [routerLink]="['/admin/mcomau']" class="mr-3" color="warn">
|
|
|
Cerrar
|
|
|
</a>
|
|
|
- <button
|
|
|
- mat-raised-button
|
|
|
- class="mr-3 secondary"
|
|
|
- [disabled]="
|
|
|
+ <button mat-raised-button class="mr-3 secondary" [disabled]="
|
|
|
formGroup.invalid || password?.value != password_confirmation?.value
|
|
|
- "
|
|
|
- >
|
|
|
+ ">
|
|
|
Confirmar
|
|
|
</button>
|
|
|
</mat-grid-tile>
|
|
|
</form>
|
|
|
</mat-grid-list>
|
|
|
-</mat-card>
|
|
|
+</mat-card>
|
