Vegard Stigen

src/app/Data/contacts.ts

@@ -0,0 +1,18 @@
+import { Contact } from '../models/contact';
+
+export const CONTACTS: Contact[] = [
+  {
+    id: 1,
+    firstName: 'person',
+    lastName: 'one',
+    street: '1.st street',
+    city: 'city',
+  },
+  {
+    id: 2,
+    firstName: 'person',
+    lastName: 'two',
+    street: '2.nd street',
+    city: 'town',
+  },
+];

src/app/app.module.ts

@@ -4,10 +4,23 @@ 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';
+import { ListComponent } from './contacts/list/list.component';
+import { AddComponent } from './contacts/add/add.component';
+import { EditComponent } from './contacts/edit/edit.component';
+import { ViewComponent } from './contacts/view/view.component';
+
+import { RouterModule } from '@angular/router';
+const routes = [
+  { path: 'contacts', component: ListComponent },
+  { path: 'contacts/new', component: AddComponent },
+  { path: 'contacts/view/:id', component: ViewComponent },
+  { path: 'contacts/edit/:id', component: EditComponent },
+];
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, ContactsModule, RouterModule.forRoot(routes)],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contacts/add/add.component.css

@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: 40vw;
+  flex-direction: column;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5em;
+}
+
+label {
+  font-weight: bold;
+}
+
+.actions {
+  display: flex;
+}
+
+.spacer {
+  flex: 1;
+}

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

@@ -0,0 +1,19 @@
+<h1>Create Contact</h1>
+<form [formGroup]="contactForm" (ngSubmit)="addContact()" class="form">
+  <label for="first-name" class="label">First name:</label>
+  <input id="first-name" formControlName="firstName" type="text" />
+
+  <label for="last-name" class="label">Last name:</label>
+  <input id="last-name" formControlName="lastName" type="text" />
+
+  <label for="street" class="label">Street:</label>
+  <input id="street" formControlName="street" type="text" />
+
+  <label for="city" class="label">City:</label>
+  <input id="city" formControlName="city" type="text" />
+
+  <div class="actions">
+    <div class="spacer"></div>
+    <button type="submit" [disabled]="contactForm.invalid">Create</button>
+  </div>
+</form>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComponent } from './add.component';
+
+describe('AddComponent', () => {
+  let component: AddComponent;
+  let fixture: ComponentFixture<AddComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from '../contacts.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+
+  contactForm: FormGroup;
+
+  constructor(
+    private readonly formBuilder: FormBuilder,
+    private readonly contactsService: 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.contactsService.addContact(newContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts']);
+  }
+}

src/app/contacts/contacts.module.ts

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

src/app/contacts/contacts.service.spec.ts

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

src/app/contacts/contacts.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Contact } from '../models/contact';
+import { CONTACTS } from '../Data/contacts';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+
+  public contacts: Contact[] = CONTACTS;
+  private nextId: number;
+
+  constructor() { 
+    this.nextId = this.contacts.length  + 1;
+  }
+
+  public addContact(contact: Contact): void {
+    contact.id = this.nextId++;
+    this.contacts.push(contact);
+
+  }
+
+  getContactById(id: number): Observable<Contact | undefined> {
+    const contact = this.contacts.find(c => c.id === id);
+    return of(contact);
+  }
+  public editContact(updatedContact: Contact): void {
+    const index = this.contacts.findIndex(c => c.id === updatedContact.id);
+    if (index !== -1) {
+      this.contacts[index] = updatedContact;
+    }
+  }
+}

src/app/contacts/edit/edit.component.css

@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: 40vw;
+  flex-direction: column;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5em;
+}
+
+label {
+  font-weight: bold;
+}
+
+.actions {
+  display: flex;
+}
+
+.spacer {
+  flex: 1;
+}

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

@@ -0,0 +1,27 @@
+<h1>Edit Contact</h1>
+<ng-container *ngIf="contact; else notFound">
+    <form [formGroup]="contactForm" (ngSubmit)="editContact()" class="form">
+    <label for="first-name" class="label">First name:</label>
+    <input id="first-name" formControlName="firstName" type="text" [(ngModel)]="firstNameValue" />
+
+    <label for="last-name" class="label">Last name:</label>
+    <input id="last-name" formControlName="lastName" type="text" [(ngModel)]="lastNameValue" />
+
+    <label for="street" class="label">Street:</label>
+    <input id="street" formControlName="street" type="text" [(ngModel)]="streetValue" />
+
+    <label for="city" class="label">City:</label>
+    <input id="city" formControlName="city" type="text" [(ngModel)]="cityValue" />
+
+    <div class="actions">
+        <div class="spacer"></div>
+        <button type="submit" [disabled]="contactForm.invalid">Update</button>
+    </div>
+    </form>
+</ng-container>
+
+
+<!-- if we don't find the a contact -->
+<ng-template #notFound>
+  <h1>Contact not found, nothing to edit!!</h1>
+</ng-template>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditComponent } from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,59 @@
+import { Component, input } from '@angular/core';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from '../contacts.service';
+import { FormGroup, FormBuilder, Validators, FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+
+  contactForm: FormGroup;
+  contactId: number | null = null;
+  contact: Contact | null = null;
+  firstNameValue: string = 'default';
+  lastNameValue: string = 'default';
+  streetValue: string = 'default';
+  cityValue: string = 'default';
+
+  constructor(
+    private readonly formBuilder: FormBuilder,
+    private readonly contactsService: ContactsService,
+    private readonly router: Router,
+    private route: ActivatedRoute
+  ) {
+    this.contactForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required]
+    });
+  }
+
+  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.contactsService.editContact(updatedContact);
+    this.contactForm.reset();
+    this.router.navigate([`/contacts/view/${this.contactId}`]);
+  }
+
+  ngOnInit() {
+    this.contactId = Number(this.route.snapshot.paramMap.get('id'));
+    this.contactsService.getContactById(this.contactId).subscribe(contact => {
+      this.contact = contact!;
+    });
+    this.firstNameValue = this.contact?.firstName ?? 'default';
+    this.lastNameValue = this.contact?.lastName ?? 'default';
+    this.streetValue = this.contact?.street ?? 'default';
+    this.cityValue = this.contact?.city ?? 'default';
+  }
+}

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

@@ -0,0 +1,11 @@
+:host {
+  padding: 0.5em;
+  width: 400px;
+}
+
+.contact {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ddd;
+  padding: 0.5em 0;
+}

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

@@ -0,0 +1,14 @@
+<h1>Contacts</h1>
+<!-- if we have contacts -->
+<ng-container *ngIf="contacts.length > 0; else notFound">
+    <div class="contact-container">
+        <div *ngFor="let contact of contacts" class="contact">
+            <span>{{contact.firstName}} {{contact.lastName}}</span>
+            <a routerLink="/contacts/view/{{ contact.id }}">View</a>
+        </div>
+    </div>
+</ng-container>
+<!-- if we don't have contacts -->
+<ng-template #notFound>
+  <div>No contacts yet</div>
+</ng-template>