Tein Schoemaker

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

@@ -1,9 +0,0 @@
-:host {
-  display: flex;
-}
-
-.page {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}

src/app/app.component.html

@@ -1,4 +1,14 @@
 <app-menu></app-menu>
-<div class="page">
-  <router-outlet></router-outlet>
+<div class="jumbotron">
+  <div class="container text-center">
+    <h1>Contact Application</h1>
+    <p>This really has pet information</p>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div>
+      <router-outlet />
+    </div>
+  </div>
 </div>

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([])
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'angular-pet-workshop-0'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-pet-workshop-0');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-adress-book');
+  });
+});

src/app/app.component.ts

@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrl: './app.component.css'
 })
 export class AppComponent {
-  title = 'angular-address-book';
+  title = 'angular-pet-workshop-0';
 }

src/app/app.module.ts

@@ -4,10 +4,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, HttpClientModule],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {}

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

@@ -0,0 +1,78 @@
+<hr />
+<h2>Add Contact</h2>
+<hr />
+<div class="container mt-5">
+  <div class="row justify-content-center">
+    <div class="col-md-8">
+      <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+          <h4 class="mb-0">Add Contact</h4>
+        </div>
+        <div class="card-body">
+          <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+            <div class="mb-3">
+              <label for="firstName" class="form-label">First Name</label>
+              <input
+                type="text"
+                id="firstName"
+                class="form-control"
+                formControlName="firstName"
+                placeholder="Enter contact first name"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="lastName" class="form-label">Last Name</label>
+              <input
+                type="text"
+                id="lastName"
+                class="form-control"
+                formControlName="lastName"
+                placeholder="Enter contact last name"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="street" class="form-label">Street</label>
+              <input
+                type="text"
+                id="street"
+                class="form-control"
+                formControlName="street"
+                placeholder="Enter street"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="city" class="form-label">City</label>
+              <input
+                type="text"
+                id="city"
+                class="form-control"
+                formControlName="city"
+                placeholder="Enter city"
+              />
+            </div>
+
+            <div class="d-flex justify-content-between">
+              <button
+                type="submit"
+                class="btn btn-success"
+                [disabled]="contactForm.invalid"
+              >
+                Add Contact
+              </button>
+              <button
+                type="button"
+                class="btn btn-secondary"
+                (click)="cancel()"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</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,58 @@
+import { Component, inject } from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {ContactsService} from "../contacts.service";
+import {Router} from "@angular/router";
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-add',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule
+  ],
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+  private router = inject(Router);
+  private readonly contactService: ContactsService;
+  public contactForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private readonly service: ContactsService
+  ) {
+    this.contactForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required],
+    });
+    this.contactService = service;
+  }
+  cancel(): void {
+    this.router.navigate(['/contacts']);
+  }
+  addContact(): void {
+    if (this.contactForm.valid) {
+      const newContact: Contact = {
+        firstName: this.contactForm.value.firstName,
+        lastName: this.contactForm.value.lastName,
+        street: this.contactForm.value.street,
+        city: this.contactForm.value.city,
+      };
+
+      this.contactService.addContact(newContact).subscribe({
+        next: (response) => {
+          console.log('Contact added successfully:', response);
+          this.contactForm.reset();
+          this.router.navigate(['/contacts']);
+        },
+        error: (err) => {
+          console.error('Failed to add contact:', err);
+        },
+      });
+    }
+  }
+}
+

src/app/contacts/contacts.module.ts

@@ -0,0 +1,15 @@
+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 { EditComponent } from './edit/edit.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [AddComponent, ViewComponent, ListComponent, EditComponent],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  exports: [AddComponent, ViewComponent, ListComponent],
+})
+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,30 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Contact } from './models/contact';
+import { CONTACTS } from '../data/contacts';
+import { environment } from '../environment/environment';
+import { Observable, lastValueFrom } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactsService {
+  private http = inject(HttpClient);
+
+  public getContactById(id: string): Observable<Contact> {
+    return this.http.get<Contact>(`${environment.api}/${id}`);
+  }
+  public getContacts(): Observable<Contact[]> {
+    return this.http.get<Contact[]>(`${environment.api}`);
+  }
+
+  public addContact(contact: Contact): Observable<Contact> {
+    return this.http.post<Contact>(`${environment.api}`, contact);
+  }
+  public updateContact(c: Contact): Observable<Contact> {
+    return this.http.put<Contact>(`${environment.api}/${c.id}`, c);
+  }
+  public deleteContactById(id: string): Observable<void> {
+    return this.http.delete<void>(`${environment.api}/${id}`);
+  }
+}