lxluxo23/sacg-cronogramas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Colores, tipografía, alternado tabla

Browse Source
This commit is contained in:
JuanSanhueza 2025-04-30 17:37:42 -04:00
parent 2e272b3209
commit 925caf8480
12 changed files with 113 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/footer/footer.component.html
View File

@ -2,7 +2,7 @@
<footer class="footer mt-5">
<div class="footer-content">
<div class="footer-left">
<i class="pi pi-building"></i>
<!-- <i class="pi pi-building"></i> -->
<div class="footer-text">
<div>Superintendencia de Servicios Sanitarios</div>
<div>Área de Información y Tecnologías</div>

25
src/app/pages/actualizacion-pd/actualizacion-pd.component.html
View File

@ -11,30 +11,20 @@
<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>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</div>
</div>
<!-- Tabla1 -->
<div class="font-bold my-2 text-black-alpha-90">Título de la tabla:</div>
<div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
@ -70,12 +60,7 @@
<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>
<p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</td>
<td>

9
src/app/pages/actualizacion-pd/actualizacion-pd.component.ts
View File

@ -2,17 +2,20 @@ import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';
import { InputTextModule } from 'primeng/inputtext';
import { SelectModule } from 'primeng/select';
@Component({
selector: 'app-actualizacion-pd',
imports: [FormsModule, TableModule, InputTextModule],
imports: [FormsModule, TableModule, InputTextModule, SelectModule],
templateUrl: './actualizacion-pd.component.html',
styleUrl: './actualizacion-pd.component.scss'
})
export class ActualizacionPdComponent {
pageTitle: string = 'Cronogramas cargados:';
estadoAprobacion: string[] = ['Rechazado', 'Aprobado'];
select1: any = '';
selectedCity: any = '';
empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
products: any[] = [
{

23
src/app/pages/ajuste-pd/ajuste-pd.component.html
View File

@ -11,30 +11,20 @@
<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>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
@ -87,12 +77,7 @@
<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>
<p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</td>
<td>

9
src/app/pages/ajuste-pd/ajuste-pd.component.ts
View File

@ -2,14 +2,21 @@ import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';
import { InputTextModule } from 'primeng/inputtext';
import { SelectModule } from 'primeng/select';
@Component({
selector: 'app-ajuste-pd',
imports: [FormsModule, TableModule, InputTextModule],
imports: [FormsModule, TableModule, InputTextModule, SelectModule],
templateUrl: './ajuste-pd.component.html',
styleUrl: './ajuste-pd.component.scss'
})
export class AjustePdComponent {
selectedCity: any = '';
empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
select1: any = '';
estadoAprobacion: any[] = [{name:'Rechazado'}, {name:'Aprobado'}];
products: any[] = [
{
empresa: 'Empresa A',

57
src/app/pages/concesiones/concesiones.component.html
View File

@ -1,15 +1,15 @@
<div class="p-3 text-white">
<!-- Tabla1 -->
<div class="font-bold my-2 text-black-alpha-90">Cronogramas cargados:</div>
<div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
<p-table
[value]="products"
[value]="products" stripedRows
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">Código cronograma de ajuste</th>
<th class="bg-blue-400 font-bold text-white">Tipo de carga</th>
<th class="tablaAzul font-bold">Empresa</th>
<th class="tablaAzul font-bold">Código de cronograma</th>
<th class="tablaAzul font-bold">Código cronograma de ajuste</th>
<th class="tablaAzul font-bold">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>
@ -53,46 +53,25 @@
<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>
<p-select [options]="empresas" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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>
<p-select [options]="empresas" [(ngModel)]="select2" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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>
<p-select [options]="tipoCarga" [(ngModel)]="select3" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</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>
<p-select [options]="contieneObras" [(ngModel)]="select4" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</div>
<div class="col-12 md:col-12 lg:col-2">
@ -115,18 +94,18 @@
</div>
<!-- Tabla2 -->
<div class="font-bold my-2 text-black-alpha-90">Cronogramas solicitados y pendientes de carga:</div>
<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
<p-table
[value]="products"
[value]="products" stripedRows
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 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>
<th class="tablaAzul font-bold">Empresa</th>
<th class="tablaAzul font-bold">Código de cronograma SINAR</th>
<th class="tablaAzul font-bold">Contiene obras del año</th>
<th class="tablaAzul font-bold">N° Oficio que aprueba</th>
<th class="tablaAzul font-bold">Tipo de carga</th>
<th class="tablaAzul font-bold">Fecha de solicitud</th>
</tr>
</ng-template>
<ng-template #body let-product>

11
src/app/pages/concesiones/concesiones.component.ts
View File

@ -2,16 +2,23 @@ import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TableModule } from 'primeng/table';
import { InputTextModule } from 'primeng/inputtext';
import { SelectModule } from 'primeng/select';
@Component({
selector: 'app-concesiones',
imports: [FormsModule, TableModule, InputTextModule],
imports: [FormsModule, TableModule, InputTextModule, SelectModule],
templateUrl: './concesiones.component.html',
styleUrl: './concesiones.component.scss'
})
export class ConcesionesComponent {
select1: any = '';
select2: any = '';
select3: any = '';
select4: any = '';
pageTitle: string = 'Cronogramas cargados:';
empresas: any[] = [{name: 'Empresa A'}, {name: 'Empresa B'}, {name: 'Empresa C'}];
tipoCarga: any[] = [{name: 'Actualización'}, {name: 'Nueva'}, {name: 'Concesión'}, {name: 'Ajuste'}, {name: 'ATO'}];
contieneObras: any[] = [{name:'Si'}, {name:'No'}];
products: any[] = [
{
empresa: 'Empresa A',

44
src/app/pages/login/login.component.html
View File

@ -7,7 +7,7 @@
<div class="text-drop">1.0</div>
</div>
<div class="header-text">
<div class="sub-title">Sistema Administrador de Cronogramas</div>
<div class="sub-title">Administrador de Cronogramas</div>
</div>
</div>
</div>
@ -24,40 +24,40 @@
</div>
<form (ngSubmit)="onLogin()">
<!-- Email -->
<input
type="email"
pInputText
[(ngModel)]="email"
name="email"
placeholder="Email"
class="input-with-icon w-full mb-3"
<input
type="email"
pInputText
[(ngModel)]="email"
name="email"
placeholder="Email"
class="input-with-icon w-full mb-3"
style="background-color: white; color: black;"
/>
<!-- Password -->
<input
type="password"
pInputText
[(ngModel)]="password"
name="password"
placeholder="Password"
<input
type="password"
pInputText
[(ngModel)]="password"
name="password"
placeholder="Password"
class="input-with-lock w-full"
style="background-color: white; color: black;"
/>
<!-- Botón -->
<div class="login-actions">
<button
pButton
type="submit"
label="Autenticar"
<button
pButton
type="submit"
label="Autenticar"
class="p-button-primary w-full"
style="color: white">
</button>
</div>
</form>
<!-- <form (ngSubmit)="onLogin()">
@ -75,7 +75,7 @@
<i class="pi pi-lock"></i>
</span>
</div>
<div class="login-actions">
<button pButton type="submit" label="Autenticar" class="p-button-primary"></button>
</div>
@ -92,4 +92,4 @@
</main>
<!-- FOOTER -->
<app-footer></app-footer>
<app-footer></app-footer>

4
src/app/pages/login/login.component.scss
View File

@ -152,7 +152,7 @@
}
.login-page-custom {
-ms-flex-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
background-color: #e9ecef !important;
display: -ms-flexbox !important;
@ -217,7 +217,7 @@
}
.sub-title {
font-size: 1.8rem;
font-size: 3.0rem;
margin-bottom: 0px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
transform: translate(-4%);

8
src/app/pages/resumen/resumen.component.html
View File

@ -5,9 +5,9 @@
<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>
<!-- Tabla1 -->
<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
@ -32,9 +32,9 @@
</ng-template>
</p-table>
<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>

12
src/app/pages/unidad-informacion/unidad-informacion.component.html
View File

@ -1,8 +1,8 @@
<div class="p-3 text-white">
<!-- Tabla1 -->
<div class="font-bold text-black-alpha-90 my-2">Cronogramas solicitados y pendientes de carga:</div>
<div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
@ -26,9 +26,9 @@
</ng-template>
</p-table>
<!-- Tabla2 -->
<div class="font-bold text-black-alpha-90 my-2">Cronogramas aprobados:</div>
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
@ -50,9 +50,9 @@
</ng-template>
</p-table>
<!-- Tabla3 -->
<div class="font-bold text-black-alpha-90 my-2">Cronogramas rechazados:</div>
<div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
<p-table class="mi-tabla-redondeada"
[value]="products"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>

37
src/styles.scss
View File

@ -8,21 +8,22 @@
--border-color: #dee2e6; /* Color bordes */
--background-color: #f8f9fa; /* Fondo gris claro */
}
/* Estilos globales */
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
font-family: "Museo Sans 300", "Museo Sans 700" !important;
font-size: 14px;
color: var(--text-color);
}
body {
background-color: var(--background-color);
}
/* Clases de utilidad */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
@ -32,15 +33,33 @@
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
/* Personalizaciones globales de PrimeNG */
.p-component {
/* .p-component {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
} */
.p-button.p-button-text {
&:focus {
box-shadow: none;
}
}
.tituloTabla{
color: #002147;
}
.tablaAzul{
background-color: #008BC6 !important;
color: white !important;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
--p-datatable-row-striped-background: #EAF3FB;
background: var(--p-datatable-row-striped-background);
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
--p-datatable-row-striped-background: #BCDAEF;
background: var(--p-datatable-row-striped-background);
}