From 0407566984aa06f82c7690fa0fe0bcb14ae53238 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 14:39:56 +0200
Subject: [PATCH 01/13] Add simple pet service

---
 src/app/pet/pet.service.ts | 20 ++++++++++++++++++++
 src/app/pet/pet.ts         | 27 +++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/app/pet/pet.service.ts
 create mode 100644 src/app/pet/pet.ts

diff --git a/src/app/pet/pet.service.ts b/src/app/pet/pet.service.ts
new file mode 100644
index 0000000..d8130bb
--- /dev/null
+++ b/src/app/pet/pet.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { HateoasResourceOperation, ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import {Pet} from "./pet";
+
+@Injectable({providedIn: 'root'})
+export class PetService extends HateoasResourceOperation<Pet> {
+
+  constructor() {
+    super(Pet);
+  }
+
+  public findByChip(query: string): Observable<ResourceCollection<Pet>> {
+    return this.searchCollection('findByChip', { params: { text: query } });
+  }
+
+  public findByName(query: string): Observable<ResourceCollection<Pet>> {
+    return this.searchCollection('findByName', { params: { text: query } });
+  }
+}
diff --git a/src/app/pet/pet.ts b/src/app/pet/pet.ts
new file mode 100644
index 0000000..00eb0b6
--- /dev/null
+++ b/src/app/pet/pet.ts
@@ -0,0 +1,27 @@
+import { HateoasResource, Resource } from "@lagoshny/ngx-hateoas-client";
+
+@HateoasResource('pets')
+export class Pet extends Resource {
+
+    uri: string;
+    chip: string;
+    name: string;
+    dateOfBirth: Date;
+    isAdopted: boolean;
+    colour: string;
+    size: number;
+    sex: string;
+    race: string;
+    isDangerous: boolean;
+
+    constructor(values: object = {}) {
+        super();
+        Object.assign(this as any, values);
+    }
+
+    public get id(): string {
+        let uriArray = this.uri.split('/');
+        return uriArray.pop();
+    }
+
+}
\ No newline at end of file

From ac21e5773cf0e08cdcee16e9026ceea408888f4c Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 14:48:49 +0200
Subject: [PATCH 02/13] Make the pet service generic. Add cats and dogs.

---
 src/app/pet/cat/cat.service.ts | 12 ++++++++++++
 src/app/pet/cat/cat.ts         |  9 +++++++++
 src/app/pet/dog/dog.service.ts | 12 ++++++++++++
 src/app/pet/dog/dog.ts         |  9 +++++++++
 src/app/pet/pet.service.ts     | 14 +++++++-------
 5 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/app/pet/cat/cat.service.ts
 create mode 100644 src/app/pet/cat/cat.ts
 create mode 100644 src/app/pet/dog/dog.service.ts
 create mode 100644 src/app/pet/dog/dog.ts

diff --git a/src/app/pet/cat/cat.service.ts b/src/app/pet/cat/cat.service.ts
new file mode 100644
index 0000000..3254cdc
--- /dev/null
+++ b/src/app/pet/cat/cat.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core";
+import { PetService } from "../pet.service";
+import { Cat } from "./cat";
+
+@Injectable({providedIn: 'root'})
+export class CatService extends PetService<Cat> {
+
+    constructor() {
+        super(Cat);
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/pet/cat/cat.ts b/src/app/pet/cat/cat.ts
new file mode 100644
index 0000000..d0f3ed7
--- /dev/null
+++ b/src/app/pet/cat/cat.ts
@@ -0,0 +1,9 @@
+import { HateoasResource } from "@lagoshny/ngx-hateoas-client";
+import { Pet } from '../pet';
+
+@HateoasResource('cats')
+export class Cat extends Pet {
+
+    meowingLevel: number;
+
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog.service.ts b/src/app/pet/dog/dog.service.ts
new file mode 100644
index 0000000..d1d96cd
--- /dev/null
+++ b/src/app/pet/dog/dog.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core";
+import { PetService } from "../pet.service";
+import { Dog } from "./dog";
+
+@Injectable({providedIn: 'root'})
+export class DogService extends PetService<Dog> {
+
+    constructor() {
+        super(Dog);
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog.ts b/src/app/pet/dog/dog.ts
new file mode 100644
index 0000000..6d348b5
--- /dev/null
+++ b/src/app/pet/dog/dog.ts
@@ -0,0 +1,9 @@
+import { HateoasResource } from "@lagoshny/ngx-hateoas-client";
+import { Pet } from '../pet';
+
+@HateoasResource('dogs')
+export class Dog extends Pet {
+
+    meowingLevel: number;
+
+}
\ No newline at end of file
diff --git a/src/app/pet/pet.service.ts b/src/app/pet/pet.service.ts
index d8130bb..34cda86 100644
--- a/src/app/pet/pet.service.ts
+++ b/src/app/pet/pet.service.ts
@@ -1,20 +1,20 @@
-import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { HateoasResourceOperation, ResourceCollection } from '@lagoshny/ngx-hateoas-client';
 import {Pet} from "./pet";
 
-@Injectable({providedIn: 'root'})
-export class PetService extends HateoasResourceOperation<Pet> {
+// We don't make pet available directly, we will inject the Cat and Dog services which extend this one.
+// This is correct since in the API the Cat 
+export class PetService<T extends Pet> extends HateoasResourceOperation<T> {
 
-  constructor() {
-    super(Pet);
+  constructor(resourceType: { new (): T }) {
+    super(resourceType);
   }
 
-  public findByChip(query: string): Observable<ResourceCollection<Pet>> {
+  public findByChip(query: string): Observable<ResourceCollection<T>> {
     return this.searchCollection('findByChip', { params: { text: query } });
   }
 
-  public findByName(query: string): Observable<ResourceCollection<Pet>> {
+  public findByName(query: string): Observable<ResourceCollection<T>> {
     return this.searchCollection('findByName', { params: { text: query } });
   }
 }

From d7c930f1d29c9689aa34bb55d6f717fc492036b0 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 14:56:42 +0200
Subject: [PATCH 03/13] Add dog and cat lists

---
 .../pet/cat/cat-list/cat-list.component.html  | 19 ++++++++
 .../pet/cat/cat-list/cat-list.component.ts    | 44 +++++++++++++++++++
 .../pet/dog/dog-list/dog-list.component.html  | 19 ++++++++
 .../pet/dog/dog-list/dog-list.component.ts    | 44 +++++++++++++++++++
 4 files changed, 126 insertions(+)
 create mode 100644 src/app/pet/cat/cat-list/cat-list.component.html
 create mode 100644 src/app/pet/cat/cat-list/cat-list.component.ts
 create mode 100644 src/app/pet/dog/dog-list/dog-list.component.html
 create mode 100644 src/app/pet/dog/dog-list/dog-list.component.ts

diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
new file mode 100644
index 0000000..8310493
--- /dev/null
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -0,0 +1,19 @@
+<div class="card mb-1" *ngFor="let cat of cats">
+    <div class="card-block row m-1 col-12">
+      <div class="card-body row align-items-center">
+        <div class="col-6 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <a class="card-text" [routerLink]="['/cats', cat.id]">{{cat.name}}</a>
+        </div>
+        <div class="col-6 mt-1">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{cat.chip}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <ngb-pagination class="d-flex justify-content-center"
+                  [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalCats"
+                  (pageChange)="changePage()"></ngb-pagination>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-list/cat-list.component.ts b/src/app/pet/cat/cat-list/cat-list.component.ts
new file mode 100644
index 0000000..7df8dd9
--- /dev/null
+++ b/src/app/pet/cat/cat-list/cat-list.component.ts
@@ -0,0 +1,44 @@
+import {Component, OnInit} from '@angular/core';
+import {Cat} from "../cat";
+import {Router} from "@angular/router";
+import {CatService} from "../cat.service";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-cat-list',
+  templateUrl: './cat-list.component.html',
+})
+export class CatListComponent implements OnInit {
+  public cats: Cat[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalCats = 0;
+
+  constructor(
+    public router: Router,
+    private catService: CatService,
+  ) {}
+
+  ngOnInit(): void {
+    this.catService
+      .getPage({
+        pageParams: { size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe((page: PagedResourceCollection<Cat>) => {
+        this.cats = page.resources;
+        this.totalCats = page.totalElements;
+      });
+  }
+
+  changePage(): void {
+    this.catService
+      .getPage({
+        pageParams: { page: this.page - 1, size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe(
+        (page: PagedResourceCollection<Cat>) => (this.cats = page.resources)
+      );
+  }
+}
diff --git a/src/app/pet/dog/dog-list/dog-list.component.html b/src/app/pet/dog/dog-list/dog-list.component.html
new file mode 100644
index 0000000..c9d0a98
--- /dev/null
+++ b/src/app/pet/dog/dog-list/dog-list.component.html
@@ -0,0 +1,19 @@
+<div class="card mb-1" *ngFor="let dog of dogs">
+    <div class="card-block row m-1 col-12">
+      <div class="card-body row align-items-center">
+        <div class="col-6 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <a class="card-text" [routerLink]="['/dogs', dog.id]">{{dog.name}}</a>
+        </div>
+        <div class="col-6 mt-1">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{dog.chip}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <ngb-pagination class="d-flex justify-content-center"
+                  [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalDogs"
+                  (pageChange)="changePage()"></ngb-pagination>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-list/dog-list.component.ts b/src/app/pet/dog/dog-list/dog-list.component.ts
new file mode 100644
index 0000000..8015c16
--- /dev/null
+++ b/src/app/pet/dog/dog-list/dog-list.component.ts
@@ -0,0 +1,44 @@
+import {Component, OnInit} from '@angular/core';
+import {Dog} from "../dog";
+import {Router} from "@angular/router";
+import {DogService} from "../dog.service";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-dog-list',
+  templateUrl: './dog-list.component.html',
+})
+export class DogListComponent implements OnInit {
+  public dogs: Dog[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalDogs = 0;
+
+  constructor(
+    public router: Router,
+    private dogService: DogService,
+  ) {}
+
+  ngOnInit(): void {
+    this.dogService
+      .getPage({
+        pageParams: { size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe((page: PagedResourceCollection<Dog>) => {
+        this.dogs = page.resources;
+        this.totalDogs = page.totalElements;
+      });
+  }
+
+  changePage(): void {
+    this.dogService
+      .getPage({
+        pageParams: { page: this.page - 1, size: this.pageSize },
+        sort: { name: 'ASC' },
+      })
+      .subscribe(
+        (page: PagedResourceCollection<Dog>) => (this.dogs = page.resources)
+      );
+  }
+}

From 3b4a4086a4da8951a330a96f14a1f62f484bd705 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 14:58:38 +0200
Subject: [PATCH 04/13] Add routes and components to app

---
 src/app/app-routing.module.ts |  4 ++++
 src/app/app.module.ts         | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index dad05b8..2bd2e5c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -10,6 +10,8 @@ import { UserEditComponent } from './user/user-edit/user-edit.component';
 import { UserDeleteComponent } from './user/user-delete/user-delete.component';
 import { ShelterListComponent } from './shelter/shelter-list/shelter-list.component'
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -22,6 +24,8 @@ const routes: Routes = [
   { path: '', redirectTo: 'about', pathMatch: 'full'},
   { path: 'shelters', component: ShelterListComponent},
   { path: 'shelters/create', component: ShelterCreateComponent},
+  { path: 'cats', component: CatListComponent},
+  { path: 'dogs', component: DogListComponent},
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 94a04f0..0c3c869 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -28,6 +28,10 @@ import {ShelterService} from "./shelter/shelter.service";
 import {ShelterListComponent} from "./shelter/shelter-list/shelter-list.component";
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
 import {ShelterDetailComponent} from "./shelter/shelter-detail/shelter-detail.component";
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { CatService } from './pet/cat/cat.service';
+import { DogService } from './pet/dog/dog.service';
 
 @NgModule({
   declarations: [
@@ -43,7 +47,9 @@ import {ShelterDetailComponent} from "./shelter/shelter-detail/shelter-detail.co
     UserSearchComponent,
     ShelterListComponent,
     ShelterCreateComponent,
-    ShelterDetailComponent
+    ShelterDetailComponent,
+    CatListComponent,
+    DogListComponent,
   ],
   imports: [
     BrowserModule,
@@ -57,12 +63,12 @@ import {ShelterDetailComponent} from "./shelter/shelter-detail/shelter-detail.co
     LoginBasicModule,
     ErrorHandlerModule,
     NgbModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
-    AuthenticationBasicService, LoggedInGuard, UserService, ShelterService, provideAnimationsAsync()
+    AuthenticationBasicService, LoggedInGuard, UserService, ShelterService, CatService, DogService, provideAnimationsAsync()
   ],
   bootstrap: [AppComponent]
 })

From 2d16f2f5d1b17382b3b0945f78bd157f361797f6 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 15:04:55 +0200
Subject: [PATCH 05/13] Add pets menu

---
 src/app/navbar/navbar.component.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 418ef19..9944b32 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -28,6 +28,18 @@
              [routerLink]="['/shelters/create']"><span class="fas fa-user-circle"></span> Create</a>
         </div>
       </li>
+      <li class="nav-item" *ngIf="isRole('user')" ngbDropdown>
+        <a class="nav-link dropdown-toggle" id="petsDropdown" role="button"
+           aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Pets</a>
+        <div class="dropdown-menu" aria-labelledby="petsDropdown" ngbDropdownMenu>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/dogs']"><span class="fas fa-paw"></span> Dogs</a>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/cats']"><span class="fas fa-heart"></span> Cats</a>
+        </div>
+      </li>
+      
+
     </ul>
     <ul class="navbar-nav ms-auto me-3" app-login-navbar></ul>
   </div>

From a4a2dc678f8232fce55243ca01e49d7e7c50a2b1 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 17:22:09 +0200
Subject: [PATCH 06/13] Add cat creation page

---
 src/app/app-routing.module.ts                 |   2 +
 src/app/app.module.ts                         |   2 +
 .../cat/cat-create/cat-create.component.css   |   4 +
 .../cat/cat-create/cat-create.component.html  | 198 ++++++++++++++++++
 .../cat/cat-create/cat-create.component.ts    | 158 ++++++++++++++
 .../pet/cat/cat-list/cat-list.component.html  |  11 +
 6 files changed, 375 insertions(+)
 create mode 100644 src/app/pet/cat/cat-create/cat-create.component.css
 create mode 100644 src/app/pet/cat/cat-create/cat-create.component.html
 create mode 100644 src/app/pet/cat/cat-create/cat-create.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2bd2e5c..e775cfc 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,6 +12,7 @@ import { ShelterListComponent } from './shelter/shelter-list/shelter-list.compon
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
 import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
 import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -25,6 +26,7 @@ const routes: Routes = [
   { path: 'shelters', component: ShelterListComponent},
   { path: 'shelters/create', component: ShelterCreateComponent},
   { path: 'cats', component: CatListComponent},
+  { path: 'cats/create', component: CatCreateComponent},
   { path: 'dogs', component: DogListComponent},
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0c3c869..f55473d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
 import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatService } from './pet/cat/cat.service';
 import { DogService } from './pet/dog/dog.service';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { DogService } from './pet/dog/dog.service';
     ShelterCreateComponent,
     ShelterDetailComponent,
     CatListComponent,
+    CatCreateComponent,
     DogListComponent,
   ],
   imports: [
diff --git a/src/app/pet/cat/cat-create/cat-create.component.css b/src/app/pet/cat/cat-create/cat-create.component.css
new file mode 100644
index 0000000..72f16bc
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.css
@@ -0,0 +1,4 @@
+.form-error {
+    color: red;
+    font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-create/cat-create.component.html b/src/app/pet/cat/cat-create/cat-create.component.html
new file mode 100644
index 0000000..1b3dc24
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.html
@@ -0,0 +1,198 @@
+<form
+  id="cat-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="catForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="cat.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="cat.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="cat.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="cat.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="isDangerous">Dangerous</label>
+          <input
+            id="isDangerous"
+            name="isDangerous"
+            formControlName="isDangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="cat.isDangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="meowingLevel">Meowing Level</label>
+        <select
+          id="meowingLevel"
+          name="meowingLevel"
+          formControlName="meowingLevel"
+          class="form-control"
+          [(ngModel)]="cat.meowingLevel"
+        >
+          <option value="1">No meowing</option>
+          <option value="2">Low meowing</option>
+          <option value="3">Average meowing</option>
+          <option value="4">Loud meowing</option>
+        </select>
+        <div class="form-error" *ngIf="meowingLevel.errors?.['required']">
+          Meowing level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/cats']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/cat/cat-create/cat-create.component.ts b/src/app/pet/cat/cat-create/cat-create.component.ts
new file mode 100644
index 0000000..7301b43
--- /dev/null
+++ b/src/app/pet/cat/cat-create/cat-create.component.ts
@@ -0,0 +1,158 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
+import {CatService} from "../cat.service";
+import {Cat} from "../cat";
+import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-cat-create',
+  templateUrl: './cat-create.component.html',
+  styleUrls: ['./cat-create.component.css']
+})
+export class CatCreateComponent implements OnInit{
+
+  closeResult = '';
+  public isModalSaved: boolean = false;
+  public cats: Cat[] = [];
+  public cat: Cat;
+  public commonNameInput: string = '';
+  public commonEmailsList: any = [];
+  public catForm: FormGroup;
+
+  constructor(
+    private router: Router,
+    private catService: CatService,
+  ) {}
+
+  ngOnInit(): void {
+    this.cat = new Cat();
+    this.catForm = new FormGroup({
+      chip: new FormControl(this.cat.chip, [
+        Validators.required,
+      ]),
+      name: new FormControl(this.cat.name, [
+        Validators.required,
+      ]),
+      dateOfBirth: new FormControl(this.cat.dateOfBirth, [
+        Validators.required,
+        this.dateValidator(),
+      ]),
+      colour: new FormControl(this.cat.colour, [
+        Validators.required,
+        this.colourValidator(),
+      ]),
+      size: new FormControl(this.cat.size, [
+        Validators.required,
+        this.numberValidator(),
+      ]),
+      sex: new FormControl(this.cat.sex, [
+        Validators.required,
+        this.sexValidator(),
+      ]),
+      race: new FormControl(this.cat.race, [
+        Validators.required,
+      ]),
+      isDangerous: new FormControl(this.cat.isDangerous, []),
+      meowingLevel: new FormControl(this.cat.meowingLevel, [
+        Validators.required,
+      ]),
+    });
+    this.loadCatList();
+  }
+
+  loadCatList() {
+    this.catService
+      .getPage({
+        sort: { name: 'ASC' },
+      })
+      .subscribe((cats: PagedResourceCollection<Cat>) => {
+        this.cats = cats.resources.sort((a, b) =>
+          a.chip.localeCompare(b.chip)
+        );
+      });
+  }
+
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.catForm.get('chip');
+  }
+
+  get name() {
+    return this.catForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.catForm.get('dateOfBirth');
+  }
+
+  get isAdopted() {
+    return this.catForm.get('isAdopted');
+  }
+
+  get colour() {
+    return this.catForm.get('colour');
+  }
+
+  get size() {
+    return this.catForm.get('size');
+  }
+
+  get sex() {
+    return this.catForm.get('sex');
+  }
+
+  get race() {
+    return this.catForm.get('race');
+  }
+
+  get isDangerous() {
+    return this.catForm.get('isDangerous');
+  }
+
+  get meowingLevel() {
+    return this.catForm.get('meowingLevel');
+  }
+
+  onSubmit(): void {
+    this.cat.isAdopted = false;
+    this.catService
+      .createResource({ body: this.cat })
+      .subscribe((cat: Cat) => {
+        const uri = (cat as any).uri;
+        this.router.navigate([uri]).then();
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index 8310493..70555ae 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -1,3 +1,14 @@
+<div class="d-flex w-full justify-content-end mb-3">
+  <button
+        id="createCat"
+        type="button"
+        [routerLink]="['/cats/create']"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+  </button>
+</div>
 <div class="card mb-1" *ngFor="let cat of cats">
     <div class="card-block row m-1 col-12">
       <div class="card-body row align-items-center">

From ad2418bd0e1d0c087a3e00bffb64c7dc32d5b5f0 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 17:50:28 +0200
Subject: [PATCH 07/13] Add cat detail

---
 src/app/app-routing.module.ts                 |  8 ++-
 src/app/app.module.ts                         |  2 +
 .../cat/cat-create/cat-create.component.html  | 10 +--
 .../cat/cat-create/cat-create.component.ts    | 12 ++--
 .../cat/cat-detail/cat-detail.component.html  | 63 +++++++++++++++++++
 .../cat/cat-detail/cat-detail.component.ts    | 25 ++++++++
 .../pet/cat/cat-list/cat-list.component.html  | 32 ++++++++--
 src/app/pet/pet.ts                            |  4 +-
 8 files changed, 135 insertions(+), 21 deletions(-)
 create mode 100644 src/app/pet/cat/cat-detail/cat-detail.component.html
 create mode 100644 src/app/pet/cat/cat-detail/cat-detail.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e775cfc..3a71692 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -13,6 +13,7 @@ import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.co
 import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
 import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -25,9 +26,10 @@ const routes: Routes = [
   { path: '', redirectTo: 'about', pathMatch: 'full'},
   { path: 'shelters', component: ShelterListComponent},
   { path: 'shelters/create', component: ShelterCreateComponent},
-  { path: 'cats', component: CatListComponent},
-  { path: 'cats/create', component: CatCreateComponent},
-  { path: 'dogs', component: DogListComponent},
+  { path: 'cats', component: CatListComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/create', component: CatCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id', component: CatDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f55473d..f1b41e3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatService } from './pet/cat/cat.service';
 import { DogService } from './pet/dog/dog.service';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 
 @NgModule({
   declarations: [
@@ -51,6 +52,7 @@ import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
     ShelterDetailComponent,
     CatListComponent,
     CatCreateComponent,
+    CatDetailComponent,
     DogListComponent,
   ],
   imports: [
diff --git a/src/app/pet/cat/cat-create/cat-create.component.html b/src/app/pet/cat/cat-create/cat-create.component.html
index 1b3dc24..906d1fd 100644
--- a/src/app/pet/cat/cat-create/cat-create.component.html
+++ b/src/app/pet/cat/cat-create/cat-create.component.html
@@ -142,14 +142,14 @@
       </div>
 
       <div class="form-group mb-3 col-6">
-        <label class="control-label required-label" for="isDangerous">Dangerous</label>
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
           <input
-            id="isDangerous"
-            name="isDangerous"
-            formControlName="isDangerous"
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
             type="checkbox"
             clasS="ms-3"
-            [(ngModel)]="cat.isDangerous"
+            [(ngModel)]="cat.dangerous"
           />
       </div>
 
diff --git a/src/app/pet/cat/cat-create/cat-create.component.ts b/src/app/pet/cat/cat-create/cat-create.component.ts
index 7301b43..267fc00 100644
--- a/src/app/pet/cat/cat-create/cat-create.component.ts
+++ b/src/app/pet/cat/cat-create/cat-create.component.ts
@@ -53,7 +53,7 @@ export class CatCreateComponent implements OnInit{
       race: new FormControl(this.cat.race, [
         Validators.required,
       ]),
-      isDangerous: new FormControl(this.cat.isDangerous, []),
+      dangerous: new FormControl(this.cat.dangerous, []),
       meowingLevel: new FormControl(this.cat.meowingLevel, [
         Validators.required,
       ]),
@@ -117,8 +117,8 @@ export class CatCreateComponent implements OnInit{
     return this.catForm.get('dateOfBirth');
   }
 
-  get isAdopted() {
-    return this.catForm.get('isAdopted');
+  get adopted() {
+    return this.catForm.get('adopted');
   }
 
   get colour() {
@@ -137,8 +137,8 @@ export class CatCreateComponent implements OnInit{
     return this.catForm.get('race');
   }
 
-  get isDangerous() {
-    return this.catForm.get('isDangerous');
+  get dangerous() {
+    return this.catForm.get('dangerous');
   }
 
   get meowingLevel() {
@@ -146,7 +146,7 @@ export class CatCreateComponent implements OnInit{
   }
 
   onSubmit(): void {
-    this.cat.isAdopted = false;
+    this.cat.adopted = false;
     this.catService
       .createResource({ body: this.cat })
       .subscribe((cat: Cat) => {
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.html b/src/app/pet/cat/cat-detail/cat-detail.component.html
new file mode 100644
index 0000000..d8a9458
--- /dev/null
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.html
@@ -0,0 +1,63 @@
+<div class="card mb-4">
+    <div class="card-block">
+      <h1 class="card-title col-md-12 px-4 pt-3 text-xxl">{{cat.name}}</h1>
+      <div class="card-body row m-1">
+        <div class="col-md-4 mb-5">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{cat.chip}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Date of birth</h6>
+            <p class="card-text">{{cat.dateOfBirth}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Colour</h6>
+            <div style="width: 100%; height: 24px; background-color: {{cat.colour}}; border: 1px solid;"></div>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Size</h6>
+            <p class="card-text" *ngIf="cat.size === 1">Small</p>
+            <p class="card-text" *ngIf="cat.size === 2">Average</p>
+            <p class="card-text" *ngIf="cat.size === 3">Large</p>
+            <p class="card-text" *ngIf="cat.size === 4">Extra Large</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Sex</h6>
+            <p class="card-text" *ngIf="cat.sex === 'male'">Male</p>
+            <p class="card-text" *ngIf="cat.sex === 'female'">Female</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Race</h6>
+            <p class="card-text">{{cat.race}}</p>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Dangerous</h6>
+            <i class="fa fa-check text-success" *ngIf="cat.dangerous === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="cat.dangerous === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Adopted</h6>
+            <i class="fa fa-check text-success" *ngIf="cat.adopted === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="cat.adopted === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Meowing level</h6>
+            <p class="card-text" *ngIf="cat.meowingLevel === 1">No meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 2">Low meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 3">Average meowing</p>
+            <p class="card-text" *ngIf="cat.meowingLevel === 4">Loud meowing</p>
+        </div>
+      </div>
+      <div class="card-footer text-right">
+        <button id="listBtn" type="button" [routerLink]="['/cats']"
+                class="btn m-1 btn-outline-primary">Cat List
+        </button>
+        <button id="editBtn" type="button" [routerLink]="['edit']"
+                class="btn m-1 btn-outline-success">Edit
+        </button>
+        <button id="deleteBtn" type="button" [routerLink]="['delete']"
+                class="btn m-1 btn-outline-danger">Delete
+        </button>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.ts b/src/app/pet/cat/cat-detail/cat-detail.component.ts
new file mode 100644
index 0000000..21703a7
--- /dev/null
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CatService } from '../cat.service';
+import { Cat } from '../cat';
+
+@Component({
+  selector: 'app-cat-detail',
+  templateUrl: './cat-detail.component.html'
+})
+export class CatDetailComponent implements OnInit {
+  public cat: Cat = new Cat();
+
+  constructor(private route: ActivatedRoute,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(id).subscribe(
+      cat => {
+        this.cat = cat;
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index 70555ae..6b21f65 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -12,13 +12,35 @@
 <div class="card mb-1" *ngFor="let cat of cats">
     <div class="card-block row m-1 col-12">
       <div class="card-body row align-items-center">
-        <div class="col-6 mt-1">
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text" [routerLink]="['/cats', cat.id]">{{cat.chip}}</p>
+        </div>
+        <div class="col-3 mt-1">
           <h6 class="card-subtitle text-muted">Name</h6>
-          <a class="card-text" [routerLink]="['/cats', cat.id]">{{cat.name}}</a>
+          <p class="card-text">{{cat.name}}</p>
         </div>
-        <div class="col-6 mt-1">
-          <h6 class="card-subtitle text-muted">Chip</h6>
-          <p class="card-text">{{cat.chip}}</p>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Date of birth</h6>
+          <p class="card-text">{{cat.dateOfBirth}}</p>
+        </div>
+        <div class="col-3 mt-1 d-flex justify-content-end">
+          <button
+            id="seeCat"
+            type="button"
+            [routerLink]="['/cats', cat.id]"
+            class="btn btn-primary ms-3"
+          >
+            <i class="fa fa-eye"></i>
+          </button>
+          <button
+            id="seeCat"
+            type="button"
+            [routerLink]="['/cats/edit', cat.id]"
+            class="btn btn-secondary ms-3"
+          >
+            <i class="fa fa-pencil"></i>
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/app/pet/pet.ts b/src/app/pet/pet.ts
index 00eb0b6..aaeb127 100644
--- a/src/app/pet/pet.ts
+++ b/src/app/pet/pet.ts
@@ -7,12 +7,12 @@ export class Pet extends Resource {
     chip: string;
     name: string;
     dateOfBirth: Date;
-    isAdopted: boolean;
+    adopted: boolean;
     colour: string;
     size: number;
     sex: string;
     race: string;
-    isDangerous: boolean;
+    dangerous: boolean;
 
     constructor(values: object = {}) {
         super();

From 1a373e9e29c572410a7d0dd0e660ce5a04549624 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 18:15:33 +0200
Subject: [PATCH 08/13] Add edit cat and multiple improvements

---
 src/app/app-routing.module.ts                 |   2 +
 src/app/app.module.ts                         |   2 +
 .../cat/cat-create/cat-create.component.ts    |   2 -
 .../cat/cat-detail/cat-detail.component.html  |   4 +-
 .../pet/cat/cat-edit/cat-edit.component.html  | 198 ++++++++++++++++++
 .../pet/cat/cat-edit/cat-edit.component.ts    | 139 ++++++++++++
 .../pet/cat/cat-list/cat-list.component.html  |   2 +-
 7 files changed, 344 insertions(+), 5 deletions(-)
 create mode 100644 src/app/pet/cat/cat-edit/cat-edit.component.html
 create mode 100644 src/app/pet/cat/cat-edit/cat-edit.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 3a71692..e978470 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,7 @@ import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
 import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -29,6 +30,7 @@ const routes: Routes = [
   { path: 'cats', component: CatListComponent, canActivate: [LoggedInGuard]},
   { path: 'cats/create', component: CatCreateComponent, canActivate: [LoggedInGuard]},
   { path: 'cats/:id', component: CatDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/edit/:id', component: CatEditComponent, canActivate: [LoggedInGuard]},
   { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f1b41e3..816e245 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -34,6 +34,7 @@ import { CatService } from './pet/cat/cat.service';
 import { DogService } from './pet/dog/dog.service';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
 
 @NgModule({
   declarations: [
@@ -53,6 +54,7 @@ import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
     CatListComponent,
     CatCreateComponent,
     CatDetailComponent,
+    CatEditComponent,
     DogListComponent,
   ],
   imports: [
diff --git a/src/app/pet/cat/cat-create/cat-create.component.ts b/src/app/pet/cat/cat-create/cat-create.component.ts
index 267fc00..2102a8a 100644
--- a/src/app/pet/cat/cat-create/cat-create.component.ts
+++ b/src/app/pet/cat/cat-create/cat-create.component.ts
@@ -16,8 +16,6 @@ export class CatCreateComponent implements OnInit{
   public isModalSaved: boolean = false;
   public cats: Cat[] = [];
   public cat: Cat;
-  public commonNameInput: string = '';
-  public commonEmailsList: any = [];
   public catForm: FormGroup;
 
   constructor(
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.html b/src/app/pet/cat/cat-detail/cat-detail.component.html
index d8a9458..58ee7ca 100644
--- a/src/app/pet/cat/cat-detail/cat-detail.component.html
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.html
@@ -52,10 +52,10 @@ <h6 class="card-subtitle text-muted">Meowing level</h6>
         <button id="listBtn" type="button" [routerLink]="['/cats']"
                 class="btn m-1 btn-outline-primary">Cat List
         </button>
-        <button id="editBtn" type="button" [routerLink]="['edit']"
+        <button id="editBtn" type="button" [routerLink]="['/cats/edit', cat.id]"
                 class="btn m-1 btn-outline-success">Edit
         </button>
-        <button id="deleteBtn" type="button" [routerLink]="['delete']"
+        <button id="deleteBtn" type="button" [routerLink]="['/cats/delete', cat.id]"
                 class="btn m-1 btn-outline-danger">Delete
         </button>
       </div>
diff --git a/src/app/pet/cat/cat-edit/cat-edit.component.html b/src/app/pet/cat/cat-edit/cat-edit.component.html
new file mode 100644
index 0000000..9bb4d80
--- /dev/null
+++ b/src/app/pet/cat/cat-edit/cat-edit.component.html
@@ -0,0 +1,198 @@
+<form
+  id="cat-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="catForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="cat.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="cat.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="cat.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="cat.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="cat.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="meowingLevel">Meowing Level</label>
+        <select
+          id="meowingLevel"
+          name="meowingLevel"
+          formControlName="meowingLevel"
+          class="form-control"
+          [(ngModel)]="cat.meowingLevel"
+        >
+          <option value="1">No meowing</option>
+          <option value="2">Low meowing</option>
+          <option value="3">Average meowing</option>
+          <option value="4">Loud meowing</option>
+        </select>
+        <div class="form-error" *ngIf="meowingLevel.errors?.['required']">
+          Meowing level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/cats']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-floppy-disk me-2"></i>
+        Edit
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/cat/cat-edit/cat-edit.component.ts b/src/app/pet/cat/cat-edit/cat-edit.component.ts
new file mode 100644
index 0000000..3d73822
--- /dev/null
+++ b/src/app/pet/cat/cat-edit/cat-edit.component.ts
@@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-cat-edit',
+  templateUrl: './cat-edit.component.html'
+})
+export class CatEditComponent implements OnInit {
+  public cat: Cat = new Cat();
+  public catForm: FormGroup;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(id).subscribe(
+      (cat: Cat) => this.cat = cat );
+      this.catForm = new FormGroup({
+        chip: new FormControl(this.cat.chip, [
+          Validators.required,
+        ]),
+        name: new FormControl(this.cat.name, [
+          Validators.required,
+        ]),
+        dateOfBirth: new FormControl(this.cat.dateOfBirth, [
+          Validators.required,
+          this.dateValidator(),
+        ]),
+        colour: new FormControl(this.cat.colour, [
+          Validators.required,
+          this.colourValidator(),
+        ]),
+        size: new FormControl(this.cat.size, [
+          Validators.required,
+          this.numberValidator(),
+        ]),
+        sex: new FormControl(this.cat.sex, [
+          Validators.required,
+          this.sexValidator(),
+        ]),
+        race: new FormControl(this.cat.race, [
+          Validators.required,
+        ]),
+        dangerous: new FormControl(this.cat.dangerous, []),
+        meowingLevel: new FormControl(this.cat.meowingLevel, [
+          Validators.required,
+        ]),
+      });
+  }
+
+  
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.catForm.get('chip');
+  }
+
+  get name() {
+    return this.catForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.catForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.catForm.get('adopted');
+  }
+
+  get colour() {
+    return this.catForm.get('colour');
+  }
+
+  get size() {
+    return this.catForm.get('size');
+  }
+
+  get sex() {
+    return this.catForm.get('sex');
+  }
+
+  get race() {
+    return this.catForm.get('race');
+  }
+
+  get dangerous() {
+    return this.catForm.get('dangerous');
+  }
+
+  get meowingLevel() {
+    return this.catForm.get('meowingLevel');
+  }
+
+
+  onSubmit(): void {
+    this.catService.patchResource(this.cat).subscribe(
+      (patchedCat: Cat) => {
+          this.router.navigate(['cats', patchedCat.id]);
+      });
+  }
+
+}
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index 6b21f65..fa9f806 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -14,7 +14,7 @@
       <div class="card-body row align-items-center">
         <div class="col-3 mt-1">
           <h6 class="card-subtitle text-muted">Chip</h6>
-          <p class="card-text" [routerLink]="['/cats', cat.id]">{{cat.chip}}</p>
+          <p class="card-text">{{cat.chip}}</p>
         </div>
         <div class="col-3 mt-1">
           <h6 class="card-subtitle text-muted">Name</h6>

From f84c2176fceb2a2726c97dca45ab2d70c0a85a2a Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 18:22:14 +0200
Subject: [PATCH 09/13] Add cat deletion

---
 src/app/app-routing.module.ts                 |  4 ++-
 src/app/app.module.ts                         |  2 ++
 .../cat/cat-delete/cat-delete.component.html  | 16 ++++++++++
 .../cat/cat-delete/cat-delete.component.ts    | 31 +++++++++++++++++++
 .../cat/cat-detail/cat-detail.component.html  |  4 +--
 .../pet/cat/cat-edit/cat-edit.component.html  |  2 +-
 .../pet/cat/cat-list/cat-list.component.html  |  2 +-
 7 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/app/pet/cat/cat-delete/cat-delete.component.html
 create mode 100644 src/app/pet/cat/cat-delete/cat-delete.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e978470..46c9583 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,6 +15,7 @@ import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -30,7 +31,8 @@ const routes: Routes = [
   { path: 'cats', component: CatListComponent, canActivate: [LoggedInGuard]},
   { path: 'cats/create', component: CatCreateComponent, canActivate: [LoggedInGuard]},
   { path: 'cats/:id', component: CatDetailComponent, canActivate: [LoggedInGuard]},
-  { path: 'cats/edit/:id', component: CatEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/edit', component: CatEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/delete', component: CatDeleteComponent, canActivate: [LoggedInGuard]},
   { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 816e245..3fcb07a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -35,6 +35,7 @@ import { DogService } from './pet/dog/dog.service';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +55,7 @@ import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
     CatListComponent,
     CatCreateComponent,
     CatDetailComponent,
+    CatDeleteComponent,
     CatEditComponent,
     DogListComponent,
   ],
diff --git a/src/app/pet/cat/cat-delete/cat-delete.component.html b/src/app/pet/cat/cat-delete/cat-delete.component.html
new file mode 100644
index 0000000..3a3ade3
--- /dev/null
+++ b/src/app/pet/cat/cat-delete/cat-delete.component.html
@@ -0,0 +1,16 @@
+<div class="panel panel-warning">
+    <div class="panel-heading">
+      <div class="panel-title">
+        <h1>Are you sure you want to delete this record?</h1>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="text-center">
+        <button id="deleteBtn" type="button" (click)="delete()"
+                class="btn btn-outline-danger m-1">Delete</button>
+        <button id="listBtn" type="button" [routerLink]="['/cats', cat.id]"
+                class="btn btn-outline-primary m-1">Cancel</button>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-delete/cat-delete.component.ts b/src/app/pet/cat/cat-delete/cat-delete.component.ts
new file mode 100644
index 0000000..3929b77
--- /dev/null
+++ b/src/app/pet/cat/cat-delete/cat-delete.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+
+@Component({
+  selector: 'app-cat-delete',
+  templateUrl: './cat-delete.component.html'
+})
+export class CatDeleteComponent implements OnInit {
+  public cat: Cat = new Cat();
+  private id: string;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private catService: CatService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.catService.getResource(this.id).subscribe(
+      cat => this.cat = cat);
+  }
+
+  delete(): void {
+    this.catService.deleteResource(this.cat).subscribe(
+      () => {
+        this.router.navigate(['cats']);
+      });
+  }
+}
diff --git a/src/app/pet/cat/cat-detail/cat-detail.component.html b/src/app/pet/cat/cat-detail/cat-detail.component.html
index 58ee7ca..d8a9458 100644
--- a/src/app/pet/cat/cat-detail/cat-detail.component.html
+++ b/src/app/pet/cat/cat-detail/cat-detail.component.html
@@ -52,10 +52,10 @@ <h6 class="card-subtitle text-muted">Meowing level</h6>
         <button id="listBtn" type="button" [routerLink]="['/cats']"
                 class="btn m-1 btn-outline-primary">Cat List
         </button>
-        <button id="editBtn" type="button" [routerLink]="['/cats/edit', cat.id]"
+        <button id="editBtn" type="button" [routerLink]="['edit']"
                 class="btn m-1 btn-outline-success">Edit
         </button>
-        <button id="deleteBtn" type="button" [routerLink]="['/cats/delete', cat.id]"
+        <button id="deleteBtn" type="button" [routerLink]="['delete']"
                 class="btn m-1 btn-outline-danger">Delete
         </button>
       </div>
diff --git a/src/app/pet/cat/cat-edit/cat-edit.component.html b/src/app/pet/cat/cat-edit/cat-edit.component.html
index 9bb4d80..15c80f8 100644
--- a/src/app/pet/cat/cat-edit/cat-edit.component.html
+++ b/src/app/pet/cat/cat-edit/cat-edit.component.html
@@ -179,7 +179,7 @@
       <button
         id="listBtn"
         type="button"
-        [routerLink]="['/cats']"
+        [routerLink]="['..']"
         class="btn btn-outline-primary pull-right"
       >
         Back
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index fa9f806..f8082df 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -36,7 +36,7 @@ <h6 class="card-subtitle text-muted">Date of birth</h6>
           <button
             id="seeCat"
             type="button"
-            [routerLink]="['/cats/edit', cat.id]"
+            [routerLink]="['/cats/' + cat.id + '/edit']"
             class="btn btn-secondary ms-3"
           >
             <i class="fa fa-pencil"></i>

From 0a9d4bec07abcf0e5a05ca01bd6004c4a1bd0fd7 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 18:25:42 +0200
Subject: [PATCH 10/13] Improve list component

---
 src/app/pet/cat/cat-list/cat-list.component.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index f8082df..ab4a5a6 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -1,3 +1,7 @@
+<div class="w-full d-flex" style="font-size: xx-large;">
+  <i class="fa fa-heart me-3"></i>
+  <p class="mt-2">Cats</p>
+</div>
 <div class="d-flex w-full justify-content-end mb-3">
   <button
         id="createCat"

From df4260cd8d64716a4b27c1d4b484981b02b76136 Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 18:30:12 +0200
Subject: [PATCH 11/13] Change titles and icon

---
 src/app/navbar/navbar.component.html |   2 +-
 src/favicon.ico                      | Bin 948 -> 15406 bytes
 src/index.html                       |   2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 9944b32..d2fa826 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>Angular</b>Template</a>
+  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>MyPets</b>GEIADE</a>
   <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
           [attr.aria-expanded]="!isCollapsed" aria-controls="navbarContent" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
diff --git a/src/favicon.ico b/src/favicon.ico
index 997406ad22c29aae95893fb3d666c30258a09537..eaa0d199f75619de37941bf95e45a0dcda71ac91 100644
GIT binary patch
literal 15406
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

literal 948
zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT
z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0
z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht
z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ
ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E
z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ
zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G
z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf
z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow
zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${
zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU
z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC
z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+
zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6
z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q
zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^
zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5
zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0
WcZ@i?LyX}70000<MNUMnLSTXxWwRmx

diff --git a/src/index.html b/src/index.html
index c3afbed..1bf9b3a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Angular Template</title>
+  <title>MyPets GEIADE</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

From 81a56b6021f3b576efb56aaffa61c65a81373d4c Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 19:03:35 +0200
Subject: [PATCH 12/13] Implement cat search

---
 src/app/app.module.ts                         |  2 +
 .../pet/cat/cat-list/cat-list.component.html  |  1 +
 .../pet/cat/cat-list/cat-list.component.ts    |  5 +++
 .../cat/cat-search/cat-search.component.html  | 12 ++++++
 .../cat/cat-search/cat-search.component.ts    | 42 +++++++++++++++++++
 src/app/pet/cat/cat.service.ts                | 16 +++++++
 6 files changed, 78 insertions(+)
 create mode 100644 src/app/pet/cat/cat-search/cat-search.component.html
 create mode 100644 src/app/pet/cat/cat-search/cat-search.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3fcb07a..6a37913 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -36,6 +36,7 @@ import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
 import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { CatSearchComponent } from './pet/cat/cat-search/cat-search.component';
 
 @NgModule({
   declarations: [
@@ -57,6 +58,7 @@ import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
     CatDetailComponent,
     CatDeleteComponent,
     CatEditComponent,
+    CatSearchComponent,
     DogListComponent,
   ],
   imports: [
diff --git a/src/app/pet/cat/cat-list/cat-list.component.html b/src/app/pet/cat/cat-list/cat-list.component.html
index ab4a5a6..aa39cb8 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.html
+++ b/src/app/pet/cat/cat-list/cat-list.component.html
@@ -3,6 +3,7 @@
   <p class="mt-2">Cats</p>
 </div>
 <div class="d-flex w-full justify-content-end mb-3">
+  <app-cat-search (emitResults)="detail($event)"></app-cat-search>
   <button
         id="createCat"
         type="button"
diff --git a/src/app/pet/cat/cat-list/cat-list.component.ts b/src/app/pet/cat/cat-list/cat-list.component.ts
index 7df8dd9..53fb9ed 100644
--- a/src/app/pet/cat/cat-list/cat-list.component.ts
+++ b/src/app/pet/cat/cat-list/cat-list.component.ts
@@ -41,4 +41,9 @@ export class CatListComponent implements OnInit {
         (page: PagedResourceCollection<Cat>) => (this.cats = page.resources)
       );
   }
+
+  detail(cat: Cat): void {
+    this.router.navigate(['/cats', cat.id]);
+  }
+
 }
diff --git a/src/app/pet/cat/cat-search/cat-search.component.html b/src/app/pet/cat/cat-search/cat-search.component.html
new file mode 100644
index 0000000..ac312ae
--- /dev/null
+++ b/src/app/pet/cat/cat-search/cat-search.component.html
@@ -0,0 +1,12 @@
+<div class="col form-group">
+    <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
+           [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search cats"
+           [class.loading]="searching" (selectItem)="select($event.item)"/>
+    <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+  </div>
+  
+  <ng-template #rt let-r="result" let-t="term">
+    <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
+    <div class="row"><small>{{r.name}} - {{r.chip}}</small></div>
+  </ng-template>
+  
\ No newline at end of file
diff --git a/src/app/pet/cat/cat-search/cat-search.component.ts b/src/app/pet/cat/cat-search/cat-search.component.ts
new file mode 100644
index 0000000..b4cff73
--- /dev/null
+++ b/src/app/pet/cat/cat-search/cat-search.component.ts
@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Observable, of, OperatorFunction } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import { Cat } from '../cat';
+import { CatService } from '../cat.service';
+
+@Component({
+  selector: 'app-cat-search',
+  templateUrl: './cat-search.component.html'
+})
+
+export class CatSearchComponent {
+  @Output() emitResults: EventEmitter<Cat> = new EventEmitter();
+  searchFailed = false;
+  searching = false;
+
+  constructor(private catService: CatService) {
+  }
+
+  autocomplete: OperatorFunction<string, readonly Cat[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.searching = true),
+      switchMap(term => term.length < 3 ? of([]) :
+        this.catService.findByIdContaining(term).pipe(
+          map((collection: ResourceCollection<Cat>) => collection.resources),
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          })
+        )
+      ),
+      tap(() => this.searching = false )
+    )
+
+  select(item: any): void {
+    this.emitResults.emit(item as Cat);
+  }
+}
diff --git a/src/app/pet/cat/cat.service.ts b/src/app/pet/cat/cat.service.ts
index 3254cdc..e920968 100644
--- a/src/app/pet/cat/cat.service.ts
+++ b/src/app/pet/cat/cat.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from "@angular/core";
 import { PetService } from "../pet.service";
 import { Cat } from "./cat";
+import { ResourceCollection } from "@lagoshny/ngx-hateoas-client";
+import { Observable, forkJoin, map, merge, reduce } from "rxjs";
 
 @Injectable({providedIn: 'root'})
 export class CatService extends PetService<Cat> {
@@ -9,4 +11,18 @@ export class CatService extends PetService<Cat> {
         super(Cat);
     }
 
+    public findByIdContaining(query: string): Observable<ResourceCollection<Cat>> {
+        let res1 = this.searchCollection('findByName', { params: { name: query } });
+        let res2 = this.searchCollection('findByChip', { params: { chip: query } });
+        return forkJoin([res1, res2]).pipe(
+            map(([result1, result2]) => {
+                const combinedResources = [...result1.resources, ...result2.resources];
+                return {
+                  ...result1,
+                  resources: combinedResources,
+                } as ResourceCollection<Cat>;
+              })
+        );;
+    }
+
 }
\ No newline at end of file

From d621caa7c088a1af673abc2cf01cdfecd78eee2b Mon Sep 17 00:00:00 2001
From: PauMAVA <paumachetti@gmail.com>
Date: Sat, 18 May 2024 19:16:25 +0200
Subject: [PATCH 13/13] Add dogs

---
 src/app/app-routing.module.ts                 |  10 +-
 src/app/app.module.ts                         |  12 +-
 .../dog/dog-create/dog-create.component.css   |   4 +
 .../dog/dog-create/dog-create.component.html  | 198 ++++++++++++++++++
 .../dog/dog-create/dog-create.component.ts    | 156 ++++++++++++++
 .../dog/dog-delete/dog-delete.component.html  |  16 ++
 .../dog/dog-delete/dog-delete.component.ts    |  31 +++
 .../dog/dog-detail/dog-detail.component.html  |  63 ++++++
 .../dog/dog-detail/dog-detail.component.ts    |  25 +++
 .../pet/dog/dog-edit/dog-edit.component.html  | 198 ++++++++++++++++++
 .../pet/dog/dog-edit/dog-edit.component.ts    | 139 ++++++++++++
 .../pet/dog/dog-list/dog-list.component.html  |  48 ++++-
 .../pet/dog/dog-list/dog-list.component.ts    |   5 +
 .../dog/dog-search/dog-search.component.html  |  12 ++
 .../dog/dog-search/dog-search.component.ts    |  42 ++++
 src/app/pet/dog/dog.service.ts                |  16 ++
 src/app/pet/dog/dog.ts                        |   2 +-
 17 files changed, 969 insertions(+), 8 deletions(-)
 create mode 100644 src/app/pet/dog/dog-create/dog-create.component.css
 create mode 100644 src/app/pet/dog/dog-create/dog-create.component.html
 create mode 100644 src/app/pet/dog/dog-create/dog-create.component.ts
 create mode 100644 src/app/pet/dog/dog-delete/dog-delete.component.html
 create mode 100644 src/app/pet/dog/dog-delete/dog-delete.component.ts
 create mode 100644 src/app/pet/dog/dog-detail/dog-detail.component.html
 create mode 100644 src/app/pet/dog/dog-detail/dog-detail.component.ts
 create mode 100644 src/app/pet/dog/dog-edit/dog-edit.component.html
 create mode 100644 src/app/pet/dog/dog-edit/dog-edit.component.ts
 create mode 100644 src/app/pet/dog/dog-search/dog-search.component.html
 create mode 100644 src/app/pet/dog/dog-search/dog-search.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 46c9583..3588363 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -11,11 +11,15 @@ import { UserDeleteComponent } from './user/user-delete/user-delete.component';
 import { ShelterListComponent } from './shelter/shelter-list/shelter-list.component'
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
 import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
-import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
 import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
 import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -34,6 +38,10 @@ const routes: Routes = [
   { path: 'cats/:id/edit', component: CatEditComponent, canActivate: [LoggedInGuard]},
   { path: 'cats/:id/delete', component: CatDeleteComponent, canActivate: [LoggedInGuard]},
   { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/create', component: DogCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id', component: DogDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/edit', component: DogEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/delete', component: DogDeleteComponent, canActivate: [LoggedInGuard]},
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6a37913..f193570 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -29,7 +29,6 @@ import {ShelterListComponent} from "./shelter/shelter-list/shelter-list.componen
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
 import {ShelterDetailComponent} from "./shelter/shelter-detail/shelter-detail.component";
 import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
-import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
 import { CatService } from './pet/cat/cat.service';
 import { DogService } from './pet/dog/dog.service';
 import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
@@ -37,6 +36,12 @@ import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
 import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
 import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
 import { CatSearchComponent } from './pet/cat/cat-search/cat-search.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogSearchComponent } from './pet/dog/dog-search/dog-search.component';
 
 @NgModule({
   declarations: [
@@ -60,6 +65,11 @@ import { CatSearchComponent } from './pet/cat/cat-search/cat-search.component';
     CatEditComponent,
     CatSearchComponent,
     DogListComponent,
+    DogCreateComponent,
+    DogDetailComponent,
+    DogDeleteComponent,
+    DogEditComponent,
+    DogSearchComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/pet/dog/dog-create/dog-create.component.css b/src/app/pet/dog/dog-create/dog-create.component.css
new file mode 100644
index 0000000..72f16bc
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.css
@@ -0,0 +1,4 @@
+.form-error {
+    color: red;
+    font-size: x-small;
+}
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-create/dog-create.component.html b/src/app/pet/dog/dog-create/dog-create.component.html
new file mode 100644
index 0000000..1d290a6
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.html
@@ -0,0 +1,198 @@
+<form
+  id="dog-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="dogForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="dog.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="dog.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="dog.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="dog.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="dog.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="barkingLevel">Barking Level</label>
+        <select
+          id="barkingLevel"
+          name="barkingLevel"
+          formControlName="barkingLevel"
+          class="form-control"
+          [(ngModel)]="dog.barkingLevel"
+        >
+          <option value="1">No barking</option>
+          <option value="2">Low barking</option>
+          <option value="3">Average barking</option>
+          <option value="4">Loud barking</option>
+        </select>
+        <div class="form-error" *ngIf="barkingLevel.errors?.['required']">
+          Barking level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/dogs']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/dog/dog-create/dog-create.component.ts b/src/app/pet/dog/dog-create/dog-create.component.ts
new file mode 100644
index 0000000..a6fdbf0
--- /dev/null
+++ b/src/app/pet/dog/dog-create/dog-create.component.ts
@@ -0,0 +1,156 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
+import {DogService} from "../dog.service";
+import {Dog} from "../dog";
+import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from "@angular/forms";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+
+@Component({
+  selector: 'app-dog-create',
+  templateUrl: './dog-create.component.html',
+  styleUrls: ['./dog-create.component.css']
+})
+export class DogCreateComponent implements OnInit{
+
+  closeResult = '';
+  public isModalSaved: boolean = false;
+  public dogs: Dog[] = [];
+  public dog: Dog;
+  public dogForm: FormGroup;
+
+  constructor(
+    private router: Router,
+    private dogService: DogService,
+  ) {}
+
+  ngOnInit(): void {
+    this.dog = new Dog();
+    this.dogForm = new FormGroup({
+      chip: new FormControl(this.dog.chip, [
+        Validators.required,
+      ]),
+      name: new FormControl(this.dog.name, [
+        Validators.required,
+      ]),
+      dateOfBirth: new FormControl(this.dog.dateOfBirth, [
+        Validators.required,
+        this.dateValidator(),
+      ]),
+      colour: new FormControl(this.dog.colour, [
+        Validators.required,
+        this.colourValidator(),
+      ]),
+      size: new FormControl(this.dog.size, [
+        Validators.required,
+        this.numberValidator(),
+      ]),
+      sex: new FormControl(this.dog.sex, [
+        Validators.required,
+        this.sexValidator(),
+      ]),
+      race: new FormControl(this.dog.race, [
+        Validators.required,
+      ]),
+      dangerous: new FormControl(this.dog.dangerous, []),
+      barkingLevel: new FormControl(this.dog.barkingLevel, [
+        Validators.required,
+      ]),
+    });
+    this.loadDogList();
+  }
+
+  loadDogList() {
+    this.dogService
+      .getPage({
+        sort: { name: 'ASC' },
+      })
+      .subscribe((dogs: PagedResourceCollection<Dog>) => {
+        this.dogs = dogs.resources.sort((a, b) =>
+          a.chip.localeCompare(b.chip)
+        );
+      });
+  }
+
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.dogForm.get('chip');
+  }
+
+  get name() {
+    return this.dogForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.dogForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.dogForm.get('adopted');
+  }
+
+  get colour() {
+    return this.dogForm.get('colour');
+  }
+
+  get size() {
+    return this.dogForm.get('size');
+  }
+
+  get sex() {
+    return this.dogForm.get('sex');
+  }
+
+  get race() {
+    return this.dogForm.get('race');
+  }
+
+  get dangerous() {
+    return this.dogForm.get('dangerous');
+  }
+
+  get barkingLevel() {
+    return this.dogForm.get('barkingLevel');
+  }
+
+  onSubmit(): void {
+    this.dog.adopted = false;
+    this.dogService
+      .createResource({ body: this.dog })
+      .subscribe((dog: Dog) => {
+        const uri = (dog as any).uri;
+        this.router.navigate([uri]).then();
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-delete/dog-delete.component.html b/src/app/pet/dog/dog-delete/dog-delete.component.html
new file mode 100644
index 0000000..ee8f0b6
--- /dev/null
+++ b/src/app/pet/dog/dog-delete/dog-delete.component.html
@@ -0,0 +1,16 @@
+<div class="panel panel-warning">
+    <div class="panel-heading">
+      <div class="panel-title">
+        <h1>Are you sure you want to delete this record?</h1>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="text-center">
+        <button id="deleteBtn" type="button" (click)="delete()"
+                class="btn btn-outline-danger m-1">Delete</button>
+        <button id="listBtn" type="button" [routerLink]="['/dogs', dog.id]"
+                class="btn btn-outline-primary m-1">Cancel</button>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-delete/dog-delete.component.ts b/src/app/pet/dog/dog-delete/dog-delete.component.ts
new file mode 100644
index 0000000..2417326
--- /dev/null
+++ b/src/app/pet/dog/dog-delete/dog-delete.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+
+@Component({
+  selector: 'app-dog-delete',
+  templateUrl: './dog-delete.component.html'
+})
+export class DogDeleteComponent implements OnInit {
+  public dog: Dog = new Dog();
+  private id: string;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    this.id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(this.id).subscribe(
+      dog => this.dog = dog);
+  }
+
+  delete(): void {
+    this.dogService.deleteResource(this.dog).subscribe(
+      () => {
+        this.router.navigate(['dogs']);
+      });
+  }
+}
diff --git a/src/app/pet/dog/dog-detail/dog-detail.component.html b/src/app/pet/dog/dog-detail/dog-detail.component.html
new file mode 100644
index 0000000..393202d
--- /dev/null
+++ b/src/app/pet/dog/dog-detail/dog-detail.component.html
@@ -0,0 +1,63 @@
+<div class="card mb-4">
+    <div class="card-block">
+      <h1 class="card-title col-md-12 px-4 pt-3 text-xxl">{{dog.name}}</h1>
+      <div class="card-body row m-1">
+        <div class="col-md-4 mb-5">
+          <h6 class="card-subtitle text-muted">Chip</h6>
+          <p class="card-text">{{dog.chip}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Date of birth</h6>
+            <p class="card-text">{{dog.dateOfBirth}}</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Colour</h6>
+            <div style="width: 100%; height: 24px; background-color: {{dog.colour}}; border: 1px solid;"></div>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Size</h6>
+            <p class="card-text" *ngIf="dog.size === 1">Small</p>
+            <p class="card-text" *ngIf="dog.size === 2">Average</p>
+            <p class="card-text" *ngIf="dog.size === 3">Large</p>
+            <p class="card-text" *ngIf="dog.size === 4">Extra Large</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Sex</h6>
+            <p class="card-text" *ngIf="dog.sex === 'male'">Male</p>
+            <p class="card-text" *ngIf="dog.sex === 'female'">Female</p>
+        </div>
+        <div class="col-md-4 mb-5">
+            <h6 class="card-subtitle text-muted">Race</h6>
+            <p class="card-text">{{dog.race}}</p>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Dangerous</h6>
+            <i class="fa fa-check text-success" *ngIf="dog.dangerous === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="dog.dangerous === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Adopted</h6>
+            <i class="fa fa-check text-success" *ngIf="dog.adopted === true"></i>
+            <i class="fa fa-xmark text-danger" *ngIf="dog.adopted === false"></i>
+        </div>
+        <div class="col-md-4">
+            <h6 class="card-subtitle text-muted">Barking level</h6>
+            <p class="card-text" *ngIf="dog.barkingLevel === 1">No barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 2">Low barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 3">Average barking</p>
+            <p class="card-text" *ngIf="dog.barkingLevel === 4">Loud barking</p>
+        </div>
+      </div>
+      <div class="card-footer text-right">
+        <button id="listBtn" type="button" [routerLink]="['/dogs']"
+                class="btn m-1 btn-outline-primary">Dog List
+        </button>
+        <button id="editBtn" type="button" [routerLink]="['edit']"
+                class="btn m-1 btn-outline-success">Edit
+        </button>
+        <button id="deleteBtn" type="button" [routerLink]="['delete']"
+                class="btn m-1 btn-outline-danger">Delete
+        </button>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-detail/dog-detail.component.ts b/src/app/pet/dog/dog-detail/dog-detail.component.ts
new file mode 100644
index 0000000..6e0bb88
--- /dev/null
+++ b/src/app/pet/dog/dog-detail/dog-detail.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DogService } from '../dog.service';
+import { Dog } from '../dog';
+
+@Component({
+  selector: 'app-dog-detail',
+  templateUrl: './dog-detail.component.html'
+})
+export class DogDetailComponent implements OnInit {
+  public dog: Dog = new Dog();
+
+  constructor(private route: ActivatedRoute,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(id).subscribe(
+      dog => {
+        this.dog = dog;
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-edit/dog-edit.component.html b/src/app/pet/dog/dog-edit/dog-edit.component.html
new file mode 100644
index 0000000..7472239
--- /dev/null
+++ b/src/app/pet/dog/dog-edit/dog-edit.component.html
@@ -0,0 +1,198 @@
+<form
+  id="dog-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="dogForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="dog.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="dog.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="dog.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="dog.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="dog.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="dog.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="barkingLevel">Barking Level</label>
+        <select
+          id="barkingLevel"
+          name="barkingLevel"
+          formControlName="barkingLevel"
+          class="form-control"
+          [(ngModel)]="dog.barkingLevel"
+        >
+          <option value="1">No barking</option>
+          <option value="2">Low barking</option>
+          <option value="3">Average barking</option>
+          <option value="4">Loud barking</option>
+        </select>
+        <div class="form-error" *ngIf="barkingLevel.errors?.['required']">
+          Barking level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['..']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-floppy-disk me-2"></i>
+        Edit
+      </button>
+    </div>
+  </fieldset>
+</form>
diff --git a/src/app/pet/dog/dog-edit/dog-edit.component.ts b/src/app/pet/dog/dog-edit/dog-edit.component.ts
new file mode 100644
index 0000000..bec45db
--- /dev/null
+++ b/src/app/pet/dog/dog-edit/dog-edit.component.ts
@@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-dog-edit',
+  templateUrl: './dog-edit.component.html'
+})
+export class DogEditComponent implements OnInit {
+  public dog: Dog = new Dog();
+  public dogForm: FormGroup;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private dogService: DogService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.dogService.getResource(id).subscribe(
+      (dog: Dog) => this.dog = dog );
+      this.dogForm = new FormGroup({
+        chip: new FormControl(this.dog.chip, [
+          Validators.required,
+        ]),
+        name: new FormControl(this.dog.name, [
+          Validators.required,
+        ]),
+        dateOfBirth: new FormControl(this.dog.dateOfBirth, [
+          Validators.required,
+          this.dateValidator(),
+        ]),
+        colour: new FormControl(this.dog.colour, [
+          Validators.required,
+          this.colourValidator(),
+        ]),
+        size: new FormControl(this.dog.size, [
+          Validators.required,
+          this.numberValidator(),
+        ]),
+        sex: new FormControl(this.dog.sex, [
+          Validators.required,
+          this.sexValidator(),
+        ]),
+        race: new FormControl(this.dog.race, [
+          Validators.required,
+        ]),
+        dangerous: new FormControl(this.dog.dangerous, []),
+        barkingLevel: new FormControl(this.dog.barkingLevel, [
+          Validators.required,
+        ]),
+      });
+  }
+
+  
+  dateValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const dateValue = control.value;
+      const isValidDate = !isNaN(Date.parse(dateValue));
+      return isValidDate ? null : { invalidDate: { value: control.value } };
+    };
+  }
+
+  colourValidator(): ValidatorFn {
+    const hexColorRe: RegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidColour = hexColorRe.test(control.value);
+      return isValidColour ? null : { invalidColour: { value: control.value } };
+    };
+  }
+
+  numberValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const numberValue = control.value;
+      const isValidNumber = !isNaN(numberValue) && numberValue > 0;
+      return isValidNumber ? null : { invalidNumber: { value: control.value } };
+    };
+  }
+
+  sexValidator(): ValidatorFn {
+    const validSexes = ['male', 'female'];
+    return (control: AbstractControl): ValidationErrors | null => {
+      const isValidSex = control.value !== null && control.value !== undefined && validSexes.includes(control.value.toLowerCase());
+      return isValidSex ? null : { invalidSex: { value: control.value } };
+    };
+  }
+
+  get chip() {
+    return this.dogForm.get('chip');
+  }
+
+  get name() {
+    return this.dogForm.get('name');
+  }
+
+  get dateOfBirth() {
+    return this.dogForm.get('dateOfBirth');
+  }
+
+  get adopted() {
+    return this.dogForm.get('adopted');
+  }
+
+  get colour() {
+    return this.dogForm.get('colour');
+  }
+
+  get size() {
+    return this.dogForm.get('size');
+  }
+
+  get sex() {
+    return this.dogForm.get('sex');
+  }
+
+  get race() {
+    return this.dogForm.get('race');
+  }
+
+  get dangerous() {
+    return this.dogForm.get('dangerous');
+  }
+
+  get barkingLevel() {
+    return this.dogForm.get('barkingLevel');
+  }
+
+
+  onSubmit(): void {
+    this.dogService.patchResource(this.dog).subscribe(
+      (patchedDog: Dog) => {
+          this.router.navigate(['dogs', patchedDog.id]);
+      });
+  }
+
+}
diff --git a/src/app/pet/dog/dog-list/dog-list.component.html b/src/app/pet/dog/dog-list/dog-list.component.html
index c9d0a98..717a80a 100644
--- a/src/app/pet/dog/dog-list/dog-list.component.html
+++ b/src/app/pet/dog/dog-list/dog-list.component.html
@@ -1,14 +1,52 @@
+<div class="w-full d-flex" style="font-size: xx-large;">
+  <i class="fa fa-paw me-3"></i>
+  <p class="mt-2">Dogs</p>
+</div>
+<div class="d-flex w-full justify-content-end mb-3">
+  <app-dog-search (emitResults)="detail($event)"></app-dog-search>
+  <button
+        id="createDog"
+        type="button"
+        [routerLink]="['/dogs/create']"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+  </button>
+</div>
 <div class="card mb-1" *ngFor="let dog of dogs">
     <div class="card-block row m-1 col-12">
       <div class="card-body row align-items-center">
-        <div class="col-6 mt-1">
-          <h6 class="card-subtitle text-muted">Name</h6>
-          <a class="card-text" [routerLink]="['/dogs', dog.id]">{{dog.name}}</a>
-        </div>
-        <div class="col-6 mt-1">
+        <div class="col-3 mt-1">
           <h6 class="card-subtitle text-muted">Chip</h6>
           <p class="card-text">{{dog.chip}}</p>
         </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Name</h6>
+          <p class="card-text">{{dog.name}}</p>
+        </div>
+        <div class="col-3 mt-1">
+          <h6 class="card-subtitle text-muted">Date of birth</h6>
+          <p class="card-text">{{dog.dateOfBirth}}</p>
+        </div>
+        <div class="col-3 mt-1 d-flex justify-content-end">
+          <button
+            id="seeDog"
+            type="button"
+            [routerLink]="['/dogs', dog.id]"
+            class="btn btn-primary ms-3"
+          >
+            <i class="fa fa-eye"></i>
+          </button>
+          <button
+            id="seeDog"
+            type="button"
+            [routerLink]="['/dogs/' + dog.id + '/edit']"
+            class="btn btn-secondary ms-3"
+          >
+            <i class="fa fa-pencil"></i>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/pet/dog/dog-list/dog-list.component.ts b/src/app/pet/dog/dog-list/dog-list.component.ts
index 8015c16..d1edc63 100644
--- a/src/app/pet/dog/dog-list/dog-list.component.ts
+++ b/src/app/pet/dog/dog-list/dog-list.component.ts
@@ -41,4 +41,9 @@ export class DogListComponent implements OnInit {
         (page: PagedResourceCollection<Dog>) => (this.dogs = page.resources)
       );
   }
+
+  detail(dog: Dog): void {
+    this.router.navigate(['/dogs', dog.id]);
+  }
+
 }
diff --git a/src/app/pet/dog/dog-search/dog-search.component.html b/src/app/pet/dog/dog-search/dog-search.component.html
new file mode 100644
index 0000000..910bb08
--- /dev/null
+++ b/src/app/pet/dog/dog-search/dog-search.component.html
@@ -0,0 +1,12 @@
+<div class="col form-group">
+    <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
+           [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search dogs"
+           [class.loading]="searching" (selectItem)="select($event.item)"/>
+    <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+  </div>
+  
+  <ng-template #rt let-r="result" let-t="term">
+    <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
+    <div class="row"><small>{{r.name}} - {{r.chip}}</small></div>
+  </ng-template>
+  
\ No newline at end of file
diff --git a/src/app/pet/dog/dog-search/dog-search.component.ts b/src/app/pet/dog/dog-search/dog-search.component.ts
new file mode 100644
index 0000000..3774ca8
--- /dev/null
+++ b/src/app/pet/dog/dog-search/dog-search.component.ts
@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Observable, of, OperatorFunction } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { ResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import { Dog } from '../dog';
+import { DogService } from '../dog.service';
+
+@Component({
+  selector: 'app-dog-search',
+  templateUrl: './dog-search.component.html'
+})
+
+export class DogSearchComponent {
+  @Output() emitResults: EventEmitter<Dog> = new EventEmitter();
+  searchFailed = false;
+  searching = false;
+
+  constructor(private dogService: DogService) {
+  }
+
+  autocomplete: OperatorFunction<string, readonly Dog[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.searching = true),
+      switchMap(term => term.length < 3 ? of([]) :
+        this.dogService.findByIdContaining(term).pipe(
+          map((collection: ResourceCollection<Dog>) => collection.resources),
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          })
+        )
+      ),
+      tap(() => this.searching = false )
+    )
+
+  select(item: any): void {
+    this.emitResults.emit(item as Dog);
+  }
+}
diff --git a/src/app/pet/dog/dog.service.ts b/src/app/pet/dog/dog.service.ts
index d1d96cd..fbafecd 100644
--- a/src/app/pet/dog/dog.service.ts
+++ b/src/app/pet/dog/dog.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from "@angular/core";
 import { PetService } from "../pet.service";
 import { Dog } from "./dog";
+import { Observable, forkJoin, map } from "rxjs";
+import { ResourceCollection } from "@lagoshny/ngx-hateoas-client";
 
 @Injectable({providedIn: 'root'})
 export class DogService extends PetService<Dog> {
@@ -9,4 +11,18 @@ export class DogService extends PetService<Dog> {
         super(Dog);
     }
 
+    public findByIdContaining(query: string): Observable<ResourceCollection<Dog>> {
+        let res1 = this.searchCollection('findByName', { params: { name: query } });
+        let res2 = this.searchCollection('findByChip', { params: { chip: query } });
+        return forkJoin([res1, res2]).pipe(
+            map(([result1, result2]) => {
+                const combinedResources = [...result1.resources, ...result2.resources];
+                return {
+                  ...result1,
+                  resources: combinedResources,
+                } as ResourceCollection<Dog>;
+              })
+        );;
+    }
+
 }
\ No newline at end of file
diff --git a/src/app/pet/dog/dog.ts b/src/app/pet/dog/dog.ts
index 6d348b5..545e33a 100644
--- a/src/app/pet/dog/dog.ts
+++ b/src/app/pet/dog/dog.ts
@@ -4,6 +4,6 @@ import { Pet } from '../pet';
 @HateoasResource('dogs')
 export class Dog extends Pet {
 
-    meowingLevel: number;
+    barkingLevel: number;
 
 }
\ No newline at end of file