[HIMA-12] Created component for product detail page & [HIMA-29] Implemeted api calls to get filters

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { CustomSerializer } from './core/reducers/router.reducer';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { CatServiceModule, CatSearchService, CatSearchMockService } from 'projects/cat-service/src/lib';
 import { ProductCardComponent } from './components/product-card/product-card.component';
+import { ProductDetailsComponent } from './components/product-details/product-details.component';
 
 const rootReducer = {
   processes: processReducer,
@@ -32,7 +33,7 @@ const rootReducer = {
   recentArticleSearch: recentArticleSearchReducer,
   itemsDTO: productReducer,
   filters: filterReducer,
-  routerReducer: fromRouter.routerReducer
+  router: fromRouter.routerReducer
 };
 
 export function _basicAuthorizationInterceptorFactory() {
@@ -48,7 +49,8 @@ export function _basicAuthorizationInterceptorFactory() {
   declarations: [
     AppComponent,
     SearchResultsComponent,
-    ProductCardComponent
+    ProductCardComponent,
+    ProductDetailsComponent
   ],
   imports: [
     BrowserModule,

src/app/app.state.ts

@@ -5,6 +5,8 @@ import { RecentArticleSearch } from './core/models/recent-article-search.model';
 import { Product } from './core/models/product.model';
 import { Filter } from './core/models/filter.model';
 import { ItemDTO } from 'projects/cat-service/src/lib';
+import { RouterStateUrl } from './core/reducers/router.reducer';
+import * as fromRouter from '@ngrx/router-store';
 
 export class AppState {
     readonly processes: Process[];
@@ -15,4 +17,5 @@ export class AppState {
     readonly itemsDTO: ItemDTO[];
     readonly error: string;
     readonly filters: Filter[];
+    readonly router: fromRouter.RouterReducerState<RouterStateUrl>;
 }

src/app/components/product-card/product-card.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Product } from 'src/app/core/models/product.model';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-product-card',
@@ -11,9 +12,10 @@ export class ProductCardComponent implements OnInit {
   @Input()
   product: Product;
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   productDetails(product: Product) {
+    this.router.navigate(['product-details/' + product.id]);
   }
 
   ngOnInit() {

src/app/components/product-details/product-details.component.html

@@ -0,0 +1,3 @@
+<p>
+  product-details works! {{id}}
+</p>

src/app/components/product-details/product-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductDetailsComponent } from './product-details.component';
+
+describe('ProductDetailsComponent', () => {
+  let component: ProductDetailsComponent;
+  let fixture: ComponentFixture<ProductDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/product-details/product-details.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from 'src/app/app.state';
+
+@Component({
+  selector: 'app-product-details',
+  templateUrl: './product-details.component.html',
+  styleUrls: ['./product-details.component.scss']
+})
+export class ProductDetailsComponent implements OnInit {
+
+  id: number;
+
+  constructor(private store: Store<AppState>) { }
+
+  ngOnInit() {
+    this.store.select(state => state.router).subscribe(
+      (data: any) => this.id = data.state.params.id
+    );
+  }
+
+}

src/app/core/services/filter.service.ts

@@ -2,13 +2,15 @@ import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Filter } from '../models/filter.model';
 import { filterMock } from 'mocks/filters.mock';
+import { filter } from 'rxjs/operators';
+import { CatSearchService, ApiResponse, UISettingsDTO } from 'projects/cat-service/src/lib';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FilterService {
 
-  constructor() { }
+  constructor(private service: CatSearchService) { }
 
   selectFilterById(filters: Filter[], id: number): Observable<Filter[]> {
     filters.filter(t => t.expanded === true).forEach(t => t.expanded = false);
@@ -24,17 +26,21 @@ export class FilterService {
   toggleFilterItemsById(filters: Filter[], id: number): Observable<Filter[]> {
     filters.filter(t => t.expanded === true)
       .forEach(t => t.items.filter(i => i.id === id)
-      .forEach(d => d.selected = !d.selected));
+        .forEach(d => d.selected = !d.selected));
     return of(filters);
   }
 
   // service method to get the first 3 filters
   getFilters(): Observable<Filter[]> {
     // TODO: implement call to backend API to get filter metadata
+    this.service.settings().subscribe(
+      (data: ApiResponse<UISettingsDTO>) =>
+        console.log(data.result.filter, data.result.orderBy, data)
+    );
     return of(filterMock.slice(0, 3));
   }
 
- // service method to get filters metadata
+  // service method to get filters metadata
   getFullFilter(): Observable<Filter[]> {
     // TODO: implement call to backend API to get filter metadata
     return of(filterMock);

src/app/shared/routes/routes.ts

@@ -2,10 +2,12 @@ import { Routes } from '@angular/router';
 import { DashboardComponent } from 'src/app/components/dashboard/dashboard.component';
 import { ArticleSearchComponent } from 'src/app/components/article-search/article-search.component';
 import { SearchResultsComponent } from 'src/app/components/search-results/search-results.component';
+import { ProductDetailsComponent } from 'src/app/components/product-details/product-details.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
     { path: 'dashboard', component: DashboardComponent },
     { path: 'article-search', component: ArticleSearchComponent },
-    { path: 'search-results', component: SearchResultsComponent }
+    { path: 'search-results', component: SearchResultsComponent },
+    { path: 'product-details/:id', component: ProductDetailsComponent }
 ];