Elisabeth Røysland

package.json

@@ -17,7 +17,7 @@
     "@angular/forms": "^18.2.6",
     "@angular/platform-browser": "^18.2.6",
     "@angular/platform-browser-dynamic": "^18.2.6",
-    "@angular/router": "^18.2.6",
+    "@angular/router": "^18.2.13",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"
@@ -35,4 +35,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~5.4.5"
   }
-}
+}

src/app/app-routing.module.ts

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

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  standalone: false,
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {

src/app/app.module.ts

@@ -4,10 +4,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
+import { ContactsModule } from './contacts/contacts.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, ContactsModule, LayoutModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

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

@@ -0,0 +1,48 @@
+<div>
+  <h2>Add Contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()" class="form-group">
+    <div>
+      <label for="firstname" class="form-control">First Name: </label>
+      <input
+        type="text"
+        id="firstname"
+        formControlName="firstname"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="lastname" class="form-control">Last Name: </label>
+      <input
+        type="text"
+        id="lastname"
+        formControlName="lastname"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="street" class="form-control">Street: </label>
+      <input
+        type="text"
+        id="street"
+        formControlName="street"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="city" class="form-control">City: </label>
+      <input
+        type="text"
+        id="city"
+        formControlName="city"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <button type="submit" [disabled]="contactForm.invalid" class="btn btn-success">
+      Add Contact
+    </button>
+  </form>
+</div>

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+
+import { Contact } from '../../models/contact'
+import { ContactsService } from '../contacts.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-add',
+  standalone: true,
+  imports: [CommonModule, RouterModule, ReactiveFormsModule],
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  constructor(
+    private readonly formBuilder: FormBuilder,
+    private readonly contactService: ContactsService,
+    private readonly router: Router
+  ) {
+    this.contactForm = this.formBuilder.group({
+      firstname: ['', Validators.required],
+      lastname: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required],
+    });
+  }
+  addContact(): void {
+    const newContact: Contact = {
+      id: 0,
+      firstname: this.contactForm.value.firstname,
+      lastname: this.contactForm.value.lastname,
+      street: this.contactForm.value.street,
+      city: this.contactForm.value.city,
+    };
+    this.contactService.AddContact(newContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts']);
+  }
+}

src/app/contacts/contacts.module.ts

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

src/app/contacts/contacts.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { Contact } from '../models/contact';
+import { CONTACTS } from '../data/contacts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  public contacts: Contact[] = CONTACTS;
+
+  public AddContact(contact: Contact): void {
+    this.contacts.push(contact);
+  }
+
+  public EditContact(updatedContact: Contact): void {
+    const index = this.contacts.findIndex(c => c.id === updatedContact.id);
+    if (index !== -1) {
+      this.contacts[index] = updatedContact;
+    }
+  }
+
+  GetContactById(id: number): Observable<Contact | undefined> {
+    const contact = this.contacts.find((c) => c.id === id);
+    return of(contact);
+  }
+}

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

@@ -0,0 +1,54 @@
+<div *ngIf="contact; else loading">
+  <div>
+  <h2>Edit Contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="editContact()" class="form-group">
+    <div>
+      <label for="firstname" class="form-control">First Name: </label>
+      <input
+        type="text"
+        id="firstname"
+        formControlName="firstname"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="lastname" class="form-control">Last Name: </label>
+      <input
+        type="text"
+        id="lastname"
+        formControlName="lastname"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="street" class="form-control">Street: </label>
+      <input
+        type="text"
+        id="street"
+        formControlName="street"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <div>
+      <label for="city" class="form-control">City: </label>
+      <input
+        type="text"
+        id="city"
+        formControlName="city"
+        class="form-control"
+      />
+    </div>
+    <br>
+    <button type="submit" [disabled]="contactForm.invalid" class="btn btn-success">
+      Save Changes
+    </button>
+  </form>
+</div>
+</div>
+
+<ng-template #loading>
+  <p>This contact does not exist</p>
+</ng-template>

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

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router, RouterModule, ActivatedRoute } from '@angular/router';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from '../contacts.service';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit',
+  standalone: true,
+  imports: [CommonModule, RouterModule, ReactiveFormsModule],
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent implements OnInit {
+  contact: Contact | null = null;
+  contactId: number | null = null;
+  contactForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private contactService: ContactsService,
+
+    private readonly formBuilder: FormBuilder,
+    private readonly router: Router
+  ) {
+    this.contactForm = this.formBuilder.group({
+        firstname: ['', Validators.required],
+        lastname: ['', Validators.required],
+        street: ['', Validators.required],
+        city: ['', Validators.required],
+      });
+  }
+
+  ngOnInit(): void {
+    this.contactId = Number(this.route.snapshot.paramMap.get('id'));
+    this.contactService.GetContactById(this.contactId).subscribe((data) => {
+      if (data) {
+            this.contact = data;
+            this.contactForm.patchValue({
+              firstname: data.firstname,
+              lastname: data.lastname,
+              street: data.street,
+              city: data.city
+            });
+      }
+    });
+  }
+
+  editContact(): void {
+    const updatedContact: Contact = {
+      id: this.contactId,
+      firstname: this.contactForm.value.firstname,
+      lastname: this.contactForm.value.lastname,
+      street: this.contactForm.value.street,
+      city: this.contactForm.value.city,
+    };
+    this.contactService.EditContact(updatedContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts/', this.contactId]);
+  }
+}

src/app/contacts/list/list.component.css

@@ -0,0 +1,10 @@
+.contact {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.view {
+  margin-left: 150px;
+}

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

@@ -0,0 +1,8 @@
+<h2>Contacts</h2>
+<div *ngFor="let contact of contacts; let isLast = last">
+  <div class="contact">
+      <p class="name">{{ contact.firstname }} {{contact.lastname}}</p>
+      <a routerLink="/contacts/{{ contact.id }}" class="view">View</a>
+  </div>
+  <hr *ngIf="!isLast">
+</div>

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Contact } from '../../models/contact'
+import { ContactsService } from '../contacts.service';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-list',
+  standalone: true,
+  imports: [ CommonModule, RouterModule],
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contacts: Contact[] = [];
+  constructor(private readonly contactService: ContactsService){
+    this.contacts = this.contactService.contacts;
+  }
+}

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

@@ -0,0 +1,9 @@
+<div *ngIf="contact; else loading">
+  <h2>{{ contact.firstname }} {{ contact.lastname }}</h2>
+  <p>{{ contact.street }} {{ contact.city }}</p>
+  <a routerLink="/contacts/{{ contact.id }}/edit" class="view">Edit</a>
+</div>
+
+<ng-template #loading>
+  <p>Loading contact details...</p>
+</ng-template>