Hans Jakob Håland

angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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 { 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.html

@@ -1,4 +1,4 @@
-<app-menu></app-menu>
+<app-menu/>
 <div class="page">
-  <router-outlet></router-outlet>
+  <router-outlet/>
 </div>

src/app/app.module.ts

@@ -4,10 +4,16 @@ 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, 
+    LayoutModule,
+    ContactsModule
+  ],
   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,31 @@
+<h1>Create Contact</h1>
+<form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+        <label for="name">Name:</label>
+        <input 
+            type="text" 
+            id="name"
+            formControlName="name"
+        />
+    </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>        
+    <div class="actions">
+        <div class="spacer"></div>
+        <button type="submit" [disabled]="contactForm.invalid">Add Contact</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,37 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, Form } from '@angular/forms';
+import { ContactsService } from 'src/app/services/contacts.service';
+import { Contact } from 'src/app/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 contactService: ContactsService,
+    private readonly router: Router
+  ) {
+    this.contactForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required],
+    });
+  }
+
+  addContact(): void {
+    const newContact: Contact = {
+      id: 0,
+      name: this.contactForm.value.name,
+      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,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ListComponent } from './list/list.component';
+import { AddComponent } from './add/add.component';
+import { ViewComponent } from './view/view.component';
+import { EditComponent } from './edit/edit.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [ListComponent, AddComponent, ViewComponent, EditComponent],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  exports: [AddComponent, ListComponent, ViewComponent, EditComponent],
+})
+export class ContactsModule { }

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,35 @@
+@if (contact) {
+    <h1>Edit Contact</h1>
+    <form [formGroup]='contactForm' (ngSubmit)="editContact()">
+        <div>
+            <label for="name">Name:</label>
+            <input 
+                type="text" 
+                id="name"
+                formControlName="name"
+            />
+        </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>        
+        <div class="actions">
+            <div class="spacer"></div>
+            <button type="submit" [disabled]="contactForm.invalid">Save Changes</button>
+        </div>
+    </form>
+} @else {
+    <p>Contact does not exist</p>
+}

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 } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ContactsService } from 'src/app/services/contacts.service';
+import { Contact } from 'src/app/models/contact';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-edit',
+  standalone: false,
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+  contact: Contact | null = null;
+  contactId: number | null = null;
+  contactForm: FormGroup;
+
+  constructor(
+    private readonly formBuilder: FormBuilder,
+    private readonly contactService: ContactsService,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {
+      this.contactForm = this.formBuilder.group({
+      name: ['', 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) => {
+      this.contact = data!;
+      console.log(this.contact)
+      if (this.contact !== null && this.contact !== undefined) {
+        this.contactForm.patchValue({
+          name: this.contact.name,
+          street: this.contact.street,
+          city: this.contact.city,
+        });
+      } 
+    });
+  }
+
+  editContact(): void {
+    if (!this.contactId) return;
+
+    const editContact: Contact = {
+      id: this.contactId,
+      name: this.contactForm.value.name,
+      street: this.contactForm.value.street,
+      city: this.contactForm.value.city,
+    };
+    this.contactService.EditContact(editContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts']);
+  }
+}

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,10 @@
+<h2>Contacts list</h2>
+<div class="contact-container">
+    @for (contact of contacts; track contact.id ) {
+        <div class="contact">
+            <span>{{contact.name}}</span>
+            <a routerLink='/contacts/{{ contact.id }}'>View</a>
+            <a routerLink='/contacts/edit/{{ contact.id }}'>Edit</a>
+        </div>
+    }
+</div>

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

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

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

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Component } from '@angular/core';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from 'src/app/services/contacts.service';
+
+@Component({
+  selector: 'app-list',
+  standalone: false,
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contacts: Contact[] = [];
+  constructor(private readonly contactsService: ContactsService) {
+    this.contacts = this.contactsService.contacts;
+  }
+}