From d39c2cb0399a1c0a949aea5f3d348c8965f9ae55 Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Thu, 18 Jan 2024 14:43:05 +0100
Subject: [PATCH] Add product category service and its filter

---
 .../navigation/navigation.component.html      | 13 ++++--
 .../navigation/navigation.component.ts        | 10 ++++-
 .../product-gallery.component.html            |  0
 .../product-gallery.component.scss            |  0
 .../product-gallery.component.ts              |  0
 .../product-info/product-info.component.html  |  0
 .../product-info/product-info.component.scss  |  0
 .../product-info/product-info.component.ts    |  0
 .../components/products/products.component.ts |  2 +-
 .../shoes-products.component.html             |  6 ++-
 src/app/features/products/products.module.ts  |  4 +-
 .../services/product-category.service.ts      | 45 +++++++++++++++++++
 .../products/services/product.service.ts      |  5 +--
 13 files changed, 72 insertions(+), 13 deletions(-)
 rename src/app/features/products/components/{product-main => }/product-gallery/product-gallery.component.html (100%)
 rename src/app/features/products/components/{product-main => }/product-gallery/product-gallery.component.scss (100%)
 rename src/app/features/products/components/{product-main => }/product-gallery/product-gallery.component.ts (100%)
 rename src/app/features/products/components/{product-main => }/product-info/product-info.component.html (100%)
 rename src/app/features/products/components/{product-main => }/product-info/product-info.component.scss (100%)
 rename src/app/features/products/components/{product-main => }/product-info/product-info.component.ts (100%)
 create mode 100644 src/app/features/products/services/product-category.service.ts

diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index a880e2a..37c5929 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -1,18 +1,23 @@
 <div class="navigation-container">
-  <vcl-navigation layout="horizontal" class="row justify-content-center" style="text-align: center;">
+  <vcl-navigation
+    *ngIf="categories$ | async"
+    layout="horizontal"
+    class="row justify-content-center"
+    style="text-align: center"
+  >
     <vcl-navigation-item>
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.NewIn' | translate }}
+        {{ "Navigation.NewIn" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <vcl-navigation-item>
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.Clothing' | translate }}
+        {{ "Navigation.Clothing" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <vcl-navigation-item (click)="this.navigate('/shoes')">
       <vcl-navigation-label class="navigation-item">
-        {{ 'Navigation.Shoes' | translate }}
+        {{ "Navigation.Shoes" | translate }}
       </vcl-navigation-label>
     </vcl-navigation-item>
     <!--<vcl-navigation-item>
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
index 413e70c..e790c71 100644
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { ProductCategoryService } from 'src/app/features/products/services/product-category.service';
 
 @Component({
   selector: 'app-navigation',
@@ -7,9 +8,14 @@ import { Router } from '@angular/router';
   styleUrls: ['./navigation.component.scss'],
 })
 export class NavigationComponent {
-  constructor(private router: Router) {}
+  categories$ = this.productCategoryService.category$;
 
-  public navigate(value: string): void {
+  constructor(
+    private router: Router,
+    private productCategoryService: ProductCategoryService
+  ) {}
+
+  navigate(value: string): void {
     this.router.navigateByUrl(value);
   }
 }
diff --git a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.html b/src/app/features/products/components/product-gallery/product-gallery.component.html
similarity index 100%
rename from src/app/features/products/components/product-main/product-gallery/product-gallery.component.html
rename to src/app/features/products/components/product-gallery/product-gallery.component.html
diff --git a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.scss b/src/app/features/products/components/product-gallery/product-gallery.component.scss
similarity index 100%
rename from src/app/features/products/components/product-main/product-gallery/product-gallery.component.scss
rename to src/app/features/products/components/product-gallery/product-gallery.component.scss
diff --git a/src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts b/src/app/features/products/components/product-gallery/product-gallery.component.ts
similarity index 100%
rename from src/app/features/products/components/product-main/product-gallery/product-gallery.component.ts
rename to src/app/features/products/components/product-gallery/product-gallery.component.ts
diff --git a/src/app/features/products/components/product-main/product-info/product-info.component.html b/src/app/features/products/components/product-info/product-info.component.html
similarity index 100%
rename from src/app/features/products/components/product-main/product-info/product-info.component.html
rename to src/app/features/products/components/product-info/product-info.component.html
diff --git a/src/app/features/products/components/product-main/product-info/product-info.component.scss b/src/app/features/products/components/product-info/product-info.component.scss
similarity index 100%
rename from src/app/features/products/components/product-main/product-info/product-info.component.scss
rename to src/app/features/products/components/product-info/product-info.component.scss
diff --git a/src/app/features/products/components/product-main/product-info/product-info.component.ts b/src/app/features/products/components/product-info/product-info.component.ts
similarity index 100%
rename from src/app/features/products/components/product-main/product-info/product-info.component.ts
rename to src/app/features/products/components/product-info/product-info.component.ts
diff --git a/src/app/features/products/components/products/products.component.ts b/src/app/features/products/components/products/products.component.ts
index 5aec5b3..7ed143f 100644
--- a/src/app/features/products/components/products/products.component.ts
+++ b/src/app/features/products/components/products/products.component.ts
@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
 
 @Component({
-  selector: 'products',
+  selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.scss']
 })
diff --git a/src/app/features/products/components/shoes-products/shoes-products.component.html b/src/app/features/products/components/shoes-products/shoes-products.component.html
index e8e26d4..a276755 100644
--- a/src/app/features/products/components/shoes-products/shoes-products.component.html
+++ b/src/app/features/products/components/shoes-products/shoes-products.component.html
@@ -1 +1,5 @@
-<products [pageTitle]="pageTitle" [currency]="currency" [products]=" products$ | async"></products>
+<app-products
+  [pageTitle]="pageTitle"
+  [currency]="currency"
+  [products]="products$ | async"
+></app-products>
diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts
index f6fce91..3afa652 100644
--- a/src/app/features/products/products.module.ts
+++ b/src/app/features/products/products.module.ts
@@ -10,8 +10,8 @@ import { ProductCardComponent } from './components/product-card/product-card.com
 import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
 import { ProductInterestComponent } from './components/product-interest/product-interest.component';
 import { ProductDescriptionComponent } from './components/product-description/product-description.component';
-import { ProductInfoComponent } from './components/product-main/product-info/product-info.component';
-import { ProductGalleryComponent } from './components/product-main/product-gallery/product-gallery.component';
+import { ProductInfoComponent } from './components/product-info/product-info.component';
+import { ProductGalleryComponent } from './components/product-gallery/product-gallery.component';
 import { ProductNavigationComponent } from './components/product-navigation/product-navigation.component';
 import { ProductMainComponent } from './components/product-main/product-main.component';
 import { ProductRecommendComponent } from './components/product-recommend/product-recommend.component';
diff --git a/src/app/features/products/services/product-category.service.ts b/src/app/features/products/services/product-category.service.ts
new file mode 100644
index 0000000..41a8a06
--- /dev/null
+++ b/src/app/features/products/services/product-category.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { catchError, of, tap } from 'rxjs';
+import {
+  IoRestorecommerceResourcebaseFilterOperation,
+  IoRestorecommerceResourcebaseFilterOpOperator,
+  ProductCategoryQueryGQL,
+} from 'src/app/generated/graphql';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProductCategoryService {
+  constructor(private categoryGQL: ProductCategoryQueryGQL) {}
+
+  category$ = this.categoryGQL
+    .fetch({
+      input: {
+        filters: [
+          {
+            // TODO Refactor this code as In-house boilerplate code.
+            filters: [
+              {
+                field: 'meta.owners[*].attributes[0].value',
+                operation: IoRestorecommerceResourcebaseFilterOperation.In,
+                value: 'r-ug',
+              },
+              {
+                field: 'parent.parent_id',
+                value: '',
+                operation: IoRestorecommerceResourcebaseFilterOperation.Eq,
+              },
+            ],
+            operator: IoRestorecommerceResourcebaseFilterOpOperator.And,
+          },
+        ],
+      },
+    })
+    .pipe(
+      tap((data) => console.log('category data', data)),
+      catchError((err) => {
+        console.log('Error:', err);
+        return of(null);
+      })
+    );
+}
diff --git a/src/app/features/products/services/product.service.ts b/src/app/features/products/services/product.service.ts
index 5f650e8..6dc69fd 100644
--- a/src/app/features/products/services/product.service.ts
+++ b/src/app/features/products/services/product.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { map, catchError, of, tap } from 'rxjs';
 import {
@@ -7,12 +7,11 @@ import {
   ProductsQueryGQL,
 } from '../../../generated/graphql';
 
+
 @Injectable({
   providedIn: 'root',
 })
 export class ProductService {
-  productColorChanged = new EventEmitter<string>();
-
   constructor(private productGQL: ProductsQueryGQL) {}
 
   products$ = this.productGQL