Sort columnas, logo navbar, responsivo
This commit is contained in:
JuanSanhueza
parent
925caf8480
commit
bc5edfed0e
@ -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"
|
||||
@ -20,4 +26,4 @@
|
||||
<span class="breadcrumb-separator">/</span>
|
||||
<span class="breadcrumb-current">{{ pageTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,38 +7,38 @@
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle {
|
||||
color: #343a40;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.app-title {
|
||||
font-weight: bold;
|
||||
color: #0a2847;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.user-name {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #0a2847;
|
||||
}
|
||||
|
||||
|
||||
.logout-button {
|
||||
color: #0a2847;
|
||||
}
|
||||
|
||||
|
||||
/* Page header styles */
|
||||
.page-header {
|
||||
display: flex;
|
||||
@ -48,44 +48,44 @@
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.page-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-container {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #0088cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-separator {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-current {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
|
||||
/* Sobrescribir estilos de PrimeNG para los botones en el navbar */
|
||||
:host ::ng-deep .p-button.p-button-text {
|
||||
padding: 0.5rem;
|
||||
color: #0a2847;
|
||||
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.p-button-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -116,4 +116,16 @@
|
||||
.app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
max-height: 50px;
|
||||
width: auto;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.logo-img {
|
||||
max-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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="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 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="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 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="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 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="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 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>
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
},
|
||||
];
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user