From 1b771b9f862a22460c7f29ab41e831d3dc969f55 Mon Sep 17 00:00:00 2001 From: Linda Do Date: Mon, 8 Sep 2025 11:30:43 +0200 Subject: [PATCH 1/2] completed core --- src/app/app-routing.module.ts | 15 ++++++++- src/app/app.component.css | 9 ------ src/app/app.component.html | 7 ++-- src/app/app.component.ts | 2 +- src/app/app.module.ts | 4 ++- src/app/contacts/add/add.component.css | 0 src/app/contacts/add/add.component.html | 26 +++++++++++++++ src/app/contacts/add/add.component.ts | 32 ++++++++++++++++++ src/app/contacts/contacts.module.ts | 31 ++++++++++++++++++ src/app/contacts/data/contacts.ts | 36 +++++++++++++++++++++ src/app/contacts/edit/edit.component.css | 0 src/app/contacts/edit/edit.component.html | 1 + src/app/contacts/edit/edit.component.ts | 10 ++++++ src/app/contacts/list/list.component.css | 7 ++++ src/app/contacts/list/list.component.html | 13 ++++++++ src/app/contacts/list/list.component.ts | 14 ++++++++ src/app/contacts/models/contact.ts | 8 +++++ src/app/contacts/view/view.component.css | 0 src/app/contacts/view/view.component.html | 14 ++++++++ src/app/contacts/view/view.component.ts | 17 ++++++++++ src/app/layout/menu/menu.component.html | 4 +-- src/app/services/contact-service.service.ts | 28 ++++++++++++++++ src/index.html | 2 +- 23 files changed, 263 insertions(+), 17 deletions(-) create mode 100644 src/app/contacts/add/add.component.css create mode 100644 src/app/contacts/add/add.component.html create mode 100644 src/app/contacts/add/add.component.ts create mode 100644 src/app/contacts/contacts.module.ts create mode 100644 src/app/contacts/data/contacts.ts create mode 100644 src/app/contacts/edit/edit.component.css create mode 100644 src/app/contacts/edit/edit.component.html create mode 100644 src/app/contacts/edit/edit.component.ts create mode 100644 src/app/contacts/list/list.component.css create mode 100644 src/app/contacts/list/list.component.html create mode 100644 src/app/contacts/list/list.component.ts create mode 100644 src/app/contacts/models/contact.ts create mode 100644 src/app/contacts/view/view.component.css create mode 100644 src/app/contacts/view/view.component.html create mode 100644 src/app/contacts/view/view.component.ts create mode 100644 src/app/services/contact-service.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 02972627..1814da9f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,20 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { ListComponent } from './contacts/list/list.component'; +import { AddComponent } from './contacts/add/add.component'; +import { ViewComponent } from './contacts/view/view.component'; -const routes: Routes = []; +const routes: Routes = [ + {path: "contacts", + component: ListComponent + }, + {path: "contacts/add", + component: AddComponent + }, + {path: "contacts/:id", + component: ViewComponent + } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.css b/src/app/app.component.css index 31d9e249..e69de29b 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,9 +0,0 @@ -:host { - display: flex; -} - -.page { - flex: 1; - display: flex; - justify-content: center; -} diff --git a/src/app/app.component.html b/src/app/app.component.html index 17aaa0c6..0df2548d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,7 @@ +
+

{{title}}

+
+
-
-
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b82791ab..5b1812c4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'angular-address-book'; + title = 'Address Book'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8207184c..0b5cfc0f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,10 +4,12 @@ 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 { ContactsModule } from './contacts/contacts.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, LayoutModule], + imports: [BrowserModule, AppRoutingModule, LayoutModule, CommonModule, ContactsModule], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/contacts/add/add.component.css b/src/app/contacts/add/add.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/contacts/add/add.component.html b/src/app/contacts/add/add.component.html new file mode 100644 index 00000000..bea0f755 --- /dev/null +++ b/src/app/contacts/add/add.component.html @@ -0,0 +1,26 @@ +
+

Add a contact

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/src/app/contacts/add/add.component.ts b/src/app/contacts/add/add.component.ts new file mode 100644 index 00000000..a6964f94 --- /dev/null +++ b/src/app/contacts/add/add.component.ts @@ -0,0 +1,32 @@ +import { Component, inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { ContactServiceService } from 'src/app/services/contact-service.service'; + +@Component({ + selector: 'app-add', + templateUrl: './add.component.html', + styleUrl: './add.component.css' +}) + +export class AddComponent { + contactForm: FormGroup + formBuilder = inject(FormBuilder) + contactService = inject(ContactServiceService) + router = inject(Router) + + constructor() { + this.contactForm = this.formBuilder.group({ + firstName: ["", Validators.required], + lastName: ["", Validators.required], + street: ["", Validators.required], + city: ["", Validators.required], + email: ["", Validators.required], + }) + } + + addContact() { + this.contactService.addContact(this.contactForm.value) + this.router.navigate(['contacts']) + } +} \ No newline at end of file diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts new file mode 100644 index 00000000..a722e0d8 --- /dev/null +++ b/src/app/contacts/contacts.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 ContactsModule { } diff --git a/src/app/contacts/data/contacts.ts b/src/app/contacts/data/contacts.ts new file mode 100644 index 00000000..29780030 --- /dev/null +++ b/src/app/contacts/data/contacts.ts @@ -0,0 +1,36 @@ +import { Contact } from "../models/contact"; + +export const CONTACTS: Contact[] = [ + { + id: 1, + firstName: "Dayne", + lastName: "Strosin", + email: "Salma_Hintz32@hotmail.com", + street: "South Street", + city: "New Mercedes" + }, + { + id: 2, + firstName: "Murray", + lastName: "Torphy", + email: "Eugene25@hotmail.com", + street: "Hill Road", + city: "Runolfsdottirport" + }, + { + id: 3, + firstName: "Trevion", + lastName: "Yost", + email: "Jayda.Ratke2@hotmail.com", + street: "Hilpert Bypass", + city: "Johnstonstad" + }, + { + id: 4, + firstName: "Khalid", + lastName: "Cummings", + email: "Oliver17@hotmail.com", + street: "Renner Drives", + city: "Fort Winonafurt" + } +] \ No newline at end of file diff --git a/src/app/contacts/edit/edit.component.css b/src/app/contacts/edit/edit.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/contacts/edit/edit.component.html b/src/app/contacts/edit/edit.component.html new file mode 100644 index 00000000..d1393d89 --- /dev/null +++ b/src/app/contacts/edit/edit.component.html @@ -0,0 +1 @@ +

edit works!

diff --git a/src/app/contacts/edit/edit.component.ts b/src/app/contacts/edit/edit.component.ts new file mode 100644 index 00000000..3d890bfc --- /dev/null +++ b/src/app/contacts/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/contacts/list/list.component.css b/src/app/contacts/list/list.component.css new file mode 100644 index 00000000..fe21271d --- /dev/null +++ b/src/app/contacts/list/list.component.css @@ -0,0 +1,7 @@ +.contact { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid #ccc; +} \ No newline at end of file diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html new file mode 100644 index 00000000..7a6351d2 --- /dev/null +++ b/src/app/contacts/list/list.component.html @@ -0,0 +1,13 @@ +

Contacts

+@if (contacts.length <= 0) { +

No contacts in your list

+} @else { + @for (contact of contacts; track $index) { +
+ + {{contact.firstName}} {{contact.lastName}} + + Link +
+ } +} \ No newline at end of file diff --git a/src/app/contacts/list/list.component.ts b/src/app/contacts/list/list.component.ts new file mode 100644 index 00000000..ccf9c76a --- /dev/null +++ b/src/app/contacts/list/list.component.ts @@ -0,0 +1,14 @@ +import { Component, inject } from '@angular/core'; +import { ContactServiceService } from 'src/app/services/contact-service.service'; +import { Contact } from '../models/contact'; + +@Component({ + selector: 'app-list', + templateUrl: './list.component.html', + styleUrl: './list.component.css' +}) +export class ListComponent { + contactService = inject(ContactServiceService) + + contacts: Contact[] = this.contactService.getAllContacts() +} diff --git a/src/app/contacts/models/contact.ts b/src/app/contacts/models/contact.ts new file mode 100644 index 00000000..36a6fb18 --- /dev/null +++ b/src/app/contacts/models/contact.ts @@ -0,0 +1,8 @@ +export interface Contact { + id: number; + firstName: string; + lastName: string; + email: string; + street: string; + city: string; +} \ No newline at end of file diff --git a/src/app/contacts/view/view.component.css b/src/app/contacts/view/view.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/contacts/view/view.component.html b/src/app/contacts/view/view.component.html new file mode 100644 index 00000000..9e06f516 --- /dev/null +++ b/src/app/contacts/view/view.component.html @@ -0,0 +1,14 @@ +@if (this.contact === null) { +
+

+ Contact not available +

+
+} @else { +
+
+

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

+

Address: {{contact.street}}, {{contact.city}}

+

Email: {{contact.email}}

+
+
} \ No newline at end of file diff --git a/src/app/contacts/view/view.component.ts b/src/app/contacts/view/view.component.ts new file mode 100644 index 00000000..ff65a1b3 --- /dev/null +++ b/src/app/contacts/view/view.component.ts @@ -0,0 +1,17 @@ +import { Component, inject } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { ContactServiceService } from 'src/app/services/contact-service.service'; +import { Contact } from '../models/contact'; + +@Component({ + selector: 'app-view', + templateUrl: './view.component.html', + styleUrl: './view.component.css' +}) +export class ViewComponent { + contactService = inject(ContactServiceService) + route = inject(ActivatedRoute) + + id = this.route.snapshot.paramMap.get('id') + contact: Contact | null = this.contactService.getContactById(Number(this.id)) +} diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html index 7c5ec7a2..aed3259d 100644 --- a/src/app/layout/menu/menu.component.html +++ b/src/app/layout/menu/menu.component.html @@ -1,5 +1,5 @@

Menu

diff --git a/src/app/services/contact-service.service.ts b/src/app/services/contact-service.service.ts new file mode 100644 index 00000000..66fc4d0f --- /dev/null +++ b/src/app/services/contact-service.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { Contact } from '../contacts/models/contact'; +import { CONTACTS } from '../contacts/data/contacts'; + +@Injectable({ + providedIn: 'root' +}) +export class ContactServiceService { + 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) + if(!contact) { + return null + } + return contact + } + + public getAllContacts(): Contact[] { + return this.contacts + } + + public addContact(contact: Contact) { + this.currentId++ + this.contacts.push({...contact, id: this.currentId}) + } +} diff --git a/src/index.html b/src/index.html index b0e9832d..9c4b888c 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - AngularAddressBook + Adress Book From 4b44f4f6f909b262d877da6135922390453a19c9 Mon Sep 17 00:00:00 2001 From: Linda Do Date: Mon, 8 Sep 2025 12:36:59 +0200 Subject: [PATCH 2/2] extension --- src/app/app-routing.module.ts | 4 +++ src/app/contacts/edit/edit.component.html | 27 ++++++++++++++++++++- src/app/contacts/edit/edit.component.ts | 26 +++++++++++++++++++- src/app/contacts/view/view.component.html | 1 + src/app/services/contact-service.service.ts | 8 ++++++ 5 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1814da9f..92486a39 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { ListComponent } from './contacts/list/list.component'; import { AddComponent } from './contacts/add/add.component'; import { ViewComponent } from './contacts/view/view.component'; +import { EditComponent } from './contacts/edit/edit.component'; const routes: Routes = [ {path: "contacts", @@ -13,6 +14,9 @@ const routes: Routes = [ }, {path: "contacts/:id", component: ViewComponent + }, + {path: "contacts/edit/:id", + component: EditComponent } ]; diff --git a/src/app/contacts/edit/edit.component.html b/src/app/contacts/edit/edit.component.html index d1393d89..bc39d540 100644 --- a/src/app/contacts/edit/edit.component.html +++ b/src/app/contacts/edit/edit.component.html @@ -1 +1,26 @@ -

edit works!

+
+

Edit a contact

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/src/app/contacts/edit/edit.component.ts b/src/app/contacts/edit/edit.component.ts index 3d890bfc..b0829152 100644 --- a/src/app/contacts/edit/edit.component.ts +++ b/src/app/contacts/edit/edit.component.ts @@ -1,4 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { ContactServiceService } from 'src/app/services/contact-service.service'; @Component({ selector: 'app-edit', @@ -6,5 +9,26 @@ import { Component } from '@angular/core'; styleUrl: './edit.component.css' }) export class EditComponent { + contactForm: FormGroup + formBuilder = inject(FormBuilder) + contactService = inject(ContactServiceService) + router = inject(Router) + route = inject(ActivatedRoute) + id = this.route.snapshot.paramMap.get('id') + + constructor() { + this.contactForm = this.formBuilder.group({ + firstName: ["", Validators.required], + lastName: ["", Validators.required], + street: ["", Validators.required], + city: ["", Validators.required], + email: ["", Validators.required], + }) + } + + editContact() { + this.contactService.editContact(this.contactForm.value , Number(this.id)) + this.router.navigate(['contacts']) + } } diff --git a/src/app/contacts/view/view.component.html b/src/app/contacts/view/view.component.html index 9e06f516..2471c401 100644 --- a/src/app/contacts/view/view.component.html +++ b/src/app/contacts/view/view.component.html @@ -10,5 +10,6 @@

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

Address: {{contact.street}}, {{contact.city}}

Email: {{contact.email}}

+

Edit

} \ No newline at end of file diff --git a/src/app/services/contact-service.service.ts b/src/app/services/contact-service.service.ts index 66fc4d0f..ccfb08df 100644 --- a/src/app/services/contact-service.service.ts +++ b/src/app/services/contact-service.service.ts @@ -25,4 +25,12 @@ export class ContactServiceService { this.currentId++ this.contacts.push({...contact, id: this.currentId}) } + + public editContact(contact: Contact, id: number) { + console.log(contact) + console.log(id) + this.contacts = this.contacts.map(item => item.id === id ? contact : item) + console.log(this.contacts) + } + }