add contact

src/app/hotel/component/edit-hotel.component.ts

@@ -10,7 +10,7 @@ import {
 } from "@angular/forms";
 import {Hotel} from "../model/hotel";
 import {RouterLink} from "@angular/router";
-import {NgForOf} from "@angular/common";
+import {NgForOf, NgIf} from "@angular/common";
 import {debounceTime} from "rxjs";
 import {ErrorMsgComponent} from "./error-msg.component";
 
@@ -23,6 +23,7 @@ import {ErrorMsgComponent} from "./error-msg.component";
     RouterLink,
     NgForOf,
     ErrorMsgComponent,
+    NgIf,
   ],
   template: `
     <ng-form [formGroup]="form" (ngSubmit)="submit()">
@@ -45,6 +46,46 @@ import {ErrorMsgComponent} from "./error-msg.component";
       <br>
       <input id="rating" type="number" formControlName="rating">
       <app-error-msg [msg]="errorMsgs['rating']"></app-error-msg>
+      <br>
+      <br>
+      <label for="email">Email</label>
+      <input id="email" type="checkbox" name="contactType" value="Email" [checked]="activeContact == 'email'" (click)="changeContactType('email')">
+      <br>
+      <label for="phoneNumber">Phone Number</label>
+      <input id="phoneNumber" type="checkbox" name="contactType" value="PhoneNumber" [checked]="activeContact == 'phoneNumber'" (click)="changeContactType('phoneNumber')">
+      <br>
+      <label for="none">None</label>
+      <input id="none" type="checkbox" name="contactType" value="none" [checked]="activeContact == 'none'" (click)="changeContactType('none')">
+
+      <br>
+      <br>
+
+      @if (activeContact === 'email') {
+        <label for="email">Email</label>
+        <br>
+        <app-error-msg [msg]="errorMsgs['email']"></app-error-msg>
+        <br>
+        <input type="email" formControlName="email" required>
+        <br>
+        <label for="emailConfirm">Confirm Email</label>
+        <br>
+        <app-error-msg [msg]="errorMsgs['emailConfirm']"></app-error-msg>
+        <br>
+        <input type="email" formControlName="emailConfirm" required>
+      } @else if (activeContact === 'phoneNumber') {
+        <label for="phoneNumber">Phone Number</label>
+        <br>
+        <app-error-msg [msg]="errorMsgs['phoneNumber']"></app-error-msg>
+        <br>
+        <input type="number" formControlName="phoneNumber" required>
+        <br>
+        <label for="phoneNumberConfirm">Confirm Phone Number</label>
+        <br>
+        <app-error-msg [msg]="errorMsgs['phoneNumberConfirm']"></app-error-msg>
+        <br>
+        <input type="number" formControlName="phoneNumberConfirm" required>
+      }
+
       <br>
       <br>
       <button (click)="addTag()">+</button>
@@ -80,7 +121,17 @@ export class EditHotelComponent implements OnInit {
     max: 'Value must be less than or equal to 5'
   };
 
+  activeContact!: string;
+
   ngOnInit(): void {
+    if (this.hotel?.email) {
+      this.activeContact = 'email';
+    } else if (this.hotel?.phoneNumber) {
+      this.activeContact = 'phoneNumber';
+    } else {
+      this.activeContact = 'none';
+    }
+
     const tags = [];
 
     for (const tag of this.hotel?.tags ?? []) {
@@ -92,6 +143,10 @@ export class EditHotelComponent implements OnInit {
       description: new FormControl(this.hotel?.description, [Validators.required]),
       price: new FormControl(this.hotel?.price, [Validators.required]),
       rating: new FormControl(this.hotel?.rating, [Validators.required, Validators.min(0), Validators.max(5)]),
+      email: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
+      emailConfirm: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
+      phoneNumber: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
+      phoneNumberConfirm: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
       tags: new FormArray(tags),
     })
 
@@ -118,6 +173,21 @@ export class EditHotelComponent implements OnInit {
       return;
     }
 
+    switch (this.activeContact) {
+      case 'email':
+        if (this.form.value.email !== this.form.value.emailConfirm) {
+          this.errorMsgs['email'] = 'Emails do not match';
+          return;
+        }
+        break;
+      case 'phoneNumber':
+        if (this.form.value.phoneNumber !== this.form.value.phoneNumberConfirm) {
+          this.errorMsgs['phoneNumber'] = 'Phone numbers do not match';
+          return;
+        }
+        break;
+    }
+
     const hotel: Hotel = {
       imageUrl: this.hotel?.imageUrl ?? "",
       hotelName: this.form.value.name,
@@ -125,7 +195,9 @@ export class EditHotelComponent implements OnInit {
       price: this.form.value.price,
       rating: this.form.value.rating,
       id: this.hotel?.id ?? 0,
-      tags: this.form.value.tags ?? []
+      tags: this.form.value.tags ?? [],
+      email: this.form.value.email,
+      phoneNumber: this.form.value.phoneNumber
     };
 
     this.updateHotel.emit(hotel)
@@ -159,4 +231,8 @@ export class EditHotelComponent implements OnInit {
       this.setErrorMessage(controlName, control);
     });
   }
+
+  changeContactType(type: string) {
+    this.activeContact = type;
+  }
 }

src/app/hotel/model/hotel.ts

@@ -2,6 +2,8 @@ export interface Hotel {
   id: number;
   hotelName: string;
   description: string;
+  email: string|null,
+  phoneNumber: string|null,
   price: number;
   imageUrl: string;
   rating: number;

src/app/hotel/service/HotelData.service.ts

@@ -12,7 +12,9 @@ export class HotelDataService implements InMemoryDbService{
         "price": 230.5,
         "imageUrl": "assets/img/heisenberg.jpg",
         "rating": 3.5,
-        "tags": ["Meer", "Berge"]
+        "tags": ["Meer", "Berge"],
+        "email": "buea@mail.com",
+        "phoneNumber": "1234567890"
       },
       {
         "id": 2,
@@ -21,7 +23,9 @@ export class HotelDataService implements InMemoryDbService{
         "price": 145.5,
         "imageUrl": "assets/img/kjan.png",
         "rating": 5,
-        "tags": ["Meer", "Berge"]
+        "tags": ["Meer", "Berge"],
+        "email": "marrakesch@mail.com",
+        "phoneNumber": "1234567890"
       },
       {
         "id": 3,
@@ -30,7 +34,9 @@ export class HotelDataService implements InMemoryDbService{
         "price": 120.12,
         "imageUrl": "assets/img/huy.png",
         "rating": 4,
-        "tags": ["Meer", "Berge"]
+        "tags": ["Meer", "Berge"],
+        "email": "abuja@mail.com",
+        "phoneNumber": "1234567890"
       },
       {
         "id": 4,
@@ -39,7 +45,9 @@ export class HotelDataService implements InMemoryDbService{
         "price": 135.12,
         "imageUrl": "assets/img/rat.png",
         "rating": 2.5,
-        "tags": ["Meer", "Berge"]
+        "tags": ["Meer", "Berge"],
+        "email": "our@mail.com",
+        "phoneNumber": "1234567890"
       }
     ];