Skip to content

F
formularioConformidad
Commit 524a9611 by Fernando José Palomino Aquino
Options

[EDIT] MEJORA MODAL REQUERIMIENTO

parent fc61644c
Showing with 107 additions and 39 deletions
src/app/pages/conformidad/conformidad.componente.ts
......@@ -364,10 +364,10 @@ export class ConformidadComponent implements AfterViewInit {
sede: ''
});
const dialogRef = this.dialog.open(modalRequerimientoComponent, {
width: '100%',
maxWidth: '90%',
minWidth: '50%',
height: '50%',
width: '50vw', // 50% del ancho de la pantalla
maxWidth: '90vw',
height: '75vh',
maxHeight: '90vw',
data: {requerimientoInfo}
});
dialogRef.afterClosed().subscribe(result => {
......
src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.css
mat-label {
opacity: 1; /* Por defecto, el label será completamente visible */
font-size: 15px;
font-family: Montserrat, sans-serif;
font-weight: bold;
line-height: 24px;
letter-spacing: .5px;
}
mat-card {
border: 3px solid #9cc2ff;
box-shadow: 0px 4px 6px rgba(0, 0.4, 0.4, 0.3);
}
.titulo {
font-family: Roboto, "Helvetica Neue", sans-serif;
color: red;
}
.titulo-principal{
font-size: 1.2rem;
}
/* Contenedor de la tabla */
.tabla-container {
max-width: 100%;
overflow-x: auto;
padding: 16px;
background: #fff;
border-radius: 10px;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}
/* Tabla */
.tabla-articulos {
width: 100%;
border-collapse: collapse;
}
/* Estilos para la cabecera */
.header-row {
background-color: #1976d2;
color: white;
}
.header-cell {
font-weight: bold;
padding: 12px;
text-align: left;
font-size: 14px;
}
/* Estilos para las celdas */
.cell {
padding: 10px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #424242;
}
/* Alternar colores en filas */
.row:nth-child(even) {
background-color: #f5f5f5;
}
.row:hover {
background-color: #e3f2fd;
transition: background 0.3s;
}
src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.html
<h1 mat-dialog-title>Detalle requerimiento {{detalleRequerimiento.numeroDoc || '000000000'}}</h1>
<div mat-dialog-title>
<mat-label class="titulo titulo-principal"> DETALLE REQUERIMIENTO : </mat-label>
<mat-label class="titulo-principal">{{detalleRequerimiento.numeroDoc || 'SIN CODIGO'}} </mat-label>
</div>
<mat-dialog-content >
<mat-card appearance="outlined" >
<mat-card appearance="outlined" class="mb-4">
<mat-card-content class="flex grid grid-cols-4 gap-4" >
<div>
<mat-label>TIPO DE REQUERIMIENTO : </mat-label>
<mat-label class="titulo">TIPO DE REQUERIMIENTO : </mat-label>
<mat-label>{{detalleRequerimiento.tipoRequerimiento || 'Sin Tipo Requerimiento'}}</mat-label>
</div>
<div>
<mat-label>FECHA REGISTRO : </mat-label>
<mat-label class="titulo">FECHA REGISTRO : </mat-label>
<mat-label>{{detalleRequerimiento.fechaRegistro || 'Sin Fecha'}}</mat-label>
</div>
<div>
<mat-label>SEDE : </mat-label>
<mat-label class="titulo">SEDE : </mat-label>
<mat-label>{{detalleRequerimiento.sede || 'Sin Sede'}}</mat-label>
</div>
<div>
<mat-label>EMPLEADO : </mat-label>
<mat-label class="titulo">EMPLEADO : </mat-label>
<mat-label>{{detalleRequerimiento.empleado || 'Sin Empleado'}}</mat-label>
</div>
<div>
<mat-label>OBSERVACIÓN : </mat-label>
<mat-label class="titulo">OBSERVACIÓN : </mat-label>
<mat-label>{{detalleRequerimiento.observacion || 'Sin Observacion'}}</mat-label>
</div>
<div>
<mat-label>DESCRIPCIÓN : </mat-label>
<mat-label class="titulo">DESCRIPCIÓN : </mat-label>
<mat-label>{{detalleRequerimiento.descripcion || 'Sin descripcion'}}</mat-label>
</div>
<!-- <mat-label [innerHTML]="'REQUERIMIENTO : ' + (detalleRequerimiento[0].numeroDoc || 'Sin Requerimiento') "></mat-label>
<mat-label [innerHTML]="'SEDE : ' + (detalleRequerimiento[0].sede || 'Sin Sede') "></mat-label>
<mat-label [innerHTML]="'EMPLEADO : ' + (detalleRequerimiento[0].empleado || 'Sin Empleado') "></mat-label>
<mat-label [innerHTML]="'OBSERVACIÓN : ' + (detalleRequerimiento[0].observacion || 'Sin Observacion') "></mat-label>
<mat-label [innerHTML]="'DESCRIPCIÓN : ' + (detalleRequerimiento[0].descripcion || 'Sin descripcion') "></mat-label> -->
</mat-card-content>
</mat-card>
<mat-divider class="mb-4"></mat-divider>
<table mat-table [dataSource]="dataSource" >
<div class="tabla-container">
<table mat-table [dataSource]="dataSource" class="tabla-articulos">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-container matColumnDef="posicion">
<th mat-header-cell *matHeaderCellDef class="header-cell">POSICIÓN</th>
<td mat-cell *matCellDef="let element" class="cell">{{element.posicion}}</td>
</ng-container>
<ng-container matColumnDef="posicion">
<th mat-header-cell *matHeaderCellDef> POSICIÓN </th>
<td mat-cell *matCellDef="let element"> {{element.posicion}} </td>
</ng-container>
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef class="header-cell">NOMBRE ARTÍCULO</th>
<td mat-cell *matCellDef="let element" class="cell">{{element.nombre}}</td>
</ng-container>
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef> NOMBRE ARTÍCULO </th>
<td mat-cell *matCellDef="let element"> {{element.nombre}} </td>
</ng-container>
<ng-container matColumnDef="unidad">
<th mat-header-cell *matHeaderCellDef class="header-cell">UNIDAD</th>
<td mat-cell *matCellDef="let element" class="cell">{{element.unidad}}</td>
</ng-container>
<ng-container matColumnDef="unidad">
<th mat-header-cell *matHeaderCellDef> UNIDAD </th>
<td mat-cell *matCellDef="let element"> {{element.unidad}} </td>
</ng-container>
<ng-container matColumnDef="cantidad">
<th mat-header-cell *matHeaderCellDef class="header-cell">CANTIDAD</th>
<td mat-cell *matCellDef="let element" class="cell">{{element.cantidad}}</td>
</ng-container>
<ng-container matColumnDef="cantidad">
<th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
<td mat-cell *matCellDef="let element"> {{element.cantidad}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnasArticulos" class="header-row"></tr>
<tr mat-row *matRowDef="let row; columns: columnasArticulos;" class="row"></tr>
<tr mat-header-row *matHeaderRowDef="columnasArticulos"></tr>
<tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
</table>
</table>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">Cerrar</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment