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

Sort columnas, logo navbar, responsivo

Browse Source
This commit is contained in:
JuanSanhueza 2025-05-02 12:27:59 -04:00
parent 925caf8480
commit bc5edfed0e
8 changed files with 100 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/navbar/navbar.component.html
View File

@ -4,7 +4,13 @@
(click)="toggleSidebar()"></button>
<span class="app-title">Administrador de Cronogramas</span>
</div>
<ul class="navbar-nav ml-auto">
<div style="flex-grow: 1; text-align: center;">
<img src="/img/teclado1.png" alt="Logo" style="width: 90% !important;height: 50px !important; opacity: 0.8; ">
</div>
</ul>
<div class="navbar-right">
<span class="user-name">Luis Muñoz</span>
<button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"

12
src/app/components/navbar/navbar.component.scss
View File

@ -117,3 +117,15 @@
display: none;
}
}
.logo-img {
max-height: 50px;
width: auto;
opacity: 0.8;
}
@media (max-width: 576px) {
.logo-img {
max-height: 35px;
}
}

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

@ -8,13 +8,13 @@
<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="col-12 md:col-3 lg:col-2 bg-blue-400 border-round ">
<div class="border-round font-bold ">
<div class="h-4rem">Filtro Empresa</div>
<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="col-12 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>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@ -77,8 +77,7 @@
</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>
<i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
</div>
</div>

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

@ -94,7 +94,7 @@
</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>
<i class="fa-solid fa-file-excel" style="color: #007239;font-size: 24px;"></i>
</div>

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

@ -47,39 +47,37 @@
</ng-template>
</p-table>
<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="flex justify-content-between flex-wrap gap-3 border-round border-blue-400 my-6 lg:px-0 py-3 my-1 ">
<div class="col-12 md:col-5 lg:col-2 tablaAzul border-round ">
<div class="border-round font-bold">
<div class="h-4rem">Filtro Empresa</div>
<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="col-12 md:col-5 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">Filtro Código Cronograma SINAR</div>
<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="col-12 md:col-5 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">Filtro tipo de carga</div>
<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="col-12 md:col-5 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">¿Contiene obras del año?</div>
<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">
<div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">N° Oficio que aprueba</div>
<!-- Numero Oficio -->
<input
type="number"
type="text"
pInputText
placeholder="xxxxx"
name="numeroOficio"
@ -95,17 +93,29 @@
<!-- Tabla2 -->
<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
<p-table
<p-table sortField="price" [sortOrder]="-1"
[value]="products" stripedRows
showGridlines>
<ng-template #header>
<tr>
<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>
<th pSortableColumn="empresa" class="tablaAzul font-bold">
Empresa <p-sortIcon field="empresa" />
</th>
<th pSortableColumn="codigoCronograma" class="tablaAzul font-bold">
Código de cronograma SINAR <p-sortIcon field="codigoCronograma" />
</th>
<th pSortableColumn="codigoCronogramaAjuste" class="tablaAzul font-bold">
Contiene obras del año <p-sortIcon field="codigoCronogramaAjuste" />
</th>
<th pSortableColumn="tipoCarga" class="tablaAzul font-bold">
N° Oficio que aprueba <p-sortIcon field="tipoCarga" />
</th>
<th pSortableColumn="estadoRevision" class="tablaAzul font-bold">
Tipo de carga <p-sortIcon field="estadoRevision" />
</th>
<th pSortableColumn="fechaIngreso" class="tablaAzul font-bold">
Fecha de solicitud <p-sortIcon field="fechaIngreso" />
</th>
</tr>
</ng-template>
<ng-template #body let-product>

8
src/app/pages/concesiones/concesiones.component.scss
View File

@ -2,3 +2,11 @@
background-size: 20px 20px;
padding-right: 35px; /* espacio para que el texto no choque con el ícono */
}
@media screen and (min-width: 992px) {
.lg\:col-2 {
flex: 0 0 auto;
padding: 0.5rem;
width: 19%;
}
}

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

@ -26,38 +26,38 @@ export class ConcesionesComponent {
codigoCronogramaAjuste: '456',
tipoCarga: 'Inicial',
estadoRevision: 'Ingresado',
analista: 'No asignado',
analista: '',
fechaIngreso: '2025-04-29',
semaforo: 'green'
},
{
empresa: 'Empresa A',
empresa: 'Fmpresa A',
codigoCronograma: '123',
codigoCronogramaAjuste: '456',
tipoCarga: 'Inicial',
estadoRevision: 'En revisión',
analista: 'Gabriel Torres',
fechaIngreso: '2025-04-29',
fechaIngreso: '2024-04-29',
semaforo: 'yellow'
},
{
empresa: 'Empresa A',
empresa: 'Gmpresa A',
codigoCronograma: '123',
codigoCronogramaAjuste: '456',
tipoCarga: 'Inicial',
estadoRevision: 'Rechazado',
analista: 'Jorge Muñoz',
fechaIngreso: '2025-04-29',
fechaIngreso: '2023-04-29',
semaforo: 'red'
},
{
empresa: 'Empresa A',
empresa: 'Hmpresa A',
codigoCronograma: '123',
codigoCronogramaAjuste: '456',
tipoCarga: 'Inicial',
estadoRevision: 'Aprobado',
analista: 'Jarolt Matamoros',
fechaIngreso: '2025-04-29',
fechaIngreso: '2022-04-29',
semaforo: 'green'
},
];

4
src/styles.scss
View File

@ -15,7 +15,9 @@
padding: 0;
height: 100%;
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
font-family: "Museo Sans 300", "Museo Sans 700" !important;
/* font-family: "Museo Sans 300", "Museo Sans 700" !important; */
font-family: "Museo Sans", sans-serif !important;
font-weight: 300; /* o 700 según necesites */
font-size: 14px;
color: var(--text-color);
}