Initial commit

projects/bytebot-html/src/app/app-routing.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { BaseLayoutComponent, CustomLayoutComponent, NotFoundComponent } from '@xdf/layouts';
 import { AuthGuard, LoginComponent } from '@xdf/security';
-import { BytebotLayoutComponent } from './modules/bytebot-layout/bytebot-layout/bytebot-layout.component';
 import { HomeComponent } from './views/home/home.component';
 
 const routes: Routes = [
@@ -11,7 +10,7 @@ const routes: Routes = [
   // Main redirect
   { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuard] },
   {
-    path: '', component: BaseLayoutComponent,
+    path: '', component: CustomLayoutComponent,
     children: [
       { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
       {
@@ -27,12 +26,32 @@ const routes: Routes = [
         loadChildren: () => import('./modules/agent/agent.module').then(m => m.AgentModule)
       },
       {
-        path: 'mantenimiento', data: { breadcrumb: 'Mantenimiento'}, canLoad: [AuthGuard],
-        loadChildren: () => import('./modules/mantenimiento/matenimiento.module').then(m => m.MantenimientoModule)
+        path: "airport", data: { breadcrumb: "Aeropuertos" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/airport/airport.module").then( m => m.AirportModule)
       },
       {
-        path: 'prueba', canLoad: [AuthGuard],
-        loadChildren: () => import('./modules/prueba/prueba.module').then(m => m.PruebaModule)
+        path: "passenger", data: { breadcrumb: "Pasajeros" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/passenger/passenger.module").then( m => m.PassengerModule)
+      },
+      {
+        path: "agent", data: { breadcrumb: "Agentes" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/booking-agent/booking-agent.module").then( m => m.BookingAgentModule)
+      },
+      {
+        path: "payment", data: { breadcrumb: "Pagos" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/payment/payment.module").then( m => m.PaymentModule)
+      },
+      {
+        path: "payment-reservation", data: {breadcrumb: "Pagos Reserva"}, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/payment-reservation/payment-reservation.module").then( m => m.PaymentReservationModule)
+      },
+      {
+        path: "flight", data: { breadcrumb: "Vuelos" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/flight/flight.module").then( m => m.FlightModule)
+      },
+      {
+        path: "reservation", data: { breadcrumb: "Reservaciones" }, canLoad: [AuthGuard],
+        loadChildren: () => import("./modules/reservation/reservation.module").then( m => m.ReservationModule)
       }
     ],
     canActivate: [AuthGuard]

projects/bytebot-html/src/app/app.module.ts

@@ -42,8 +42,15 @@ import {
 import { CustomProgramsFakeBackendInterceptor } from './interceptors/custom-programs-fake-backend.interceptor';
 import { AgentFakeBackendInterceptor } from './interceptors/agent-fake-backend.interceptor';
 import { OperativeDashboardFakeBackendInterceptor } from './interceptors/operative-dashboard-fake-backend.interceptor';
-import { CustomErrorHandlerInterceptor } from './interceptors/custom-error-handler.interceptor';
-import { PruebaFakeBackendInterceptor } from './interceptors/prueba-fake-backend.interceptor';
+import { AirportFakeBackendInterceptor } from './interceptors/airport-fake-backend.interceptor';
+import { PassengerFakeBackendInterceptor } from './interceptors/passenger-fake-backend.interceptor';
+import { PaymentFakeBackendInterceptor } from './interceptors/payment-fake-backend.interceptor';
+import { BookingAgentFakeBackendInterceptor } from './interceptors/booking-agent-fake-backend.interceptor';
+//import { AirportFakeBackendInterceptor } from './interceptors/airport-fake-backend.interceptor';
+//import { PassengerFakeBackendInterceptor } from './interceptors/passenger-fake-backend.interceptor';
+//import { BookingAgentFakeBackendInterceptor } from './interceptors/booking-agent-fake-backend.interceptor';
+//import { PaymentFakeBackendInterceptor } from './interceptors/payment-fake-backend.interceptor';
+
 
 const INITIAL_LANGUAGE = 'es';
 
@@ -132,8 +139,10 @@ export function createTranslateLoader(http: HttpClient) {
     { provide: HTTP_INTERCEPTORS, useClass: CustomProgramsFakeBackendInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: AgentFakeBackendInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: OperativeDashboardFakeBackendInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: PruebaFakeBackendInterceptor, multi: true},
-
+    //{ provide: HTTP_INTERCEPTORS, useClass: AirportFakeBackendInterceptor, multi: true },
+    //{ provide: HTTP_INTERCEPTORS, useClass: PassengerFakeBackendInterceptor, multi: true },
+    //{ provide: HTTP_INTERCEPTORS, useClass: BookingAgentFakeBackendInterceptor, multi: true },
+    //{ provide: HTTP_INTERCEPTORS, useClass: PaymentFakeBackendInterceptor, multi: true },
 
     { provide: APP_INITIALIZER, useFactory: init_app, deps: [InitCommonsService, TranslateService], multi: true }
   ],

projects/bytebot-html/src/app/interceptors/prueba-fake-backend.interceptor.ts → projects/bytebot-html/src/app/interceptors/airport-fake-backend.interceptor.ts

-import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable, of, throwError } from 'rxjs';
-import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
-import { ok, error } from './functions-utils.interceptor';
-import { SortField, DIRECTION } from '@xdf/commons';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, of, throwError } from "rxjs";
 
-import * as source from '../../assets/fake-data/prueba-data.json';
 
+import * as source from '../../assets/fake-data/airport-data.json';
+import { delay, dematerialize, materialize, mergeMap } from "rxjs/operators";
+import { DIRECTION, SortField } from "@xdf/commons";
 
-const basePath = './service/settings/prueba';
+const basePath = './service/airport';
 
 @Injectable()
-export class PruebaFakeBackendInterceptor implements HttpInterceptor {
-    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-
-        const { url, method, headers, body } = request;
+export class AirportFakeBackendInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const {url, method, headers, body} = req;
         const data = (source as any).default;
-        // const dataEquivalences = (sourceEquivalences as any).default;
-        //const initialData = (InitialDataServiceProvider as any).default;
-
         return of(null)
-            .pipe(mergeMap(handleRoute))
-            .pipe(materialize())
-            .pipe(delay(50))
-            .pipe(dematerialize());
+        .pipe(mergeMap(handleRoute))
+        .pipe(materialize())
+        .pipe(delay(50))
+        .pipe(dematerialize());
 
         function handleRoute() {
-            switch (true) {
+            switch(true) {
                 case url.endsWith(basePath + '/page') && method === 'POST':
                     return pagination(body);
-                // case url.match('.*' + basePath + '/equivalences') && method === 'GET':
-                //    return ok(dataEquivalences);
-                case url.match('.*' + basePath) && method === 'GET':
+
+                case url.match(".*" + basePath) && method === 'GET':
+                    console.log(url);
                     return getOne(url);
-                case url.match('.*' + basePath + '/\\d+$') && method === 'DELETE':
-                    return deleteOperation(url);
-                case url.match('.*' + basePath) && method === 'GET':
-                    return ok(data.data[0]);
+                
                 default:
-                    // pass through any requests not handled above
-                    return next.handle(request);
+                    return next.handle(req);
             }
         }
+
         function pagination(body) {
             body.totalPages = 1;
             body.totalItems = 2;
@@ -49,12 +41,13 @@ export class PruebaFakeBackendInterceptor implements HttpInterceptor {
             const page_number = body.currentPage;
             const page_size = body.itemsPerPage ? body.itemsPerPage : 5;
 
-            if (body.sortFields.length > 0) {
+            if(body.sortFields.length > 0) {
                 const sortField: SortField = body.sortFields[0];
-                const sign = sortField.direction === DIRECTION.asc ? 1 : -1;
-                data.sort(function (a, b) {
-                    if ((typeof a[sortField.field] === 'number') && (typeof b[sortField.field] === 'number')) {
-                        if (a[sortField.field] > b[sortField.field]) {
+                const sign = sortField.direction === DIRECTION.asc ? 1: -1;
+                
+                data.sort(function (a, b){
+                    if((typeof a[sortField.field] === 'number') && (typeof b[sortField.field] === 'number')) {
+                        if(a[sortField.field] > b[sortField.field]) {
                             return 1 * sign;
                         } else if (a[sortField.field] < b[sortField.field]) {
                             return -1 * sign;
@@ -69,18 +62,22 @@ export class PruebaFakeBackendInterceptor implements HttpInterceptor {
             body.data = data.slice(page_number * page_size, (page_number + 1) * page_size);
             return ok(body);
         }
-        function getOne(url) {
-            const n = url.lastIndexOf("/") + 1;
-            const id: Number = Number(url.substring(n));
-            return ok(data.filter(x => x.id === id)[0]);
+
+        function getData() {
+            return ok(data);
         }
-        function deleteOperation(url) {
-            const n = url.lastIndexOf("/") + 1;
-            const id: Number = Number(url.substring(n));
 
-            (source as any).default = data.filter(item => item.id !== id);
+        function ok(bodyContent?) {
+            return of(new HttpResponse({ status: 200, body: bodyContent}));
+        }
+
+        function error(message: string) {
+            return throwError({error: {message}});
+        }
 
-            return ok();
+        function getOne(url: string) {
+            return ok(data);
         }
     }
-}
+
+}
\ No newline at end of file

projects/bytebot-html/src/app/interceptors/booking-agent-fake-backend.interceptor.ts

+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, of, throwError } from "rxjs";
+
+
+import * as source from '../../assets/fake-data/agent-data.json';
+import { delay, dematerialize, materialize, mergeMap } from "rxjs/operators";
+import { DIRECTION, SortField } from "@xdf/commons";
+
+const basePath = './service/agent';
+
+@Injectable()
+export class BookingAgentFakeBackendInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const {url, method, headers, body} = req;
+        const data = (source as any).default;
+        return of(null)
+        .pipe(mergeMap(handleRoute))
+        .pipe(materialize())
+        .pipe(delay(50))
+        .pipe(dematerialize());
+
+        function handleRoute() {
+            switch(true) {
+                case url.endsWith(basePath + '/page') && method === 'POST':
+                    return pagination(body);
+
+                case url.match(".*" + basePath) && method === 'GET':
+                    console.log(url);
+                    return getOne(url);
+                
+                default:
+                    return next.handle(req);
+            }
+        }
+
+        function pagination(body) {
+            body.totalPages = 1;
+            body.totalItems = 2;
+
+            const page_number = body.currentPage;
+            const page_size = body.itemsPerPage ? body.itemsPerPage : 5;
+
+            if(body.sortFields.length > 0) {
+                const sortField: SortField = body.sortFields[0];
+                const sign = sortField.direction === DIRECTION.asc ? 1: -1;
+                
+                data.sort(function (a, b){
+                    if((typeof a[sortField.field] === 'number') && (typeof b[sortField.field] === 'number')) {
+                        if(a[sortField.field] > b[sortField.field]) {
+                            return 1 * sign;
+                        } else if (a[sortField.field] < b[sortField.field]) {
+                            return -1 * sign;
+                        }
+                        return 0;
+                    } else {
+                        return a[sortField.field].localeCompare(b[sortField.field]) * sign;
+                    }
+                });
+            }
+
+            body.data = data.slice(page_number * page_size, (page_number + 1) * page_size);
+            return ok(body);
+        }
+
+        function getData() {
+            return ok(data);
+        }
+
+        function ok(bodyContent?) {
+            return of(new HttpResponse({ status: 200, body: bodyContent}));
+        }
+
+        function error(message: string) {
+            return throwError({error: {message}});
+        }
+
+        function getOne(url: string) {
+            return ok(data);
+        }
+    }
+
+}
\ No newline at end of file

projects/bytebot-html/src/app/interceptors/passenger-fake-backend.interceptor.ts

+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, of, throwError } from "rxjs";
+
+
+import * as source from '../../assets/fake-data/passenger-data.json';
+import { delay, dematerialize, materialize, mergeMap } from "rxjs/operators";
+import { DIRECTION, SortField } from "@xdf/commons";
+
+const basePath = './service/passenger';
+
+@Injectable()
+export class PassengerFakeBackendInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const {url, method, headers, body} = req;
+        const data = (source as any).default;
+        return of(null)
+        .pipe(mergeMap(handleRoute))
+        .pipe(materialize())
+        .pipe(delay(50))
+        .pipe(dematerialize());
+
+        function handleRoute() {
+            switch(true) {
+                case url.endsWith(basePath + '/page') && method === 'POST':
+                    return pagination(body);
+
+                case url.match(".*" + basePath) && method === 'GET':
+                    console.log(url);
+                    return getOne(url);
+                
+                default:
+                    return next.handle(req);
+            }
+        }
+
+        function pagination(body) {
+            body.totalPages = 1;
+            body.totalItems = 2;
+
+            const page_number = body.currentPage;
+            const page_size = body.itemsPerPage ? body.itemsPerPage : 5;
+
+            if(body.sortFields.length > 0) {
+                const sortField: SortField = body.sortFields[0];
+                const sign = sortField.direction === DIRECTION.asc ? 1: -1;
+                
+                data.sort(function (a, b){
+                    if((typeof a[sortField.field] === 'number') && (typeof b[sortField.field] === 'number')) {
+                        if(a[sortField.field] > b[sortField.field]) {
+                            return 1 * sign;
+                        } else if (a[sortField.field] < b[sortField.field]) {
+                            return -1 * sign;
+                        }
+                        return 0;
+                    } else {
+                        return a[sortField.field].localeCompare(b[sortField.field]) * sign;
+                    }
+                });
+            }
+
+            body.data = data.slice(page_number * page_size, (page_number + 1) * page_size);
+            return ok(body);
+        }
+
+        function getData() {
+            return ok(data);
+        }
+
+        function ok(bodyContent?) {
+            return of(new HttpResponse({ status: 200, body: bodyContent}));
+        }
+
+        function error(message: string) {
+            return throwError({error: {message}});
+        }
+
+        function getOne(url: string) {
+            return ok(data);
+        }
+    }
+
+}
\ No newline at end of file

projects/bytebot-html/src/app/interceptors/payment-fake-backend.interceptor.ts

+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable, of, throwError } from "rxjs";
+
+
+import * as source from '../../assets/fake-data/payment-data.json';
+import { delay, dematerialize, materialize, mergeMap } from "rxjs/operators";
+import { DIRECTION, SortField } from "@xdf/commons";
+
+const basePath = './service/payment';
+
+@Injectable()
+export class PaymentFakeBackendInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const {url, method, headers, body} = req;
+        const data = (source as any).default;
+        return of(null)
+        .pipe(mergeMap(handleRoute))
+        .pipe(materialize())
+        .pipe(delay(50))
+        .pipe(dematerialize());
+
+        function handleRoute() {
+            switch(true) {
+                case url.endsWith(basePath + '/page') && method === 'POST':
+                    return pagination(body);
+
+                case url.match(".*" + basePath) && method === 'GET':
+                    console.log(url);
+                    return getOne(url);
+                
+                default:
+                    return next.handle(req);
+            }
+        }
+
+        function pagination(body) {
+            body.totalPages = 1;
+            body.totalItems = 2;
+
+            const page_number = body.currentPage;
+            const page_size = body.itemsPerPage ? body.itemsPerPage : 5;
+
+            if(body.sortFields.length > 0) {
+                const sortField: SortField = body.sortFields[0];
+                const sign = sortField.direction === DIRECTION.asc ? 1: -1;
+                
+                data.sort(function (a, b){
+                    if((typeof a[sortField.field] === 'number') && (typeof b[sortField.field] === 'number')) {
+                        if(a[sortField.field] > b[sortField.field]) {
+                            return 1 * sign;
+                        } else if (a[sortField.field] < b[sortField.field]) {
+                            return -1 * sign;
+                        }
+                        return 0;
+                    } else {
+                        return a[sortField.field].localeCompare(b[sortField.field]) * sign;
+                    }
+                });
+            }
+
+            body.data = data.slice(page_number * page_size, (page_number + 1) * page_size);
+            return ok(body);
+        }
+
+        function getData() {
+            return ok(data);
+        }
+
+        function ok(bodyContent?) {
+            return of(new HttpResponse({ status: 200, body: bodyContent}));
+        }
+
+        function error(message: string) {
+            return throwError({error: {message}});
+        }
+
+        function getOne(url: string) {
+            return ok(data);
+        }
+    }
+
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-deployment-channels/ca-deployment-channels.component.ts

@@ -20,7 +20,7 @@ export class CaDeploymentChannelsComponent implements OnInit {
   stepper: MatStepper;
 
   @Input()
-  changes = false;
+  changes: boolean = false;
 
   @ViewChild('fieldForm', {static: false})
   fieldFormList: any;

projects/bytebot-html/src/app/modules/agent/view/components/ca-file-upload-modal/ca-file-upload-modal.component.scss

@@ -12,9 +12,8 @@ table {
 }
 .title_header_popup {
     i {
-      font-size: 28px;
-      padding-right: 20px;
-      color: red;
+        font-size: 28px;
+        padding-right: 20px;
+        color: red;
     }
-  }
-  
\ No newline at end of file
+}  
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.scss

@@ -169,5 +169,4 @@ th.mat-header-cell {
 
 ::ng-deep .text-right > .mat-sort-header-container {
     justify-content: flex-end !important;
-  }
-  
\ No newline at end of file
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/agent/view/components/ca-frequent-questions/ca-frequent-questions.component.ts

@@ -31,7 +31,7 @@ export class CaFrequentQuestionsComponent implements OnInit, AfterViewInit {
   nextPage: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   public resourceAuth = new Object();
-  dirty = false;
+  dirty: boolean = false;
 
 
 

projects/bytebot-html/src/app/modules/agent/view/components/ca-general-information/ca-general-information.component.html

@@ -48,6 +48,7 @@
                                     <mat-form-field class="amd-form-control">
                                         <input matInput [placeholder]="'label.name' | translate" formControlName="name"
                                             maxlength="50" required>
+                                            <!-- Borrar mat-error-->
                                             <mat-error *ngFor="let error of getErrors('name', 'label.name')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                             </mat-error>
                                     </mat-form-field>
@@ -60,6 +61,7 @@
                                             [placeholder]="'label.description' | translate" maxlength="200"
                                             formControlName="description" #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="3"
                                             cdkAutosizeMaxRows="6" required></textarea>
+                                            <!-- Borrar mat-error-->
                                             <mat-error *ngFor="let error of getErrors('description', 'label.description')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                             </mat-error>
                                     </mat-form-field>
@@ -71,6 +73,7 @@
                                         <input matInput [placeholder]="'label.version' | translate" formControlName="version"
                                             maxlength="15" required pattern="[0-9]{1,2}[.]{1}[0-9]{1,2}[.]{1}[0-9]{1,2}">
                                         <mat-hint>##.##.##</mat-hint>
+                                        <!-- Borrar mat-error-->
                                         <mat-error *ngFor="let error of getErrors('version', 'label.version')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                         </mat-error>
                                     </mat-form-field>
@@ -85,6 +88,7 @@
                                                 {{country.name | translate}}
                                             </mat-option>
                                         </mat-select>
+                                        <!-- Borrar mat-error-->
                                         <mat-error *ngFor="let error of getErrors('country', 'label.country')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                         </mat-error>
                                     </mat-form-field>
@@ -99,6 +103,7 @@
                                                 {{timezone | translate}}
                                             </mat-option>
                                         </mat-select>
+                                        <!-- Borrar mat-error-->
                                         <mat-error *ngFor="let error of getErrors('timezone', 'label.timezone')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                         </mat-error>
                                     </mat-form-field>
@@ -112,6 +117,7 @@
                                                 {{language.name | translate}}
                                             </mat-option>
                                         </mat-select>
+                                        <!-- Borrar mat-error-->
                                         <mat-error *ngFor="let error of getErrors('language', 'label.language')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                         </mat-error>
                                     </mat-form-field>
@@ -125,6 +131,7 @@
                                                 {{type.name | translate}}
                                             </mat-option>
                                         </mat-select>
+                                        <!-- Borrar mat-error-->
                                         <mat-error *ngFor="let error of getErrors('type', 'label.type')">{{ 'message.error.' + error.name  | translate : error.prop}}
                                         </mat-error>
                                     </mat-form-field>

projects/bytebot-html/src/app/modules/agent/view/components/upload.service.ts

@@ -3,15 +3,15 @@ import { map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+   providedIn: 'root'
 })
 export class UploadService {
-    SERVER_URL = './service/agent';
+      SERVER_URL = './service/agent';
 
-    constructor(private httpClient: HttpClient) { }
+      constructor(private httpClient: HttpClient) { }
 
-    public upload(formData) {
-      return this.httpClient.post<any>(this.SERVER_URL, formData, {
+      public upload(formData) {
+         return this.httpClient.post<any>(this.SERVER_URL, formData, {
          reportProgress: true,
          observe: 'events'
       });

projects/bytebot-html/src/app/modules/airport/airport-routing.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+import { CrudDetailComponent, CrudGridComponent, DirtyGuard, RecordResolver, TemplateResolver } from '@xdf/gallery';
+
+
+
+const routes: Routes = [
+  {
+    path: "airport",
+    component: CrudGridComponent,
+    canActivate: [AuthGuard, ResourceAuthGuard ],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "airport",
+      breadcrumb: 'breadcrumb.airport'
+    },
+  },
+  {
+    path: 'airport/detail/:mode', component: CrudDetailComponent, 
+    canActivate: [AuthGuard, ResourceAuthGuard],
+    canDeactivate: [DirtyGuard],
+    resolve: {record: RecordResolver},
+    data: {
+      program: 'airport',
+      breadcrumb: 'breadcrumb.airport.detail'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class AirportRoutingModule { }

projects/bytebot-html/src/app/modules/mantenimiento/matenimiento.module.ts → projects/bytebot-html/src/app/modules/airport/airport.module.ts

 import { NgModule } from '@angular/core';
-import { XdfGalleryModule } from '@xdf/gallery';
 import { CommonModule } from '@angular/common';
+import { AirportRoutingModule } from './airport-routing.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
 import { XdfSettingsModule } from '@xdf/settings';
-import { MantenimientoRoutingModule } from './mantenimiento-routing.module';
-import { PruebaComponent } from './components/prueba/prueba.component';
+
+
 
 @NgModule({
-  declarations: [
-    PruebaComponent
-  ],
+  declarations: [],
   imports: [
     CommonModule,
     FormsModule,
@@ -18,12 +17,7 @@ import { PruebaComponent } from './components/prueba/prueba.component';
     TranslateModule,
     XdfGalleryModule,
     XdfSettingsModule,
-    MantenimientoRoutingModule
-  ],
-  entryComponents:[
-  ],
-  providers: [
-
+    AirportRoutingModule
   ]
 })
-export class MantenimientoModule { }
\ No newline at end of file
+export class AirportModule { }

projects/bytebot-html/src/app/modules/booking-agent/booking-agent-routing.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { CrudDetailComponent, CrudGridComponent, DirtyGuard, RecordResolver, TemplateResolver } from '@xdf/gallery';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+
+
+const routes: Routes = [
+  {
+    path: "booking_agent", component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "booking_agent",
+      breadcrumb: "breadcrumb.booking_agent"
+    },
+  },
+  {
+    path: 'booking_agent/detail/:mode', component: CrudDetailComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
+    resolve: {record: RecordResolver},
+    data: {
+      program: 'booking_agent',
+      breadcrumb: 'breadcrumb.booking_agent.detail'
+    }
+  }
+]
+
+@NgModule({
+  declarations: [],
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class BookingAgentRoutingModule { }

projects/bytebot-html/src/app/modules/prueba/prueba.module.ts → projects/bytebot-html/src/app/modules/booking-agent/booking-agent.module.ts

 import { NgModule } from '@angular/core';
-import { XdfGalleryModule } from '@xdf/gallery';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
 import { XdfSettingsModule } from '@xdf/settings';
-import { PruebaRoutingModule } from './prueba-routing.module';
-import { MatPaginatorModule, MatTableModule } from '@angular/material';
+import { BookingAgentRoutingModule } from './booking-agent-routing.module';
+
+
 
 @NgModule({
-  declarations: [
-  ],
+  declarations: [],
   imports: [
     CommonModule,
     FormsModule,
@@ -17,14 +17,7 @@ import { MatPaginatorModule, MatTableModule } from '@angular/material';
     TranslateModule,
     XdfGalleryModule,
     XdfSettingsModule,
-    TranslateModule,
-    MatTableModule,
-    MatPaginatorModule,
-    PruebaRoutingModule
-  ],
-  entryComponents:[
-  ],
-  providers: [
+    BookingAgentRoutingModule
   ]
 })
-export class PruebaModule { }
\ No newline at end of file
+export class BookingAgentModule { }

projects/bytebot-html/src/app/modules/flight/components/datepicker-select/datepicker-select.component.html

+<div [formGroup]="formGroup">
+    <mat-form-field class="form-control-full-width" style="width: 100%" hintLabel="{{ suggest | translate }}">
+        <mat-label>{{ placeholder | translate}}</mat-label>
+
+        <input matInput [matDatepicker]="picker" [formControlName]="name" [required]="required" [min]="this.minDate"
+            (dateInput)="changeValue($event.value)" [max]="this.maxDate" onpaste="return false">
+
+        <mat-datepicker-toggle id="{{name}}" matSuffix [for]="picker" [disabled]="disabled"></mat-datepicker-toggle>
+        <mat-datepicker #picker [disabled]="disabled"></mat-datepicker>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('required') 
+            && !formGroup.controls[this.name].hasError('matDatepickerMax')
+            && !formGroup.controls[this.name].hasError('matDatepickerMin')
+            && !formGroup.controls[this.name].hasError('matDatepickerParse')">
+            {{ 'message.error.required' | translate:{'label': placeholder | translate} }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerMax')">
+            {{ 'message.error.matDatepickerMax' | translate : {'max': getDateFormat(maxDate), 'label': placeholder | translate } }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerMin')">
+            {{ 'message.error.matDatepickerMin' | translate : {'min': getDateFormat(minDate), 'label': placeholder | translate } }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerParse')">
+            {{ 'message.error.matDatepickerParse' | translate : {'pattern': format } }}
+        </mat-error>
+
+    </mat-form-field>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/components/datepicker-select/datepicker-select.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatepickerSelectComponent } from './datepicker-select.component';
+
+describe('DatepickerSelectComponent', () => {
+  let component: DatepickerSelectComponent;
+  let fixture: ComponentFixture<DatepickerSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatepickerSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatepickerSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/flight/components/datepicker-select/datepicker-select.component.ts

+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroupUtils } from '@xdf/gallery';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'byte-datepicker-select',
+  templateUrl: './datepicker-select.component.html',
+  styleUrls: ['./datepicker-select.component.scss']
+})
+export class DatepickerSelectComponent implements OnInit {
+
+  @Input()
+  placeholder: string;
+
+  @Input()
+  name: string;
+
+  @Input()
+  suggest: string;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  required = false;
+
+  @Input()
+  minDate: Date;
+
+  @Input()
+  maxDate: Date;
+
+  @Input()
+  formGroup: FormGroup;
+
+  @Input()
+  format = 'DD/MM/YYYY';
+
+  @Output('changeDate') change = new EventEmitter<Date>();
+
+  constructor(
+    private formGroupUtils: FormGroupUtils) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.disabled = (this.formGroup.controls[this.name] as FormControl).disabled;
+
+  }
+
+  ngOnInit(): void {
+    if (!this.formGroup) {
+      this.formGroup = this.formGroupUtils.createTemporalFormGroup(this.name, '', this.disabled);
+    }
+    if (!this.disabled) {
+      this.disabled = (this.formGroup.controls[this.name] as FormControl).disabled;
+    }
+
+  }
+
+  changeValue(value: any): void {
+    this.change.emit(value);
+  }
+
+  getDateFormat(date: Date): any {
+    if (date) {
+      const datem = moment(date);
+      return datem.utc().format(this.format);
+    }
+    return null;
+  }
+
+}

projects/bytebot-html/src/app/modules/flight/components/flight-form/flight-form.component.html

+<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()" class="form-content">
+    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
+        <xdf-form-header [icon]="icon" [title]="'tax.title'" [recordIdentifier]="record?.id"
+            titleDesc="Gestionar Vuelos" [mode]="mode" [resourceAuth]="resourceAuth"
+            (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'" [displaying]="mode === 'view'">
+        </xdf-form-header>
+    </div>
+    <div class="mail-box-content">
+        <div class="header-content">
+            <div class="col-12">
+                <div class="form-content">
+                    <div class="legend">
+                        <span class="group-title">Datos del Vuelo</span>
+                    </div>
+                    <div class="group-content">
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <byte-datepicker-select name="departureDate" label="Fecha Salida"
+                                placeholder="Fecha Salida" [formGroup]="form"
+                                [disabled]="this.form.controls['departureDate'].disabled" 
+                                [minDate]="minDate">
+                                </byte-datepicker-select>
+                            </div>
+                            <div class="col-6 col-md-6">
+                                <byte-datepicker-select name="arrivalDate" label="Fecha Llegada"
+                                placeholder="Fecha Llegada" [formGroup]="form"
+                                [disabled]="this.form.controls['arrivalDate'].disabled" 
+                                [minDate]="minDate">
+                                </byte-datepicker-select>
+                            </div>
+                        </div>
+
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="airlineCode" label="Codigo Aerolinea" type="text" [required]="true"
+                                    placeholder="Codigo Aerolinea" [formGroup]="form"
+                                    [options]="{maxLength: 12, showLength: true}">
+                                </xdf-input>
+                            </div>
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="codeTypeAircraft" label="Codigo Aeronave" type="text" [required]="true"
+                                    placeholder="Codigo Aeronave" [formGroup]="form"
+                                    [options]="{maxLength: 50, showLength: true}">
+                                </xdf-input>
+                            </div>
+                        </div>
+
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <mat-form-field style="width: 100%;">
+                                    <mat-label>Aeropuerto origen</mat-label>
+                                    <mat-select formControlName="codeAirportOrigin">
+                                        <mat-option *ngFor="let airport of airports" [value]="airport.id">
+                                        {{airport.airportCode}}
+                                        </mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+                            <div class="col-6 col-md-6">
+                                <mat-form-field style="width: 100%;">
+                                    <mat-label>Aeropuerto Destino</mat-label>
+                                    <mat-select formControlName="codeAirportDestination">
+                                        <mat-option *ngFor="let airport of airports" [value]="airport.id">
+                                            {{airport.airportCode}}
+                                        </mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+                        </div>
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="flightCost" label="Costo" type="text" [required]="true"
+                                    placeholder="Costo" [formGroup]="form"
+                                    [options]="{maxLength: 12, showLength: true}">
+                                </xdf-input>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hr-line-dashed" style="margin-bottom: 20px"></div>
+                        <div class="legend">
+                            <span class="group-title">Escalas</span>
+                        </div>
+                        <div class="group-content">
+                            <byte-flight-legs-grid #taxRatesGrid [mode]="mode"></byte-flight-legs-grid>
+                        </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="footer-content">
+            <div class="col-lg-12" *ngIf="mode !== 'view'">
+                <div class="form-status-bar border-top">
+                    <button type="submit" mat-stroked-button class="btn btn-primary pull-right" style="margin-top: 10px;"
+                        [disabled]="form?.invalid || processing || form.pending || taxRatesGrid.dataSource.data.length === 0">
+                        <i class="fa fa-save" aria-hidden="true" style="padding-right: 3px; padding-bottom: 3px;">
+                        </i>{{'btn.save' | translate }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

projects/bytebot-html/src/app/modules/mantenimiento/components/prueba/prueba.component.spec.ts → projects/bytebot-html/src/app/modules/flight/components/flight-form/flight-form.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PruebaComponent } from './prueba.component';
+import { FlightFormComponent } from './flight-form.component';
 
-describe('PruebaComponent', () => {
-  let component: PruebaComponent;
-  let fixture: ComponentFixture<PruebaComponent>;
+describe('FlightFormComponent', () => {
+  let component: FlightFormComponent;
+  let fixture: ComponentFixture<FlightFormComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PruebaComponent ]
+      declarations: [ FlightFormComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PruebaComponent);
+    fixture = TestBed.createComponent(FlightFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/bytebot-html/src/app/modules/flight/components/flight-form/flight-form.component.ts

+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { AsyncValidatorFn, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { IFormView, DynaDataService, AuditDialogService, ConfirmationDialogService, RequiredValidator } from '@xdf/gallery';
+import { InitCommonsService, NotificationService, NotificationType } from '@xdf/commons';
+import { FlightService } from '../../services/flight.service';
+import { FlightLegsGridComponent } from '../flight-legs-grid/flight-legs-grid.component';
+
+@Component({
+  selector: 'byte-flight-form',
+  templateUrl: './flight-form.component.html',
+  styleUrls: ['./flight-form.component.scss']
+})
+export class FlightFormComponent extends IFormView implements OnInit, AfterViewInit {
+
+  airports: any[] = [];
+  
+  form: FormGroup;
+
+  private taxRatesGrid: FlightLegsGridComponent;
+  
+  @ViewChild('taxRatesGrid', {static: false}) 
+  set content (
+    content: FlightLegsGridComponent
+  ) {
+    if (content) {
+      this.taxRatesGrid = content;
+    } else {
+      this.taxRatesGrid = undefined;
+    }
+  }
+
+  constructor(
+    protected formBuilder: FormBuilder,
+    protected vcRef: ViewContainerRef,
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router,
+    protected dynaDataService: DynaDataService,
+    protected translate: TranslateService,
+    protected notificationService: NotificationService,
+    protected auditDialogService: AuditDialogService,
+    protected confirmationDialogService: ConfirmationDialogService,
+    protected init: InitCommonsService,
+    protected changeDetector: ChangeDetectorRef,
+    private flightService: FlightService ) {
+      super(vcRef, activatedRoute, router, dynaDataService,
+            translate, notificationService, auditDialogService,
+            confirmationDialogService, init);
+          }
+
+  
+  ngAfterViewInit(): void {
+    if(this.mode !== 'new' && this.record) {
+      this.taxRatesGrid.dataSource.data = this.taxRatesGrid.autoSort(this.record.legs);
+    }
+    this.changeDetector.detectChanges();
+    
+  }
+
+  ngOnInit(): void {
+    this.listAirports();
+    super.ngOnInit();
+  }
+
+  listAirports() {
+    this.flightService.getAirports().subscribe(
+      res => {
+        this.airports = res;
+      }
+    )
+  }
+
+  addLegsToFlight(idFlight: number) {
+    for(let i = 0; i < this.taxRatesGrid.dataSource.data.length; i++) {
+      this.taxRatesGrid.dataSource.data[i].flightCode = idFlight;
+
+      this.flightService.addLeg(this.taxRatesGrid.dataSource.data[i])
+      .subscribe(res => {})
+    }
+  }
+
+  protected getFields(): FormGroup {
+    let form;
+    form = this.formBuilder.group({
+
+      airlineCode: this.createFormControl('airlineCode', (this.mode !== 'new' && this.record),
+      true, '', [RequiredValidator.isRequired]),
+
+      codeTypeAircraft: this.createFormControl('codeTypeAircraft', (this.mode !== 'new' && this.record), true),
+
+      codeAirportOrigin: this.createFormControl('codeAirportOrigin', (this.mode !== 'new' && this.record),
+      true, '', [RequiredValidator.isRequired]),
+
+      codeAirportDestination: this.createFormControl('codeAirportDestination', (this.mode !== 'new' && this.record),
+      true, '', [RequiredValidator.isRequired]),
+
+      flightCost: this.createFormControl('flightCost', (this.mode !== 'new' && this.record), true, '', [RequiredValidator.isRequired]),
+
+      departureDate: this.createFormControl('departureDate', (this.mode !== 'new' && this.record),
+      true, '', [RequiredValidator.isRequired]),
+
+      arrivalDate: this.createFormControl('arrivalDate', (this.mode !== 'new' && this.record), true, '', [RequiredValidator.isRequired]),
+    });
+    return form;
+  }
+
+  private createFormControl(
+    name: string, existRecord?: boolean,
+    required?: boolean, defaultValue?: string,
+    validators?: Array<ValidationErrors>, asyncValidators?: Array<AsyncValidatorFn>): FormControl {
+      if(!defaultValue) {
+        defaultValue = '';
+      }
+      let validatorList = [];
+      if(validators) {
+        validatorList = validators;
+      }
+      if(required) {
+        validatorList.push(Validators.required);
+      }
+      if(name === 'code') return new FormControl(
+        { value: existRecord ? this.record[name]: '', disabled: this.mode !== 'new'},
+        validatorList, asyncValidators
+      );
+      return new FormControl(
+        { value: existRecord ? this. record[name] : '', disabled: this.mode === 'view'},
+        validatorList, asyncValidators);
+    }
+
+    submit() {
+      this.processing = true;
+      let result =  {
+        id: this.mode != 'new' ? this.record.id: 0,
+        airlineCode: this.form.value['airlineCode'],
+        codeTypeAircraft: this.form.value['codeTypeAircraft'],
+        codeAirportOrigin: this.form.value['codeAirportOrigin'],
+        codeAirportDestination: this.form.value['codeAirportDestination'],
+        flightCost: this.form.value['flightCost'],
+        departureDate: this.form.value['departureDate'],
+        arrivalDate: this.form.value['arrivalDate']
+      }
+
+      if(this.mode == 'new') {
+        this.dynaDataService.create(result).subscribe(
+          (res) => {
+            this.addLegsToFlight(res['id']);
+            this.notificationService.showMessage(
+              this.translate.instant('message.create.succesful'),
+              this.translate.instant('title.information'),
+              NotificationType.success
+            );
+            this.record = new Object();
+            this.form.markAsPristine();
+            this.router.navigate([this.returnUrl]);
+            this.processing = false;
+          },
+          error => {
+            this.processing = false;
+          }
+        );
+      }
+    }
+}

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/flight-leg-dialog.component.html

+<div class="popup-general">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="dialog-title">
+                <img src="{{ logoSrc }}" with="25" height="25">
+                <span class="header-popup-text">Agregar una escala</span>
+                <div class="pull-right">
+                    <button type="button" class="close" (click)="close()"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div mat-dialog-content class="dialog-content">
+        <form [formGroup]="form" name="form" autocomplete="off" novalidate>
+            <div class="group-content">
+                <div class="row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="col-5" style="margin-inline: auto;">
+                        <byte-datepicker-select name="arrivalDate" label="Fecha Salida" placeholder="Fecha Salida"
+                            [formGroup]="form" [disabled]="this.form.controls['arrivalDate'].disabled"
+                            [minDate]="minDate">
+                        </byte-datepicker-select>
+                    </div>
+                    <div class="col-5" style="margin-inline: auto;">
+                        <byte-datepicker-select name="departureDate" label="Fecha Llegada" placeholder="Fecha Llegada"
+                            [formGroup]="form" [disabled]="this.form.controls['departureDate'].disabled"
+                            [minDate]="minDate">
+                        </byte-datepicker-select>
+                    </div>
+                </div>
+                <div class="row" style="margin-top: 15px; margin-bottom: 15px;">
+                    <div class="col-5" style="margin-inline: auto;">
+                        <mat-form-field style="width: 100%;">
+                            <mat-label>Aeropuerto Origen</mat-label>
+                            <mat-select formControlName="codeAirportOrigin">
+                                <mat-option *ngFor="let airport of airports" [value]="airport.id">
+                                    {{airport.airportCode}}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+
+                    <div class="col-5" style="margin-inline: auto;">
+                        <mat-form-field style="width: 100%;">
+                            <mat-label>Aeropuerto Destino</mat-label>
+                            <mat-select formControlName="codeAirportDestination">
+                                <mat-option *ngFor="let airport of airports" [value]="airport.id">
+                                    {{airport.airportCode}}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    <div class="dialog-footer">
+        <div>
+            <button type="button" class="btn btn-primary pull-right" (click)="save()" *ngIf="mode !== 'view'"
+                [disabled]="record ? ((form?.invalid && form?.touched) || processing) : (form?.invalid || processing)">
+                <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
+            </button>
+            &nbsp;
+            <button class="btn btn-default pull-left" (click)="close()">
+                <span>{{ 'btn.cancel' | translate }}</span>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/flight-leg-dialog.component.scss

+.header-popup-text {
+    font-size: 17px;
+    font-weight: 600;
+    color: #676a6c;
+}
+
+img {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.btn-actions {
+    .btn {
+        white-space: nowrap;
+    }
+}
+
+$fontcolor: #676a6c;
+
+.content-vertical-bar {
+    margin-left: 10px;
+    margin-right: -10px;
+
+    button {
+        width: 35px;
+        height: 35px;
+        margin-bottom: 5px;
+        display: block;
+
+        .mat-button-wrapper {
+            padding: 0px !important;
+        }
+
+        i {
+            margin-top: -6px;
+            // padding-left: 2px;
+            font-size: 14px;
+            color: $fontcolor
+        }
+
+        i:hover {
+            color: #1c84c6;
+        }
+    }
+
+}
+
+
+
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+
+    .grid-container,
+    .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+}
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+}
+
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+}
+
+th {
+    vertical-align: middle !important;
+}
+
+tr.mat-header-row {
+    height: 50px !important;
+}
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+
+    padding-top: 8px;
+    padding-left: 15px;
+}
+
+.mat-raised-button {
+    padding: 0px 10px;
+}
+
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+.mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+.mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+.mat-icon {
+    height: 16px !important;
+    width: 16px !important;
+}
+
+.material-icons {
+    font-size: 12px !important;
+}
+
+@media (min-width: 576px) {
+    .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+
+tr.inner-detail-row {
+    height: 0;
+
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+//@extend
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+    }
+}
+
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+
+    button {
+        margin: 1px 0;
+        color: inherit;
+        font-size: inherit;
+    }
+
+}
+
+.mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+    .d-t-lg-block {
+        display: table-cell !important;
+    }
+}
+
+
+
+.tags-input {
+    .filter-label {
+        text-align: center;
+        align-items: inherit;
+        padding: 9px 15px;
+        border-radius: 0%;
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    input {
+        min-width: 100px;
+        font-size: 12px;
+        font-weight: 400;
+        color: $fontcolor;
+    }
+
+    button {
+        border-radius: 0px;
+        font-size: 12px;
+    }
+
+    .btn-options,
+    .btn-options:hover {
+        border: 0px solid #d2d2d2;
+    }
+
+    display: flex;
+}
+
+
+.icon {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.icon1 {
+    margin-left: 35%;
+    margin-right: auto;
+}
+
+.button-new {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.suggest {
+    margin-top: 15px;
+}
+
+.tags-input__input-field {
+    padding: 5px 0 5px 5px;
+    margin-left: 0px !important;
+    border: none;
+    flex-grow: 1;
+    outline: none;
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/flight-leg-dialog.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlightLegDialogComponent } from './flight-leg-dialog.component';
+
+describe('FlightLegDialogComponent', () => {
+  let component: FlightLegDialogComponent;
+  let fixture: ComponentFixture<FlightLegDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FlightLegDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlightLegDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/flight-leg-dialog.component.ts

+import { Component, HostListener, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FlightService } from '../../services/flight.service';
+
+@Component({
+  selector: 'byte-flight-leg-dialog',
+  templateUrl: './flight-leg-dialog.component.html',
+  styleUrls: ['./flight-leg-dialog.component.scss']
+})
+export class FlightLegDialogComponent implements OnInit {
+
+  form: FormGroup;
+  logoSrc: any;
+  minDate: Date;
+  record: any;
+  mode: any;
+  title = "dialog_rate_new_title"
+  airports: any[] = [];
+
+
+
+  constructor(
+    public dialogRef: MatDialogRef<FlightLegDialogComponent>,
+    private formBuilder: FormBuilder,
+    private flightService: FlightService,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.record = data.record;
+    this.mode = data.mode;
+    this.minDate = data.minDate;
+
+  }
+
+  ngOnInit() {
+    this.listAirports();
+    this.logoSrc = "assets/images/logo_byte_menu-min.png";
+    this.form = this.formBuilder.group({
+      arrivalDate: new FormControl({ disabled: this.mode === 'view' }, [Validators.required]),
+      departureDate: new FormControl({ disabled: this.mode === 'view' }, [Validators.required]),
+      codeAirportOrigin: new FormControl([Validators.required]),
+      codeAirportDestination: new FormControl([Validators.required]),
+      codeFlight: new FormControl([Validators.required])
+    });
+    console.log(this.record);
+    if (this.record) {
+      this.form.controls['arrivalDate'].setValue(this.record.arrivalDate);
+      this.form.controls['codeAirportOrigin'].setValue(this.record.codeAirportOrigin);
+      this.form.controls['codeAirportDestination'].setValue(this.record.codeAirportDestination);
+      this.form.controls['departureDate'].setValue(this.record.departureDate);
+    } else {
+      this.form.controls['codeAirportOrigin'].setValue('');
+      this.form.controls['codigoAirportDestination'].setValue('');
+
+    }
+  }
+
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close(null);
+  }
+  close() {
+    this.dialogRef.close(null);
+  }
+  save() {
+    this.dialogRef.close(this.form.value)
+  }
+
+  listAirports() {
+    this.flightService.getAirports().subscribe(
+      res => {
+        this.airports = res;
+        console.log(res);
+      }
+    )
+  }
+
+}

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/services/flight-leg-dialog.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { FlightLegDialogService } from './flight-leg-dialog.service';
+
+describe('FlightLegDialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FlightLegDialogService = TestBed.get(FlightLegDialogService);
+    expect(service).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/flight/components/flight-leg-dialog/services/flight-leg-dialog.service.ts

+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { FlightLegDialogComponent } from '../flight-leg-dialog.component';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FlightLegDialogService {
+
+  componentRef: MatDialogRef<FlightLegDialogComponent>;
+
+  constructor(public dialog: MatDialog) { }
+
+  loadComponent(record: any, mode: string, minDate: any): Observable<boolean> {
+    this.componentRef = this.dialog.open(FlightLegDialogComponent, {
+      panelClass: 'custom-dialog',
+      width: '600px',
+      disableClose: true,
+      data: {
+        record,
+        mode,
+        minDate
+      }
+    });
+    return this.componentRef.afterClosed().pipe(map(it => it));
+  }
+}

projects/bytebot-html/src/app/modules/flight/components/flight-legs-grid/flight-legs-grid.component.html

+<div style="display: flex;">
+    <div class="grid-ibox-content-options">
+        <!-- <div class="filter-panel mat-elevation-z8 remove-buttons">
+        <xdf-ngx-tags-input #inputComponent name="name" class="input-lg" [fields]="fieldFilters"
+                            (filterEvent)="onFilter(false)">
+        </xdf-ngx-tags-input>
+        </div> -->
+        <div class="grid-container mat-elevation-z8">
+            <table class="crud-table table table-striped table-hover" mat-table [dataSource]="dataSource" matSort
+                    [matSortActive]="sortColumn" [matSortDirection]="sortDirection" matSortDisableClear
+                    multiTemplateDataRows>
+                <ng-container matColumnDef="{{ template.name }}" *ngFor="let template of columnTemplateArray">
+                    <div *ngIf="template.sortable" >
+                        <th mat-header-cell *matHeaderCellDef mat-sort-header >
+                        {{ template.title | translate }}
+                        <mat-icon *ngIf="sortColumn === template?.name">
+                            <em class="fa" [ngClass]="{
+                            'fa-sort-amount-desc': sortDirection === 'desc',
+                            'fa-sort-amount-asc': sortDirection === 'asc'}"></em>
+                        </mat-icon>
+                        </th>
+                    </div>
+                    <div *ngIf="!template.sortable" >
+                        <th mat-header-cell *matHeaderCellDef > {{ template.title | translate }} </th>
+                    </div>
+                    <td mat-cell *matCellDef="let item" class="text-secondary"
+                        [ngStyle]="template.style ? template.style : ''">
+                        <span *ngIf="template.name === 'arrivalDate'">
+                            {{ getDateFormat(item[template.name]) }}
+                        </span>
+                        <span *ngIf="template.name === 'departureDate'">
+                            {{ getDateFormat(item[template.name]) }}
+                        </span>
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let item; let i = dataIndex" class="text-center" style="width: 5%;">
+                        <div class="btn-group btn-actions" *ngIf="mode !== 'view'">
+                            <button type="button" class="btn btn-default btn-sm" (click)="onEdit(item)" [disabled]="mode === 'view'">
+                                <i class="fa fa-edit d-xl-none"></i>
+                                <span class="d-none d-xl-block">
+                                    <i class="fa fa-edit"></i>&nbsp;{{"btn.edit" | translate}}
+                                </span>
+                            </button>
+                            <button type="button" class="btn btn-default btn-sm" (click)="onDelete(item)" [disabled]="mode === 'view'">
+                                <i class="fa fa-trash d-xl-none"></i>
+                                <span class="d-none d-xl-block">
+                                    <i class="fa fa-trash"></i>&nbsp;{{"btn.delete" | translate}}
+                                </span>
+                            </button>
+                        </div>
+                    </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            </table>
+            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[5, 10, 15]">
+            </mat-paginator>
+        </div>
+    </div>
+    <div class="content-vertical-bar">
+        <button type="button" mat-mini-fab color="default" *ngIf="mode !== 'view'" (click)="onCreate()" matTooltip="{{ 'btn.new' | translate }}">
+            <i class="fa fa-file-o"></i>
+        </button>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/components/flight-legs-grid/flight-legs-grid.component.scss

+.active {
+    background-color: #f3f3f4;
+}
+
+$fontcolor: #676a6c;
+
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+
+    .grid-container {
+        overflow: auto;
+    }
+
+    .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+}
+
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+.popover-btn {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    padding: 2px 10px 2px 10px;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+    overflow: hidden;
+    width: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+th {
+    vertical-align: middle !important;
+}
+
+tr.mat-header-row {
+    height: 50px !important;
+}
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+
+    padding-top: 8px;
+    padding-left: 15px;
+}
+
+.mat-raised-button {
+    padding: 0px 10px;
+}
+
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+.mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+.mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+@media (min-width: 576px) {
+    .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+tr.inner-detail-row {
+    height: 0;
+
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+        border-top: 0px;
+    }
+}
+
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+.mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row.odd:hover,
+tr.inner-detail-row.odd:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row-expanded td {
+    border-top: 0px;
+    border-bottom: 0px;
+}
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+
+    button {
+        margin: 1px 0;
+        color: inherit;
+        font-size: inherit;
+        border-radius: 0px;
+        padding: 0 16px;
+    }
+}
+
+:host::ng-deep .mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+    .d-t-lg-block {
+        display: table-cell !important;
+    }
+}
+
+.grid {
+    padding: 10px 20px 20px;
+}
+
+.icon {
+    line-height: 0;
+}
+
+.content-vertical-bar {
+    button {
+        margin-left: 10px;
+        width: 35px;
+        height: 35px;
+        margin-bottom: 5px;
+        display: block;
+
+        .mat-button-wrapper {
+            padding: 0px !important;
+        }
+
+        i {
+            margin-top: -6px;
+            font-size: 14px;
+            color: $fontcolor;
+        }
+
+        i:hover {
+            color: #1c84c6;
+        }
+    }
+}
+
+.grid-columns-section {
+    padding: 10px 0 0 0;
+    width: 100%;
+    display: inline-grid;
+    color: inherit;
+    font-size: inherit;
+
+    button {
+        margin: 5px 0 0;
+        border-radius: 0px;
+    }
+
+    .mat-checkbox {
+        padding: 0 10px 2px 15px;
+    }
+}
+
+.partyType-radio-button {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.new {
+    :hover {
+        color: #2186c6;
+    }
+}
+
+.btn-new {
+    color: #676a6c;
+}
+
+.text-overflow {
+    max-width: 400px;
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@media (max-width: 1500px) {
+    .text-overflow {
+        max-width: 350px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 1000px) {
+    .text-overflow {
+        max-width: 70px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/components/flight-legs-grid/flight-legs-grid.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlightLegsGridComponent } from './flight-legs-grid.component';
+
+describe('FlightLegsGridComponent', () => {
+  let component: FlightLegsGridComponent;
+  let fixture: ComponentFixture<FlightLegsGridComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FlightLegsGridComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlightLegsGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/flight/components/flight-legs-grid/flight-legs-grid.component.ts

+import { DecimalPipe } from '@angular/common';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSort } from '@angular/material';
+import { MatTableDataSource } from '@angular/material/table';
+import { ColumnTemplate } from '@xdf/gallery';
+import * as moment from 'moment';
+import { FlightLegDialogService } from '../flight-leg-dialog/services/flight-leg-dialog.service';
+
+@Component({
+  selector: 'byte-flight-legs-grid',
+  templateUrl: './flight-legs-grid.component.html',
+  styleUrls: ['./flight-legs-grid.component.scss']
+})
+export class FlightLegsGridComponent implements OnInit, AfterViewInit {
+
+  @Input() mode;
+  
+  columnTemplateArray : ColumnTemplate[] = [
+    {
+      name: 'arrivalDate',
+      sortable: false,
+      title: 'Fecha Salida',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    },
+    {
+      name: 'departureDate',
+      sortable: false,
+      title: 'Fecha Llegada',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    }
+  ];
+  decimalParameter = 2;
+
+  dataSource: MatTableDataSource<any>;
+  displayedColumns = new Array<string>();
+  @ViewChild('paginator',{static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
+
+  sortDirection = 'desc';
+  sortColumn = 'arrivalDate';
+
+  
+  constructor(
+    private flightLegDialogService : FlightLegDialogService,
+    private decimalPipe : DecimalPipe,
+  ) {}
+
+  ngAfterViewInit(): void {
+    this.paginator.pageSize = 5;
+    this.dataSource.paginator = this.paginator;
+    this.sort.sortChange.subscribe(() => {
+      console.log();
+    });
+  }
+
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<any>();
+    this.columnTemplateArray.forEach((column) => {
+        console.log(this.dataSource);
+        this.displayedColumns.push(column.name);
+      }
+    );
+    this.displayedColumns.push('actions');
+  }
+
+  autoSort(data) {
+    return data.sort((a, b) => new Date(a.arrivalDate) < new Date(b.arrivalDate) ? 1 : -1);
+  }
+
+  numberWithCommas(x): string {
+    return x ? this.decimalPipe.transform(x, '1.' + this.decimalParameter + '-' + this.decimalParameter) : '';
+  }
+
+  getDateFormat(liquidationDate) {
+    return moment(liquidationDate).format('DD-MM-YYYY');
+  }
+
+
+  onCreate() {
+    this.flightLegDialogService.loadComponent(null, this.mode, this.getMaxDate()).subscribe(
+      data => {
+        if(data !== null) {
+          let dataSource = this.dataSource.data.slice();
+          dataSource.push(data);
+          console.log(data);
+          this.dataSource.data = this.autoSort(dataSource);
+        }
+      }
+    )
+  }
+
+  onDelete(item) {
+    let dataSource = [...this.dataSource.data];
+    let pos = dataSource.findIndex(x => x === item);
+    dataSource.splice(pos, 1);
+    this.dataSource.data = this.autoSort(dataSource);
+  }
+
+  onEdit(item) {
+    this.flightLegDialogService.loadComponent(item, this.mode, this.getMaxDate()).subscribe(
+      data => {
+        if(data !== null) {
+          let dataSource = [...this.dataSource.data];
+          let pos = dataSource.findIndex(x => x === item);
+          dataSource[pos] = data;
+          this.dataSource.data = this.autoSort(dataSource);;
+        }
+      }
+    )
+  }
+
+  
+
+  getMaxDate() {
+    let maxDate 
+    if(this.dataSource.data.length > 0) {
+      maxDate = new Date(Math.max.apply(null,this.dataSource.data.map(x => new Date(x.arrivalDate))));
+      maxDate.setDate(maxDate.getDate() + 1);
+    } else {
+      maxDate = new Date();
+    }
+    return maxDate;
+  }
+
+}

projects/bytebot-html/src/app/modules/flight/components/resolvers/airport-list.template.resolver.ts

+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { HttpClient } from '@angular/common/http';
+
+
+export const path = './assets/definitions/flight-definitions/flight.json';
+
+@Injectable()
+export class AirportListTemplateResolver implements Resolve<any> {
+
+    constructor(private httpClient: HttpClient) {}
+
+    resolve(route: ActivatedRouteSnapshot) {
+        return this.httpClient.get(path);
+    }
+    
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/flight/flight-routing.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { CrudGridComponent, DirtyGuard, RecordResolver, TemplateResolver } from '@xdf/gallery';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+import { FlightFormComponent } from './components/flight-form/flight-form.component';
+import { FlightLegDialogService } from './components/flight-leg-dialog/services/flight-leg-dialog.service';
+
+
+
+const routes: Routes = [
+  {
+    path: "flight", component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "flight",
+      breadcrumb: "breadcrumb.flight"
+    },
+  },
+  {
+    path: 'flight/detail/:mode', component: FlightFormComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
+    resolve: {record: RecordResolver},
+    data: {
+      program: 'flight',
+      breadcrumb: 'breadcrumb.flight.detail'
+    }
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule],
+  providers: [FlightLegDialogService]
+})
+export class FlightRoutingModule { }

projects/bytebot-html/src/app/modules/flight/flight.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { XdfSettingsModule } from '@xdf/settings';
+import { MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { XdfLayoutsModule } from '@xdf/layouts';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgbModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { FlightRoutingModule } from './flight-routing.module';
+import { FlightFormComponent } from './components/flight-form/flight-form.component';
+import { FlightLegsGridComponent } from './components/flight-legs-grid/flight-legs-grid.component';
+import { FlightLegDialogComponent } from './components/flight-leg-dialog/flight-leg-dialog.component';
+import { DatepickerSelectComponent } from './components/datepicker-select/datepicker-select.component';
+
+
+
+@NgModule({
+  declarations: [
+    FlightFormComponent,
+    FlightLegsGridComponent,
+    FlightLegDialogComponent,
+    DatepickerSelectComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule,
+    XdfSettingsModule,
+    MatTableModule,
+    MatSortModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatTooltipModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    NgScrollbarModule,
+    XdfLayoutsModule,
+    MatMenuModule,
+    MatStepperModule,
+    ScrollingModule,
+    NgbPopoverModule,
+    MatChipsModule,
+    MatExpansionModule,
+    MatListModule,
+    MatAutocompleteModule,
+    NgbModule,
+    MatGridListModule,
+    MatPaginatorModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatTooltipModule,
+    MatTabsModule,
+    MatDatepickerModule,
+    FlightRoutingModule
+  ],
+  entryComponents: [
+    FlightLegDialogComponent
+  ]
+})
+export class FlightModule { }

projects/bytebot-html/src/app/modules/flight/services/flight.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { FlightService } from './flight.service';
+
+describe('FlightService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: FlightService = TestBed.get(FlightService);
+    expect(service).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/flight/services/flight.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FlightService {
+
+  private url: string = "http://localhost:9077/AVB/service/airport";
+  private urlLeg: string = "http://localhost:9077/AVB/service/leg/";
+
+  constructor(private httpClient: HttpClient) { }
+
+  getAirports(): Observable<any[]> {
+    return this.httpClient.get<any[]>(`${this.url}/all`);
+  }
+
+  addLeg(query: any): Observable<Object> {
+    return this.httpClient.post(this.urlLeg, query);
+  }
+}

projects/bytebot-html/src/app/modules/mantenimiento/components/prueba/prueba.component.html

-<p>prueba works!</p>

projects/bytebot-html/src/app/modules/mantenimiento/components/prueba/prueba.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'byte-prueba',
-  templateUrl: './prueba.component.html',
-  styleUrls: ['./prueba.component.scss']
-})
-export class PruebaComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

projects/bytebot-html/src/app/modules/mantenimiento/mantenimiento-routing.module.ts

-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard } from '@xdf/security';
-import { TemplateResolver, DirtyGuard, CrudGridComponent, RecordResolver } from '@xdf/gallery';
-import { ResourceAuthGuard } from '@xdf/security';
-import { PruebaComponent } from './components/prueba/prueba.component';
-
-const routes: Routes = [
-  {
-    path: '', component: PruebaComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
-    data: {
-      innerTemplate: 'none',
-      program: 'mantenimiento',
-      breadcrumb: 'breadcrumb.mantenimiento'
-    }
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class MantenimientoRoutingModule { }

projects/bytebot-html/src/app/modules/passenger/passenger-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CrudDetailComponent, CrudGridComponent, DirtyGuard, RecordResolver, TemplateResolver } from '@xdf/gallery';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+
+
+
+const routes: Routes = [
+  {
+    path: "passenger", component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "passenger",
+      breadcrumb: "breadcrumb.passenger"
+    },
+  },
+  {
+    path: 'passenger/detail/:mode', component: CrudDetailComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
+    resolve: {record: RecordResolver},
+    data: {
+      program: 'passenger',
+      breadcrumb: 'breadcrumb.passenger.detail'
+    }
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class PassengerRoutingModule { }

projects/bytebot-html/src/app/modules/passenger/passenger.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { XdfSettingsModule } from '@xdf/settings';
+import { PassengerRoutingModule } from './passenger-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule,
+    XdfSettingsModule,
+    PassengerRoutingModule
+  ]
+})
+export class PassengerModule { }

projects/bytebot-html/src/app/modules/payment-reservation/components/date-picker-pay/date-picker-pay.component.html

+<div [formGroup]="formGroup">
+    <mat-form-field class="form-control-full-width" style="width: 100%" hintLabel="{{ suggest | translate }}">
+        <mat-label>{{ placeholder | translate}}</mat-label>
+
+        <input matInput [matDatepicker]="picker" [formControlName]="name" [required]="required" [min]="this.minDate"
+            (dateInput)="changeValue($event.value)" [max]="this.maxDate" onpaste="return false">
+
+        <mat-datepicker-toggle id="{{name}}" matSuffix [for]="picker" [disabled]="disabled"></mat-datepicker-toggle>
+        <mat-datepicker #picker [disabled]="disabled"></mat-datepicker>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('required') 
+            && !formGroup.controls[this.name].hasError('matDatepickerMax')
+            && !formGroup.controls[this.name].hasError('matDatepickerMin')
+            && !formGroup.controls[this.name].hasError('matDatepickerParse')">
+            {{ 'message.error.required' | translate:{'label': placeholder | translate} }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerMax')">
+            {{ 'message.error.matDatepickerMax' | translate : {'max': getDateFormat(maxDate), 'label': placeholder | translate } }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerMin')">
+            {{ 'message.error.matDatepickerMin' | translate : {'min': getDateFormat(minDate), 'label': placeholder | translate } }}
+        </mat-error>
+
+        <mat-error *ngIf="formGroup.controls[this.name].hasError('matDatepickerParse')">
+            {{ 'message.error.matDatepickerParse' | translate : {'pattern': format } }}
+        </mat-error>
+
+    </mat-form-field>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/payment-reservation/components/date-picker-pay/date-picker-pay.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePickerPayComponent } from './date-picker-pay.component';
+
+describe('DatePickerPayComponent', () => {
+  let component: DatePickerPayComponent;
+  let fixture: ComponentFixture<DatePickerPayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatePickerPayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatePickerPayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/payment-reservation/components/date-picker-pay/date-picker-pay.component.ts

+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FormGroupUtils } from '@xdf/gallery';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'byte-date-picker-pay',
+  templateUrl: './date-picker-pay.component.html',
+  styleUrls: ['./date-picker-pay.component.scss']
+})
+export class DatePickerPayComponent implements OnInit {
+
+  @Input()
+  placeholder: string;
+
+  @Input()
+  name: string;
+
+  @Input()
+  suggest: string;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  required = false;
+
+  @Input()
+  minDate: Date;
+
+  @Input()
+  maxDate: Date;
+
+  @Input()
+  formGroup: FormGroup;
+
+  @Input()
+  format = 'DD/MM/YYYY';
+
+  @Output('changeDate') change = new EventEmitter<Date>();
+
+  constructor(private formGroupUtils: FormGroupUtils) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.disabled = (this.formGroup.controls[this.name] as FormControl).disabled;
+  }
+
+  ngOnInit(): void {
+    if (!this.formGroup) {
+      this.formGroup = this.formGroupUtils.createTemporalFormGroup(this.name, '', this.disabled);
+    }
+    if (!this.disabled) {
+      this.disabled = (this.formGroup.controls[this.name] as FormControl).disabled;
+    }
+  }
+
+  changeValue(value: any): void {
+    this.change.emit(value);
+  }
+
+  getDateFormat(date: Date): any {
+    if (date) {
+      const datem = moment(date);
+      return datem.utc().format(this.format);
+    }
+    return null;
+  }
+
+}

projects/bytebot-html/src/app/modules/payment-reservation/components/payment-reservation-form/payment-reservation-form.component.html

+<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()" class="form-content">
+    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
+
+        <xdf-form-header [icon]="icon" [title]="'tax.title'" [recordIdentifier]="record?.id" titleDesc="tax.title.desc"
+            [mode]="mode" [resourceAuth]="resourceAuth" (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'"
+            [displaying]="mode === 'view'">
+        </xdf-form-header>
+    </div>
+
+    <div class="mail-box-content">
+        <div class="header-content">
+            <div class="col-12">
+                <div class="form-content">
+                    <div class="legend">
+                        <span class="group-title">Pasarela de Pago</span>
+                    </div>
+
+                    <div class="group-content">
+
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="tarjeta" label="Numero Tarjeta" type="text" [required]="true"
+                                    placeholder="Numero Tarjeta" [formGroup]="form"
+                                    [options]="{maxLength: 12, showLength: true}">
+                                </xdf-input>
+                            </div>
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="nombre" label="Nombre Titular" type="text" [required]="true"
+                                    placeholder="Nombre Titular" [formGroup]="form"
+                                    [options]="{maxLength: 12, showLength: true}">
+                                </xdf-input>
+                            </div>
+                        </div>
+
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <byte-date-picker-pay name="fecha" label="Fecha Vencimiento"
+                                    placeholder="Fecha Vencimiento" [formGroup]="form"
+                                    [disabled]="this.form.controls['fecha'].disabled" [minDate]="minDate">
+                                </byte-date-picker-pay>
+                            </div>
+                            <div class="col-6 col-md-6">
+                                <xdf-input name="cvv" label="Codigo Seguridad" type="text" [required]="true"
+                                    placeholder="Codigo Seguridad" [formGroup]="form"
+                                    [options]="{maxLength: 12, showLength: true}">
+                                </xdf-input>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hr-line-dashed" style="margin-bottom: 20px"></div>
+
+
+
+                </div>
+            </div>
+        </div>
+
+        <div class="footer-content">
+            <div class="col-lg-12" *ngIf="mode !== 'view'">
+                <div class="form-status-bar border-top">
+                    <button type="submit" mat-stroked-button class="btn btn-primary pull-right"
+                        style="margin-top: 10px;" [disabled]="form?.invalid || processing || form.pending">
+                        <i class="fa fa-save" aria-hidden="true" style="padding-right: 3px; padding-bottom: 3px;">
+                        </i>{{'btn.save' | translate }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
\ No newline at end of file

projects/bytebot-html/src/app/modules/payment-reservation/components/payment-reservation-form/payment-reservation-form.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymentReservationFormComponent } from './payment-reservation-form.component';
+
+describe('PaymentReservationFormComponent', () => {
+  let component: PaymentReservationFormComponent;
+  let fixture: ComponentFixture<PaymentReservationFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PaymentReservationFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaymentReservationFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/payment-reservation/components/payment-reservation-form/payment-reservation-form.component.ts

+import { AfterViewInit, Component, OnInit, ViewContainerRef } from '@angular/core';
+import { AsyncValidatorFn, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { InitCommonsService, NotificationService, NotificationType } from '@xdf/commons';
+import { AuditDialogService, ConfirmationDialogService, DynaDataService, IFormView, RequiredValidator } from '@xdf/gallery';
+import { PaymentReservationService } from '../../services/payment-reservation.service';
+
+@Component({
+  selector: 'byte-payment-reservation-form',
+  templateUrl: './payment-reservation-form.component.html',
+  styleUrls: ['./payment-reservation-form.component.scss']
+})
+export class PaymentReservationFormComponent extends IFormView implements OnInit, AfterViewInit {
+
+
+  form: FormGroup;
+  idPayment: number = 0;
+
+  constructor(
+    protected formBuilder: FormBuilder,
+    protected vcRef: ViewContainerRef,
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router,
+    protected dynaDataService: DynaDataService,
+    protected translate: TranslateService,
+    protected notificationService: NotificationService,
+    protected auditDialogService: AuditDialogService,
+    protected confirmationDialogService: ConfirmationDialogService,
+    protected init: InitCommonsService,
+    private paymentReservationService: PaymentReservationService
+  ) {
+    super(vcRef, activatedRoute, router, dynaDataService, translate, notificationService, auditDialogService, confirmationDialogService, init);
+
+  }
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  ngAfterViewInit(): void { }
+
+  protected getFields(): FormGroup {
+    let form;
+    form = this.formBuilder.group({
+      tarjeta: this.createFormControl('tarjeta', (this.mode !== 'new' && this.record),
+        true, '', [RequiredValidator.isRequired]),
+      nombre: this.createFormControl('nombre', (this.mode !== 'new' && this.record),
+        true, '', [RequiredValidator.isRequired]),
+      cvv: this.createFormControl('cvv', (this.mode !== 'new' && this.record),
+        true, '', [RequiredValidator.isRequired]),
+      fecha: this.createFormControl('fecha', (this.mode !== 'new' && this.record),
+        true, '', [RequiredValidator.isRequired])
+    });
+    return form;
+  }
+
+
+  private createFormControl(name: string, existRecord?: boolean, required?: boolean, defaultValue?: string,
+    validators?: Array<ValidationErrors>, asyncValidators?: Array<AsyncValidatorFn>): FormControl {
+    if (!defaultValue) {
+      defaultValue = '';
+    }
+    let validatorList = [];
+    if (validators) {
+      validatorList = validators;
+    }
+    if (required) {
+      validatorList.push(Validators.required);
+    }
+    if (name === 'code') return new FormControl({ value: existRecord ? this.record[name] : '', disabled: this.mode !== 'new' }, validatorList, asyncValidators);
+    return new FormControl({ value: existRecord ? this.record[name] : '', disabled: this.mode === 'view' }, validatorList, asyncValidators);
+  }
+
+  submit(): void {
+    this.addPayment();
+  }
+
+  addPayment() {
+    let query = {
+      paymentAmount: 899,
+      status: "pagado"
+    };
+    this.paymentReservationService.addPayment(query).subscribe(
+      res => {
+        this.idPayment = res.id;
+        this.addPaymentToReservation(res.id);
+        console.log(res.id);
+      }
+    )
+  }
+
+  addPaymentToReservation(idPayment: number) {
+    let query = {
+      id: idPayment
+    }
+    this.paymentReservationService.addPaymentToReservation(this.id, query).subscribe(
+      res => {
+        this.updateStatusReservation();
+      }
+    )
+  }
+
+  updateStatusReservation() {
+    let query = {
+      id: this.record.id,
+      codeAgent: this.record.codeAgent,
+      codePassenger: this.record.codePassenger,
+      status: "pagado",
+      dateReservation: this.record.dateReservation
+    }
+    this.dynaDataService.update(this.id, query).subscribe(
+      res => {
+        this.notificationService.showMessage(
+          this.translate.instant('message.create.succesful'),
+          this.translate.instant('title.information'),
+          NotificationType.success
+        );
+        this.form.markAsPristine();
+        this.router.navigate([this.returnUrl]);
+      }
+    )
+  }
+
+}

projects/bytebot-html/src/app/modules/payment-reservation/payment-reservation-routing.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { CrudDetailComponent, CrudGridComponent, DirtyGuard, RecordResolver, TemplateResolver } from '@xdf/gallery';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+import { PaymentReservationFormComponent } from './components/payment-reservation-form/payment-reservation-form.component';
+
+
+
+const routes: Routes = [
+  {
+    path: "payment-reservation", component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "payment-reservation",
+      breadcrumb: "breadcrumb.payment"
+    },
+  },
+  {
+    path: 'payment-reservation/detail/:mode', component: PaymentReservationFormComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {record: RecordResolver},
+    data: {
+      program: 'payment-reservation',
+      breadcrumb: 'breadcrumb.flight.detail'
+    }
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class PaymentReservationRoutingModule { }

projects/bytebot-html/src/app/modules/payment-reservation/payment-reservation.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PaymentReservationFormComponent } from './components/payment-reservation-form/payment-reservation-form.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { XdfSettingsModule } from '@xdf/settings';
+import { MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { XdfLayoutsModule } from '@xdf/layouts';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgbModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { PaymentReservationRoutingModule } from './payment-reservation-routing.module';
+import { DatePickerPayComponent } from './components/date-picker-pay/date-picker-pay.component';
+
+
+
+@NgModule({
+  declarations: [PaymentReservationFormComponent, DatePickerPayComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule,
+    XdfSettingsModule,
+    MatTableModule,
+    MatSortModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatTooltipModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    NgScrollbarModule,
+    XdfLayoutsModule,
+    MatMenuModule,
+    MatStepperModule,
+    ScrollingModule,
+    NgbPopoverModule,
+    MatChipsModule,
+    MatExpansionModule,
+    MatListModule,
+    MatAutocompleteModule,
+    NgbModule,
+    MatGridListModule,
+    MatPaginatorModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatTooltipModule,
+    MatTabsModule,
+    MatDatepickerModule,
+    PaymentReservationRoutingModule
+  ]
+})
+export class PaymentReservationModule { }

projects/bytebot-html/src/app/modules/payment-reservation/services/payment-reservation.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PaymentReservationService } from './payment-reservation.service';
+
+describe('PaymentReservationService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PaymentReservationService = TestBed.get(PaymentReservationService);
+    expect(service).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/payment-reservation/services/payment-reservation.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PaymentReservationService {
+
+  private urlPayment: string = "http://localhost:9077/AVB/service/payment";
+  private urlItinerary: string = "http://localhost:9077/AVB/service/itinerarys";
+
+
+  constructor(private httpClient: HttpClient) { }
+
+  addPayment(query: any): Observable<any> {
+    return this.httpClient.post<any>(this.urlPayment + "/", query);
+  }
+
+  addPaymentToReservation(id: number, query: any): Observable<Object> {
+    return this.httpClient.post(`${this.urlPayment + "/reservations"}/${id}/payments`, query);
+  }
+
+  updateStatusReservation(id: number, query: any): Observable<Object> {
+    return this.httpClient.put(`${this.urlItinerary + "/update"}/${id}`, query);
+  }
+}

projects/bytebot-html/src/app/modules/payment/payment-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CrudGridComponent, TemplateResolver } from '@xdf/gallery';
+import { AuthGuard, ResourceAuthGuard } from '@xdf/security';
+
+
+
+const routes: Routes = [
+  {
+    path: "payment", component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
+    resolve: {Template: TemplateResolver},
+    data: {
+      innerTemplate: 'none',
+      program: "payment",
+      breadcrumb: "breadcrumb.payment"
+    },
+  }
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class PaymentRoutingModule { }

projects/bytebot-html/src/app/modules/payment/payment.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { XdfSettingsModule } from '@xdf/settings';
+import { PaymentRoutingModule } from './payment-routing.module';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule,
+    XdfSettingsModule,
+    PaymentRoutingModule
+  ]
+})
+export class PaymentModule { }

projects/bytebot-html/src/app/modules/prueba/prueba-routing.module.ts

-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AuthGuard } from '@xdf/security';
-import { TemplateResolver, DirtyGuard, CrudGridComponent, RecordResolver } from '@xdf/gallery';
-import { ResourceAuthGuard } from '@xdf/security';
-
-const routes: Routes = [
-  {
-    path: '', component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
-    resolve: { template: TemplateResolver },
-    data: {
-      innerTemplate: 'none',
-      program: 'prueba',
-      breadcrumb: 'breadcrumb.prueba'
-    }
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class PruebaRoutingModule { }

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/reservation-flight-dialog.component.html

+<div class="popup-general">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="dialog-title">
+                <img src="{{ logoSrc }}" with="25" height="25">
+                <span class="header-popup-text">Seleccionar un vuelo</span>
+                <div class="pull-right">
+                    <button type="button" class="close" (click)="close()"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div>
+
+        <div class="mat-elevation-z8" style="margin: 15px 0px 15px;">
+            <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
+
+                <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
+                    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="agent">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Costo </th>
+                    <td mat-cell *matCellDef="let row"> {{row.flightCost}} </td>
+                </ng-container>
+                <ng-container matColumnDef="passenger">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Código Aerolínea </th>
+                    <td mat-cell *matCellDef="let row"> {{row.airlineCode}} </td>
+                </ng-container>
+                <ng-container matColumnDef="amount">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo Aeronave </th>
+                    <td mat-cell *matCellDef="let row"> {{row.codeTypeAircraft}} </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="details(row)"></tr>
+
+            </table>
+
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+        </div>
+    </div>
+
+    <div class="dialog-footer">
+        <div>
+            <button type="button" class="btn btn-primary pull-right" (click)="save()" *ngIf="mode !== 'view'"
+                [disabled]="record ? ((form?.invalid && form?.touched) || processing) : (form?.invalid || processing)">
+                <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
+            </button>
+            &nbsp;
+            <button class="btn btn-default pull-left" (click)="close()">
+                <span>{{ 'btn.cancel' | translate }}</span>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/reservation-flight-dialog.component.scss

+.active {
+    background-color: #f3f3f4;
+}
+
+$fontcolor: #676a6c;
+
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+
+    .grid-container {
+        overflow: auto;
+    }
+
+    .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    // position: fixed;
+}
+
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+.popover-btn {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    padding: 2px 10px 2px 10px;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+    overflow: hidden;
+    width: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+th {
+    vertical-align: middle !important;
+}
+
+tr.mat-header-row {
+    height: 50px !important;
+}
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+
+    padding-top: 8px;
+    padding-left: 15px;
+}
+
+.mat-raised-button {
+    padding: 0px 10px;
+}
+
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+.mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+.mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+@media (min-width: 576px) {
+    .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+tr.inner-detail-row {
+    height: 0;
+
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+//@extend
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+        border-top: 0px;
+    }
+}
+
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+.mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row.odd:hover,
+tr.inner-detail-row.odd:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row-expanded td {
+    border-top: 0px;
+    border-bottom: 0px;
+}
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+
+    button {
+        margin: 1px 0;
+        color: inherit;
+        font-size: inherit;
+        border-radius: 0px;
+        padding: 0 16px;
+    }
+}
+
+:host::ng-deep .mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+    .d-t-lg-block {
+        display: table-cell !important;
+    }
+}
+
+.grid {
+    padding: 10px 20px 20px;
+}
+
+.icon {
+    line-height: 0;
+}
+
+.content-vertical-bar {
+    button {
+        margin-left: 10px;
+        width: 35px;
+        height: 35px;
+        margin-bottom: 5px;
+        display: block;
+
+        .mat-button-wrapper {
+            padding: 0px !important;
+        }
+
+        i {
+            margin-top: -6px;
+            font-size: 14px;
+            color: $fontcolor;
+        }
+
+        i:hover {
+            color: #1c84c6;
+        }
+    }
+}
+
+.grid-columns-section {
+    padding: 10px 0 0 0;
+    width: 100%;
+    display: inline-grid;
+    color: inherit;
+    font-size: inherit;
+
+    button {
+        margin: 5px 0 0;
+        border-radius: 0px;
+    }
+
+    .mat-checkbox {
+        padding: 0 10px 2px 15px;
+    }
+}
+
+.partyType-radio-button {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.new {
+    :hover {
+        color: #2186c6;
+    }
+}
+
+.btn-new {
+    color: #676a6c;
+}
+
+.text-overflow {
+    max-width: 400px;
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@media (max-width: 1500px) {
+    .text-overflow {
+        max-width: 350px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 1000px) {
+    .text-overflow {
+        max-width: 70px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/reservation-flight-dialog.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReservationFlightDialogComponent } from './reservation-flight-dialog.component';
+
+describe('ReservationFlightDialogComponent', () => {
+  let component: ReservationFlightDialogComponent;
+  let fixture: ComponentFixture<ReservationFlightDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReservationFlightDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationFlightDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/reservation-flight-dialog.component.ts

+import { Component, HostListener, Inject, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ColumnTemplate } from '@xdf/gallery';
+import { ReservationsService } from '../../services/reservations.service';
+import { NotificationService } from '@xdf/commons';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'byte-reservation-flight-dialog',
+  templateUrl: './reservation-flight-dialog.component.html',
+  styleUrls: ['./reservation-flight-dialog.component.scss']
+})
+export class ReservationFlightDialogComponent implements OnInit {
+  columnTemplateArray: ColumnTemplate[] = [
+    {
+      name: 'arrivalDate',
+      sortable: false,
+      title: 'tax.rate.header.effectiveDate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    },
+    {
+      name: 'departureDate',
+      sortable: false,
+      title: 'tax.rate.header.effectiveDate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    },
+    {
+      name: 'rate',
+      sortable: false,
+      title: 'tax.rate.header.rate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'number',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    }
+  ];
+  decimalParameter = 2;
+
+  @ViewChild('paginator', { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
+
+  sortDirection = 'desc';
+  sortColumn = 'arrivalDate';
+
+  legs: any;
+
+  form: FormGroup;
+  logoSrc: any;
+  minDate: Date;
+  record: any;
+  mode: any;
+  title = "dialog_rate_new_title"
+  airports: any[] = [];
+
+  displayedColumns: string[] = ['id', 'agent', 'passenger', 'amount'];
+  dataSource!: MatTableDataSource<any>;
+
+  constructor(
+    public dialogRef: MatDialogRef<ReservationFlightDialogComponent>,
+    private formBuilder: FormBuilder,
+    private NotificationService: NotificationService,
+    private translate: TranslateService,
+    private reservationsService: ReservationsService,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.record = data.record;
+    this.mode = data.mode;
+    this.minDate = data.minDate;
+
+  }
+
+  ngOnInit() {
+
+    this.getReservations();
+
+    this.logoSrc = "assets/images/logo_byte_menu-min.png";
+    this.form = this.formBuilder.group({
+      flightId: new FormControl({ disabled: this.mode === 'view' })
+
+    });
+    if (this.record) {
+      this.form.controls['flightId'].setValue(this.record.flightId);
+
+    } else {
+      this.form.controls['codeAirportOrigin'].setValue('');
+      this.form.controls['codeAirportDestination'].setValue('');
+
+    }
+  }
+
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close(null);
+  }
+  close() {
+    this.dialogRef.close(null);
+  }
+  save() {
+    this.dialogRef.close(this.legs)
+  }
+
+
+  public getReservations() {
+    this.reservationsService.getFlights().subscribe(
+      res => {
+        this.dataSource = new MatTableDataSource(res);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+      }
+    )
+  }
+
+  details(id: any) {
+    this.legs = id;
+  }
+
+}

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/services/reservation-flight-dialog.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ReservationFlightDialogService } from './reservation-flight-dialog.service';
+
+describe('ReservationFlightDialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ReservationFlightDialogService = TestBed.get(ReservationFlightDialogService);
+    expect(service).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-dialog/services/reservation-flight-dialog.service.ts

+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { ReservationFlightDialogComponent } from '../reservation-flight-dialog.component';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReservationFlightDialogService {
+
+  componentRef: MatDialogRef<ReservationFlightDialogComponent>;
+  constructor(
+    public dialog: MatDialog
+  ) { }
+
+  loadComponent(record: any, mode: string, minDate: any): Observable<boolean> {
+    this.componentRef = this.dialog.open(ReservationFlightDialogComponent, {
+      panelClass: 'custom-dialog',
+      width: '1200px',
+      disableClose: true,
+      data: {
+        record,
+        mode,
+        minDate
+      }
+    });
+    return this.componentRef.afterClosed().pipe(map(it => {
+      return it;
+    }));
+  }
+}

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-grid/reservation-flight-grid.component.html

+<div style="display: flex;">
+    <div class="grid-ibox-content-options">
+
+        <div class="grid-container mat-elevation-z8">
+            <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
+
+
+
+                <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
+                    <td mat-cell *matCellDef="let row"> {{row.id}}</td>
+                </ng-container>
+
+                <ng-container matColumnDef="agent">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha Llegada </th>
+                    <td mat-cell *matCellDef="let row"> {{row.departureDate}} </td>
+                </ng-container>
+                <ng-container matColumnDef="passenger">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha Salida </th>
+                    <td mat-cell *matCellDef="let row"> {{row.arrivalDate}}</td>
+                </ng-container>
+                <ng-container matColumnDef="amount">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Monto a pagar </th>
+                    <td mat-cell *matCellDef="let row"> </td>
+                </ng-container>
+
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let item; let i = dataIndex" class="text-center" style="width: 5%;">
+
+                        <div class="btn-group btn-actions" *ngIf="mode !== 'view'">
+                            <button type="button" class="btn btn-default btn-sm" (click)="onEdit(item)"
+                                [disabled]="mode === 'view'">
+                                <i class="fa fa-edit d-xl-none"></i>
+                                <span class="d-none d-xl-block">
+                                    <i class="fa fa-edit"></i>&nbsp;{{"btn.edit" | translate }}
+                                </span>
+                            </button>
+                            <button type="button" class="btn btn-default btn-sm" (click)="onDelete(item)"
+                                [disabled]="mode === 'view'">
+                                <i class="fa fa-trash d-xl-none"></i>
+                                <span class="d-none d-xl-block">
+                                    <i class="fa fa-trash"></i>&nbsp;{{"btn.delete" | translate}}
+                                </span>
+                            </button>
+                        </div>
+                    </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            </table>
+            <mat-paginator #paginator showFirstLastButtons [pageSizeOptions]="[5, 10, 15]">
+            </mat-paginator>
+        </div>
+    </div>
+    <div class="content-vertical-bar">
+        <button type="button" mat-mini-fab color="default" *ngIf="mode !== 'view'" (click)="onCreate()"
+            matTooltip="{{ 'btn.new' | translate }}">
+            <i class="fa fa-file-o"></i>
+        </button>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-grid/reservation-flight-grid.component.scss

+.active {
+    background-color: #f3f3f4;
+}
+
+$fontcolor: #676a6c;
+
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+
+    .grid-container {
+        overflow: auto;
+    }
+
+    .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    // position: fixed;
+}
+
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+.popover-btn {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    padding: 2px 10px 2px 10px;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+    overflow: hidden;
+    width: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+th {
+    vertical-align: middle !important;
+}
+
+tr.mat-header-row {
+    height: 50px !important;
+}
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+
+    padding-top: 8px;
+    padding-left: 15px;
+}
+
+.mat-raised-button {
+    padding: 0px 10px;
+}
+
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+.mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+.mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+@media (min-width: 576px) {
+    .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+tr.inner-detail-row {
+    height: 0;
+
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+//@extend
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+        border-top: 0px;
+    }
+}
+
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+.mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row.odd:hover,
+tr.inner-detail-row.odd:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row-expanded td {
+    border-top: 0px;
+    border-bottom: 0px;
+}
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+
+    button {
+        margin: 1px 0;
+        color: inherit;
+        font-size: inherit;
+        border-radius: 0px;
+        padding: 0 16px;
+    }
+}
+
+:host::ng-deep .mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+    .d-t-lg-block {
+        display: table-cell !important;
+    }
+}
+
+.grid {
+    padding: 10px 20px 20px;
+}
+
+.icon {
+    line-height: 0;
+}
+
+.content-vertical-bar {
+    button {
+        margin-left: 10px;
+        width: 35px;
+        height: 35px;
+        margin-bottom: 5px;
+        display: block;
+
+        .mat-button-wrapper {
+            padding: 0px !important;
+        }
+
+        i {
+            margin-top: -6px;
+            font-size: 14px;
+            color: $fontcolor;
+        }
+
+        i:hover {
+            color: #1c84c6;
+        }
+    }
+}
+
+.grid-columns-section {
+    padding: 10px 0 0 0;
+    width: 100%;
+    display: inline-grid;
+    color: inherit;
+    font-size: inherit;
+
+    button {
+        margin: 5px 0 0;
+        border-radius: 0px;
+    }
+
+    .mat-checkbox {
+        padding: 0 10px 2px 15px;
+    }
+}
+
+.partyType-radio-button {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.new {
+    :hover {
+        color: #2186c6;
+    }
+}
+
+.btn-new {
+    color: #676a6c;
+}
+
+.text-overflow {
+    max-width: 400px;
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@media (max-width: 1500px) {
+    .text-overflow {
+        max-width: 350px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 1000px) {
+    .text-overflow {
+        max-width: 70px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-grid/reservation-flight-grid.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReservationFlightGridComponent } from './reservation-flight-grid.component';
+
+describe('ReservationFlightGridComponent', () => {
+  let component: ReservationFlightGridComponent;
+  let fixture: ComponentFixture<ReservationFlightGridComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReservationFlightGridComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationFlightGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/reservation/components/reservation-flight-grid/reservation-flight-grid.component.ts

+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ReservationFlightDialogService } from '../reservation-flight-dialog/services/reservation-flight-dialog.service';
+import { DecimalPipe } from '@angular/common';
+import { ReservationsService } from '../../services/reservations.service';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'byte-reservation-flight-grid',
+  templateUrl: './reservation-flight-grid.component.html',
+  styleUrls: ['./reservation-flight-grid.component.scss']
+})
+export class ReservationFlightGridComponent implements OnInit, AfterViewInit {
+
+
+  @Input() mode;
+
+  decimalParameter = 2;
+
+  @ViewChild('paginator', { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
+
+  sortDirection = 'desc';
+  sortColumn = 'arrivalDate';
+
+  displayedColumns: string[] = ['id', 'agent', 'passenger', 'actions'];
+  dataSource!: MatTableDataSource<any>;
+
+  constructor(
+    private reservationFlightDialogService: ReservationFlightDialogService,
+    private decimalPipe: DecimalPipe,
+    private reservationService: ReservationsService
+  ) {
+  }
+  ngAfterViewInit(): void {
+    this.paginator.pageSize = 5
+    this.dataSource.paginator = this.paginator
+    this.sort.sortChange.subscribe(() => {
+      console.log()
+    })
+  }
+
+  autoSort(data) {
+    return data.sort((a, b) => new Date(a.arrivalDate) < new Date(b.arrivalDate) ? 1 : -1)
+  }
+
+  numberWithCommas(x): string {
+    return x ? this.decimalPipe.transform(x, '1.' + this.decimalParameter + '-' + this.decimalParameter) : '';
+  }
+
+  getDateFormat(liquidationDate) {
+    return moment(liquidationDate).format('DD-MM-YYYY');
+  }
+
+  ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<any>();
+
+  }
+
+  onEdit(item) {
+    this.reservationFlightDialogService.loadComponent(item, this.mode, this.getMaxDate()).subscribe(
+      data => {
+        if (data !== null) {
+          let dataSource = [...this.dataSource.data];
+          let pos = dataSource.findIndex(x => x === item)
+          dataSource[pos] = data;
+          this.dataSource.data = this.autoSort(dataSource);;
+        }
+      }
+    )
+  }
+
+  onDelete(item) {
+    let dataSource = [...this.dataSource.data];
+    let pos = dataSource.findIndex(x => x === item)
+    dataSource.splice(pos, 1)
+    this.dataSource.data = this.autoSort(dataSource);;
+  }
+
+  getMaxDate() {
+    let maxDate
+    if (this.dataSource.data.length > 0) {
+      maxDate = new Date(Math.max.apply(null, this.dataSource.data.map(x => new Date(x.arrivalDate))));
+      maxDate.setDate(maxDate.getDate() + 1);
+    } else {
+      maxDate = new Date();
+    }
+    return maxDate;
+  }
+
+  onCreate() {
+    this.reservationFlightDialogService.loadComponent(null, this.mode, this.getMaxDate()).subscribe(
+      data => {
+        if (data !== null) {
+          this.dataSource = new MatTableDataSource(data['legs']);
+        }
+      }
+    )
+  }
+
+
+  listLegsByFlight(id: number) {
+    this.reservationService.getLegsByFlightId(id).subscribe(
+      res => {
+      }
+    )
+  }
+
+}

projects/bytebot-html/src/app/modules/reservation/components/reservation-form/reservation-form.component.html

+<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()" class="form-content">
+    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
+
+        <xdf-form-header [icon]="icon" [title]="'tax.title'" [recordIdentifier]="record?.id"
+            titleDesc="Gestionar Reserva" [mode]="mode" [resourceAuth]="resourceAuth"
+            (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'" [displaying]="mode === 'view'">
+        </xdf-form-header>
+    </div>
+
+    <div class="mail-box-content">
+        <div class="header-content">
+            <div class="col-12">
+                <div class="form-content">
+                    <div class="legend">
+                        <span class="group-title">Reserva</span>
+                    </div>
+
+                    <div class="group-content">
+
+                        <div class="row" style="margin-bottom: 15px;">
+                            <div class="col-6 col-md-6">
+                                <mat-form-field style="width: 100%;">
+                                    <mat-label>Estado</mat-label>
+                                    <mat-select formControlName="status">
+                                        <mat-option *ngFor="let airport of airports" [value]="airport.value">
+                                            {{airport.viewValue}}
+                                        </mat-option>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="hr-line-dashed" style="margin-bottom: 20px"></div>
+
+                    <div class="legend">
+                        <span class="group-title">Detalles Reserva</span>
+                    </div>
+                    <div class="group-content">
+                        <byte-reservation-passenger-grid #reservationPassengerGrid [mode]="mode"></byte-reservation-passenger-grid>
+                    </div>
+                    <div class="group-content">
+                        <byte-reservation-flight-grid #reservationFlightGrid [mode]="mode"></byte-reservation-flight-grid>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="footer-content">
+            <div class="col-lg-12" *ngIf="mode !== 'view'">
+                <div class="form-status-bar border-top">
+                    <button mat-stroked-button class="btn btn-primary pull-right" style="margin-top: 10px;">
+                        <i class="fa fa-save" aria-hidden="true" style="padding-right: 3px; padding-bottom: 3px;">
+                        </i>{{'btn.save' | translate }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-form/reservation-form.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReservationFormComponent } from './reservation-form.component';
+
+describe('ReservationFormComponent', () => {
+  let component: ReservationFormComponent;
+  let fixture: ComponentFixture<ReservationFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReservationFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/reservation/components/reservation-form/reservation-form.component.ts

+import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { AsyncValidatorFn, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { InitCommonsService, NotificationService, NotificationType } from '@xdf/commons';
+import { AuditDialogService, ConfirmationDialogService, DynaDataService, IFormView } from '@xdf/gallery';
+import { ReservationsService } from '../../services/reservations.service';
+import { ReservationPassengerGridComponent } from '../reservation-passenger-grid/reservation-passenger-grid.component';
+import { ReservationFlightGridComponent } from '../reservation-flight-grid/reservation-flight-grid.component';
+
+@Component({
+  selector: 'byte-reservation-form',
+  templateUrl: './reservation-form.component.html',
+  styleUrls: ['./reservation-form.component.scss']
+})
+export class ReservationFormComponent extends IFormView implements OnInit, AfterViewInit {
+  airports: any[] = [
+    { value: 'pendiente', viewValue: 'Pendiente' },
+    { value: 'cancelado', viewValue: 'Cancelado' }
+  ];
+
+
+  form: FormGroup;
+  private reservationPassengerGrid: ReservationPassengerGridComponent;
+  @ViewChild('reservationPassengerGrid', { static: false }) 
+  set content(
+    content: ReservationPassengerGridComponent
+  ) {
+    if (content) {
+      this.reservationPassengerGrid = content;
+    } else {
+      this.reservationPassengerGrid= undefined;
+    }
+  }
+
+  private reservationFlightGrid: ReservationFlightGridComponent;
+  @ViewChild('reservationFlightGrid', { static: false }) 
+  set content2(
+    content2: ReservationFlightGridComponent
+  ) {
+    if (content2) {
+      this.reservationFlightGrid= content2;
+    } else {
+      this.reservationFlightGrid = undefined;
+    }
+  }
+
+  constructor(
+    protected formBuilder: FormBuilder,
+    protected vcRef: ViewContainerRef,
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router,
+    protected dynaDataService: DynaDataService,
+    protected translate: TranslateService,
+    protected notificationService: NotificationService,
+    protected auditDialogService: AuditDialogService,
+    protected confirmationDialogService: ConfirmationDialogService,
+    protected init: InitCommonsService,
+    private changeDetector: ChangeDetectorRef,
+    private reservationsService: ReservationsService
+
+  ) {
+    super(vcRef, activatedRoute, router, dynaDataService, translate, notificationService, auditDialogService, confirmationDialogService, init);
+
+  }
+  ngAfterViewInit(): void {
+    if (this.mode !== 'new' && this.record) {
+      this.reservationFlightGrid.dataSource.data = this.record.legs;
+      this.getPassenger(this.record.codePassenger);
+    }
+    this.changeDetector.detectChanges();
+    this.form.controls['status'].setValue('pendiente');
+
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  protected getFields(): FormGroup {
+    let form
+    form = this.formBuilder.group({
+      dateReservation: this.createFormControl('dateReservation', (this.mode !== 'new' && this.record),
+        true, ''),
+      status: this.createFormControl('status', (this.mode !== 'new' && this.record), true)
+    });
+    return form;
+  }
+
+  private createFormControl(name: string, existRecord?: boolean, required?: boolean, defaultValue?: string,
+    validators?: Array<ValidationErrors>, asyncValidators?: Array<AsyncValidatorFn>): FormControl {
+    if (!defaultValue) {
+      defaultValue = '';
+    }
+    let validatorList = [];
+    if (validators) {
+      validatorList = validators;
+    }
+    if (required) {
+      validatorList.push(Validators.required);
+    }
+    if (name === 'code') return new FormControl({ value: existRecord ? this.record[name] : '', disabled: this.mode !== 'new' }, validatorList, asyncValidators);
+    return new FormControl({ value: existRecord ? this.record[name] : '', disabled: this.mode === 'view' }, validatorList, asyncValidators);
+  }
+
+  submit() {
+
+    if (this.mode == 'new') {
+      let result = {
+        id: this.mode != 'new' ? this.record.id : 0,
+        codeAgent: 1,
+        codePassenger: this.reservationPassengerGrid.dataSource.data[0].id,
+        dateReservation: "2023-05-04T04:51:27.630Z",
+        status: "pendiente",
+        flightCost: 0
+      }
+      this.reservationsService.addItinerary(result).subscribe(
+        (res) => {
+          this.notificationService.showMessage(
+            this.translate.instant('message.create.succesful'),
+            this.translate.instant('title.information'),
+            NotificationType.success
+          );
+          this.record = new Object();
+          this.form.markAsPristine();
+          this.router.navigate([this.returnUrl]);
+          this.processing = false;
+          for (let i = 0; i < this.reservationFlightGrid.dataSource.data.length; i++) {
+            this.addLegToReservation(res['id'], this.reservationFlightGrid.dataSource.data[i].id);
+          }
+        },
+        (error) => {
+          this.processing = false;
+        }
+      );
+
+    } else if (this.mode === 'edit') {
+
+      let result = {
+        id: this.record.id,
+        codeAgent: this.record.codeAgent,
+        codePassanger: this.record.codePassenger,
+        status: this.form.value['status'],
+        dateResrevation: this.record.dateReservation
+      }
+      this.dynaDataService.update(this.id, result).subscribe(
+        it => {
+          const title = this.translate.instant('title.information');
+          const message = this.translate.instant('message.update.succesful');
+          this.notificationService.showMessage(
+            message,
+            title,
+            NotificationType.success
+          );
+          this.form.markAsPristine();
+          this.router.navigate([this.returnUrl]);
+          this.processing = false;
+        },
+        error => {
+          this.processing = false;
+        }
+      );
+    }
+
+
+  }
+
+  public getLegsFlight(id: number) {
+    this.reservationsService.getLegsByFlightId(id).subscribe(
+      res => {
+        this.reservationPassengerGrid.dataSource.data = res;
+
+      }
+    )
+  }
+
+  getPassenger(id: number) {
+    this.reservationsService.getPassenger(id).subscribe(
+      res => {
+        console.log(res);
+        let datase = [];
+        datase.push(res)
+        console.log(datase);
+        this.reservationPassengerGrid.dataSource.data = datase;
+      }
+    )
+  }
+
+  addLegToReservation(idReservation: number, id: number) {
+    this.reservationsService.addLegToReservation(idReservation, id).subscribe(
+      res => {
+        console.log(res);
+      }
+    )
+  }
+}

projects/bytebot-html/src/app/modules/reservation/components/reservation-passenger-dialog/reservation-passenger-dialog.component.html

+<div class="popup-general">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="dialog-title">
+                <img src="{{ logoSrc }}" with="25" height="25">
+                <span class="header-popup-text">Seleccionar un pasajero</span>
+                <div class="pull-right">
+                    <button type="button" class="close" (click)="close()"></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div>
+
+        <div class="mat-elevation-z8" style="margin: 15px 0px 15px;">
+            <table class="table table-striped table-hover" mat-table [dataSource]="dataSource" matSort>
+
+                <ng-container matColumnDef="id">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
+                    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="agent">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Primer Nombre </th>
+                    <td mat-cell *matCellDef="let row"> {{row.firstName}} </td>
+                </ng-container>
+                <ng-container matColumnDef="passenger">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Segundo Nombre </th>
+                    <td mat-cell *matCellDef="let row"> {{row.secondName}} </td>
+                </ng-container>
+                <ng-container matColumnDef="amount">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Apellido </th>
+                    <td mat-cell *matCellDef="let row"> {{row.lastName}} </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="details(row)"></tr>
+
+            </table>
+
+            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+        </div>
+    </div>
+
+    <div class="dialog-footer">
+        <div>
+            <button type="button" class="btn btn-primary pull-right" (click)="save()" *ngIf="mode !== 'view'"
+                [disabled]="record ? ((form?.invalid && form?.touched) || processing) : (form?.invalid || processing)">
+                <span><i class="fa fa-floppy-o"></i>&nbsp;{{ 'btn.save' | translate }}</span>
+            </button>
+            &nbsp;
+            <button class="btn btn-default pull-left" (click)="close()">
+                <span>{{ 'btn.cancel' | translate }}</span>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-passenger-dialog/reservation-passenger-dialog.component.scss

+.active {
+    background-color: #f3f3f4;
+}
+
+$fontcolor: #676a6c;
+
+.content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+
+    .grid-container {
+        overflow: auto;
+    }
+
+    .filter-panel {
+        .crud-table {
+            margin-bottom: 0px;
+            width: 100%;
+        }
+    }
+
+    .filter-panel {
+        margin-bottom: 10px;
+    }
+
+    .toolbar-option {
+        margin-left: 10px;
+        margin-right: -10px;
+    }
+}
+
+.grid-ibox-content {
+    width: 100%;
+}
+
+.grid-ibox-content-options {
+    width: calc(100% - 35px);
+}
+
+.btn-actions {
+    .btn {
+        font-size: 10px;
+        white-space: nowrap;
+    }
+}
+
+.spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    // position: fixed;
+}
+
+.spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+}
+
+th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+}
+
+td.mat-column-actions {
+    padding-right: 20px !important;
+    cursor: default !important;
+}
+
+.popover-btn {
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    padding: 2px 10px 2px 10px;
+}
+
+td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+    overflow: hidden;
+    width: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+th {
+    vertical-align: middle !important;
+}
+
+tr.mat-header-row {
+    height: 50px !important;
+}
+
+tr.mat-footer-row,
+tr.mat-row:not(.inner-detail-row) {
+    height: 40px;
+}
+
+.table-toolbar {
+    right: 10px;
+    top: 10px;
+
+    button {
+        font-size: 12px;
+    }
+}
+
+.status-button-bar {
+    button {
+        font-size: 16px;
+    }
+
+    padding-top: 8px;
+    padding-left: 15px;
+}
+
+.mat-raised-button {
+    padding: 0px 10px;
+}
+
+.icon-centered-button span.mat-button-wrapper {
+    display: flex;
+}
+
+.icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+}
+
+.mat-sort-header-arrow {
+    visibility: hidden;
+}
+
+.mat-sort-header-button {
+    .mat-icon {
+        padding-left: 10px;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+}
+
+@media (min-width: 576px) {
+    .d-sm-block {
+        display: table-cell !important;
+    }
+}
+
+@media (max-width: 576px) {
+    .mat-paginator-page-size-label {
+        display: none !important;
+    }
+}
+
+tr.inner-detail-row {
+    height: 0;
+
+    .mat-column-expandedDetail {
+        padding: 0 10px;
+    }
+}
+
+.inner-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+//@extend
+tr.inner-detail-row {
+    td {
+        border-bottom: 1px solid #dee2e6;
+        border-top: 0px;
+    }
+}
+
+tr.inner-element-row.odd,
+tr.inner-detail-row.odd {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+tr.mat-row-auth:not(.inner-expanded-row):hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+}
+
+tr.mat-row-auth.inner-expanded-row:hover {
+    cursor: pointer !important;
+}
+
+.mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row.odd:hover,
+tr.inner-detail-row.odd:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+}
+
+tr.inner-element-row-expanded td {
+    border-top: 0px;
+    border-bottom: 0px;
+}
+
+.additional-options-section {
+    padding: 0;
+    width: 100%;
+    display: inline-grid;
+
+    button {
+        margin: 1px 0;
+        color: inherit;
+        font-size: inherit;
+        border-radius: 0px;
+        padding: 0 16px;
+    }
+}
+
+:host::ng-deep .mat-menu-item {
+    padding: 0 10px;
+}
+
+@media (min-width: 992px) {
+    .d-t-lg-block {
+        display: table-cell !important;
+    }
+}
+
+.grid {
+    padding: 10px 20px 20px;
+}
+
+.icon {
+    line-height: 0;
+}
+
+.content-vertical-bar {
+    button {
+        margin-left: 10px;
+        width: 35px;
+        height: 35px;
+        margin-bottom: 5px;
+        display: block;
+
+        .mat-button-wrapper {
+            padding: 0px !important;
+        }
+
+        i {
+            margin-top: -6px;
+            font-size: 14px;
+            color: $fontcolor;
+        }
+
+        i:hover {
+            color: #1c84c6;
+        }
+    }
+}
+
+.grid-columns-section {
+    padding: 10px 0 0 0;
+    width: 100%;
+    display: inline-grid;
+    color: inherit;
+    font-size: inherit;
+
+    button {
+        margin: 5px 0 0;
+        border-radius: 0px;
+    }
+
+    .mat-checkbox {
+        padding: 0 10px 2px 15px;
+    }
+}
+
+.partyType-radio-button {
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.new {
+    :hover {
+        color: #2186c6;
+    }
+}
+
+.btn-new {
+    color: #676a6c;
+}
+
+.text-overflow {
+    max-width: 400px;
+    font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+@media (max-width: 1500px) {
+    .text-overflow {
+        max-width: 350px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 1000px) {
+    .text-overflow {
+        max-width: 70px;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
\ No newline at end of file

projects/bytebot-html/src/app/modules/reservation/components/reservation-passenger-dialog/reservation-passenger-dialog.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReservationPassengerDialogComponent } from './reservation-passenger-dialog.component';
+
+describe('ReservationPassengerDialogComponent', () => {
+  let component: ReservationPassengerDialogComponent;
+  let fixture: ComponentFixture<ReservationPassengerDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReservationPassengerDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReservationPassengerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/bytebot-html/src/app/modules/reservation/components/reservation-passenger-dialog/reservation-passenger-dialog.component.ts

+import { Component, HostListener, Inject, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { ColumnTemplate } from '@xdf/gallery';
+import { ReservationsService } from '../../services/reservations.service';
+import { NotificationService } from '@xdf/commons';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'byte-reservation-passenger-dialog',
+  templateUrl: './reservation-passenger-dialog.component.html',
+  styleUrls: ['./reservation-passenger-dialog.component.scss']
+})
+export class ReservationPassengerDialogComponent implements OnInit {
+
+  
+  columnTemplateArray : ColumnTemplate[] = [
+    {
+      name: 'arrivalDate',
+      sortable: false,
+      title: 'tax.rate.header.effectiveDate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    },
+    {
+      name: 'departureDate',
+      sortable: false,
+      title: 'tax.rate.header.effectiveDate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'date',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    },
+    {
+      name: 'rate',
+      sortable: false,
+      title: 'tax.rate.header.rate',
+      visible: true,
+      filtable: true,
+      style: { width: '30%' },
+      type: 'number',
+      aliasName: null,
+      queryName: null,
+      responsive: null,
+      styles: null,
+      values: null,
+      digitsInfo: null,
+      dateFormat: null,
+      colStyle: null
+    }
+  ];
+  decimalParameter = 2;
+
+  @ViewChild('paginator',{static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
+
+  sortDirection = 'desc';
+  sortColumn = 'arrivalDate';
+
+  passenger: any;
+
+  form: FormGroup;
+  logoSrc: any;
+  minDate: Date;
+  record: any;
+  mode: any;
+  title = "dialog_rate_new_title"
+  airports: any[] = [];
+  
+  displayedColumns: string[] = ['id', 'agent','passenger', 'amount'];
+  dataSource!: MatTableDataSource<any>;
+
+  constructor(
+    public dialogRef: MatDialogRef<ReservationPassengerDialogComponent>,
+    private formBuilder :FormBuilder,
+    private notificationService: NotificationService,
+    private translate: TranslateService,
+    private reservationsService: ReservationsService,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.record = data.record;
+    this.mode = data.mode;
+    this.minDate = data.minDate;
+
+  }
+
+  ngOnInit() {
+
+    this.getReservations();
+
+    this.logoSrc = "assets/images/logo_byte_menu-min.png";
+      this.form = this.formBuilder.group({
+        passengerId:  new FormControl({ disabled: this.mode === 'view'}),
+      }); 
+      console.log(this.record);
+      if(this.record){
+        this.form.controls['passengerId'].setValue(this.record.passengerId);
+
+      }else{
+        this.form.controls['codeAirportOrigin'].setValue('');
+        this.form.controls['codeAirportDestination'].setValue('');
+
+      }
+  }
+
+  @HostListener('window:keyup.esc') onKeyUp() {
+    this.dialogRef.close(null);
+  }
+  close() {
+    this.dialogRef.close(null);
+  }
+  save(){
+    this.dialogRef.close(this.passenger);
+  }
+
+
+  public getReservations(){
+    this.reservationsService.getPassengers().subscribe(
+      res => {
+        this.dataSource = new MatTableDataSource(res);
+        this.dataSource.paginator = this.paginator;  
+        this.dataSource.sort = this.sort;
+      }
+    )
+  }
+
+  details(id: any){
+    
+    this.passenger = id;
+    console.log(id);
+  }
+}

projects/bytebot-html/src/app/modules/reservation/components/reservation-passenger-dialog/services/reservation-passenger-dialog.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ReservationPassengerDialogService } from './reservation-passenger-dialog.service';
+
+describe('ReservationPassengerDialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ReservationPassengerDialogService = TestBed.get(ReservationPassengerDialogService);
+    expect(service).toBeTruthy();
+  });
+});