Ingeborg Brommeland Austeid

angular.json

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

src/app/app-routing.module.ts

@@ -1,7 +1,17 @@
-import { NgModule } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ContactListComponent } from './contacts/contact-list/contact-list.component';
+import { ContactFormComponent } from './contacts/contact-form/contact-form.component';
+import { ContactViewComponent } from './contacts/contact-view/contact-view.component';
+import { EditFormComponent } from './contacts/edit-form/edit-form.component';
 
-const routes: Routes = [];
+
+const routes: Routes = [
+  {path: '', component:ContactListComponent},
+  {path: 'contacts/add', component:ContactFormComponent},
+  {path: 'contacts/:id', component:ContactViewComponent},
+  {path: 'contacts/edit/:id', component:EditFormComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

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 { ContactsModule } from './contacts/contacts.module';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, ContactsModule, RouterModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contacts/contact-form/contact-form.component.css

@@ -0,0 +1,26 @@
+: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/contact-form/contact-form.component.html

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

src/app/contacts/contact-form/contact-form.component.spec.ts

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

src/app/contacts/contact-form/contact-form.component.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ContactsService } from '../contacts.service';
+import { Contact } from '../models/contact';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-contact-form',
+  templateUrl: './contact-form.component.html',
+  styleUrl: './contact-form.component.css'
+})
+export class ContactFormComponent {
+  contactForm: FormGroup;
+  cservice: ContactsService;
+
+  constructor(private formbuilder: FormBuilder, private service: ContactsService, private router: Router){
+    this.contactForm = this.formbuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required]
+    });
+    this.cservice = this.service;
+  }
+
+  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.cservice.AddContact(newContact);
+
+    this.contactForm.reset();
+
+    this.router.navigate([""])
+  }
+}

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

@@ -0,0 +1,17 @@
+tr, td {
+    border: 1px solid black;
+    padding:1rem;
+}
+
+: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/contact-list/contact-list.component.html

@@ -0,0 +1,10 @@
+<h1>Contacts</h1>
+
+<div class="contact-container">
+  <div class="contact">
+    <span *ngFor="let c of contacts"
+      >{{ c.firstName }} {{ c.lastName }}
+      <button routerLink="/contacts/{{ c.id }}">View</button>
+      </span>
+  </div>
+</div>

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

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

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

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

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

@@ -0,0 +1,5 @@
+<ng-container *ngIf="contact !== null">
+    <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
+    <p>{{ contact.street }}, {{ contact.city }}</p>
+    <button routerLink="/contacts/edit/{{contact.id}}">Edit Contact</button>
+  </ng-container>

src/app/contacts/contact-view/contact-view.component.spec.ts

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

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

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

src/app/contacts/contacts.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { ContactFormComponent } from './contact-form/contact-form.component';
+import { ContactListComponent } from './contact-list/contact-list.component';
+import { ContactViewComponent } from './contact-view/contact-view.component';
+import { EditFormComponent } from './edit-form/edit-form.component';
+
+
+@NgModule({
+  declarations: [ContactFormComponent, ContactListComponent, ContactViewComponent, EditFormComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
+  exports: [ContactFormComponent, ContactListComponent, ContactViewComponent, EditFormComponent]
+})
+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,36 @@
+import { Injectable } from '@angular/core';
+import { CONTACTS } from '../data/contacts';
+import { Contact } from './models/contact';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+
+  public contacts: Contact[] = CONTACTS;
+  public AddContact(c:Contact)
+  {
+    c.id = this.contacts.length+1;
+    this.contacts.push(c);
+  }
+
+  public GetContactById(id:number | null)
+  {
+    const contact = this.contacts.find((contact) => contact.id === id);
+    if(!contact){
+      return null;
+    }
+    return contact;
+  }
+
+  public UpdateContact(editContact: Contact)
+  {
+    //find index for contact with matching id, and update content at this index with the edited object.
+    const contactIndex = this.contacts.findIndex((contact) => contact.id == editContact.id)
+
+    if(contactIndex !== -1){
+      this.contacts[contactIndex] = editContact;
+    }
+    return "Contact could not be edited!"
+  }
+}

src/app/contacts/edit-form/edit-form.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;
+  }