Unidad de Concesiones
tabla 1 form tabla 2
This commit is contained in:
JuanSanhueza
parent
3dd7acde1f
commit
241cc19896
@ -1 +1,144 @@
|
|||||||
<p>concesiones works!</p>
|
<div class="p-3">
|
||||||
|
<!-- Tabla1 -->
|
||||||
|
<div class="font-bold my-2">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>
|
||||||
|
</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>
|
||||||
|
<!-- analista -->
|
||||||
|
<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>
|
||||||
|
<td>{{ product.fechaIngreso }}</td>
|
||||||
|
<td>
|
||||||
|
<!-- {{ product.semaforo }} -->
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="pi pi-circle-fill" style="font-size: 24px;"
|
||||||
|
[style.color]="product.semaforo === 'green' ? '#00bb00' : product.semaforo === 'yellow' ? 'yellow' : product.semaforo === 'red' ? 'red' : ''"></i>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
</p-table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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="col-12 md:col-6 lg:col-2">
|
||||||
|
<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-12 md:col-6 lg:col-2">
|
||||||
|
<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 class="col-12 md:col-6 lg:col-2">
|
||||||
|
<div class="border-round font-bold">
|
||||||
|
<div class="h-4rem">Filtro tipo de carga</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="actualizacion">Actualización</option>
|
||||||
|
<option value="nueva">Nueva</option>
|
||||||
|
<option value="concesion">Concesión</option>
|
||||||
|
<option value="ajuste">Ajuste</option>
|
||||||
|
<option value="ato">ATO</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 md:col-6 lg:col-2">
|
||||||
|
<div class="border-round font-bold">
|
||||||
|
<div class="h-4rem">¿Contiene obras del año?</div>
|
||||||
|
<select id="selectContieneObras" 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="true">SI</option>
|
||||||
|
<option value="false">NO</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 md:col-12 lg:col-2">
|
||||||
|
<div class="border-round font-bold">
|
||||||
|
<div class="h-4rem">N° Oficio que aprueba</div>
|
||||||
|
<!-- Numero Oficio -->
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
pInputText
|
||||||
|
placeholder="xxxxx"
|
||||||
|
name="numeroOficio"
|
||||||
|
class="input-with-icon w-full mt-1 text-center sm:text-start"
|
||||||
|
style="background-color: white; color: black;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<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">Crear solicitud</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabla2 -->
|
||||||
|
<div class="font-bold my-2">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>
|
||||||
|
</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.fechaIngreso }}</td>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
</p-table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
.input-with-icon {
|
||||||
|
background-size: 20px 20px;
|
||||||
|
padding-right: 35px; /* espacio para que el texto no choque con el ícono */
|
||||||
|
}
|
||||||
@ -1,11 +1,58 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { TableModule } from 'primeng/table';
|
||||||
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-concesiones',
|
selector: 'app-concesiones',
|
||||||
imports: [],
|
imports: [FormsModule, TableModule, InputTextModule],
|
||||||
templateUrl: './concesiones.component.html',
|
templateUrl: './concesiones.component.html',
|
||||||
styleUrl: './concesiones.component.scss'
|
styleUrl: './concesiones.component.scss'
|
||||||
})
|
})
|
||||||
export class ConcesionesComponent {
|
export class ConcesionesComponent {
|
||||||
|
pageTitle: string = 'Cronogramas cargados:';
|
||||||
|
|
||||||
|
products: any[] = [
|
||||||
|
{
|
||||||
|
empresa: 'Empresa A',
|
||||||
|
codigoCronograma: '123',
|
||||||
|
codigoCronogramaAjuste: '456',
|
||||||
|
tipoCarga: 'Inicial',
|
||||||
|
estadoRevision: 'Ingresado',
|
||||||
|
analista: 'No asignado',
|
||||||
|
fechaIngreso: '2025-04-29',
|
||||||
|
semaforo: 'green'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
empresa: 'Empresa A',
|
||||||
|
codigoCronograma: '123',
|
||||||
|
codigoCronogramaAjuste: '456',
|
||||||
|
tipoCarga: 'Inicial',
|
||||||
|
estadoRevision: 'En revisión',
|
||||||
|
analista: 'Gabriel Torres',
|
||||||
|
fechaIngreso: '2025-04-29',
|
||||||
|
semaforo: 'yellow'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
empresa: 'Empresa A',
|
||||||
|
codigoCronograma: '123',
|
||||||
|
codigoCronogramaAjuste: '456',
|
||||||
|
tipoCarga: 'Inicial',
|
||||||
|
estadoRevision: 'Rechazado',
|
||||||
|
analista: 'Jorge Muñoz',
|
||||||
|
fechaIngreso: '2025-04-29',
|
||||||
|
semaforo: 'red'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
empresa: 'Empresa A',
|
||||||
|
codigoCronograma: '123',
|
||||||
|
codigoCronogramaAjuste: '456',
|
||||||
|
tipoCarga: 'Inicial',
|
||||||
|
estadoRevision: 'Aprobado',
|
||||||
|
analista: 'Jarolt Matamoros',
|
||||||
|
fechaIngreso: '2025-04-29',
|
||||||
|
semaforo: 'green'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user