sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 931: #2315 Checkout Dummy Modal Implementation

Browse Source 
#2315 Checkout Dummy Modal Implementation
This commit is contained in:
Nino Righi
2021-10-25 09:00:40 +00:00
committed by Lorenz Hilpert
parent 098f314b83
commit 29c8cc2062
7 changed files with 64 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss
View File

@@ -1,10 +1,9 @@
:host {
@apply block overflow-y-scroll;
max-height: calc(100vh - 135px - 80px);
}
.wrapper {
@apply block bg-white shadow-card rounded-card pt-6 pb-10 mb-40;
@apply block bg-white shadow-card rounded-card pt-6;
.header {
@apply text-right;
@@ -59,8 +58,7 @@
}
.actions {
@apply absolute flex items-center justify-center left-0 right-0 bottom-0;
margin-bottom: 18px;
@apply flex items-center justify-center pt-8;
}
.cta-primary {

93
apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.ts
View File

@@ -1,15 +1,12 @@
import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit, Optional } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { ApplicationService } from '@core/application';
import { BreadcrumbService } from '@core/breadcrumb';
import { Router } from '@angular/router';
import { ItemDTO } from '@swagger/cat';
import { DateAdapter } from '@ui/common';
import { UiFilterScanProvider } from '@ui/filter';
import { UiErrorModalComponent, UiModalService } from '@ui/modal';
import { UiErrorModalComponent, UiModalRef, UiModalService } from '@ui/modal';
import { Subject } from 'rxjs';
import { first, shareReplay, takeUntil } from 'rxjs/operators';
import { threadId } from 'worker_threads';
import { CheckoutDummyScanProvider } from './checkout-dummy-scan.provider';
import { CheckoutDummyStore } from './checkout-dummy.store';
@@ -49,26 +46,21 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
vats$ = this._store.vats$;
suppliers$ = this._store.suppliers$;
params: Params;
_onDestroy$ = new Subject<void>();
constructor(
@Inject(UiFilterScanProvider) @Optional() private scanProviders: UiFilterScanProvider[],
private _router: Router,
private _route: ActivatedRoute,
private _application: ApplicationService,
private _breadcrumb: BreadcrumbService,
private _fb: FormBuilder,
private _dateAdapter: DateAdapter,
private _modal: UiModalService,
private _store: CheckoutDummyStore
private _store: CheckoutDummyStore,
private _ref: UiModalRef<any, any>
) {}
ngOnInit() {
this._scanProvider = this.scanProviders?.find((provider) => provider.for === 'dummy');
this.initForm();
this.updateBreadcrumb();
this._store.item$.pipe(takeUntil(this._onDestroy$)).subscribe((item) => {
if (item) {
@@ -77,21 +69,20 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
}
});
const params = this._route.snapshot.queryParams;
if (Object.keys(params).length !== 0) {
this.params = params;
if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
const data = this._ref?.data;
const item = {
ean: params.ean || '',
name: params.name || '',
quantity: params.quantity || '',
estimatedShippingDate: params.estimatedShippingDate || this._dateAdapter.today().toISOString(),
contributors: params.contributors || '',
manufacturer: params.manufacturer || '',
supplier: params.supplier || 5,
price: params.price || '',
vat: params.vat || '',
ean: data.ean || '',
name: data.name || '',
quantity: data.quantity || '',
estimatedShippingDate: data.estimatedShippingDate || this._dateAdapter.today().toISOString(),
contributors: data.contributors || '',
manufacturer: data.manufacturer || '',
supplier: data.supplier || 5,
price: data.price || '',
vat: data.vat || '',
};
this.populateFormFromParams(item);
this.populateFormFromModalData(item);
}
}
@@ -100,16 +91,6 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
this._onDestroy$.complete();
}
async updateBreadcrumb() {
await this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
key: this._application.activatedProcessId,
name: 'Neuanlage',
path: '/cart/dummy',
tags: ['checkout', 'cart', 'dummy'],
section: 'customer',
});
}
async search(ean: string) {
this._store.query = ean;
this._store.search();
@@ -151,7 +132,7 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
this.control.get('vat').setValue(item?.catalogAvailability?.price?.vat?.vatType);
}
populateFormFromParams(item: any) {
populateFormFromModalData(item: any) {
this.control.get('name').setValue(item.name);
this.control.get('contributors').setValue(item.contributors);
this.control.get('manufacturer').setValue(item.manufacturer);
@@ -189,12 +170,12 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
try {
const branch = await this._store.currentBranch$.pipe(first()).toPromise();
if (!this.params) {
await this._store.createAddToCartItem(this.control, branch);
this._store.addToCart(() => {});
} else {
if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
await this._store.createAddToCartItem(this.control, branch, true);
this._store.updateCart(() => {});
} else {
await this._store.createAddToCartItem(this.control, branch);
this._store.addToCart(() => {});
}
} catch (error) {
this._modal.open({
@@ -218,21 +199,7 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
try {
const branch = await this._store.currentBranch$.pipe(first()).toPromise();
if (!this.params) {
await this._store.createAddToCartItem(this.control, branch);
this._store.addToCart(async () => {
// Set filter for navigation to customer search if customer is not set
const customer = await this._store.customer$.pipe(first()).toPromise();
const customerFilter = await this._store.customerFilter$.pipe(first()).toPromise();
let filter: { [key: string]: string };
if (!customer) {
filter = customerFilter;
this._router.navigate(['/customer', 'search'], { queryParams: { customertype: filter.customertype } });
} else {
this._router.navigate(['/cart', 'review']);
}
});
} else {
if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
await this._store.createAddToCartItem(this.control, branch, true);
this._store.updateCart(async () => {
// Set filter for navigation to customer search if customer is not set
@@ -245,6 +212,22 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
} else {
this._router.navigate(['/cart', 'review']);
}
this._ref?.close();
});
} else {
await this._store.createAddToCartItem(this.control, branch);
this._store.addToCart(async () => {
// Set filter for navigation to customer search if customer is not set
const customer = await this._store.customer$.pipe(first()).toPromise();
const customerFilter = await this._store.customerFilter$.pipe(first()).toPromise();
let filter: { [key: string]: string };
if (!customer) {
filter = customerFilter;
this._router.navigate(['/customer', 'search'], { queryParams: { customertype: filter.customertype } });
} else {
this._router.navigate(['/cart', 'review']);
}
this._ref?.close();
});
}
} catch (error) {

1
apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.store.ts
View File

@@ -249,6 +249,7 @@ export class CheckoutDummyStore extends ComponentStore<CheckoutDummyState> {
qs: ean,
},
take: 1,
friendlyName: ean,
};
return this._catalogService.search({ queryToken });
}

4
apps/page/checkout/src/lib/checkout-review/checkout-review.component.html
View File

@@ -14,7 +14,7 @@
<div class="btn-wrapper">
<a class="cta-primary" [routerLink]="['/product', 'search']">Artikel suchen</a>
<a class="cta-secondary" [routerLink]="['/cart', 'dummy']">Neuanlage</a>
<button class="cta-secondary" (click)="openDummyModal()">Neuanlage</button>
</div>
</div>
</div>
@@ -80,7 +80,7 @@
></ui-icon>
<div class="label" [class.dummy]="group.orderType === 'Dummy'">
{{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
<a *ngIf="group.orderType === 'Dummy'" class="cta-secondary" [routerLink]="['/cart', 'dummy']">Hinzufügen</a>
<button *ngIf="group.orderType === 'Dummy'" class="cta-secondary" (click)="openDummyModal()">Hinzufügen</button>
</div>
</div>
<ng-container *ngIf="group.orderType === 'Versand' || group.orderType === 'B2B-Versand' || group.orderType === 'DIG-Versand'">

3
apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss
View File

@@ -67,7 +67,7 @@
}
.cta-secondary {
@apply bg-white text-brand border-brand font-bold text-lg outline-none px-6 py-3 mt-4;
@apply bg-white text-brand border-none font-bold text-lg outline-none px-6 py-3 mt-4;
}
.cta-order.special-comment-dirty {
@@ -109,7 +109,6 @@ hr {
.cta-secondary {
@apply mt-0 pr-0;
text-decoration: none;
}
}

33
apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts
View File

@@ -14,6 +14,7 @@ import { Subject, NEVER } from 'rxjs';
import { DomainCatalogService } from '@domain/catalog';
import { BreadcrumbService } from '@core/breadcrumb';
import { DomainPrinterService } from '@domain/printer';
import { CheckoutDummyComponent } from '../checkout-dummy/checkout-dummy.component';
@Component({
selector: 'page-checkout-review',
@@ -168,22 +169,28 @@ export class CheckoutReviewComponent implements OnInit {
});
}
changeDummyItem(shoppingCartItem: ShoppingCartItemDTO) {
this.router.navigate(['/cart', 'dummy'], {
queryParams: {
price: shoppingCartItem?.availability?.price?.value?.value,
vat: shoppingCartItem?.availability?.price?.vat?.vatType,
supplier: shoppingCartItem?.availability?.supplier?.id,
estimatedShippingDate: shoppingCartItem?.estimatedShippingDate,
manufacturer: shoppingCartItem?.product?.manufacturer,
name: shoppingCartItem?.product?.name,
contributors: shoppingCartItem?.product?.contributors,
ean: shoppingCartItem?.product?.ean,
quantity: shoppingCartItem?.quantity,
},
openDummyModal(data?: any) {
this.uiModal.open({
content: CheckoutDummyComponent,
data,
});
}
changeDummyItem(shoppingCartItem: ShoppingCartItemDTO) {
const data = {
price: shoppingCartItem?.availability?.price?.value?.value,
vat: shoppingCartItem?.availability?.price?.vat?.vatType,
supplier: shoppingCartItem?.availability?.supplier?.id,
estimatedShippingDate: shoppingCartItem?.estimatedShippingDate,
manufacturer: shoppingCartItem?.product?.manufacturer,
name: shoppingCartItem?.product?.name,
contributors: shoppingCartItem?.product?.contributors,
ean: shoppingCartItem?.product?.ean,
quantity: shoppingCartItem?.quantity,
};
this.openDummyModal(data);
}
async changeItem(shoppingCartItem: ShoppingCartItemDTO) {
this.showChangeButtonSpinnerItemId = shoppingCartItem.id;

2
apps/page/checkout/src/lib/page-checkout-routing.module.ts
View File

@@ -1,6 +1,5 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CheckoutDummyComponent } from './checkout-dummy/checkout-dummy.component';
import { CheckoutReviewComponent } from './checkout-review/checkout-review.component';
import { CheckoutSummaryComponent } from './checkout-summary/checkout-summary.component';
import { PageCheckoutComponent } from './page-checkout.component';
@@ -12,7 +11,6 @@ const routes: Routes = [
children: [
{ path: 'summary', component: CheckoutSummaryComponent },
{ path: 'review', component: CheckoutReviewComponent },
{ path: 'dummy', component: CheckoutDummyComponent },
{ path: '', pathMatch: 'full', redirectTo: 'review' },
],
},