Skip to content

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

feat: added maintenance passengers

parent 53366081
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 97 deletions
server/db.json
View file @ 493f1d49
......@@ -63,16 +63,16 @@
],
"passengers": [
{
"id": 1,
"name": "Michael",
"secondName": "asd",
"lastname": "Johnson",
"country": "USA",
"city": "Anytown",
"address": "123 Main Street",
"phone": "+123456789",
"email": "michael.johnson@example.com",
"address": "123 Main Street",
"city": "Anytown",
"country": "USA",
"password": "123456"
"password": "123456",
"id": 1
},
{
"id": 2,
......@@ -97,6 +97,18 @@
"city": "Everytown",
"country": "UK",
"password": "123456"
},
{
"name": "Heber",
"secondName": "",
"lastname": "Cordova",
"country": "Peru",
"city": "Lima",
"address": "Calle 123",
"phone": "987654321",
"email": "hcordova@gmail.com",
"password": "heber123",
"id": 4
}
],
"airports": [
......
src/app/agent/pages/passenger-add/passenger-add.component.css
View file @ 493f1d49
......@@ -23,14 +23,30 @@
margin-bottom: 8px;
}
/* Forms */
/* Fields */
.custom-input {
.info__fields, .credentials__fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.field-address {
grid-column: 1 / 3;
}
.field-email, .field-password {
grid-column: 1 / 3;
}
/* Input */
.field {
position: relative;
margin-bottom: 30px;
padding-top: 12px;
}
.custom-input input {
.field input {
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
......@@ -40,40 +56,29 @@
color: #8f8e8e;
}
.custom-input input:focus {
margin-bottom: -2px;
border-bottom: 2px solid #3f51b5;
.field input:focus {
border-bottom: 1px solid #3f51b5;
}
.custom-input label {
.field label {
position: absolute;
top: 0;
left: 0;
top: 0px;
left: 2px;
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: 12px;
.field input:focus + label {
top: 0;
left: 2px;
font-size: 12px;
color: #3f51b5;
}
.custom-input input + label {
top: -12px;
left: 12px;
.field input + label {
top: 0;
left: 2px;
font-size: 12px;
color: #ccc;
}
.custom-input-detail {
font-size: 12px;
}
src/app/agent/pages/passenger-add/passenger-add.component.html
View file @ 493f1d49
......@@ -8,47 +8,56 @@
<form [formGroup]="passengerForm" (ngSubmit)="onSave()" autocomplete="off">
<section class="info">
<h3 class="info__title">Información general</h3>
<div class="info__fields row">
<div class="col-6 custom-input">
<input type="text" name="name" formControlName="name" id="custom-input-name">
<label for="custom-input-name">Nombre *</label>
<div class="info__fields">
<div class="field field-name">
<input type="text" name="name" formControlName="name" id="field-name">
<label for="field-name">Nombre *</label>
<shared-input-validator [formGroup]="passengerForm" field="name" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-6 custom-input">
<input type="text" name="secondName" formControlName="secondName" id="custom-input-second">
<label for="custom-input-second">Segundo nombre *</label>
<div class="field field-second">
<input type="text" name="secondName" formControlName="secondName" id="field-second">
<label for="field-second">Segundo nombre *</label>
<shared-input-validator [formGroup]="passengerForm" field="secondName" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-6 custom-input">
<input type="text" name="lastname" formControlName="lastname" id="custom-input-lastname">
<label for="custom-input-lastname">Apellidos *</label>
<div class="field field-lastname">
<input type="text" name="lastname" formControlName="lastname" id="field-lastname">
<label for="field-lastname">Apellidos *</label>
<shared-input-validator [formGroup]="passengerForm" field="lastname" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-6 custom-input">
<input type="text" name="phone" formControlName="phone" id="custom-input-phone">
<label for="custom-input-phone">Telefono *</label>
<div class="field field-phone">
<input type="text" name="phone" formControlName="phone" id="field-phone">
<label for="field-phone">Telefono *</label>
<shared-input-validator [formGroup]="passengerForm" field="phone" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-6 custom-input">
<input type="text" name="country" formControlName="country" id="custom-input-country">
<label for="custom-input-country">Pais *</label>
<div class="field field-country">
<input type="text" name="country" formControlName="country" id="field-country">
<label for="field-country">Pais *</label>
<shared-input-validator [formGroup]="passengerForm" field="country" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-6 custom-input">
<input type="text" name="city" formControlName="city" id="custom-input-city">
<label for="custom-input-city">Ciudad *</label>
<div class="field field-city">
<input type="text" name="city" formControlName="city" id="field-city">
<label for="field-city">Ciudad *</label>
<shared-input-validator [formGroup]="passengerForm" field="city" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="col-12 custom-input">
<input type="text" name="address" formControlName="address" id="custom-input-address">
<label for="custom-input-address">Direccion *</label>
<div class="field field-address">
<input type="text" name="address" formControlName="address" id="field-address">
<label for="field-address">Direccion *</label>
<shared-input-validator [formGroup]="passengerForm" field="address" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
</div>
</section>
<section class="credentials">
<h3 class="credentials__title">Credenciales</h3>
<div class="credentials__fields row">
<div class="col-12 custom-input">
<input type="text" name="email" formControlName="email" id="custom-input-email">
<label for="custom-input-email">Email *</label>
</div>
<div class="col-12 custom-input">
<input type="password" name="password" formControlName="password" id="custom-input-password">
<label for="custom-input-password">Password *</label>
<div class="credentials__fields">
<div class="field field-email">
<input type="text" name="email" formControlName="email" id="field-email">
<label for="field-email">Email *</label>
<shared-input-validator [formGroup]="passengerForm" field="email" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
<div class="field field-password">
<input type="password" name="password" formControlName="password" id="field-password">
<label for="field-password">Password *</label>
<shared-input-validator [formGroup]="passengerForm" field="password" [getValidatorLength]="getPassengerValidatorLenght"></shared-input-validator>
</div>
</div>
</section>
......
src/app/agent/pages/passenger-add/passenger-add.component.ts
View file @ 493f1d49
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { PassengerService } from '../../services/passenger-service.service';
import { EMPTY_PASSENGER, Passenger } from '../../interfaces/passenger.interface';
import { PASSENGER_VALIDATORS, getPassengerValidatorLenght } from '../../validators/passenger.validator';
import { Location } from '@angular/common';
@Component({
selector: 'app-passenger-add',
......@@ -11,52 +13,56 @@ import { EMPTY_PASSENGER, Passenger } from '../../interfaces/passenger.interface
})
export class PassengerAddComponent implements OnInit {
public passengerForm: FormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
secondName: new FormControl('', [Validators.required]),
lastname: new FormControl('', [Validators.required]),
country: new FormControl('', [Validators.required]),
city: new FormControl('', [Validators.required]),
address: new FormControl('', [Validators.required]),
phone: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required]),
password: new FormControl('', [Validators.required])
});
public passengerForm: FormGroup = PASSENGER_VALIDATORS;
public passengerId?: number;
constructor(
private location: Location,
private activatedRoute: ActivatedRoute,
private fb: FormBuilder,
private passengerService: PassengerService) { }
ngOnInit(): void {
this.activatedRoute.params.subscribe(param => {
if (!param['id']) {
this.buildForm();
return;
}
this.passengerService.getById(param['id'])
if (param['id']) {
this.passengerService.getById(param['id'])
.subscribe(passenger => {
this.buildForm(passenger);
this.passengerId = param['id'];
});
} else this.buildForm(EMPTY_PASSENGER);
});
}
buildForm(passenger: Passenger = EMPTY_PASSENGER): void {
this.passengerForm.get('name')?.setValue(passenger.name);
this.passengerForm.get('secondName')?.setValue(passenger.secondName);
this.passengerForm.get('lastname')?.setValue(passenger.lastname);
this.passengerForm.get('country')?.setValue(passenger.country);
this.passengerForm.get('city')?.setValue(passenger.city);
this.passengerForm.get('address')?.setValue(passenger.address);
this.passengerForm.get('phone')?.setValue(passenger.phone);
this.passengerForm.get('email')?.setValue(passenger.email);
this.passengerForm.get('password')?.setValue(passenger.password);
buildForm(passenger: Passenger): void {
this.passengerForm.get('name')?.setValue(passenger.name || '');
this.passengerForm.get('secondName')?.setValue(passenger.secondName || '');
this.passengerForm.get('lastname')?.setValue(passenger.lastname || '');
this.passengerForm.get('country')?.setValue(passenger.country || '');
this.passengerForm.get('city')?.setValue(passenger.city || '');
this.passengerForm.get('address')?.setValue(passenger.address || '');
this.passengerForm.get('phone')?.setValue(passenger.phone || '');
this.passengerForm.get('email')?.setValue(passenger.email || '');
this.passengerForm.get('password')?.setValue(passenger.password || '');
}
onSave():void {
console.log(this.passengerForm.value);
getPassengerValidatorLenght(field: string) {
return getPassengerValidatorLenght(field);
}
onSave():void {
this.passengerForm.markAllAsTouched();
if (this.passengerId) {
this.passengerService.edit(this.passengerId, this.passengerForm.value)
.subscribe(() => {
this.passengerForm.reset();
this.location.back();
});
} else {
this.passengerService.save(this.passengerForm.value)
.subscribe(() => {
this.passengerForm.reset();
this.location.back();
});
}
}
}
src/app/agent/pages/passengers/passengers.component.html
View file @ 493f1d49
......@@ -3,12 +3,12 @@
title="Pasajeros"
icon="bi-people"
message="Este mantenimiento permite gestionar los pasajeros dentro de la agencia">
<shared-table
[tableData]="passengerData"
[tableModel]="passengerModel"
(onReloadData)="getAll()"
(onDialogResult)="onDelete($event)"
newRouter="new"
editRouter="edit">
</shared-table>
</shared-mail-box>
src/app/agent/pages/passengers/passengers.component.ts
View file @ 493f1d49
......@@ -3,6 +3,7 @@ import { Passenger } from '../../interfaces/passenger.interface';
import { TableModel } from 'src/app/shared/interfaces/table-model.interface';
import { PassengerTable } from '../../interfaces/passenger-table.interface';
import { PassengerService } from '../../services/passenger-service.service';
import { ResultDelete } from 'src/app/shared/interfaces/result-delete.interface';
@Component({
selector: 'app-passengers',
......@@ -42,4 +43,15 @@ export class PassengersComponent implements OnInit {
title: 'Ciudad'
}
];
getAll(): void {
this.passengerService.getAll()
.subscribe(passengers => this.passengerData = passengers);
}
onDelete(result: ResultDelete): void {
if (!result.result) return;
this.passengerService.delete(result.id)
.subscribe(() => this.getAll());
}
}
src/app/agent/services/passenger-service.service.ts
View file @ 493f1d49
......@@ -7,12 +7,25 @@ import { Observable } from 'rxjs';
export class PassengerService {
constructor(private http: HttpClient) { }
URL_BASE: string = 'http://localhost:3000/passengers';
getAll(): Observable<Passenger[]> {
return this.http.get<Passenger[]>('http://localhost:3000/passengers');
return this.http.get<Passenger[]>(this.URL_BASE);
}
getById(id: number): Observable<Passenger> {
return this.http.get<Passenger>(`http://localhost:3000/passengers/${id}`);
return this.http.get<Passenger>(`${this.URL_BASE}/${id}`);
}
save(passenger: Passenger): Observable<Passenger> {
return this.http.post<Passenger>(this.URL_BASE, passenger);
}
edit(id: number, passenger: Passenger): Observable<Passenger> {
return this.http.put<Passenger>(`${this.URL_BASE}/${id}`, passenger);
}
delete(id: number): Observable<Passenger> {
return this.http.delete<Passenger>(`${this.URL_BASE}/${id}`);
}
}
src/app/agent/validators/passenger.validator.ts 0 → 100644
View file @ 493f1d49
import { FormGroup, FormControl, Validators } from "@angular/forms";
const nameLenght = { min: 3, max: 20 };
const secondNameLenght = { min: 0, max: 20 };
const lastnameLenght = { min: 3, max: 30 };
const countryLenght = { min: 3, max: 30 };
const cityLenght = { min: 3, max: 30 };
const addressLenght = { min: 3, max: 100 };
const phoneLenght = { min: 3, max: 11 };
const emailLenght = { min: 3, max: 100 };
const passwordLenght = { min: 3, max: 45 };
export const PASSENGER_VALIDATORS = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(nameLenght.min), Validators.maxLength(nameLenght.max)]),
secondName: new FormControl('', [Validators.maxLength(secondNameLenght.max)]),
lastname: new FormControl('', [Validators.required, Validators.minLength(lastnameLenght.min), Validators.maxLength(lastnameLenght.max)]),
country: new FormControl('', [Validators.required, Validators.minLength(countryLenght.min), Validators.maxLength(countryLenght.max)]),
city: new FormControl('', [Validators.required, Validators.minLength(cityLenght.min), Validators.maxLength(cityLenght.max)]),
address: new FormControl('', [Validators.required, Validators.minLength(addressLenght.min), Validators.maxLength(addressLenght.max)]),
phone: new FormControl('', [Validators.required, Validators.minLength(phoneLenght.min), Validators.maxLength(phoneLenght.max)]),
email: new FormControl('', [Validators.required, Validators.minLength(emailLenght.min), Validators.maxLength(emailLenght.max)]),
password: new FormControl('', [Validators.required, Validators.minLength(passwordLenght.min), Validators.maxLength(passwordLenght.max)])
});
export const getPassengerValidatorLenght = (field: string) => {
switch (field) {
case 'name':
return nameLenght;
case 'secondName':
return secondNameLenght;
case 'lastname':
return lastnameLenght;
case 'country':
return countryLenght;
case 'city':
return cityLenght;
case 'address':
return addressLenght;
case 'phone':
return phoneLenght;
case 'email':
return emailLenght;
case 'password':
return passwordLenght;
default:
return { min: 0, max: 0 };
}
}
src/app/supervisor/pages/agent-add/agent-add.component.ts
View file @ 493f1d49
......@@ -44,6 +44,7 @@ export class AgentAddComponent implements OnInit {
}
onSave(): void {
this.agentForm.markAllAsTouched();
if (this.agentId) {
this.agentsService.edit(this.agentId, this.agentForm.value)
.subscribe(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment