feat: added agents maintenance

src/app/shared/components/delete-dialog/delete-dialog.component.css

+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rm-card {
+  background-color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+}
+
+.rm-header {
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.rm-header i {
+  color: red;
+  font-size: 28px;
+  margin-right: 10px;
+}
+
+.btn-action {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.btn-action-active {
+  background-color: #afafaf;
+}
+
+.btn-action:hover {
+  background-color: #ebe9e9;
+}

src/app/shared/components/delete-dialog/delete-dialog.component.html

+<div class="background">
+  <div class="rm-card">
+    <div class="rm-header">
+      <i class="bi bi-exclamation-triangle-fill"></i>
+      <span>Eliminar</span>
+    </div>
+    <hr>
+    <p>¿Esta seguro que desea eliminar el registro?</p>
+    <hr>
+    <div class="rm-actions d-flex gap-2">
+      <button (click)="onEmitDeleted(false)" class="btn btn-action btn-action-active">No</button>
+      <button (click)="onEmitDeleted(true)" class="btn btn-action">Si</button>
+    </div>
+  </div>
+</div>

src/app/shared/components/delete-dialog/delete-dialog.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ResultDelete } from '../../interfaces/result-delete.interface';
+
+@Component({
+  selector: 'shared-delete-dialog',
+  templateUrl: './delete-dialog.component.html',
+  styleUrls: ['./delete-dialog.component.css']
+})
+export class DeleteDialogComponent {
+
+  @Output()
+  public onDialogResult: EventEmitter<boolean> = new EventEmitter();
+
+  onEmitDeleted(result: boolean): void {
+    this.onDialogResult.emit(result);
+  }
+}

src/app/shared/components/input-password/input-password.component.css

+progress {
+  height: 20px;
+  /* border-radius: 0; */
+  width: 100%;
+  background-color: blue;
+}
+
+.custom-progress span {
+  font-size: 12px;
+}

src/app/shared/components/input-password/input-password.component.html

+<div class="d-flex gap-4 mb-2">
+  <shared-input type="password" class="flex-fill" placeholder="Contraseña *"></shared-input>
+  <div class="d-flex flex-fill flex-column custom-progress">
+    <progress class="" value="20" max="100"></progress>
+    <span>* Ingrese la contraseña</span>
+  </div>
+</div>

src/app/shared/components/input-password/input-password.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'shared-input-password',
+  templateUrl: './input-password.component.html',
+  styleUrls: ['./input-password.component.css']
+})
+export class InputPasswordComponent {
+
+}

src/app/shared/components/input/input.component.css

+.custom-input {
+  position: relative;
+}
+
+.custom-input input {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+  font-size: 12px;
+  outline: none;
+  color: #8f8e8e;
+}
+
+.custom-input input:focus {
+  margin-bottom: -2px;
+  border-bottom: 2px solid #3f51b5;
+}
+
+.custom-input label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transition: 0.2s;
+  font-size: 14px;
+}
+
+.custom-input p {
+  margin: 0;
+  font-size: 12px;
+  text-align: end;
+}
+
+.custom-input input:focus + label {
+  top: -12px;
+  left: 1px;
+  font-size: 12px;
+  color: #3f51b5;
+}
+
+.custom-input input:valid + label {
+  top: -12px;
+  left: 1px;
+  font-size: 12px;
+  color: #ccc;
+}
+

src/app/shared/components/input/input.component.html

+<div class="custom-input">
+  <input [type]="type" [value]="value" (keyup)="onChangeInput(myInput)" id="custom-input" required #myInput>
+  <label for="custom-input">{{ placeholder }}</label>
+  <p *ngIf="maxLength">{{ myInput.value.length }} / {{ maxLength }}</p>
+</div>
+

src/app/shared/components/input/input.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'shared-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.css']
+})
+export class InputComponent {
+
+  @Input()
+  public placeholder: string = '';
+
+  @Input()
+  public value: string = '';
+
+  @Input()
+  public maxLength?: number;
+
+  @Input()
+  public type: string = 'text';
+
+  onChangeInput(input: HTMLInputElement) {
+    console.log(input.value);
+
+  }
+}

src/app/shared/components/mail-box/mail-box.component.html

 <div class="container-content">
     <div class="bg-white mail-box-header">
         <div class="d-flex align-items-center mail-box-header-title">
-            <i class="bi bi-people"></i>
-            <span>Agentes</span>
+            <i [class]="['bi', icon]"></i>
+            <span>{{ title }}</span>
         </div>
-        <span class="mail-box-header-description">Este mantenimiento permite gestionar los agentes dentro de la agencia</span>
+        <span class="mail-box-header-description">{{ message }}</span>
     </div>
     <div class="bg-white mail-box-content">
         <ng-content></ng-content>

src/app/shared/components/navigation-user/navigation-user.component.html

@@ -11,7 +11,7 @@
     </div>
     <div class="d-flex align-items-center">
         <div class="user">
-            <span>Nombre</span>
+            <span>hcordova</span>
             <i class="bi bi-caret-down-fill"></i>
         </div>
         <button class="btn">

src/app/shared/components/sidebar/sidebar.component.css

 .wrapper {
     background-color: #374653;
-    height: 100vh;
+    min-height: 100vh;
+    height: 100%;
     display: none;
 }
 
@@ -68,7 +69,7 @@
 }
 
 @media (min-width: 768px) {
-    
+
     .navigation-item span {
         display: block;
     }
@@ -94,4 +95,4 @@
 .toggle {
     max-width: 70px !important;
     overflow: hidden;
-}
+}
\ No newline at end of file

src/app/shared/components/sidebar/sidebar.component.html

@@ -3,7 +3,7 @@
         <img src="assets/logo_byte_menu.png" alt="Logo Byte">
     </div>
     <ul class="navigation">
-        <li *ngFor="let item of menuItems" class="navigation-item" [ngClass]="{'toggle': toggle}" [routerLink]="[item.link]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+        <li *ngFor="let item of menuItems" class="navigation-item" [ngClass]="{'toggle': toggle}" [routerLink]="[item.link]" routerLinkActive="active">
             <i class="bi {{item.icon}}"></i>
             <span>{{ item.label }}</span>
         </li>

src/app/shared/components/table-filters/table-filters.component.css

@@ -40,10 +40,10 @@
     outline: none;
     font-size: 12px;
     color: #676a6c;
-    padding: 17px 10px;
+    padding: 15px 10px;
 }
 
 .form-control:focus {
     box-shadow: none;
     border: 1px solid #e4e4e4;
-}
+}
\ No newline at end of file

src/app/shared/components/table/table.component.css

@@ -28,8 +28,7 @@
 .btn {
     color: white;
     border-radius: 0;
-    width: 37.15px;
-    height: 32px;
+    width: auto;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,10 +54,11 @@
     width: auto;
     border-radius: 4px;
     border: 1px solid #e4e4e4;
-    font-size: 12px;
     font-weight: 200;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 7px;
+    padding-right: 7px;
+    height: 24px;
+    font-size: 10px;
 }
 
 .btn-action-table span {
@@ -95,4 +95,8 @@
     border-bottom: 1px solid #676a6c;
     color: #676a6c;
     width: 60px;
-}
+}
\ No newline at end of file
+
+.btn:disabled {
+  border: none;
+}

src/app/shared/components/table/table.component.html

@@ -5,20 +5,20 @@
             <table class="table table-striped mb-0">
                 <thead class="pt-4" >
                     <tr class="table-header">
-                        <th *ngFor="let item of tableModel" class="table-item">{{ item }}</th>
+                        <th *ngFor="let item of tableModel" class="table-item">{{ item['title'] }}</th>
                         <th class="table-item"></th>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let data of tableData"  class="table-body">
-                        <td *ngFor="let item of tableModel" class="table-item">{{ data[item] }}</td>
+                    <tr *ngFor="let data of tableDataSelected"  class="table-body">
+                        <td *ngFor="let item of tableModel" class="table-item">{{ data[item['name']] }}</td>
                         <td class="table-item">
                             <div class="d-flex justify-content-end">
-                                <button class="btn btn-action-table">
+                                <button [routerLink]="[editRouter, data['id']]" class="btn btn-action-table">
                                     <i class="bi bi-pencil-square"></i>
                                     <span>Editar</span>
                                 </button>
-                                <button class="btn btn-action-table">
+                                <button (click)="toggleDialogDelete(data['id'])" class="btn btn-action-table">
                                     <i class="bi bi-trash"></i>
                                     <span>Eliminar</span>
                                 </button>
@@ -27,29 +27,28 @@
                     </tr>
                 </tbody>
             </table>
+            <shared-delete-dialog *ngIf="openDialogDelete" (onDialogResult)="onEmitDialogResult($event)"></shared-delete-dialog>
             <div class="pagination w-auto d-flex align-items-center">
                 <div class="flex-fill">
-                    <button class="btn btn-reload">
+                    <button (click)="onEmitReloadData()" class="btn btn-reload">
                         <i class="bi bi-arrow-clockwise"></i>
                     </button>
                 </div>
                 <div class="d-flex align-items-center gap-4">
                     <div class="d-flex">
                         <p class="m-0 pe-2">Resultados por pagina: </p>
-                        <select class="select-pagination">
-                            <option value="10">5</option>
-                            <option value="20">10</option>
-                            <option value="50">15</option>
+                        <select (change)="getItemsPerPage(selectItems.value)" [value]="itemsPerPage" class="select-pagination" #selectItems>
+                            <option *ngFor="let item of itemsPerPage" [value]="item">{{ item }}</option>
                         </select>
                     </div>
                     <div class="d-flex">
-                        <p class="m-0">1 - 3 de 1</p>
+                        <p class="m-0">{{ initItem }} - {{ endItem }} de {{ this.tableData.length }}</p>
                     </div>
                     <div class="d-flex">
-                        <button class="btn btn-right">
+                        <button [disabled]="page === 1" class="btn btn-right" (click)="prevPage()">
                             <i class="bi bi-chevron-left"></i>
                         </button>
-                        <button class="btn btn-left">
+                        <button [disabled]="page === totalPage" class="btn btn-left" (click)="nextPage()">
                             <i class="bi bi-chevron-right"></i>
                         </button>
                     </div>
@@ -58,8 +57,8 @@
         </div>
     </div>
     <div class="">
-        <button class="btn btn-circle">
+        <button [routerLink]="newRouter" class="btn btn-circle">
             <i class="bi bi-file-earmark"></i>
         </button>
     </div>
-</div>
+</div>
\ No newline at end of file

src/app/shared/components/table/table.component.ts

-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { TableModel } from '../../interfaces/table-model.interface';
+import { ResultDelete } from '../../interfaces/result-delete.interface';
 
 @Component({
   selector: 'shared-table',
@@ -7,31 +9,76 @@ import { Component } from '@angular/core';
 })
 export class TableComponent {
 
-  public tableModel: string[] = ['id', 'name', 'lastname', 'detail'];
-  public tableData: any[] = [
-    {
-      id: '1',
-      name: 'John',
-      lastname: 'Doe',
-      detail: 'Detail'
-    },
-    {
-      id: '2',
-      name: 'Jane',
-      lastname: 'Doe',
-      detail: 'Detail'
-    },
-    {
-      id: '3',
-      name: 'John',
-      lastname: 'Smith',
-      detail: 'Detail'
-    },
-    {
-      id: '4',
-      name: 'Jane',
-      lastname: 'Smith',
-      detail: 'Detail'
-    }
-  ];
+  @Output()
+  public onReloadData: EventEmitter<void> = new EventEmitter();
+
+  @Output()
+  public onDialogResult: EventEmitter<ResultDelete> = new EventEmitter();
+
+  @Input()
+  public tableModel: TableModel[] = [];
+
+  @Input()
+  public tableData: any[] = [];
+
+  @Input()
+  public newRouter: string = '';
+
+  @Input()
+  public editRouter: string = '';
+
+  public numberOfItemsPerPage: number = 5;
+
+  public itemsPerPage: number[] = [5, 10, 15];
+
+  public page: number = 1;
+
+  public openDialogDelete: boolean = false;
+
+  public deleteItemId: number = 0;
+
+  get totalPage(): number {
+    return this.tableData.length >= this.numberOfItemsPerPage? Math.ceil(this.tableData.length / this.numberOfItemsPerPage) : 1;
+  }
+
+  get initItem() {
+    return this.tableData.length == 0? 0 : this.totalPage >= 1 || this.tableData.length == 0? ((this.page - 1) * this.numberOfItemsPerPage) + 1 : 0;
+  }
+
+  get endItem() {
+    return this.totalPage >= 1? this.page != this.totalPage? this.page * this.numberOfItemsPerPage: this.tableData.length : 0;
+  }
+
+  get tableDataSelected(): any {
+    return this.tableData.filter((_, index) => index + 1 >= this.initItem && index + 1 <= this.endItem);
+  }
+
+
+  nextPage(): void {
+    if (this.page === this.totalPage) return;
+    this.page += 1;
+  }
+
+  prevPage(): void {
+    if (this.page === 1) return;
+    this.page -= 1;
+  }
+
+  getItemsPerPage(value: string): void {
+    this.numberOfItemsPerPage = parseInt(value);
+  }
+
+  toggleDialogDelete(id: number): void {
+    this.deleteItemId = id;
+    this.openDialogDelete = !this.openDialogDelete;
+  }
+
+  onEmitDialogResult(result: boolean): void {
+    this.openDialogDelete = !this.openDialogDelete;
+    this.onDialogResult.emit({id: this.deleteItemId, result});
+  }
+
+  onEmitReloadData(): void {
+    this.onReloadData.emit();
+  }
 }

src/app/shared/interfaces/result-delete.interface.ts

+export interface ResultDelete {
+  id: number,
+  result: boolean
+}

src/app/shared/interfaces/table-model.interface.ts

+export interface TableModel {
+  name: string;
+  title: string;
+}

src/app/shared/shared.module.ts

@@ -8,6 +8,9 @@ import { TableComponent } from './components/table/table.component';
 import { TableFiltersComponent } from './components/table-filters/table-filters.component';
 import { NavigationUserComponent } from './components/navigation-user/navigation-user.component';
 import { FooterComponent } from './components/footer/footer.component';
+import { InputComponent } from './components/input/input.component';
+import { InputPasswordComponent } from './components/input-password/input-password.component';
+import { DeleteDialogComponent } from './components/delete-dialog/delete-dialog.component';
 
 
 
@@ -19,7 +22,10 @@ import { FooterComponent } from './components/footer/footer.component';
     TableComponent,
     TableFiltersComponent,
     NavigationUserComponent,
-    FooterComponent
+    FooterComponent,
+    InputComponent,
+    InputPasswordComponent,
+    DeleteDialogComponent
   ],
   imports: [
     CommonModule,
@@ -31,7 +37,10 @@ import { FooterComponent } from './components/footer/footer.component';
     MailBoxComponent,
     TableComponent,
     NavigationUserComponent,
-    FooterComponent
+    FooterComponent,
+    InputComponent,
+    InputPasswordComponent,
+    DeleteDialogComponent
   ]
 })
 export class SharedModule { }

src/app/supervisor/interfaces/agent.interface.ts

+export interface Agent {
+  id: number,
+  name: string,
+  lastname: string,
+  detail: string,
+  email: string,
+  password: string
+}

src/app/supervisor/interfaces/flight.interface.ts

+export interface Flight {
+  id: number;
+  airportOrigin: string;
+  airportDestination: string;
+  dateStart: string;
+  dateEnd: string;
+}

src/app/supervisor/pages/agent-add/agent-add.component.css

+.btn-save {
+  background-color: #18a689;
+  color: white;
+  font-size: 12px;
+}
+
+.btn-save:disabled {
+  color: #00000042;
+}

src/app/supervisor/pages/agent-add/agent-add.component.html

+<shared-navigation></shared-navigation>
+<shared-mail-box
+    title="Agentes"
+    message="Este mantenimiento permite gestionar los agentes dentro de la agencia"
+    icon="bi-people">
+    <form class="px-3">
+      <p class="mb-0 mt-2 fw-medium">Información personal</p>
+      <hr class="mt-0">
+      <div class="d-flex flex-column gap-3 mt-4">
+        <shared-input [value]="agent.name" placeholder="Nombres *" [maxLength]="30"></shared-input>
+        <shared-input [value]="agent.lastname" placeholder="Apellidos *" [maxLength]="50"></shared-input>
+        <shared-input [value]="agent.detail" placeholder="Detalles *" [maxLength]="100"></shared-input>
+      </div>
+
+      <p class="mb-0 mt-4 fw-medium">Credenciales</p>
+      <hr class="mt-0">
+      <div class="d-flex flex-column gap-3 mt-4">
+        <shared-input [value]="agent.email" placeholder="Correo *" [maxLength]="100"></shared-input>
+        <shared-input-password></shared-input-password>
+      </div>
+
+      <hr>
+      <div class="d-flex justify-content-end mb-2">
+        <button type="submit" class="btn btn-save">
+          <i class="bi bi-floppy me-1"></i>
+          <span>Guardar</span>
+        </button>
+      </div>
+    </form>
+</shared-mail-box>

src/app/supervisor/pages/agent-add/agent-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AgentsService } from '../../services/agent.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Agent } from '../../interfaces/agent.interface';
+
+@Component({
+  selector: 'app-agent-add',
+  templateUrl: './agent-add.component.html',
+  styleUrls: ['./agent-add.component.css']
+})
+export class AgentAddComponent implements OnInit {
+
+  public agent!: Agent;
+
+  constructor(private _supervisorService: AgentsService, private _activatedRoute: ActivatedRoute, private _router: Router) {}
+
+  ngOnInit(): void {
+    this._activatedRoute.params.subscribe(param => {
+      if (param['id']) {
+        const id: number = param['id'];
+        const agent = this._supervisorService.getAgentById(id);
+        agent? this.agent = agent : this._router.navigate(['/supervisors']);
+      } else {
+        this.agent = this.getEmptyAgent();
+      }
+    })
+  }
+
+  getEmptyAgent(): Agent {
+    return {
+      id: 0,
+      name: '',
+      lastname: '',
+      detail: '',
+      email: '',
+      password: ''
+    };
+  }
+}

src/app/supervisor/pages/agents/agents.component.html

 <shared-navigation></shared-navigation>
-<shared-mail-box 
+<shared-mail-box
     title="Agentes"
     message="Este mantenimiento permite gestionar los agentes dentro de la agencia"
     icon="bi-people">
-    <shared-table></shared-table>
-</shared-mail-box>
+    <shared-table
+      [tableData]="tableData"
\ No newline at end of file
+      [tableModel]="tableModel"
+      (onReloadData)="getAgents()"
+      (onDialogResult)="onDeleteAgent($event)"
+      newRouter="new"
+      editRouter="edit">
+    </shared-table>
+</shared-mail-box>

src/app/supervisor/pages/agents/agents.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Agent } from '../../interfaces/agent.interface';
+import { TableModel } from 'src/app/shared/interfaces/table-model.interface';
+import { AgentsService } from '../../services/agent.service';
+import { ResultDelete } from 'src/app/shared/interfaces/result-delete.interface';
 
 @Component({
   selector: 'app-agents',
   templateUrl: './agents.component.html',
   styleUrls: ['./agents.component.css']
 })
-export class AgentsComponent {
+export class AgentsComponent implements OnInit {
 
+  public tableData: Agent[] = [];
+
+  public tableModel: TableModel[] = [
+    {
+      name: 'id',
+      title: '#'
+    },
+    {
+      name: 'name',
+      title: "Nombres"
+    },
+    {
+      name: 'lastname',
+      title: "Apellidos"
+    },
+    {
+      name: 'detail',
+      title: "Detalles"
+    }
+  ];
+
+  constructor(private _supervisorService: AgentsService) {}
+
+  ngOnInit(): void {
+    this.getAgents();
+  }
+
+  getAgents(): void {
+    this.tableData = this._supervisorService.agents;
+  }
+
+  onDeleteAgent(result: ResultDelete): void {
+    if (!result.result) return;
+    this._supervisorService.deleteAgent(result.id);
+    this.getAgents();
+  }
 }

src/app/supervisor/pages/flight-config/flight-config.component.html

-<shared-navigation></shared-navigation>
+<shared-navigation></shared-navigation>
\ No newline at end of file
+<shared-mail-box
+    title="Configuración de vuelos"
+    message="Este gestor permite realizar la configuración de vuelos"
+    icon="bi-people">
+    <shared-table
+      [tableData]="tableData"
+      [tableModel]="tableModel"
+      (onReloadData)="getFlights()"
+      (onDialogResult)="onDeleteAgent($event)"
+      newRouter="new"
+      editRouter="edit">
+    </shared-table>
+</shared-mail-box>

src/app/supervisor/pages/flight-config/flight-config.component.ts

 import { Component } from '@angular/core';
+import { ResultDelete } from 'src/app/shared/interfaces/result-delete.interface';
+import { TableModel } from 'src/app/shared/interfaces/table-model.interface';
+import { Flight } from '../../interfaces/flight.interface';
 
 @Component({
   selector: 'app-flight-config',
@@ -7,4 +10,50 @@ import { Component } from '@angular/core';
 })
 export class FlightConfigComponent {
 
+  tableData: Flight[] = [
+    {
+      id: 1,
+      airportOrigin: 'Aeropuerto 1',
+      airportDestination: 'Aeropuerto 2',
+      dateStart: '2021-10-10',
+      dateEnd: '2021-10-10'
+    },
+    {
+      id: 2,
+      airportOrigin: 'Aeropuerto 1',
+      airportDestination: 'Aeropuerto 2',
+      dateStart: '2021-10-10',
+      dateEnd: '2021-10-10'
+    }
+  ];
+  tableModel: TableModel[] = [
+    {
+      name: 'id',
+      title: '#'
+    },
+    {
+      name: 'airportOrigin',
+      title: 'Aeropuerto origen'
+    },
+    {
+      name: 'airportDestination',
+      title: 'Aeropuerto destino',
+    },
+    {
+      name: 'dateStart',
+      title: 'Fecha de partida'
+    },
+    {
+      name: 'dateEnd',
+      title: 'Fecha de llegada'
+    }
+  ];
+
+  getFlights(): void {
+
+  }
+
+  onDeleteAgent(result: ResultDelete): void {
+
+  }
 }

src/app/supervisor/services/agent.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Agent } from '../interfaces/agent.interface';
+
+@Injectable({providedIn: 'root'})
+export class AgentsService {
+  constructor(private httpClient: HttpClient) { }
+
+  private _agents: Agent[] = [
+    {
+      id: 1,
+      name: 'John',
+      lastname: 'Doe',
+      detail: 'Detail',
+      email: 'jodoe@gmail.com',
+      password: ''
+    },
+    {
+      id: 2,
+      name: 'Jane',
+      lastname: 'Doe',
+      detail: 'Detail',
+      email: 'jdoe@gmail.com',
+      password: ''
+    },
+    {
+      id: 3,
+      name: 'John',
+      lastname: 'Smith',
+      detail: 'Detail',
+      email: 'jsmith@gmail.com',
+      password: ''
+    },
+    {
+      id: 4,
+      name: 'Jane',
+      lastname: 'Smith',
+      detail: 'Detail',
+      email: 'jasmith@gmail.com',
+      password: ''
+    },
+    {
+      id: 5,
+      name: 'Jane',
+      lastname: 'Smith',
+      detail: 'Detail',
+      email: 'jasmith@gmail.com',
+      password: ''
+    },
+    {
+      id: 6,
+      name: 'Jane',
+      lastname: 'Smith',
+      detail: 'Detail',
+      email: 'jasmith@gmail.com',
+      password: ''
+    }
+  ];
+
+  get agents() {
+    return this._agents;
+  }
+
+  getAgentById(id: number): Agent | null {
+    const result = this._agents.filter(agent => agent.id == id);
+
+    if (result.length > 0) return result[0];
+    return null;
+  }
+
+  saveAgent(agent: Agent): Agent {
+    this._agents = [...this._agents, agent];
+    return agent;
+  }
+
+  editAgent(id: number, agent: Agent): Agent | null {
+
+    let edited: boolean = false;
+
+    this._agents.filter(item => {
+      if (item.id === id) {
+        item.name = agent.name;
+        item.lastname = agent.lastname;
+        item.detail = agent.detail;
+        edited = true;
+      }
+    });
+
+    return edited? agent : null;
+  }
+
+  deleteAgent(id: number) {
+    this._agents = this._agents.filter(agent => agent.id != id);
+  }
+}

src/app/supervisor/services/flight.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({providedIn: 'root'})
+export class FlightService {
+  constructor(private httpClient: HttpClient) { }
+  
+}

src/app/supervisor/supervisor-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { FlightConfigComponent } from './pages/flight-config/flight-config.component';
 import { AgentsComponent } from './pages/agents/agents.component';
+import { AgentAddComponent } from './pages/agent-add/agent-add.component';
 
 const routes: Routes = [
     {
@@ -18,8 +19,18 @@ const routes: Routes = [
             {
                 path: 'agents',
                 title: 'Agentes',
-                component: AgentsComponent
+                component: AgentsComponent,
             },
+            {
+              path: 'agents/new',
+              title: "Agentes",
+              component: AgentAddComponent
+            },
+            {
+              path: 'agents/edit/:id',
+              title: "Agentes",
+              component: AgentAddComponent
+            }
         ]
     },
 ];

src/app/supervisor/supervisor.module.ts

@@ -5,6 +5,8 @@ import { SupervisorRoutingModule } from './supervisor-routing.module';
 import { FlightConfigComponent } from './pages/flight-config/flight-config.component';
 import { AgentsComponent } from './pages/agents/agents.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
+import { AgentAddComponent } from './pages/agent-add/agent-add.component';
+import { HttpClientModule } from '@angular/common/http';
 
 
 
@@ -12,12 +14,14 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
   declarations: [
     FlightConfigComponent,
     AgentsComponent,
-    HomePageComponent
+    HomePageComponent,
+    AgentAddComponent
   ],
   imports: [
     CommonModule,
     SharedModule,
-    SupervisorRoutingModule
+    SupervisorRoutingModule,
+    HttpClientModule
   ],
   exports:[
     SupervisorRoutingModule