Hanna Adenholm

src/app/app-routing.module.ts

@@ -1,7 +1,28 @@
 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';
+import { EditComponent } from './contacts/edit/edit.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: "contacts",
+    component: ListComponent,
+  },
+  {
+    path: "contacts/add",
+    component: AddComponent,
+  },
+  {
+    path: "contacts/:id",
+    component: ViewComponent,
+  },
+   {
+    path: "contacts/edit/:id",
+    component: EditComponent,
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

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: string = 'Adress book';
 }

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 {}

src/app/contacts/add/add.component.html

@@ -0,0 +1,22 @@
+<div>
+  <h2>Create new Contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+      <label for="firstName">First name</label>
+      <input type="text" id="firstName" formControlName="firstName" />
+    </div>
+    <div>
+      <label for="lastName">Last name</label>
+      <input type="text" id="lastName" formControlName="lastName" />
+    </div>
+    <div>
+      <label for="street">Street</label>
+      <input type="text" id="street" formControlName="street" />
+    </div>
+        <div>
+      <label for="city">City</label>
+      <input type="text" id="city" formControlName="city" />
+    </div>
+    <button type="submit">Add Contact</button>
+  </form>
+</div>

src/app/contacts/add/add.component.ts

@@ -0,0 +1,30 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ContactService } from 'src/app/services/contact.service';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  formBuilder = inject(FormBuilder);
+  contactService = inject(ContactService)
+  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(['contacts'])
+  }
+}

src/app/contacts/contacts.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddComponent } from './add/add.component';
+import { EditComponent } from './edit/edit.component';
+import { ListComponent } from './list/list.component';
+import { ViewComponent } from './view/view.component';
+import { AppRoutingModule } from "src/app/app-routing.module";
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    AddComponent,
+    EditComponent,
+    ListComponent,
+    ViewComponent
+  ],
+  imports: [
+    CommonModule,
+    AppRoutingModule,
+    RouterModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    AddComponent,
+    EditComponent,
+    ListComponent,
+    ViewComponent
+  ]
+})
+export class ContactsModule { }

src/app/contacts/data/contacts.ts

@@ -0,0 +1,25 @@
+import { Contact } from "../models/contact";
+
+export const CONTACTS: Contact[] = [
+    {
+        id: 1,
+        firstName: "Hanna",
+        lastName: "Adenholm",
+        street: "Gibraltargatan 2",
+        city: "Svanesund"
+    },
+    {
+        id: 2,
+        firstName: "Erik",
+        lastName: "Persson",
+        street: "Fräknegatan 1",
+        city: "Kalmar"
+    },
+    {
+        id: 3,
+        firstName: "Stina",
+        lastName: "Hansson",
+        street: "Kungsgatan 15",
+        city: "Lund"
+    },
+]

src/app/contacts/edit/edit.component.html

@@ -0,0 +1,26 @@
+<div>
+    @if(!contact){
+        <p><strong>Could not find that contact</strong></p>
+    } @else {
+        <h2>Edit Contact</h2>
+        <form [formGroup]="contactForm" (ngSubmit)="editContact()">
+          <div>
+            <label for="firstName">First name</label>
+            <input type="text" id="firstName" formControlName="firstName" />
+          </div>
+          <div>
+            <label for="lastName">Last name</label>
+            <input type="text" id="lastName" formControlName="lastName" />
+          </div>
+          <div>
+            <label for="street">Street</label>
+            <input type="text" id="street" formControlName="street" />
+          </div>
+              <div>
+            <label for="city">City</label>
+            <input type="text" id="city" formControlName="city" />
+          </div>
+          <button type="submit">Save changes</button>
+        </form>
+    }
+</div>

src/app/contacts/edit/edit.component.ts

@@ -0,0 +1,37 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContactService } from 'src/app/services/contact.service';
+import { Contact } from '../models/contact';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+  contactService = inject(ContactService)
+  route = inject(ActivatedRoute)
+
+  id = this.route.snapshot.paramMap.get('id')
+  contact: Contact | null = this.contactService.getContactById(Number(this.id))
+
+  contactForm: FormGroup;
+  formBuilder = inject(FormBuilder);
+  router = inject(Router)
+
+  constructor() {
+    this.contactForm = this.formBuilder.group({
+      firstName: [this.contact?.firstName, Validators.required],
+      lastName: [this.contact?.lastName, Validators.required],
+      street: [this.contact?.street, Validators.required],
+      city: [this.contact?.city, Validators.required],
+    })
+  }
+
+  editContact() {
+    const editedContact = this.contactForm.value
+    this.contactService.editContact({ ...editedContact, id: this.contact?.id })
+    this.router.navigate([`contacts/${this.contact?.id}`])
+  }
+}

src/app/contacts/list/list.component.html

@@ -0,0 +1,7 @@
+<h1>Contacts</h1>
+<ul>
+    @for (contact of contacts; track contact) {
+        <li>{{contact.firstName}} {{contact.lastName}}</li>
+        <a routerLink="/contacts/{{contact.id}}">View</a>
+    }
+</ul>

src/app/contacts/list/list.component.ts

@@ -0,0 +1,13 @@
+import { Component, inject } from '@angular/core';
+import { ContactService } from 'src/app/services/contact.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contactService = inject(ContactService)
+  contacts: Contact[] = this.contactService.getAllContacts()
+}

src/app/contacts/models/contact.ts

@@ -0,0 +1,7 @@
+export interface Contact {
+    id: number;
+    firstName: string;
+    lastName: string;
+    street: string;
+    city: string;
+}

src/app/contacts/view/view.component.html

@@ -0,0 +1,12 @@
+@if (this.contact===null) {
+    <div>
+        <p><strong>Contact not available</strong></p>
+    </div>
+} @else {
+    <div>
+        <h3>{{contact.firstName}} {{contact.lastName}}</h3>
+        <p>Street: {{contact.street}}</p>
+        <p>City: {{contact.city}}</p>
+        <a routerLink="/contacts/edit/{{contact.id}}"><button>Edit</button></a>
+    </div>
+}

src/app/contacts/view/view.component.ts

@@ -0,0 +1,17 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContactService } from 'src/app/services/contact.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+  contactService = inject(ContactService)
+  route = inject(ActivatedRoute)
+
+  id = this.route.snapshot.paramMap.get('id')
+  contact: Contact | null = this.contactService.getContactById(Number(this.id))
+}

src/app/layout/menu/menu.component.html

@@ -1,5 +1,5 @@
 <h2>Menu</h2>
 <ul>
-  <li><a>Contacts list</a></li>
-  <li><a>Add new contact</a></li>
+  <li><a routerLink="/contacts">Contacts list</a></li>
+  <li><a routerLink="/contacts/add">Add new contact</a></li>
 </ul>

src/app/services/contact.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ContactService } from './contact.service';
+
+describe('ContactService', () => {
+  let service: ContactService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ContactService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/contact.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Contact } from '../contacts/models/contact';
+import { CONTACTS } from '../contacts/data/contacts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactService {
+  private contacts: Contact[] = CONTACTS
+  private currentId: number = this.contacts.length
+
+  public getContactById(id: number | null): Contact | null {
+    const contact = this.contacts.find((cont) => cont.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 })
+  }
+
+  public editContact(contact: Contact) {
+    let indexToUpdate = this.contacts.findIndex(item => item.id === contact.id);
+    this.contacts[indexToUpdate] = contact;
+  }
+}