Johan Reitan

src/app/app-routing.module.ts

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

src/app/app.module.ts

@@ -4,10 +4,18 @@ 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,36 @@
+<div>
+
+<h2>Add Contact</h2>
+<form [formGroup]="contactForm" (ngSubmit)="addContact()" class="form-group">
+    <div>
+        <label for="firstname" class="form-control">Firstname:</label>
+        <input 
+          type="text"
+          id="firstname"
+          formControlName="firstname"
+          class="form-control" />
+    </div>
+
+    <div>
+        <label for="lastname" class="form-control">Lastname:</label>
+        <input 
+          type="text"
+          id="lastname"
+          formControlName="lastname"
+          class="form-control" />
+    </div>
+
+    <div>
+        <label for="email" class="form-control">Email:</label>
+        <input 
+          type="text"
+          id="email"
+          formControlName="email"
+          class="form-control" />
+    </div>
+
+    <button type="submit" [disabled]="contactForm.invalid" class="btn btn-success">
+        Add Contact yeah no
+    </button>
+</form>
+</div>

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,38 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ContactsService } from '../contacts-service';
+import { Contact } from '../models/contact';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-add',
+  standalone: false,
+  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],
+      email: ['', Validators.required],
+    });
+  }
+
+  addContact() : void {
+    const newContact : Contact = {
+      id: this.contactsService.getLastId() + 1,
+      firstname: this.contactForm.value.firstname,
+      lastname: this.contactForm.value.lastname,
+      email: this.contactForm.value.email,
+    };
+    this.contactsService.AddContact(newContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts'])
+  }
+}

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 { UpdateComponent } from './update/update.component';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    UpdateComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    UpdateComponent
+  ]
+})
+export class ContactsModule { }

src/app/contacts/contacts-service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Contact } from './models/contact';
+import { CONTACTS } from '../data/contacts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  public contacts: Contact[] = CONTACTS;
+
+  public updateContact(updatedContact : Contact) : void {
+    this.contacts[this.contacts.findIndex(c => c.id === updatedContact.id)] = updatedContact;
+  }
+
+  public getLastId() : number {
+    return Number(this.contacts.at(this.contacts.length - 1)?.id);
+  }
+
+  public AddContact(contact : Contact) : void {
+    this.contacts.push(contact);
+  }
+
+  public getContactById(id: number | null) : Contact | null {
+    const contact = this.contacts.find(c => c.id === id);
+    return contact ? contact : null;
+  }
+
+}

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

@@ -0,0 +1,13 @@
+<h1>Contacts list page</h1>
+<table>
+    <tr>
+        <th>Firstname</th>
+        <th>Lastname</th>
+    </tr>
+
+    <tr *ngFor="let contact of contacts">
+        <td>{{contact.firstname}}</td>
+        <td>{{contact.lastname}}</td>
+        <td><a [routerLink]="['/contacts', contact.id]">Details</a></td>
+    </tr>
+</table>

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 { RouterLink } from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-list',
+  standalone: false,
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent {
+  contacts: Contact[];
+
+  constructor(private readonly contactsService: ContactsService) {
+    this.contacts = this.contactsService.contacts;
+  }
+}

src/app/contacts/models/contact.ts

@@ -0,0 +1,6 @@
+export interface Contact {
+    id: number | null;
+    firstname: string;
+    lastname: string;
+    email: string;
+}

src/app/contacts/update/update.component.html

@@ -0,0 +1,36 @@
+<div>
+
+<h2>Update Contact</h2>
+<form [formGroup]="contactForm" (ngSubmit)="updateContact()" class="form-group">
+    <div>
+        <label for="firstname" class="form-control">Firstname:</label>
+        <input 
+          type="text"
+          id="firstname"
+          formControlName="firstname"
+          class="form-control" />
+    </div>
+
+    <div>
+        <label for="lastname" class="form-control">Lastname:</label>
+        <input 
+          type="text"
+          id="lastname"
+          formControlName="lastname"
+          class="form-control" />
+    </div>
+
+    <div>
+        <label for="email" class="form-control">Email:</label>
+        <input 
+          type="text"
+          id="email"
+          formControlName="email"
+          class="form-control" />
+    </div>
+
+    <button type="submit" [disabled]="contactForm.invalid" class="btn btn-success">
+        Update Contact
+    </button>
+</form>
+</div>

src/app/contacts/update/update.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Contact } from '../models/contact';
+import { ContactsService } from '../contacts-service';
+import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-update',
+  standalone: false,
+  templateUrl: './update.component.html',
+  styleUrl: './update.component.css'
+})
+export class UpdateComponent {
+  id: string | null;
+  contact: Contact | null;
+
+  contactForm : FormGroup;
+  constructor(
+    private readonly formBuilder : FormBuilder,
+    private readonly contactsService : ContactsService,
+    private readonly router : Router,
+    private readonly route: ActivatedRoute
+  ) {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.contact = this.contactsService.getContactById(Number(this.id));
+
+    this.contactForm = this.formBuilder.group({
+      firstname: [this.contact?.firstname, Validators.required],
+      lastname: [this.contact?.lastname, Validators.required],
+      email: [this.contact?.email, Validators.required],
+    });
+  }
+
+  updateContact() : void {
+    const newContact : Contact = {
+      id: Number(this.id),
+      firstname: this.contactForm.value.firstname,
+      lastname: this.contactForm.value.lastname,
+      email: this.contactForm.value.email,
+    };
+    this.contactsService.updateContact(newContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts'])
+  }
+
+}
+
+/*
+
+id: string | null;
+  contact: Contact | null;
+
+  constructor(private readonly contactsService : ContactsService, private readonly route: ActivatedRoute) {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.contact = this.contactsService.getContactById(Number(this.id));
+  }
+
+
+*/

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

@@ -0,0 +1,9 @@
+<div>
+
+<p>{{contact?.id}}</p>
+<p>{{contact?.firstname}}</p>
+<p>{{contact?.lastname}}</p>
+<p>{{contact?.email}}</p>
+
+<a [routerLink]="['/contacts', contact?.id, 'update']">Update</a>
+</div>

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

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ContactsModule } from '../contacts-module';
+import { ActivatedRoute } from '@angular/router';
+import { Contact } from '../models/contact';
+import { ContactsService } from '../contacts-service';
+import { RouterLink } from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-view',
+  standalone: false,
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+  id: string | null;
+  contact: Contact | null;
+
+  constructor(private readonly contactsService : ContactsService, private readonly route: ActivatedRoute) {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.contact = this.contactsService.getContactById(Number(this.id));
+  }
+
+}

src/app/data/contacts.ts

@@ -0,0 +1,10 @@
+import { Contact } from "../contacts/models/contact";
+
+export const CONTACTS: Contact[] = [
+    {
+        id: 1,
+        firstname: 'Johan',
+        lastname: 'Reitan',
+        email: 'johanreitan@email.com',
+    },
+]