ct actualizacion de PD y ct ajuste PD
This commit is contained in:
JuanSanhueza
parent
241cc19896
commit
e9c7972449
@ -1 +1,99 @@
|
||||
<p>actualizacion-pd works!</p>
|
||||
<div class="p-3 text-white">
|
||||
<div class="flex justify-content-center flex-wrap">
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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="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">
|
||||
<option selected>Seleccione...</option>
|
||||
<option value="1">Opcion 1</option>
|
||||
<option value="2">Opcion 2</option>
|
||||
<option value="3">Opcion 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round my-1">
|
||||
<div class="border-round font-bold">
|
||||
<div class="h-4rem">Filtro Código Cronograma SINAR</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>
|
||||
<option value="2">Opcion 2</option>
|
||||
<option value="3">Opcion 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabla1 -->
|
||||
<div class="font-bold my-2 text-black-alpha-90">Título de la tabla:</div>
|
||||
<p-table class="mi-tabla-redondeada"
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="bg-blue-400 font-bold text-white">Empresa</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Código de cronograma</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Etapa del Servicio</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Nombre sistema</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Tipo de inversión</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Código de glosa PD</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Descripción glosa</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Monto Inversión Total (UF)</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Año de Inicio</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Año de Término</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Mes de Término</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Nota</th>
|
||||
<th class="bg-green-400 font-bold text-white">Estado aprobación</th>
|
||||
<th class="bg-green-400 font-bold text-white">Observació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.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td>
|
||||
<div class="border-round font-bold">
|
||||
<select id="selectContieneObras" class="w-full p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary"
|
||||
style="appearance: auto;background-color: white; width: 228px !important;">
|
||||
<option selected>Seleccione...</option>
|
||||
<option value="true">Aprobado</option>
|
||||
<option value="false">Rechazado</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="background-color: white; color: black;width: 228px !important;"
|
||||
/></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="col-12 text-right">
|
||||
<button type="button" class="bg-primary border-primary-500 mt-3 px-5 py-3 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700"><i class="pi pi-file-export"></i></button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--surface-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1,11 +1,78 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@Component({
|
||||
selector: 'app-actualizacion-pd',
|
||||
imports: [],
|
||||
imports: [FormsModule, TableModule, InputTextModule],
|
||||
templateUrl: './actualizacion-pd.component.html',
|
||||
styleUrl: './actualizacion-pd.component.scss'
|
||||
})
|
||||
export class ActualizacionPdComponent {
|
||||
pageTitle: string = 'Cronogramas cargados:';
|
||||
|
||||
estadoAprobacion: string[] = ['Rechazado', 'Aprobado'];
|
||||
|
||||
products: any[] = [
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Ingresado',
|
||||
analista: 'No asignado',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'green',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato13: 'Rechazado',
|
||||
dato14: 'green',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'En revisión',
|
||||
analista: 'Gabriel Torres',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'yellow',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato13: 'Rechazado',
|
||||
dato14: '',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Rechazado',
|
||||
analista: 'Jorge Muñoz',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'red',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato13: 'Aprobado',
|
||||
dato14: '',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Aprobado',
|
||||
analista: 'Jarolt Matamoros',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'green',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato11: '2025-04-29',
|
||||
dato12: 'green',
|
||||
dato13: 'Aprobado',
|
||||
dato14: '',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
@ -1 +1,116 @@
|
||||
<p>ajuste-pd works!</p>
|
||||
<div class="p-3 text-white">
|
||||
<div class="flex justify-content-center flex-wrap">
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
|
||||
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
<option selected>Seleccione...</option>
|
||||
<option value="1">Opcion 1</option>
|
||||
<option value="2">Opcion 2</option>
|
||||
<option value="3">Opcion 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<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</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>
|
||||
<option value="2">Opcion 2</option>
|
||||
<option value="3">Opcion 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tabla1 -->
|
||||
<!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
|
||||
<p-table class="mi-tabla-redondeada"
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
|
||||
<th colspan="3" class="bg-blue-400 text-white font-bold text-center">Cronograma base vigente</th>
|
||||
<th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
|
||||
</tr>
|
||||
<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</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Etapa del Servicio</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Nombre localidad</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Tipo de inversión</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Código de glosa PD</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Descripción glosa</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Monto Inversión Total (UF)</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Año de Inicio</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Año de Término</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Mes de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Inicio</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Año de Término</th>
|
||||
<th class="bg-blue-700 text-white font-bold">Mes de Término</th>
|
||||
<th class="bg-blue-400 text-white font-bold">Nota</th>
|
||||
<th class="bg-green-400 text-white font-bold">Estado aprobación</th>
|
||||
<th class="bg-green-400 text-white font-bold">Observació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.estadoRevision }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.fechaIngreso }}</td>
|
||||
<td>{{ product.estadoRevision }}</td>
|
||||
<td>{{ product.dato9 }}</td>
|
||||
<td>{{ product.dato10 }}</td>
|
||||
<td>{{ product.dato13 }}</td>
|
||||
<td>{{ product.dato14 }}</td>
|
||||
<td>{{ product.dato15 }}</td>
|
||||
<td>{{ product.dato16 }}</td>
|
||||
<td>{{ product.dato17 }}</td>
|
||||
<td>{{ product.dato18 }}</td>
|
||||
<td>{{ product.dato11 }}</td>
|
||||
<td>{{ product.dato12 }}</td>
|
||||
<td>
|
||||
<div class="border-round font-bold">
|
||||
<select id="selectContieneObras" class="w-full p-2 border-1 border-solid surface-border border-round outline-none focus:border-primary"
|
||||
style="appearance: auto;background-color: white; width: 228px !important;">
|
||||
<option selected>Seleccione...</option>
|
||||
<option value="true">Aprobado</option>
|
||||
<option value="false">Rechazado</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="analista"
|
||||
pInputText
|
||||
[(ngModel)]="product.analista"
|
||||
placeholder="Analista"
|
||||
name="analista"
|
||||
class="input-with-icon w-full"
|
||||
style="background-color: white; color: black;width: 228px !important;"
|
||||
/></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="col-12 text-right">
|
||||
<button type="button" class="bg-primary border-primary-500 mt-3 px-5 py-3 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700"><i class="pi pi-file-export"></i></button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--surface-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1,11 +1,88 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ajuste-pd',
|
||||
imports: [],
|
||||
imports: [FormsModule, TableModule, InputTextModule],
|
||||
templateUrl: './ajuste-pd.component.html',
|
||||
styleUrl: './ajuste-pd.component.scss'
|
||||
})
|
||||
export class AjustePdComponent {
|
||||
products: any[] = [
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Ingresado',
|
||||
analista: 'No asignado',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'green',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato15: 'green',
|
||||
dato16: 'green',
|
||||
dato17: 'green',
|
||||
dato18: 'green',
|
||||
dato13: 'Rechazado',
|
||||
dato14: 'green',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'En revisión',
|
||||
analista: 'Gabriel Torres',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'yellow',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato15: 'green',
|
||||
dato16: 'green',
|
||||
dato17: 'green',
|
||||
dato18: 'green',
|
||||
dato13: 'Rechazado',
|
||||
dato14: 'green',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Rechazado',
|
||||
analista: 'Jorge Muñoz',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'red',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato15: 'green',
|
||||
dato16: 'green',
|
||||
dato17: 'green',
|
||||
dato18: 'green',
|
||||
dato13: 'Rechazado',
|
||||
dato14: 'green',
|
||||
},
|
||||
{
|
||||
empresa: 'Empresa A',
|
||||
codigoCronograma: '123',
|
||||
codigoCronogramaAjuste: '456',
|
||||
tipoCarga: 'Inicial',
|
||||
estadoRevision: 'Aprobado',
|
||||
analista: 'Jarolt Matamoros',
|
||||
fechaIngreso: '2025-04-29',
|
||||
semaforo: 'green',
|
||||
dato9: 'Ingresado',
|
||||
dato10: 'No asignado',
|
||||
dato15: 'green',
|
||||
dato16: 'green',
|
||||
dato17: 'green',
|
||||
dato18: 'green',
|
||||
dato13: 'Rechazado',
|
||||
dato14: 'green',
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<div class="p-3">
|
||||
<div class="p-3 text-white">
|
||||
<!-- Tabla1 -->
|
||||
<div class="font-bold my-2">Cronogramas cargados:</div>
|
||||
<div class="font-bold my-2 text-black-alpha-90">Cronogramas cargados:</div>
|
||||
<p-table
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="bg-blue-400 font-bold">Empresa</th>
|
||||
<th class="bg-blue-400 font-bold">Código de cronograma</th>
|
||||
<th class="bg-blue-400 font-bold">Código cronograma de ajuste</th>
|
||||
<th class="bg-blue-400 font-bold">Tipo de carga</th>
|
||||
<th class="bg-green-400 font-bold">Estado de revisión</th>
|
||||
<th class="bg-green-400 font-bold">Analista</th>
|
||||
<th class="bg-green-400 font-bold">Fecha ingreso</th>
|
||||
<th class="bg-green-400 font-bold">Semáforo</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Empresa</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Código de cronograma</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Código cronograma de ajuste</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Tipo de carga</th>
|
||||
<th class="bg-green-400 font-bold text-white font-bold">Estado de revisión</th>
|
||||
<th class="bg-green-400 font-bold text-white font-bold">Analista</th>
|
||||
<th class="bg-green-400 font-bold text-white font-bold">Fecha ingreso</th>
|
||||
<th class="bg-green-400 font-bold text-white font-bold">Semáforo</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
@ -115,18 +115,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Tabla2 -->
|
||||
<div class="font-bold my-2">Cronogramas solicitados y pendientes de carga:</div>
|
||||
<div class="font-bold my-2 text-black-alpha-90">Cronogramas solicitados y pendientes de carga:</div>
|
||||
<p-table
|
||||
[value]="products"
|
||||
showGridlines>
|
||||
<ng-template #header>
|
||||
<tr>
|
||||
<th class="bg-blue-400 font-bold">Empresa</th>
|
||||
<th class="bg-blue-400 font-bold">Código de cronograma SINAR</th>
|
||||
<th class="bg-blue-400 font-bold">Contiene obras del año</th>
|
||||
<th class="bg-blue-400 font-bold">N° Oficio que aprueba</th>
|
||||
<th class="bg-blue-400 font-bold">Tipo de carga</th>
|
||||
<th class="bg-blue-400 font-bold">Fecha de solicitud</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Empresa</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Código de cronograma SINAR</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Contiene obras del año</th>
|
||||
<th class="bg-blue-400 font-bold text-white">N° Oficio que aprueba</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Tipo de carga</th>
|
||||
<th class="bg-blue-400 font-bold text-white">Fecha de solicitud</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template #body let-product>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user