mathias handeland

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 { AddComponent } from './contacts/add/add.component';
+import { ListComponent } from './contacts/list/list.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>
 <div class="page">
-  <router-outlet></router-outlet>
+<router-outlet></router-outlet>
 </div>

src/app/app.module.ts

@@ -4,10 +4,13 @@ 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, ContactsModule, LayoutModule],
+  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

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

@@ -0,0 +1,33 @@
+h2 {
+  font-size: 2em;
+}
+
+form div {
+  margin-bottom: 1em;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  margin-bottom: 0.25em;
+  font-weight: bold;
+}
+
+input[type="text"] {
+  padding: 0.5em;
+  font-size: 1em;
+}
+
+button {
+  padding: 0.5em 1em;
+  font-size: 1em;
+  font-weight: bold;
+  color: #fff;
+  background-color: #054992;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #999;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,22 @@
+<div>
+    <h2>Add New Contact</h2>
+    <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+        <div>
+            <label for="firstName">First Name:</label>
+            <input type="text" id="firstName" formControlName="firstName" />
+        </div>
+        <div>
+            <label for="lastName">Last Name:</label>
+            <input type="text" id="lastName" formControlName="lastName" />
+        </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>
+        <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,43 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from '../contacts.service';
+
+@Component({
+  selector: 'app-add',
+  standalone: false,
+  templateUrl: './add.component.html',
+  styleUrls: ['./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() {
+    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,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddComponent } from './add/add.component';
+import { ListComponent } from './list/list.component';
+import { ViewComponent } from './view/view.component';
+import { EditComponent } from './edit/edit.component';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [AddComponent, ListComponent, ViewComponent, EditComponent],
+  imports: [
+    CommonModule,
+    RouterModule,
+    ReactiveFormsModule
+  ],
+  exports: [AddComponent, ListComponent, ViewComponent, EditComponent]
+})
+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';
+import { of, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  public contacts: Contact[] = CONTACTS;
+
+  public AddContact(contact: Contact): void {
+    this.contacts.push(contact);
+  }
+
+  public GetContactById(id: number): Observable<Contact | undefined> {
+    const contact = this.contacts.find(contact => contact.id === id);
+    return of(contact);
+  }
+
+  public updateContact(updatedContact: Contact): Observable<void> {
+    const index = this.contacts.findIndex(contact => contact.id === updatedContact.id);
+    if (index !== -1) {
+      this.contacts[index] = updatedContact;
+    }
+    return of(undefined);
+  }
+}

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

@@ -0,0 +1,33 @@
+h2 {
+  font-size: 2em;
+}
+
+form div {
+  margin-bottom: 1em;
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  margin-bottom: 0.25em;
+  font-weight: bold;
+}
+
+input[type="text"] {
+  padding: 0.5em;
+  font-size: 1em;
+}
+
+button {
+  padding: 0.5em 1em;
+  font-size: 1em;
+  font-weight: bold;
+  color: #fff;
+  background-color: #054992;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: #999;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,22 @@
+<div>
+    <h2>Edit Contact</h2>
+    <form [formGroup]="contactForm" (ngSubmit)="updateContact()">
+        <div>
+            <label for="firstName">First Name:</label>
+            <input type="text" id="firstName" formControlName="firstName" />
+        </div>
+        <div>
+            <label for="lastName">Last Name:</label>
+            <input type="text" id="lastName" formControlName="lastName" />
+        </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>
+        <button type="submit" [disabled]="contactForm.invalid">Update Contact</button>
+    </form>
+</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,53 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Contact } from 'src/app/models/contact';
+import { ContactsService } from '../contacts.service';
+
+@Component({
+  selector: 'app-edit',
+  standalone: false,
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent {
+  contactForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private contactsService: ContactsService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+    this.contactForm = this.fb.group({
+      firstName: [''],
+      lastName: [''],
+      street: [''],
+      city: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.contactsService.GetContactById(id).subscribe(contact => {
+      if (contact) {
+        this.contactForm.patchValue(contact); 
+      }
+    });
+  }
+
+  updateContact() {
+    const updatedContact: Contact = {
+      id: Number(this.route.snapshot.paramMap.get('id')),
+      firstName: this.contactForm.value.firstName,
+      lastName: this.contactForm.value.lastName,
+      street: this.contactForm.value.street,
+      city: this.contactForm.value.city,
+    };
+    this.contactsService.updateContact(updatedContact).subscribe(() => {
+      this.contactForm.reset();
+      this.router.navigate(['/contacts']);
+    });
+  }
+}
+

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

@@ -0,0 +1,32 @@
+.contacts-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2em;
+  font-family: Arial, sans-serif;
+}
+
+.contacts-table th,
+.contacts-table td {
+  padding: 1em 1em;
+  text-align: left;
+  border-bottom: 1px solid #ccc;
+}
+
+.contacts-table th {
+  background-color: #f0f0f0;
+  font-weight: 600;
+}
+
+.contacts-table tr:hover {
+  background-color: #f9f9f9;
+}
+
+.view-button {
+  padding: 0.5em 1em;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.view-button:hover {
+  background-color: #e0e0e0;
+}