From 249739cd992b4ed887afee8890d8948fb5ef9da9 Mon Sep 17 00:00:00 2001 From: Moueed Ali Date: Mon, 8 Sep 2025 11:27:53 +0200 Subject: [PATCH] Exercise complete --- src/app/addressbook/add/add.component.css | 0 src/app/addressbook/add/add.component.html | 22 ++++++++++++++ src/app/addressbook/add/add.component.ts | 31 ++++++++++++++++++++ src/app/addressbook/addressbook.module.ts | 31 ++++++++++++++++++++ src/app/addressbook/data/contact.ts | 18 ++++++++++++ src/app/addressbook/edit/edit.component.css | 0 src/app/addressbook/edit/edit.component.html | 1 + src/app/addressbook/edit/edit.component.ts | 10 +++++++ src/app/addressbook/list/list.component.css | 0 src/app/addressbook/list/list.component.html | 25 ++++++++++++++++ src/app/addressbook/list/list.component.ts | 14 +++++++++ src/app/addressbook/model/addressbook.ts | 7 +++++ src/app/addressbook/view/view.component.css | 0 src/app/addressbook/view/view.component.html | 10 +++++++ src/app/addressbook/view/view.component.ts | 17 +++++++++++ src/app/app-routing.module.ts | 18 +++++++++++- src/app/app.module.ts | 8 +++-- src/app/layout/menu/menu.component.html | 5 ++-- src/app/services/addressbook.service.ts | 26 ++++++++++++++++ 19 files changed, 237 insertions(+), 6 deletions(-) create mode 100644 src/app/addressbook/add/add.component.css create mode 100644 src/app/addressbook/add/add.component.html create mode 100644 src/app/addressbook/add/add.component.ts create mode 100644 src/app/addressbook/addressbook.module.ts create mode 100644 src/app/addressbook/data/contact.ts create mode 100644 src/app/addressbook/edit/edit.component.css create mode 100644 src/app/addressbook/edit/edit.component.html create mode 100644 src/app/addressbook/edit/edit.component.ts create mode 100644 src/app/addressbook/list/list.component.css create mode 100644 src/app/addressbook/list/list.component.html create mode 100644 src/app/addressbook/list/list.component.ts create mode 100644 src/app/addressbook/model/addressbook.ts create mode 100644 src/app/addressbook/view/view.component.css create mode 100644 src/app/addressbook/view/view.component.html create mode 100644 src/app/addressbook/view/view.component.ts create mode 100644 src/app/services/addressbook.service.ts diff --git a/src/app/addressbook/add/add.component.css b/src/app/addressbook/add/add.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/addressbook/add/add.component.html b/src/app/addressbook/add/add.component.html new file mode 100644 index 00000000..a95077a9 --- /dev/null +++ b/src/app/addressbook/add/add.component.html @@ -0,0 +1,22 @@ +
+

Add a contact

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
diff --git a/src/app/addressbook/add/add.component.ts b/src/app/addressbook/add/add.component.ts new file mode 100644 index 00000000..c63bdfd2 --- /dev/null +++ b/src/app/addressbook/add/add.component.ts @@ -0,0 +1,31 @@ +import { Component, inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { AddressbookService } from 'src/app/services/addressbook.service'; + +@Component({ + selector: 'app-add', + templateUrl: './add.component.html', + styleUrl: './add.component.css' +}) + +export class AddComponent { + contactForm: FormGroup; + formBuilder = inject(FormBuilder); + contactService = inject(AddressbookService) + router = inject(Router) + + constructor() { + this.contactForm = this.formBuilder.group({ + firstName: ["", Validators.required], + lastName: ["", Validators.required], + street: ["", Validators.required], + city: ["", Validators.required] + }); + } + + addContact() { + this.contactService.addContact(this.contactForm.value) + this.router.navigate(['addressbook']) + } +} diff --git a/src/app/addressbook/addressbook.module.ts b/src/app/addressbook/addressbook.module.ts new file mode 100644 index 00000000..8040b545 --- /dev/null +++ b/src/app/addressbook/addressbook.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AddComponent } from './add/add.component'; +import { ViewComponent } from './view/view.component'; +import { ListComponent } from './list/list.component'; +import { EditComponent } from './edit/edit.component'; +import { RouterModule } from '@angular/router'; +import { ReactiveFormsModule } from '@angular/forms'; + + + +@NgModule({ + declarations: [ + AddComponent, + ViewComponent, + ListComponent, + EditComponent + ], + imports: [ + CommonModule, + RouterModule, + ReactiveFormsModule + ], + exports: [ + AddComponent, + ViewComponent, + ListComponent, + EditComponent + ] +}) +export class AddressbookModule { } diff --git a/src/app/addressbook/data/contact.ts b/src/app/addressbook/data/contact.ts new file mode 100644 index 00000000..91c9f09e --- /dev/null +++ b/src/app/addressbook/data/contact.ts @@ -0,0 +1,18 @@ +import { Contact } from "../model/addressbook"; + +export const CONTACTS: Contact[] = [ + { + id: 1, + firstName: "Dave", + lastName: "Ames", + street: "Bacup road 12", + city: "Bacup", + }, + { + id: 2, + firstName: "Nigel", + lastName: "Sibbert", + street: "Bournemouth road 12", + city: "Bournemouth", + }, +] diff --git a/src/app/addressbook/edit/edit.component.css b/src/app/addressbook/edit/edit.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/addressbook/edit/edit.component.html b/src/app/addressbook/edit/edit.component.html new file mode 100644 index 00000000..d1393d89 --- /dev/null +++ b/src/app/addressbook/edit/edit.component.html @@ -0,0 +1 @@ +

edit works!

diff --git a/src/app/addressbook/edit/edit.component.ts b/src/app/addressbook/edit/edit.component.ts new file mode 100644 index 00000000..3d890bfc --- /dev/null +++ b/src/app/addressbook/edit/edit.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-edit', + templateUrl: './edit.component.html', + styleUrl: './edit.component.css' +}) +export class EditComponent { + +} diff --git a/src/app/addressbook/list/list.component.css b/src/app/addressbook/list/list.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/addressbook/list/list.component.html b/src/app/addressbook/list/list.component.html new file mode 100644 index 00000000..ad0252cc --- /dev/null +++ b/src/app/addressbook/list/list.component.html @@ -0,0 +1,25 @@ +

Contact List Page

+ + + + + + + + + + + + + @for (contact of this.contacts; track contact) { + + + + + + + + + } + +
IdFirst nameLast nameStreetCity
{{ contact.id }}{{ contact.firstName }}{{ contact.lastName }}{{ contact.street }}{{ contact.city }}Link
diff --git a/src/app/addressbook/list/list.component.ts b/src/app/addressbook/list/list.component.ts new file mode 100644 index 00000000..ea0f3d9f --- /dev/null +++ b/src/app/addressbook/list/list.component.ts @@ -0,0 +1,14 @@ +import { Component, inject } from '@angular/core'; +import { AddressbookService } from 'src/app/services/addressbook.service'; +import { Contact } from '../model/addressbook'; + +@Component({ + selector: 'app-list', + templateUrl: './list.component.html', + styleUrl: './list.component.css' +}) +export class ListComponent { + contactService = inject(AddressbookService) + + contacts: Contact[] = this.contactService.getAllContacts(); +} diff --git a/src/app/addressbook/model/addressbook.ts b/src/app/addressbook/model/addressbook.ts new file mode 100644 index 00000000..e4f470d2 --- /dev/null +++ b/src/app/addressbook/model/addressbook.ts @@ -0,0 +1,7 @@ +export interface Contact { + id: number; + firstName: string; + lastName: string; + street: string; + city: string; +} diff --git a/src/app/addressbook/view/view.component.css b/src/app/addressbook/view/view.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/addressbook/view/view.component.html b/src/app/addressbook/view/view.component.html new file mode 100644 index 00000000..70e2b9ca --- /dev/null +++ b/src/app/addressbook/view/view.component.html @@ -0,0 +1,10 @@ +@if (this.contact === null) { +
+

Contact is not available

+
+} @else { +
+

{{contact.firstName}} {{contact.lastName}}

+

{{contact.street}} {{contact.city}}

+
+} diff --git a/src/app/addressbook/view/view.component.ts b/src/app/addressbook/view/view.component.ts new file mode 100644 index 00000000..8feb0396 --- /dev/null +++ b/src/app/addressbook/view/view.component.ts @@ -0,0 +1,17 @@ +import { Component, inject } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { AddressbookService } from 'src/app/services/addressbook.service'; +import { Contact } from '../model/addressbook'; + +@Component({ + selector: 'app-view', + templateUrl: './view.component.html', + styleUrl: './view.component.css' +}) +export class ViewComponent { + addressbookService = inject(AddressbookService) + route = inject(ActivatedRoute) + + id = this.route.snapshot.paramMap.get('id') + contact: Contact | null = this.addressbookService.getContactById(Number(this.id)) +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 02972627..8c1e916c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,23 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { ListComponent } from './addressbook/list/list.component'; +import { AddComponent } from './addressbook/add/add.component'; +import { ViewComponent } from './addressbook/view/view.component'; -const routes: Routes = []; +const routes: Routes = [ + { + path: "addressbook", + component: ListComponent, + }, + { + path: "addressbook/add", + component: AddComponent, + }, + { + path: "addressbook/:id", + component: ViewComponent, + }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8207184c..c9345822 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,13 +1,15 @@ +import { AppComponent } from './app.component'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; import { LayoutModule } from './layout/layout.module'; +import { CommonModule } from '@angular/common'; +import { AddressbookModule } from './addressbook/addressbook.module'; + @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, LayoutModule], + imports: [BrowserModule, AppRoutingModule, LayoutModule, CommonModule, AddressbookModule], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html index 7c5ec7a2..630110d9 100644 --- a/src/app/layout/menu/menu.component.html +++ b/src/app/layout/menu/menu.component.html @@ -1,5 +1,6 @@

Menu

diff --git a/src/app/services/addressbook.service.ts b/src/app/services/addressbook.service.ts new file mode 100644 index 00000000..c5cdf1c5 --- /dev/null +++ b/src/app/services/addressbook.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core'; +import { Contact } from '../addressbook/model/addressbook'; +import { CONTACTS } from '../addressbook/data/contact'; + +@Injectable({ + providedIn: 'root' +}) +export class AddressbookService { + private contacts: Contact[] = CONTACTS + private currentId: number = this.contacts.length + + public getContactById(id: number | null): Contact | null { + const contact = this.contacts.find((contact) => contact.id === id) + return !contact ? null : contact + } + + public getAllContacts(): Contact[] { + return this.contacts + } + + public addContact(contact: Contact) { + this.currentId++; + this.contacts.push({...contact, id: this.currentId}); + } + constructor() { } +}