Skip to content

F
flight-agency-app
Commit 513d2a45 authored by Heber Cordova's avatar Heber Cordova
Browse files
Options

feat: added design table

parent 86f4c48d
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 123 deletions
angular.json
View file @ 513d2a45
......@@ -25,9 +25,9 @@
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
"node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
......
src/app/agent/pages/home-page/home-page.component.html
View file @ 513d2a45
......@@ -3,7 +3,7 @@
<shared-sidebar [toggle]="toggleSidebar" [menuItems]="menuItems"></shared-sidebar>
</div>
<div class="w-100">
<shared-navigation [navigationItems]="menuItems" (toggleSidebarEvent)="toggleSidebarEvent()"></shared-navigation>
<shared-navigation-user></shared-navigation-user>
<router-outlet></router-outlet>
</div>
</div>
src/app/app.component.css
View file @ 513d2a45
/* You can add global styles to this file, and also import other style files */
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--gray-hight: #676a6c;
--gray-light: #e4e5e6;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
......
src/app/shared/components/footer/footer.component.css 0 → 100644
View file @ 513d2a45
footer {
height: 48px;
width: 100%;
background-color: white;
padding: 15px 25px;
}
footer p {
margin: 0;
font-size: 12px;
color: #676a6c;
}
\ No newline at end of file
src/app/shared/components/footer/footer.component.html 0 → 100644
View file @ 513d2a45
<footer>
<p>© 2023 <strong>BYTE</strong> All rights reserved</p>
</footer>
src/app/shared/components/footer/footer.component.ts 0 → 100644
View file @ 513d2a45
import { Component } from '@angular/core';
@Component({
selector: 'shared-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent {
}
src/app/shared/components/mail-box/mail-box.component.css 0 → 100644
View file @ 513d2a45
.mail-box-header {
padding: 10px 20px 8px;
font-weight: 400;
color: #676a6c;
border: 1px solid #e4e5e6;
}
.mail-box-header-title {
font-size: 18px;
font-weight: 500;
}
.mail-box-header-title .bi {
margin-right: 8px;
}
.mail-box-header-description {
font-size: 12px;
}
.mail-box-content {
padding: 10px 15px;
border: 1px solid #e4e5e6;
border-top: 0;
color: #676a6c;
}
.container-content {
padding: 15px;
background-color: #f3f3f4;
min-height: calc(100vh - 202.8px)
}
\ No newline at end of file
src/app/shared/components/mail-box/mail-box.component.html 0 → 100644
View file @ 513d2a45
<div class="container-content">
<div class="bg-white mail-box-header">
<div class="d-flex align-items-center mail-box-header-title">
<i class="bi bi-people"></i>
<span>Agentes</span>
</div>
<span class="mail-box-header-description">Este mantenimiento permite gestionar los agentes dentro de la agencia</span>
</div>
<div class="bg-white mail-box-content">
<ng-content></ng-content>
</div>
</div>
src/app/shared/components/mail-box/mail-box.component.ts 0 → 100644
View file @ 513d2a45
import { Component, Input } from '@angular/core';
@Component({
selector: 'shared-mail-box',
templateUrl: './mail-box.component.html',
styleUrls: ['./mail-box.component.css']
})
export class MailBoxComponent {
@Input()
public title: string = '';
@Input()
public icon: string = '';
@Input()
public message: string = '';
}
src/app/shared/components/navigation-user/navigation-user.component.css 0 → 100644
View file @ 513d2a45
.navigation-1 {
background-color: #f3f3f4;
padding: 15px 30px 15px 20px;
}
.container-image {
padding: 8px;
}
.user {
margin-right: 10px;
font-size: 13px;
font-weight: 300;
cursor: pointer;
}
.user span {
margin-right: 5px;
}
.btn-menu {
background-color: #1a7bb9;
color: white;
font-weight: 700;
}
\ No newline at end of file
src/app/shared/components/navigation-user/navigation-user.component.html 0 → 100644
View file @ 513d2a45
<div class="d-flex justify-content-between align-items-center navigation-1">
<div class="d-flex">
<div class="d-flex align-items-center">
<button class="btn btn-menu" (click)="toggleSidebar()">
<i class="bi bi-list"></i>
</button>
</div>
<div class="container-image">
<img height="35" src="assets/byte-banner.png" alt="Byte banner">
</div>
</div>
<div class="d-flex align-items-center">
<div class="user">
<span>Nombre</span>
<i class="bi bi-caret-down-fill"></i>
</div>
<button class="btn">
<i class="bi bi-list-task"></i>
</button>
<button class="btn">
<i class="bi bi-box-arrow-right"></i>
</button>
</div>
</div>
src/app/shared/components/navigation-user/navigation-user.component.ts 0 → 100644
View file @ 513d2a45
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'shared-navigation-user',
templateUrl: './navigation-user.component.html',
styleUrls: ['./navigation-user.component.css']
})
export class NavigationUserComponent {
@Output()
public toggleSidebarEvent: EventEmitter<void> = new EventEmitter<void>();
toggleSidebar():void {
this.toggleSidebarEvent.emit();
}
}
src/app/shared/components/navigation/navigation.component.css
View file @ 513d2a45
.navigation {
padding: 0 25px 15px 25px;
color: #676a6c;
border: 1px solid #e4e5e6;
}
.navigation h2 {
margin-top: 10px;
margin-bottom: 0;
font-size: 24px;
}
.navigation p {
......@@ -13,30 +16,4 @@
font-weight: 400px;
}
.navigation-1 {
background-color: #f3f3f4;
padding: 15px 30px 15px 20px;
}
.container-image {
padding: 8px;
}
.user {
margin-right: 10px;
font-size: 13px;
font-weight: 300;
cursor: pointer;
}
.user span {
margin-right: 5px;
}
.btn-menu {
background-color: #1a7bb9;
color: white;
font-weight: 700;
}
src/app/shared/components/navigation/navigation.component.html
View file @ 513d2a45
<div class="d-flex justify-content-between align-items-center navigation-1">
<div class="d-flex">
<div class="d-flex align-items-center">
<button class="btn btn-menu" (click)="toggleSidebar()">
<i class="bi bi-list"></i>
</button>
</div>
<div class="container-image">
<img height="35" src="assets/byte-banner.png" alt="Byte banner">
</div>
</div>
<div class="d-flex align-items-center">
<div class="user">
<span>Nombre</span>
<i class="bi bi-caret-down-fill"></i>
</div>
<button class="btn">
<i class="bi bi-list-task"></i>
</button>
<button class="btn">
<i class="bi bi-box-arrow-right"></i>
</button>
</div>
</div>
<div *ngIf="titleRoute" class="bg-white navigation">
<h2>{{ titleRoute }}</h2>
<p class="d-flex gap-2">
......
src/app/shared/components/navigation/navigation.component.ts
View file @ 513d2a45
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuItem } from '../../interfaces/menu-item.interface';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'shared-navigation',
......@@ -20,14 +19,4 @@ export class NavigationComponent implements OnInit {
public titleRoute?: string;
@Input()
public navigationItems: MenuItem[] = [];
@Output()
public toggleSidebarEvent: EventEmitter<void> = new EventEmitter<void>();
toggleSidebar():void {
this.toggleSidebarEvent.emit();
}
}
src/app/shared/components/sidebar/sidebar.component.css
View file @ 513d2a45
......@@ -6,12 +6,9 @@
@media (min-width: 768px) {
.wrapper {
width: 210px;
width: 220px;
display: inline-block;
}
/* .wrapper .active {
width: 210px;
} */
}
.container-image {
......@@ -19,6 +16,7 @@
justify-content: center;
align-items: center;
background-color: #2f4151;
height: 146px;
}
.container-image img {
......
src/app/shared/components/table-filters/table-filters.component.css 0 → 100644
View file @ 513d2a45
.filters {
display: flex;
align-items: center;
background-color: #e4e4e4;
box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;
}
.filters span {
font-size: 11px;
font-weight: 500;
padding: 5px 15px;
}
.btn {
color: white;
border-radius: 0;
width: 37.15px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-success {
background-color: #1ab394;
border: #1ab394;
font-size: 12px;
}
.btn-outline-gray {
background-color: white;
color: #676a6c;
border: 1px solid #e4e4e4;
font-size: 12px;
}
.form-control {
height: 32px;
border-radius: 0;
outline: none;
font-size: 12px;
color: #676a6c;
padding: 17px 10px;
}
.form-control:focus {
box-shadow: none;
border: 1px solid #e4e4e4;
}
\ No newline at end of file
src/app/shared/components/table-filters/table-filters.component.html 0 → 100644
View file @ 513d2a45
<div class="filters d-flex">
<div>
<span>Filtros</span>
</div>
<div class="flex-fill">
<input class=" form-control" type="text">
</div>
<div class="d-flex">
<button class="btn btn-success">
<i class="bi bi-search"></i>
</button>
<button class="btn btn-outline-gray">
<i class="bi bi-x-circle-fill"></i>
</button>
</div>
</div>
src/app/shared/components/table-filters/table-filters.component.ts 0 → 100644
View file @ 513d2a45
import { Component } from '@angular/core';
@Component({
selector: 'shared-table-filter',
templateUrl: './table-filters.component.html',
styleUrls: ['./table-filters.component.css']
})
export class TableFiltersComponent {
}
src/app/shared/components/table/table.component.css 0 → 100644
View file @ 513d2a45
.table-container {
box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f
}
.table-header {
font-size: 12px;
}
.table-header th {
color: #676a6c;
font-weight: 600;
}
.table-body {
font-size: 14px;
}
.table-item {
padding: 10px 25px;
}
.table-body td {
color: #676a6c;
font-weight: 400;
}
.btn {
color: white;
border-radius: 0;
width: 37.15px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-circle {
border: 1px solid #e4e4e4;
border-radius: 50%;
height: 32px;
width: 32px;
color: #676a6c;
background-color: white;
box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;
}
.btn-circle:hover {
color: #1ab394;
}
.btn-action-table {
background-color: white;
color: #676a6c;
width: auto;
border-radius: 4px;
border: 1px solid #e4e4e4;
font-size: 12px;
font-weight: 200;
}
.btn-action-table span {
color: #676a6c;
}
.btn-action-table i {
margin-right: 6px;
}
\ No newline at end of file
src/app/shared/components/table/table.component.html 0 → 100644
View file @ 513d2a45
<div class="d-flex gap-2">
<div class="content flex-fill">
<shared-table-filter></shared-table-filter>
<div class="table-container mt-3">
<table class="table table-striped">
<thead class="pt-4" >
<tr class="table-header">
<th *ngFor="let item of tableModel" class="table-item">{{ item }}</th>
<th class="table-item"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of tableData" class="table-body">
<td *ngFor="let item of tableModel" class="table-item">{{ data[item] }}</td>
<td class="table-item">
<div class="d-flex justify-content-end">
<button class="btn btn-action-table">
<i class="bi bi-pencil-square"></i>
<span>Editar</span>
</button>
<button class="btn btn-action-table">
<i class="bi bi-trash"></i>
<span>Eliminar</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="pagination w-auto">
</div>
</div>
</div>
<div class="">
<button class="btn btn-circle">
<i class="bi bi-file-earmark"></i>
</button>
</div>
</div>
src/app/shared/components/table/table.component.ts 0 → 100644
View file @ 513d2a45
import { Component } from '@angular/core';
@Component({
selector: 'shared-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
public tableModel: string[] = ['id', 'name', 'lastname', 'detail'];
public tableData: any[] = [
{
id: '1',
name: 'John',
lastname: 'Doe',
detail: 'Detail'
},
{
id: '2',
name: 'Jane',
lastname: 'Doe',
detail: 'Detail'
},
{
id: '3',
name: 'John',
lastname: 'Smith',
detail: 'Detail'
},
{
id: '4',
name: 'Jane',
lastname: 'Smith',
detail: 'Detail'
}
];
}
src/app/shared/shared.module.ts
View file @ 513d2a45
......@@ -3,13 +3,23 @@ import { CommonModule } from '@angular/common';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { RouterModule } from '@angular/router';
import { NavigationComponent } from './components/navigation/navigation.component';
import { MailBoxComponent } from './components/mail-box/mail-box.component';
import { TableComponent } from './components/table/table.component';
import { TableFiltersComponent } from './components/table-filters/table-filters.component';
import { NavigationUserComponent } from './components/navigation-user/navigation-user.component';
import { FooterComponent } from './components/footer/footer.component';
@NgModule({
declarations: [
SidebarComponent,
NavigationComponent
NavigationComponent,
MailBoxComponent,
TableComponent,
TableFiltersComponent,
NavigationUserComponent,
FooterComponent
],
imports: [
CommonModule,
......@@ -17,7 +27,11 @@ import { NavigationComponent } from './components/navigation/navigation.componen
],
exports: [
SidebarComponent,
NavigationComponent
NavigationComponent,
MailBoxComponent,
TableComponent,
NavigationUserComponent,
FooterComponent
]
})
export class SharedModule { }
src/app/supervisor/pages/agents/agents.component.html
View file @ 513d2a45
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sint ut totam quisquam ducimus, veniam aliquid commodi fuga necessitatibus quo dolor. Suscipit autem harum amet temporibus dignissimos sed tempora modi!</p>
<shared-navigation></shared-navigation>
<shared-mail-box
title="Agentes"
message="Este mantenimiento permite gestionar los agentes dentro de la agencia"
icon="bi-people">
<shared-table></shared-table>
</shared-mail-box>
\ No newline at end of file
src/app/supervisor/pages/flight-config/flight-config.component.html
View file @ 513d2a45
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla saepe soluta labore, dolore ad assumenda enim natus veritatis possimus vel animi, culpa, voluptatum facere. Ut reprehenderit quidem sint molestias tempore.</p>
\ No newline at end of file
<shared-navigation></shared-navigation>
\ No newline at end of file
src/app/supervisor/pages/home-page/home-page.component.html
View file @ 513d2a45
......@@ -3,7 +3,8 @@
<shared-sidebar [toggle]="toggleSidebar" [menuItems]="menuItems"></shared-sidebar>
</div>
<div class="w-100">
<shared-navigation (toggleSidebarEvent)="toggleSidebarEvent()"></shared-navigation>
<shared-navigation-user (toggleSidebarEvent)="toggleSidebarEvent()"></shared-navigation-user>
<router-outlet></router-outlet>
<shared-footer></shared-footer>
</div>
</div>
\ No newline at end of file
src/styles.css
View file @ 513d2a45
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--gray-hight: #676a6c;
--gray-light: #e4e5e6;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment