From 7697d2921bcc6684a1cde77247b86831e61b04b7 Mon Sep 17 00:00:00 2001 From: Eraldo Hasanaj Date: Thu, 8 Aug 2019 17:30:00 +0200 Subject: [PATCH] [HIMA-591] working customer creation refinment --- .vscode/settings.json | 1 - apps/sales/src/app/app.module.ts | 1 + .../core/store/selectors/shared.selectors.ts | 29 ++++++- .../src/app/core/utils/app.prototypes.ts | 15 ++++ .../create-customer-card.component.html | 33 +++++++- .../create-customer-card.component.scss | 35 +++++++++ .../create-customer-card.component.ts | 77 +++++++++++++------ 7 files changed, 165 insertions(+), 26 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index de7cd739c..f36565fad 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,6 @@ "prettier.singleQuote": true, "prettier.trailingComma": "es5", "prettier.tabWidth": 4, - "prettier.semi": true, "prettier.printWidth": 140, "workbench.colorCustomizations": {} } diff --git a/apps/sales/src/app/app.module.ts b/apps/sales/src/app/app.module.ts index 2f4be9cee..b65bfe5fc 100644 --- a/apps/sales/src/app/app.module.ts +++ b/apps/sales/src/app/app.module.ts @@ -36,6 +36,7 @@ import { CountryState } from './core/store/state/countries.state'; import { HimaSalesErrorHandler } from './core/error/hima-sales.error-handler'; import { NgCircleProgressModule } from 'ng-circle-progress'; import { CollectingShelfState } from './core/store/state/collecting-shelf.state'; +import 'apps/sales/src/app/core/utils/app.prototypes'; const states = [ AppState, diff --git a/apps/sales/src/app/core/store/selectors/shared.selectors.ts b/apps/sales/src/app/core/store/selectors/shared.selectors.ts index abcf32d7e..a50748b3d 100644 --- a/apps/sales/src/app/core/store/selectors/shared.selectors.ts +++ b/apps/sales/src/app/core/store/selectors/shared.selectors.ts @@ -16,7 +16,7 @@ import { CartEntryStateModel, CartEntryState } from '../state/cart-entry.state'; import { BranchesStateModel, BranchState } from '../state/branches.state'; import { Cart } from '../../models/cart.model'; import { DisplayOrderDTO } from 'swagger/lib/oms/models/display-order-dto'; -import { DeliveryType } from '../../models/delivery-option.model'; +import { DeliveryType, DeliveryOption } from '../../models/delivery-option.model'; import { OrderItem } from '../../models/order-item'; import { ProcessCartConfirmed } from '../../models/process-cart-confirmed.model'; import { DisplayOrderItemDTO } from 'swagger/lib/oms/models/display-order-item-dto'; @@ -27,6 +27,7 @@ import { mapToIterable } from '../../utils/app.utils'; import { CollectingShelfOrder } from '../../models/collecting-shelf-order.model'; import { ItemDTO } from 'swagger'; import { Process } from '../../models/process.model'; +import { isNullOrUndefined } from 'util'; export class SharedSelectors { @Selector([AppState, ProcessState, CustomerState, BreadcrumbsState]) @@ -103,6 +104,32 @@ export class SharedSelectors { }; } + @Selector([AppState, ProcessState, CartState, CartEntryState]) + static cartHasItemsFor(state: AppStateModel, process: ProcessStateModel, cart: CartStateModel, cartEntry: CartEntryStateModel) { + return (option: DeliveryOption) => { + let found = false; + const currentProcessId = state.currentProcesssId; + if (currentProcessId) { + const currentProcess = process.processes[currentProcessId]; + if (currentProcess && currentProcess.cartId) { + const cartEntryIds = cart.carts[currentProcess.cartId]; + if (cartEntryIds && cartEntryIds.hasItems()) { + cartEntryIds.forEach(entryId => { + if (entryId) { + const entry = cartEntry.cartEntries[entryId]; + if (entry.deliveryType === option) { + found = true; + return; + } + } + }); + } + } + } + return found; + }; + } + @Selector([AppState, ProcessState, CartState, CustomerState, ProductState, CartEntryState, BranchState]) static getCart( state: AppStateModel, diff --git a/apps/sales/src/app/core/utils/app.prototypes.ts b/apps/sales/src/app/core/utils/app.prototypes.ts index 58aaf0824..4581468c1 100644 --- a/apps/sales/src/app/core/utils/app.prototypes.ts +++ b/apps/sales/src/app/core/utils/app.prototypes.ts @@ -3,9 +3,24 @@ export {}; declare global { interface Array { lengthChecked(): number; + hasItems(): boolean; + } + + interface Boolean { + ifTrue(callback); } } Array.prototype.lengthChecked = function() { return this && this[0] ? this.length : 0; }; + +Array.prototype.hasItems = function() { + return this && this.length > 0; +}; + +Boolean.prototype.ifTrue = function(callback) { + if (this && this.valueOf() === true) { + callback(); + } +}; diff --git a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.html b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.html index a9b48cb7f..726949be3 100644 --- a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.html +++ b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.html @@ -4,8 +4,37 @@
-
- Damit wir Ihnen die Bestelldetails zukommen lassen können. +
+ Wenn Sie möchten legen wir Ihnen gerne ein Onlinekonto an. Dort können Sie Ihre Bestellungen einsehen. +
+
+
+
+ +
+ +
+
+
Gastkunde
+
+
+
+ +
+ +
+
+
Onlinekonto
+
+
+
+ +
+ +
+
+
Kundenkarte
+
diff --git a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.scss b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.scss index 46912905b..b9a14bc8b 100644 --- a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.scss +++ b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.scss @@ -30,6 +30,41 @@ } } +.filter-checkbox { + padding-right: 10px; +} + +.checked-box { + position: absolute; + margin-left: 3px; + margin-top: -27px; +} + +.customer-header { + z-index: 999; + margin-top: 85px !important; + width: 402px; +} + +.types-wrapper { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; + padding-bottom: 50px; +} + +.type { + display: flex; + padding-right: 30px; + cursor: pointer; + + span { + font-size: 16px; + font-weight: bold; + } +} + /* ##Device = Big Desktops */ diff --git a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts index 675ba70c1..d32155976 100644 --- a/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts +++ b/apps/sales/src/app/modules/customer/components/create-customer-card/create-customer-card.component.ts @@ -9,7 +9,7 @@ import { Breadcrumb } from '../../../../core/models/breadcrumb.model'; import { Observable, Subject } from 'rxjs'; import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions'; import { AddUser, SetUserDetails } from '../../../../core/store/actions/customer.actions'; -import { takeUntil, distinctUntilChanged, switchMap, map, filter } from 'rxjs/operators'; +import { takeUntil, distinctUntilChanged, switchMap, map, filter, tap } from 'rxjs/operators'; import { CustomValidators } from '../../../../shared/validation/custom-validation'; import { GENDERS, TIITLES } from '../../dropdown-values'; import { ProcessSelectors } from '../../../../core/store/selectors/process.selectors'; @@ -19,6 +19,7 @@ import { CountrySelector } from '../../../../core/store/selectors/countries.sele import { Country } from '../../../../core/models/country.model'; import { isoDateFromString } from '../../../../core/utils/app.utils'; import { isNullOrUndefined } from 'util'; +import { DeliveryOption } from 'apps/sales/src/app/core/models/delivery-option.model'; @Component({ selector: 'app-create-customer-card', @@ -47,6 +48,12 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy { create = true; btnText = 'Speichern'; canBeSetToActiveUser: boolean; + cartHasItemsForDelivery = false; + cartHasItemsForPickUp = false; + cartHasItemsForTakeNow = false; + guestChecked = false; + onlineChecked = false; + customerCardChecked = false; get countries() { return this.countries$.pipe( @@ -60,8 +67,17 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy { constructor(private fb: FormBuilder, private store: Store, private router: Router, private renderer: Renderer) {} ngOnInit() { - this.customerEditData$ + this.initialize(); + } + + initialize() { + this.store + .select(SharedSelectors.cartHasItemsFor) .pipe( + takeUntil(this.destroy$), + distinctUntilChanged(), + tap(this.processTypes), + switchMap(() => this.customerEditData$), filter(data => !isNullOrUndefined(data)), switchMap((customer: EditCustomerData) => { if (customer) { @@ -69,29 +85,42 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy { } return this.currentProcess$; }), - filter(data => !isNullOrUndefined(data)), - takeUntil(this.destroy$) + filter(data => !isNullOrUndefined(data)) ) - .subscribe((process: Process) => { - if (process) { - this.formState = process.customerFormState; - this.canBeSetToActiveUser = !process.closeDirectlyTab; - if (process.customerFormState === CustomerFormState.MISSING_DELIVERY) { - this.userForm = this.buildSetDeliveryAddressForm(this.fb, this.customer.customer); - this.id = this.customer.customer.id; - this.submitted = true; - this.btnText = 'Weiter'; - this.create = false; - } else { - this.userForm = this.buildCreateForm(this.fb); - } - - this.setCompanyValidators(); - this.loaded = true; - } - }); + .subscribe(this.initializationSubscriptionHandler); } + processTypes = (cartHasItemsFor: (option: DeliveryOption) => boolean) => { + this.cartHasItemsForDelivery = cartHasItemsFor(DeliveryOption.DELIVERY); + this.cartHasItemsForPickUp = cartHasItemsFor(DeliveryOption.PICK_UP); + this.cartHasItemsForTakeNow = cartHasItemsFor(DeliveryOption.TAKE_NOW); + + this.cartHasItemsForDelivery.ifTrue(() => { + this.guestChecked = true; + }); + // tslint:disable-next-line: semicolon + }; + + initializationSubscriptionHandler = (process: Process) => { + if (process) { + this.formState = process.customerFormState; + this.canBeSetToActiveUser = !process.closeDirectlyTab; + if (process.customerFormState === CustomerFormState.MISSING_DELIVERY) { + this.userForm = this.buildSetDeliveryAddressForm(this.fb, this.customer.customer); + this.id = this.customer.customer.id; + this.submitted = true; + this.btnText = 'Weiter'; + this.create = false; + } else { + this.userForm = this.buildCreateForm(this.fb); + } + + this.setCompanyValidators(); + this.loaded = true; + } + // tslint:disable-next-line: semicolon + }; + @HostListener('window:scroll', ['$event']) scrollHandler(event) { if (event.target.id === 'customer-form') { @@ -324,4 +353,8 @@ export class CreateCustomerCardComponent implements OnInit, OnDestroy { ngOnDestroy() { this.destroy$.next(); } + + toggle(checkbox: string) { + this[checkbox] = !this[checkbox]; + } }