Merged in development (pull request #60)

Development

src/app/core/store/actions/process.actions.ts

@@ -18,89 +18,103 @@ export const ADD_USER = '[PROCESS] Add new user to store';
 export const SET_EDIT_USER = '[PROCESS] User which data will be updated';
 export const ADD_BREADCRUMB = '[PROCESS] Add breadcrumb';
 export const UPDATE_BREADCRUMB = '[PROCESS] Update breadcrumb';
+export const UPDATE_CURRENT_BREADCRUMB_NAME =
+  '[PROCESS] Update breadcrumb name';
 export const POP_BREADCRUMB = '[PROCESS] Pop breadcrumb';
 
 export class AddProcess {
-    static readonly type = ADD_PROCESS;
+  static readonly type = ADD_PROCESS;
 
-    constructor(public payload: Process) {}
+  constructor(public payload: Process) {}
 }
 
 export class DeleteProcess {
-    static readonly type = DELETE_PROCESS;
+  static readonly type = DELETE_PROCESS;
 
-    constructor(public payload: Process) {}
+  constructor(public payload: Process) {}
 }
 
 export class SelectProcess {
-    static readonly type = SELECT_PROCESS;
+  static readonly type = SELECT_PROCESS;
 
-    constructor(public payload: Process) {}
+  constructor(public payload: Process) {}
 }
 
 export class ChangeCurrentRoute {
-    static readonly type = CHANGE_CURRENT_ROUTE;
+  static readonly type = CHANGE_CURRENT_ROUTE;
 
-    constructor(public payload: string, public removeLastBreadcrumb: boolean = false) {}
+  constructor(
+    public payload: string,
+    public removeLastBreadcrumb: boolean = false
+  ) {}
 }
 
 export class AddSearch {
-    static readonly type = ADD_SEARCH;
+  static readonly type = ADD_SEARCH;
 
-    constructor(public payload: Search) {}
+  constructor(public payload: Search) {}
 }
 
 export class SearchUser {
-    static readonly type = SEARCH_USER;
+  static readonly type = SEARCH_USER;
 
-    constructor(public payload: string) {}
+  constructor(public payload: string) {}
 }
 
 export class SetActiveUser {
-    static readonly type = SET_ACTIVE_USER;
+  static readonly type = SET_ACTIVE_USER;
 
-    constructor(public payload: User) {}
+  constructor(public payload: User) {}
 }
 
 export class SetCartData {
-    static readonly type = SET_CART;
+  static readonly type = SET_CART;
 
-    constructor(public quantity: number, public payload: ItemDTO, public breadcrumb: Breadcrumb) {}
+  constructor(
+    public quantity: number,
+    public payload: ItemDTO,
+    public breadcrumb: Breadcrumb
+  ) {}
 }
 
 export class PreventProductLoad {
-    static readonly type = PREVENT_PRODUCT_LOAD;
+  static readonly type = PREVENT_PRODUCT_LOAD;
 }
 
 export class AllowProductLoad {
-    static readonly type = ALLOW_PRODUCT_LOAD;
+  static readonly type = ALLOW_PRODUCT_LOAD;
 }
 export class AddUser {
-    static readonly type = ADD_USER;
+  static readonly type = ADD_USER;
 
-    constructor(public payload: User) {}
+  constructor(public payload: User) {}
 }
 
 export class SetUserDetails {
-    static readonly type = SET_EDIT_USER;
+  static readonly type = SET_EDIT_USER;
 
-    constructor(public payload: User) {}
+  constructor(public payload: User) {}
 }
 
 export class AddBreadcrumb {
-    static readonly type = ADD_BREADCRUMB;
+  static readonly type = ADD_BREADCRUMB;
 
-    constructor(public payload: Breadcrumb) {}
+  constructor(public payload: Breadcrumb) {}
 }
 
 export class UpdateBreadcrump {
-    static readonly type = UPDATE_BREADCRUMB;
+  static readonly type = UPDATE_BREADCRUMB;
 
-    constructor(public payload: Breadcrumb) {}
+  constructor(public payload: Breadcrumb) {}
+}
+export class UpdateCurrentBreadcrumbName {
+  static readonly type = UPDATE_CURRENT_BREADCRUMB_NAME;
+
+  constructor(public payload: string) {}
 }
 
 export class PopBreadcrumbsAfterCurrent {
-    static readonly type = POP_BREADCRUMB;
+  static readonly type = POP_BREADCRUMB;
 
-    constructor(public payload: Breadcrumb) {}
+  constructor(public payload: Breadcrumb) {}
 }

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

@@ -17,6 +17,7 @@ import { ItemDTO } from 'dist/cat-service/lib/dtos';
 import { getCurrentProcess } from '../../utils/process.util';
 import { Search } from '../../models/search.model';
 import { map } from 'rxjs/operators';
+import { ɵtextBinding } from '@angular/core';
 
 export class ProcessStateModel {
   processes: Process[];
@@ -677,6 +678,31 @@ export class ProcessState {
       })
     });
   }
+  @Action(actions.UpdateCurrentBreadcrumbName)
+  updateCurrentBreadcrumbName(
+    ctx: StateContext<ProcessStateModel>,
+    { payload }: actions.UpdateCurrentBreadcrumbName
+  ) {
+    const state = ctx.getState();
+
+    const process = state.processes.find(t => t.selected === true);
+    const breadcrumbs = [...process.breadcrumbs].map((b, i) => {
+      if (i == process.breadcrumbs.length - 1) {
+        return { name: payload, path: b.path };
+      }
+      return b;
+    });
+
+    ctx.patchState({
+      ...state,
+      processes: state.processes.map(p => {
+        if (p.selected === true) {
+          return { ...p, breadcrumbs: breadcrumbs };
+        }
+        return p;
+      })
+    });
+  }
 
   updateBreadcrumbForCurrentProcess(
     process: Process,

src/app/modules/customer-search/components/billing-address/billing-address.component.html

@@ -43,7 +43,7 @@
 </div>
 
 <h1 class="warning" (click)="addNew()">
-  Neue Rechnungsadresse hinzufüngen
+  Neue Rechnungsadresse hinzufügen
 </h1>
 
 <div class="default">

src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.html

@@ -6,6 +6,10 @@
     <app-billing-address></app-billing-address>
   </div>
 </app-card>
-<app-card class="newsletter">
+<app-card
+  class="newsletter"
+  [@shrinkSecondary]="!expanded"
+  (click)="expanded && expand()"
+>
   <app-newsletter-signup></app-newsletter-signup>
 </app-card>

src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.ts

@@ -1,17 +1,33 @@
+import { Store } from '@ngxs/store';
+import { UpdateCurrentBreadcrumbName } from './../../../../core/store/actions/process.actions';
 import { Component, OnInit } from '@angular/core';
-import { shrinkTitleAnimation, shrinkMainAnimation } from './shrink.animation';
+import {
+  shrinkTitleAnimation,
+  shrinkMainAnimation,
+  shrinkSecondaryAnimation
+} from './shrink.animation';
 
 @Component({
   selector: 'app-edit-billing-address',
   templateUrl: 'edit-billing-address.component.html',
   styleUrls: ['edit-billing-address.component.scss'],
-  animations: [shrinkTitleAnimation, shrinkMainAnimation]
+  animations: [
+    shrinkTitleAnimation,
+    shrinkMainAnimation,
+    shrinkSecondaryAnimation
+  ]
 })
 export class EditBillingAddressComponent implements OnInit {
   expanded = true;
+  constructor(private store: Store) {}
   ngOnInit(): void {}
 
   expand() {
     this.expanded = !this.expanded;
+    this.store.dispatch(
+      new UpdateCurrentBreadcrumbName(
+        this.expanded ? 'Rechnungsadresse' : 'Newsletter abonnieren'
+      )
+    );
   }
 }

src/app/modules/customer-search/pages/edit-billing-address/shrink.animation.ts

@@ -47,7 +47,7 @@ export const shrinkMainAnimation = trigger('shrinkMain', [
       height: '*'
     }),
     animate(
-      '400ms ease-out',
+      '300ms ease-out',
       style({
         visibility: 'hidden',
         height: '0',
@@ -56,3 +56,31 @@ export const shrinkMainAnimation = trigger('shrinkMain', [
     )
   ])
 ]);
+
+export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
+  state(
+    'true',
+    style({
+      height: '*'
+    })
+  ),
+  state(
+    'false',
+    style({
+      visibility: 'visible',
+      height: '16px',
+      overflow: 'hidden'
+    })
+  ),
+  transition('false => true', [
+    style({
+      height: '0'
+    }),
+    animate(
+      '300ms ease-out',
+      style({
+        height: '*'
+      })
+    )
+  ])
+]);

src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.html

@@ -109,7 +109,7 @@
               <input type="text" id="invoice_addrees" class="input form-control" formControlName="invoice_addrees" [ngClass]="{ 'error-visible': f.invoice_addrees.errors }" required #invoiceInput>
             </div>
             <div class="line-actions">
-              <a class="inline-btn" [routerLink]="['billing']">Ändern</a>
+              <a class="inline-btn" (click)="navigateToBillingAddress()">Ändern</a>
             </div>
           </div>
   

src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.ts

@@ -4,7 +4,11 @@ import { Observable } from 'rxjs';
 import { User } from '../../../../core/models/user.model';
 import { Select, Store } from '@ngxs/store';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { SetActiveUser, ChangeCurrentRoute } from '../../../../core/store/actions/process.actions';
+import {
+  SetActiveUser,
+  ChangeCurrentRoute,
+  AddBreadcrumb
+} from '../../../../core/store/actions/process.actions';
 import { Router } from '@angular/router';
 import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
 
@@ -74,14 +78,17 @@ export class EditCustomerCardComponent implements OnInit {
   }
 
   back() {
-    if (this.breadcrumbs.length >= 3 &&
+    if (
+      this.breadcrumbs.length >= 3 &&
       this.breadcrumbs[this.breadcrumbs.length - 2].name === 'Warenkorb'
     ) {
       const currentRoute = 'cart';
       this.store.dispatch(new ChangeCurrentRoute(currentRoute, true));
       this.router.navigate([currentRoute]);
     } else {
-      const currentRoute = this.user.newUser ? 'customer-search' : 'customer-search-result';
+      const currentRoute = this.user.newUser
+        ? 'customer-search'
+        : 'customer-search-result';
       this.store.dispatch(new ChangeCurrentRoute(currentRoute, true));
       this.router.navigate([currentRoute]);
     }
@@ -96,6 +103,15 @@ export class EditCustomerCardComponent implements OnInit {
     this.userForm.get(field).setErrors(null);
   }
 
+  navigateToBillingAddress() {
+    const currentRoute = 'customer-edit/' + this.user.id + '/billing';
+    this.store.dispatch(
+      new AddBreadcrumb({ name: 'Rechnungsadresse', path: currentRoute })
+    );
+    this.store.dispatch(new ChangeCurrentRoute(currentRoute));
+    this.router.navigate([currentRoute]);
+  }
+
   private setInputData(field: string, val: string) {
     this.userForm.get(field).patchValue(val);
     this.userForm.get(field).disable();
@@ -112,7 +128,7 @@ export class EditCustomerCardComponent implements OnInit {
       phone_number: ['', Validators.required],
       pay: ['', Validators.required],
       invoice_addrees: ['', Validators.required],
-      delivery_address: ['', Validators.required],
+      delivery_address: ['', Validators.required]
     });
   }
 }