Stian Forren

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/:id/edit', component: EditComponent},
+];
 
 @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 { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule,CommonModule, LayoutModule, ContactsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/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.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Contact } from './contacts/models/contact';
+import { CONTACTS } from './contacts/data/contacts';
+
+@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(c => c.id === id);
+    if (!contact){
+      return null;
+    }
+    return contact;
+  }
+
+  public inContacts(id:number){
+    return (this.GetContactById(id) !== null)
+  }
+
+  public EditContact(c: Contact) {
+    const currentContact = this.GetContactById(c.id)
+    if (currentContact !== null) {
+      currentContact!.name = c.name;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+<p>add works!</p>
+<div>
+  <h2>Add Contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+      <label for="name">Name:</label>
+      <input type="text" id="name" formControlName="name" />
+    </div>
+
+    <button type="submit" [disabled]="contactForm.invalid">Add Contact</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,34 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ContactsService } from 'src/app/contacts.service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+
+  contactForm: FormGroup;
+  cservice: ContactsService;
+  constructor(
+    private formBuilder: FormBuilder,
+    private readonly contactService: ContactsService
+  ) {
+    this.contactForm = this.formBuilder.group({
+      name: ['', Validators.required]
+    });
+    this.cservice = this.contactService;
+  }
+
+  addContact(): void {
+    const newContact: Contact = {
+    id: 0,
+    name: this.contactForm.value.name
+    };
+    this.cservice.AddContact(newContact);
+    this.contactForm.reset();
+  };
+
+}

src/app/contacts/contacts.module.ts

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

src/app/contacts/data/contacts.ts

@@ -0,0 +1,9 @@
+import { Contact } from "../models/contact";
+
+
+export const CONTACTS: Contact[] = [
+    {
+        id : 1,
+        name: 'Lola'
+    }
+];

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

@@ -0,0 +1,14 @@
+
+<div *ngIf="inContacts()">
+  <h2>Edit Contact</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="EditContact()">
+    <div>
+      <label for="name">Name:</label>
+      <input type="text" id="name" formControlName="name" />
+    </div>
+
+    <button type="submit" [disabled]="contactForm.invalid">Edit Contact</button>
+  </form>
+</div>
+
+<div *ngIf="!inContacts()">Contact not in your contact list!</div>

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,44 @@
+import { Component } from '@angular/core';
+import { Contact } from '../models/contact';
+import { ContactsService } from 'src/app/contacts.service';
+import { ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+  contact : Contact | null = null;
+  contactForm: FormGroup;
+  cservice: ContactsService;
+
+ constructor(
+    private readonly contactService : ContactsService,
+    private readonly route: ActivatedRoute,
+    private readonly formBuilder: FormBuilder,
+  ) {
+    this.contact = this.contactService.GetContactById(
+      Number(this.route.snapshot.paramMap.get('id'))
+    );
+    this.contactForm = this.formBuilder.group({
+      name: [this.contact?.name, Validators.required]
+  });
+  this.cservice = contactService;
+  }
+
+  EditContact() : void {
+    const newContact: Contact = {
+    id: this.contact!.id,
+    name: this.contactForm.value.name
+    };
+    this.cservice.EditContact(newContact);
+    this.contactForm.reset();
+  }
+
+  inContacts() : boolean {
+    if (this.contact === null) {return false}
+    return this.cservice.inContacts(this.contact!.id!);
+  }
+}

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

@@ -0,0 +1,22 @@
+<p>list works!</p>
+
+<ul>
+    <li *ngFor="let c of contacts">
+        <span id="item{{c.id}}">{{ c.name }}</span>
+    </li>
+</ul>
+
+<table>
+  <thead>
+    <tr>
+      <td>name</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let c of contacts">
+      <td>
+        <a routerLink="/contacts/{{ c.id }}">{{ c.name }}</a>
+      </td>
+    </tr>
+  </tbody>
+</table>

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,16 @@
+import { Component } from '@angular/core';
+import { Contact } from '../models/contact';
+import { ContactsService } from 'src/app/contacts.service';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contacts: Contact[] = [];
+
+  constructor(private readonly contactsService: ContactsService) {
+    this.contacts = contactsService.contacts;
+  }
+}

src/app/contacts/models/contact.ts

@@ -0,0 +1,4 @@
+export interface Contact {
+    id: number | null;
+    name: string;
+}

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

@@ -0,0 +1,7 @@
+<p>view works!</p>
+<div *ngIf="contact !== null">
+  <h2>
+    {{ contact.name }}
+  </h2>
+    <li><a routerLink="/contacts/{{contact.id}}/edit">Edit contact</a></li>
+</div>

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

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