Merged in development (pull request #42)

Development

src/app/components/search-results/search-results.component.html

@@ -8,7 +8,7 @@
     </div>
   </div>
 
-  <cdk-virtual-scroll-viewport itemSize="180" class="viewport">
+  <cdk-virtual-scroll-viewport itemSize="190" class="viewport">
     <div *cdkVirtualFor="let product of ds" class="product-item">
       <app-product-card
         [product]="product"

src/app/components/search-results/search-results.component.scss

@@ -11,7 +11,8 @@ app-filter {
   height: calc(100% - 100px);
 }
 .viewport {
-  height: 100%;
+  padding-bottom: 10px;
+  height: calc(100% - 10px);
   width: 100%;
 }
 

src/app/components/search-results/search-results.component.ts

@@ -5,7 +5,14 @@ import { Search } from 'src/app/core/models/search.model';
 import { Process } from 'src/app/core/models/process.model';
 import { Product } from 'src/app/core/models/product.model';
 import { Router } from '@angular/router';
-import { map, filter, take, debounceTime } from 'rxjs/operators';
+import {
+  map,
+  filter,
+  take,
+  debounceTime,
+  distinctUntilChanged,
+  switchMap
+} from 'rxjs/operators';
 import { Select, Store } from '@ngxs/store';
 import { ItemDTO } from 'dist/cat-service/lib/dtos';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
@@ -35,7 +42,7 @@ export class SearchResultsComponent implements OnInit {
   @Select(ProcessState.getProducts) products$: Observable<ItemDTO[]>;
   skip = 0;
 
-  dummies = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+  dummies = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   ds: SearchDataSource;
 
   constructor(
@@ -58,16 +65,22 @@ export class SearchResultsComponent implements OnInit {
       []
     );
 
-    this.store.select(FilterState.getFilters).subscribe(fil => {
-      if (!!fil) {
-        this.ds = new SearchDataSource(
-          this.productService,
-          this.currentSearch.query,
-          this.store,
-          fil
-        );
-      }
-    });
+    this.store
+      .select(FilterState.getFiltersJSON)
+      .pipe(
+        distinctUntilChanged(),
+        switchMap(f => this.store.selectOnce(FilterState.getFilters))
+      )
+      .subscribe(fil => {
+        if (!!fil) {
+          this.ds = new SearchDataSource(
+            this.productService,
+            this.currentSearch.query,
+            this.store,
+            fil
+          );
+        }
+      });
   }
 
   loadCurrentSearch() {

src/app/core/store/state/filter.state.ts

@@ -1,115 +1,127 @@
 import { Filter } from '../../models/filter.model';
 import { State, Selector, Action, StateContext } from '@ngxs/store';
 import {
-    LoadFilters,
-    LoadFullFilters,
-    SelectFilterById,
-    UnselectFilterById,
-    ToggleFilterItemById,
-    ToggleFilterItemByName
+  LoadFilters,
+  LoadFullFilters,
+  SelectFilterById,
+  UnselectFilterById,
+  ToggleFilterItemById,
+  ToggleFilterItemByName
 } from '../actions/filter.actions';
 import { load } from '@angular/core/src/render3';
 import { FilterService } from '../../services/filter.service';
 
 export class FilterStateModel {
-    filters: Filter[];
+  filters: Filter[];
 }
 
 @State<FilterStateModel>({
-    name: 'filters',
-    defaults: {
-        filters: []
-    }
+  name: 'filters',
+  defaults: {
+    filters: []
+  }
 })
 export class FilterState {
+  constructor(private filterService: FilterService) {}
 
-    constructor(private filterService: FilterService) { }
+  @Selector()
+  static getFilters(state: FilterStateModel) {
+    return state.filters;
+  }
 
-    @Selector()
-    static getFilters(state: FilterStateModel) {
-        return state.filters;
-    }
+  @Selector()
+  static getFiltersJSON(state: FilterStateModel) {
+    return JSON.stringify(state.filters);
+  }
 
-    @Selector()
-    static getSelectedFilters(state: FilterStateModel) {
-        return state.filters.filter(f => f.items.find(i => i.selected === true));
-    }
+  @Selector()
+  static getSelectedFilters(state: FilterStateModel) {
+    return state.filters.filter(f => f.items.find(i => i.selected === true));
+  }
 
-    @Action(LoadFilters)
-    load(ctx: StateContext<FilterStateModel>) {
-        const state = ctx.getState();
-        this.filterService.getFilters().subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(LoadFilters)
+  load(ctx: StateContext<FilterStateModel>) {
+    const state = ctx.getState();
+    this.filterService.getFilters().subscribe((filters: Filter[]) => {
+      ctx.patchState({
+        ...state,
+        filters: [...filters]
+      });
+    });
+  }
 
-    @Action(LoadFullFilters)
-    loadFullFilters(ctx: StateContext<FilterStateModel>) {
-        const state = ctx.getState();
-        this.filterService.getFullFilter().subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(LoadFullFilters)
+  loadFullFilters(ctx: StateContext<FilterStateModel>) {
+    const state = ctx.getState();
+    this.filterService.getFullFilter().subscribe((filters: Filter[]) => {
+      ctx.patchState({
+        ...state,
+        filters: [...filters]
+      });
+    });
+  }
 
-    @Action(SelectFilterById)
-    selectFilterById(ctx: StateContext<FilterStateModel>, { id, payload }: SelectFilterById) {
-        const state = ctx.getState();
-        this.filterService.selectFilterById(payload, id).subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(SelectFilterById)
+  selectFilterById(
+    ctx: StateContext<FilterStateModel>,
+    { id, payload }: SelectFilterById
+  ) {
+    const state = ctx.getState();
+    this.filterService
+      .selectFilterById(payload, id)
+      .subscribe((filters: Filter[]) => {
+        ctx.patchState({
+          ...state,
+          filters: [...filters]
+        });
+      });
+  }
 
-    @Action(UnselectFilterById)
-    unselectFilterById(ctx: StateContext<FilterStateModel>, { id, payload }: UnselectFilterById) {
-        const state = ctx.getState();
-        this.filterService.unselectFilterById(payload, id).subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(UnselectFilterById)
+  unselectFilterById(
+    ctx: StateContext<FilterStateModel>,
+    { id, payload }: UnselectFilterById
+  ) {
+    const state = ctx.getState();
+    this.filterService
+      .unselectFilterById(payload, id)
+      .subscribe((filters: Filter[]) => {
+        ctx.patchState({
+          ...state,
+          filters: [...filters]
+        });
+      });
+  }
 
-    @Action(ToggleFilterItemById)
-    toggleItemById(ctx: StateContext<FilterStateModel>, { id, payload }: ToggleFilterItemById) {
-        const state = ctx.getState();
-        this.filterService.toggleFilterItemsById(payload, id).subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(ToggleFilterItemById)
+  toggleItemById(
+    ctx: StateContext<FilterStateModel>,
+    { id, payload }: ToggleFilterItemById
+  ) {
+    const state = ctx.getState();
+    this.filterService
+      .toggleFilterItemsById(payload, id)
+      .subscribe((filters: Filter[]) => {
+        ctx.patchState({
+          ...state,
+          filters: [...filters]
+        });
+      });
+  }
 
-    @Action(ToggleFilterItemByName)
-    toggleItemByName(ctx: StateContext<FilterStateModel>, { name, payload }: ToggleFilterItemByName) {
-        const state = ctx.getState();
-        this.filterService.toggleFilterItemsByName(payload, name).subscribe(
-            (filters: Filter[]) => {
-                ctx.patchState({
-                    ...state,
-                    filters: [...filters]
-                });
-            }
-        );
-    }
+  @Action(ToggleFilterItemByName)
+  toggleItemByName(
+    ctx: StateContext<FilterStateModel>,
+    { name, payload }: ToggleFilterItemByName
+  ) {
+    const state = ctx.getState();
+    this.filterService
+      .toggleFilterItemsByName(payload, name)
+      .subscribe((filters: Filter[]) => {
+        ctx.patchState({
+          ...state,
+          filters: [...filters]
+        });
+      });
+  }
 }

src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.scss

@@ -62,7 +62,6 @@
   }
 }
 
-
 // OLD IPADS
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
   .create-wrapper {
@@ -71,12 +70,12 @@
     }
 
     .invalid-feedback {
-      left: 47%;
+      right: 0;
       width: 52%;
     }
 
     .invalid-feedback-under-start {
-      left: -6%;
+      right: 0;
     }
   }
 }
@@ -94,7 +93,7 @@
 
     .invalid-feedback-under-start {
       text-align: right;
-      left: -6%;
+      right: 0;
     }
   }
 }
@@ -108,7 +107,7 @@
 
     .invalid-feedback-under-start {
       text-align: right;
-      left: -24px;
+      right: 0;
     }
   }
 }
@@ -153,7 +152,7 @@
 .invalid-feedback {
   position: absolute;
   top: 13px;
-  left: 51%;
+  right: 0;
   text-align: right;
   animation: shake 0.3s cubic-bezier(0.7, 0.07, 0.19, 0.97) both;
   transform: translate3d(0, 0, 0);

src/app/modules/customer-search/components/search-customer-result/search-customer-result.component.html

@@ -1,5 +1,5 @@
 <div class="customer-search-result-container">
-  <app-loading [loading]="users.length == 0"></app-loading>
+  <app-loading *ngIf="users.length == 0" loading="true"></app-loading>
   <div class="user" *ngFor="let user of users">
     <div class="user-info-container">
       <div class="user-info">