Trym Haugan Berger

src/app/app-routing.module.ts

@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ListComponent } from './contact/list/list.component';
+import { AddComponent } from './contact/add/add.component';
+import { ViewComponent } from './contact/view/view.component';
+import { EditComponent } from './contact/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.module.ts

@@ -4,10 +4,20 @@ 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 { MenuComponent } from './layout/menu/menu.component';
+import { ContactsModule } from './contact/contacts.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    CommonModule,
+    LayoutModule,
+    ContactsModule
+  ],
+  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contact/add/add.component.css

@@ -0,0 +1,112 @@
+/* ===== Add Contact/Car Form Styles ===== */
+
+h2 {
+  font-size: 2rem;
+  color: #00ffd1;
+  margin-bottom: 1.5rem;
+  border-left: 5px solid #00ffd1;
+  padding-left: 1rem;
+}
+
+/* Form Container */
+form {
+  background-color: #2a2a2a;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 255, 209, 0.1);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Form Field Wrapper */
+form div {
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Labels */
+label {
+  color: #eaeaea;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+/* Inputs */
+input[type="text"] {
+  padding: 0.75rem 1rem;
+  border: 2px solid #444;
+  border-radius: 5px;
+  background-color: #1f1f1f;
+  color: #fff;
+  font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input[type="text"]:focus {
+  border-color: #00ffd1;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 255, 209, 0.2);
+}
+
+/* Submit Button */
+button[type="submit"] {
+  background-color: #00ffd1;
+  color: #000;
+  font-weight: bold;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+}
+
+button[type="submit"]:hover:not(:disabled) {
+  background-color: #00c9a7;
+  color: #fff;
+}
+
+button[type="submit"]:disabled {
+  background-color: #444;
+  color: #888;
+  cursor: not-allowed;
+}
+
+/* Back Button (reuse existing style) */
+.back-button {
+  display: inline-block;
+  margin-top: 2rem;
+  padding: 0.6rem 1.2rem;
+  background-color: #00ffd1;
+  color: #000;
+  font-weight: bold;
+  text-decoration: none;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(0, 255, 209, 0.3);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.back-button:hover {
+  background-color: #00c9a7;
+  color: #fff;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  form {
+    padding: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  input[type="text"] {
+    font-size: 0.95rem;
+  }
+
+  button[type="submit"] {
+    width: 100%;
+  }
+}

src/app/contact/add/add.component.html

@@ -0,0 +1,24 @@
+<div>
+  <h2>Add Contact</h2>
+  <div><a routerLink="/contacts" class="back-button">← Back to Contacts</a></div>
+  <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="email">Email:</label>
+      <input type="text" id="email" formControlName="email" />
+    </div>
+    <div>
+      <label for="phone">Phone:</label>
+      <input type="text" id="phone" formControlName="phone" />
+    </div>
+    <button type="submit" [disabled]="contactForm.invalid">Add Contact</button>
+  </form>
+</div>

src/app/contact/add/add.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ContactService } from '../contact.service';
+import { Contact } from '../model/contact';
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css',
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  constructor(
+    private formBuilder: FormBuilder,
+    private readonly contactService: ContactService
+  ) {
+    this.contactForm = this.formBuilder.group({
+      email: ['', Validators.email],
+      phone: ['', Validators.pattern('^\\+?[0-9]*$')],
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required]
+    });
+  }
+
+  addContact() {
+    if (this.contactForm.valid) {
+      const newCar: Contact = {
+        id: 0,
+        firstName: this.contactForm.value.firstName,
+        lastName: this.contactForm.value.lastName,
+        email: this.contactForm.value.email,
+        phone: this.contactForm.value.phone,
+      };
+      this.contactService.AddContact(newCar);
+      this.contactForm.reset();
+    }
+  }
+}

src/app/contact/contact.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Contact } from './model/contact';
+import { CONTACTS } from './data/contacts';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactService {
+  public contacts: Contact[] = CONTACTS;
+  public getContactById(id: number | null): Contact | null {
+    const contact = this.contacts.find((contact) => contact.id === id);
+    if (!contact) {
+      return null;
+    }
+    return contact;
+  }
+  public AddContact(c: Contact) {
+    c.id = this.contacts.length + 1;
+    this.contacts.push(c);
+    console.log(c);
+    console.log(this.contacts);
+  }
+
+  public editContact(id: number | null, c: Contact) {
+    const contact = this.contacts.find((contact) => contact.id === id);
+    if (contact) {
+      contact.firstName = c.firstName;
+      contact.lastName = c.lastName;
+      contact.email = c.email;
+      contact.phone = c.phone;
+    }
+    console.log(c);
+    console.log(this.contacts);
+  }
+}

src/app/contact/contacts.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ViewComponent } from './view/view.component';
+import { ListComponent } from './list/list.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { LayoutModule } from '../layout/layout.module';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AddComponent } from './add/add.component';
+import { EditComponent } from './edit/edit.component';
+
+@NgModule({
+  declarations: [ViewComponent, ListComponent, AddComponent, EditComponent],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  exports: [ViewComponent, ListComponent],
+})
+export class ContactsModule {}

src/app/contact/data/contacts.ts

@@ -0,0 +1,32 @@
+import { Contact } from "../model/contact";
+
+export const CONTACTS: Contact[] = [
+  {
+    id: 1,
+    firstName: "John",
+    lastName: "Doe",
+    email: "JohnDoe@email.com",
+    phone: "1234567890",
+  },
+    {
+    id: 2,
+    firstName: "Mary",
+    lastName: "Sue",
+    email: "MarySue@email.com",
+    phone: "0987654321",
+  },
+    {
+    id: 3,
+    firstName: "Mathew",
+    lastName: "Walker",
+    email: "mattw@email.com",
+    phone: "5555555555",
+  },
+    {
+    id: 4,
+    firstName: "Trym",
+    lastName: "Berger",
+    email: "tbe@email.com",
+    phone: "4444444444",
+  }
+];