Unidad de información
This commit is contained in:
JuanSanhueza
parent
7f1cbfe90c
commit
2e272b3209
@ -7,8 +7,8 @@
|
||||
|
||||
|
||||
|
||||
<div class="flex align-content-start flex-wrap border-round border-blue-400 my-2 lg:px-0 py-3">
|
||||
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round mr-1 my-1">
|
||||
<div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
|
||||
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
|
||||
<div class="border-round font-bold ">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
<select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
|
||||
@ -19,9 +19,9 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round my-1">
|
||||
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma SINAR</div>
|
||||
<div class="h-4rem">Filtro Código Cronograma</div>
|
||||
<select id="selectFiltroTipoCarga" class="w-full text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary mt-1" style="appearance: auto">
|
||||
<option selected>Seleccione...</option>
|
||||
<option value="1">Opcion 1</option>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
|
||||
|
||||
<div class="flex justify-content-between flex-wrap border-round border-blue-400 bg-blue-200 my-5 lg:px-0 md:px-8 py-3">
|
||||
<div class="flex justify-content-between flex-wrap border-round border-blue-400 bg-blue-300 my-5 lg:px-0 md:px-8 py-3">
|
||||
<div class="col-12 md:col-6 lg:col-2">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Empresa</div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td style="background-color: #F8F9FA;border: none;">
|
||||
<td style="background-color: #F8F9FA;border: none;width: 50px;">
|
||||
<button style="background: transparent; border: none; cursor: pointer;">
|
||||
<i class="pi pi-pen-to-square" style="font-size: 24px;"></i>
|
||||
</button>
|
||||
@ -50,7 +50,7 @@
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td style="background-color: #F8F9FA;border: none;">
|
||||
<td style="background-color: #F8F9FA;border: none;width: 50px;">
|
||||
<button style="background: transparent; border: none; cursor: pointer;">
|
||||
<i class="pi pi-arrow-circle-right" style="font-size: 24px;"></i>
|
||||
</button>
|
||||
|
||||
@ -1 +1,76 @@
|
||||
<p>unidad-informacion works!</p>
|
||||
<div class="p-3 text-white">
|
||||
<!-- Tabla1 -->
|
||||
<div class="font-bold text-black-alpha-90 my-2">Cronogramas solicitados y pendientes de carga:</div>
|
||||
<p-table class="mi-tabla-redondeada"
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="bg-blue-400 text-white font-bold">Empresa</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Código de cronograma SINAR</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Contiene obras del año</th>
|
||||
<th class="bg-blue-400 text-white font-bold">N° Oficio que aprueba</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Tipo de carga</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Fecha de solicitud</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.dato5 }}</td>
|
||||
<td>{{ product.dato6 }}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<!-- Tabla2 -->
|
||||
<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
|
||||
<p-table class="mi-tabla-redondeada"
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="bg-green-400 text-white font-bold">Empresa</th>
|
||||
<th class="bg-green-400 text-white font-bold">Código cronograma</th>
|
||||
<th class="bg-green-400 text-white font-bold">Nombre sistema</th>
|
||||
<th class="bg-green-400 text-white font-bold">Tipo</th>
|
||||
<th class="bg-green-400 text-white font-bold">Fecha aprobación</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.dato5 }}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<!-- Tabla3 -->
|
||||
<div class="font-bold text-black-alpha-90 my-2">Cronogramas rechazados:</div>
|
||||
<p-table class="mi-tabla-redondeada"
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="surface-400 text-white font-bold">Empresa</th>
|
||||
<th class="surface-400 text-white font-bold">Código de cronograma</th>
|
||||
<th class="surface-400 text-white font-bold">Nombre sistema</th>
|
||||
<th class="surface-400 text-white font-bold">Tipo</th>
|
||||
<th class="surface-400 text-white font-bold">Fecha rechazo</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
<tr>
|
||||
<td>{{ product.empresa }}</td>
|
||||
<td>{{ product.codigoCronograma }}</td>
|
||||
<td>{{ product.codigoCronogramaAjuste }}</td>
|
||||
<td>{{ product.tipoCarga }}</td>
|
||||
<td>{{ product.dato5 }}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,48 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@Component({
|
||||
selector: 'app-unidad-informacion',
|
||||
imports: [],
|
||||
imports: [FormsModule, TableModule, InputTextModule],
|
||||
templateUrl: './unidad-informacion.component.html',
|
||||
styleUrl: './unidad-informacion.component.scss'
|
||||
})
|
||||
export class UnidadInformacionComponent {
|
||||
products: any[] = [
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
dato5: 'Inicial',
|
||||
dato6: 'Inicial',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
dato5: 'Inicial',
|
||||
dato6: 'Inicial',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
dato5: 'Inicial',
|
||||
dato6: 'Inicial',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
dato5: 'Inicial',
|
||||
dato6: 'Inicial',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user