Merged in development (pull request #41)

search performance update

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

@@ -5,7 +5,7 @@ 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 } from 'rxjs/operators';
+import { map, filter, take, debounceTime } from 'rxjs/operators';
 import { Select, Store } from '@ngxs/store';
 import { ItemDTO } from 'dist/cat-service/lib/dtos';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
@@ -107,7 +107,11 @@ export class SearchDataSource extends DataSource<Product | undefined> {
   private dataStream = new BehaviorSubject<(Product | undefined)[]>(
     this.cachedData
   );
+  private dataStreamDTO = new BehaviorSubject<(ItemDTO | undefined)[]>(
+    this.cachedItemsDTO
+  );
   private subscription = new Subscription();
+  private dssub = new Subscription();
   public loading = true;
   public results = false;
   private productMapping = new ProductMapping();
@@ -132,6 +136,11 @@ export class SearchDataSource extends DataSource<Product | undefined> {
         }
       })
     );
+    this.dssub.add(
+      this.dataStreamDTO
+        .pipe(debounceTime(1000))
+        .subscribe(i => this.store.dispatch(new SetProducts([...i])))
+    );
     this.fetchPage(0);
 
     return this.dataStream;
@@ -182,7 +191,7 @@ export class SearchDataSource extends DataSource<Product | undefined> {
           ...data.result.map(item => this.productMapping.fromItemDTO(item))
         );
         this.dataStream.next(this.cachedData);
-        this.store.dispatch(new SetProducts([...this.cachedItemsDTO]));
+        this.dataStreamDTO.next(this.cachedItemsDTO);
       });
   }
 }

src/app/modules/newsletter-signup/newsletter-signup.component.html

@@ -39,7 +39,8 @@
   </div>
 
   <app-signature-pad #sigPad class="pad"></app-signature-pad>
-  <caption>
+  <div *ngIf="!changes" class="disabled"></div>
+  <caption class="signature">
     Signature
   </caption>
 
@@ -50,5 +51,5 @@
     widerrufen.
   </p>
 
-  <a class="btn active" (click)="confirm()">Abonnieren</a>
+  <a class="btn active" (click)="confirm()" *ngIf="changes">Abonnieren</a>
 </div>

src/app/modules/newsletter-signup/newsletter-signup.component.scss

@@ -63,8 +63,6 @@
   margin-bottom: 60px;
   display: flex;
   flex: row;
-  margin-left: -20px;
-  margin-right: -20px;
 
   .option {
     display: flex;
@@ -92,6 +90,7 @@
 .text {
   white-space: nowrap;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 .additional {
   flex: 0.0001;
@@ -103,6 +102,19 @@
   margin-bottom: 15px;
 }
 
+.signature {
+  margin-top: 15px;
+}
+
+.disabled {
+  display: block;
+  background: #e1ebf5;
+  margin-top: -223px;
+  height: 206px;
+  width: 550px;
+  opacity: 0.2;
+}
+
 .btn {
   font-family: 'Open Sans';
   font-size: 18px;

src/app/modules/newsletter-signup/newsletter-signup.component.ts

@@ -44,12 +44,19 @@ export class NewsletterSignupComponent implements OnInit {
       selected: false
     }
   ];
+
   constructor() {}
 
   ngOnInit() {
     this.options = [...this.init];
   }
 
+  get changes() {
+    if (this.stage == 'one') {
+      return this.init.some(i => i.selected);
+    }
+    return this.extra.some(i => i.selected);
+  }
   nextStage() {
     this.stage = this.stage == 'one' ? 'two' : 'one';
     if (this.stage == 'one') {

src/app/shared/components/search-input/search-input.component.scss

@@ -32,6 +32,7 @@
   font-weight: bold;
   font-size: 21px;
   z-index: 7;
+  caret-color: #f70400;
 }
 
 .autocomplete {