diff --git a/angular.json b/angular.json index 5af2ca1a9..feaaa3ff9 100644 --- a/angular.json +++ b/angular.json @@ -1856,6 +1856,46 @@ } } } + }, + "@ui/spinner": { + "projectType": "library", + "root": "apps/ui/spinner", + "sourceRoot": "apps/ui/spinner/src", + "prefix": "ui", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "tsConfig": "apps/ui/spinner/tsconfig.lib.json", + "project": "apps/ui/spinner/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "apps/ui/spinner/tsconfig.lib.prod.json" + } + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "apps/ui/spinner/src/test.ts", + "tsConfig": "apps/ui/spinner/tsconfig.spec.json", + "karmaConfig": "apps/ui/spinner/karma.conf.js" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "apps/ui/spinner/tsconfig.lib.json", + "apps/ui/spinner/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } } }, "defaultProject": "sales" diff --git a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.html b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.html index 49d84d1af..147a7dddc 100644 --- a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.html +++ b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.html @@ -110,11 +110,17 @@ {{ item?.unitPrice?.value?.value | currency: item?.unitPrice?.value?.currency:'code' }}
- +
-
@@ -133,8 +139,10 @@ ohne Versandkosten - diff --git a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts index 83b1c1c76..cfd1e8ecf 100644 --- a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts +++ b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Router } from '@angular/router'; import { ApplicationService } from '@core/application'; import { AvailabilityService } from '@domain/availability'; @@ -64,6 +64,10 @@ export class CheckoutReviewComponent { switchMap((processId) => this.domainCheckoutService.getCustomerFeatures({ processId })) ); + showQuantityControlSpinnerItemId: number; + showOrderButtonSpinner: boolean; + showChangeButtonSpinnerItemId: number; + constructor( private domainCheckoutService: DomainCheckoutService, private applicationService: ApplicationService, @@ -71,10 +75,12 @@ export class CheckoutReviewComponent { private search: SearchService, private uiModal: UiModalService, private sso: SsoService, - private router: Router + private router: Router, + private cdr: ChangeDetectorRef ) {} async changeItem(shoppingCartItem: ShoppingCartItemDTO) { + this.showChangeButtonSpinnerItemId = shoppingCartItem.id; const item = await this.search .SearchSearch({ input: { qs: shoppingCartItem.product.ean }, @@ -177,6 +183,9 @@ export class CheckoutReviewComponent { break; } + this.showChangeButtonSpinnerItemId = undefined; + this.cdr.markForCheck(); + this.uiModal.open({ content: PurchasingOptionsModalComponent, data: { @@ -191,6 +200,7 @@ export class CheckoutReviewComponent { } async updateItemQuantity(shoppingCartItem: ShoppingCartItemDTO, quantity: number) { + this.showQuantityControlSpinnerItemId = shoppingCartItem.id; const orderType = shoppingCartItem?.features?.orderType; let availability: AvailabilityDTO; @@ -239,15 +249,17 @@ export class CheckoutReviewComponent { } else { // TODO: Set Prev Quantity } + this.showQuantityControlSpinnerItemId = undefined; } order() { // TODO: Check if Customer is Set // => If not navigate to customer search - + this.showOrderButtonSpinner = true; this.domainCheckoutService.completeCheckout({ processId: this.applicationService.activatedProcessId }).subscribe(() => { this.applicationService.removeProcess(this.applicationService.activatedProcessId); this.applicationService.createProcess(); + this.showOrderButtonSpinner = false; this.router.navigate(['/cart', 'summary']); }); } diff --git a/apps/page/checkout/src/lib/checkout-review/checkout-review.module.ts b/apps/page/checkout/src/lib/checkout-review/checkout-review.module.ts index eef26fa6a..a1fe3d2f6 100644 --- a/apps/page/checkout/src/lib/checkout-review/checkout-review.module.ts +++ b/apps/page/checkout/src/lib/checkout-review/checkout-review.module.ts @@ -8,6 +8,7 @@ import { CheckoutQuantityControlModule } from '../shared/quantity-control/quanti import { ProductImageModule } from 'apps/cdn/product-image/src/public-api'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; +import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; @NgModule({ imports: [ @@ -18,6 +19,7 @@ import { FormsModule } from '@angular/forms'; CheckoutQuantityControlModule, ProductImageModule, FormsModule, + UiSpinnerModule, ], exports: [CheckoutReviewComponent], declarations: [CheckoutReviewComponent], diff --git a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html index 2113ea238..2f74d2378 100644 --- a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html +++ b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html @@ -1,14 +1,42 @@
+
+ +
+

Bestellbestätigung

- Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung. + Nachfolgend erhalten Sie
+ die Übersicht Ihrer Bestellung.

-
+ +
+
+ {{ orderData?.buyer | buyerName }} +
+
-
-
+
+ Belegnummer + {{ orderData.orderNumber }} +
+
+ Zielfiliale + {{ orderData.targetBranch.name }} +
+
+
+ Bestelldatum + {{ orderData.orderDate | date }} +
+
+ Adresse + {{ orderData.targetBranch | branchAddress }} +
+
+ +
diff --git a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss index 0f67a23c7..1e068124f 100644 --- a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss +++ b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss @@ -2,8 +2,48 @@ @apply block box-border; } -.cta-print-wrapper { +.check-icon { + @apply mx-auto text-green-700 pt-8; + width: 36px; +} + +.card { + @apply bg-white rounded-card shadow-card; +} + +.order-header { + @apply text-center text-3xl my-2 mb-2; +} + +.order-info { + @apply text-center text-lg my-0 mb-2; } .cta-print { + @apply bg-transparent text-brand font-bold text-xl outline-none border-none; +} + +.order-customer { + @apply font-bold text-2xl; +} + +.grow { + @apply flex-grow; +} + +.row { + @apply flex flex-row items-center mx-8 my-4; +} + +.sub-row { + @apply flex flex-row flex-grow items-center w-1/2; +} + +.between { + @apply justify-between; +} + +hr { + height: 2px; + @apply bg-disabled-customer; } diff --git a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.module.ts b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.module.ts index 03018256e..4b9d76d9f 100644 --- a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.module.ts +++ b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.module.ts @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CheckoutSummaryComponent } from './checkout-summary.component'; +import { UiIconModule } from '@ui/icon'; +import { PageCheckoutPipeModule } from '../pipes/page-checkout-pipe.module'; @NgModule({ - imports: [CommonModule], + imports: [CommonModule, UiIconModule, PageCheckoutPipeModule], exports: [CheckoutSummaryComponent], declarations: [CheckoutSummaryComponent], }) diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.scss b/apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.scss index 21e4d817d..cd07a8cc8 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.scss +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.scss @@ -1,8 +1,8 @@ .option-icon { - margin-top: -5px; - width: 80px; + margin-top: -12px; + width: 70px; } h4 { - margin-top: -10px; + margin-top: -2px; } diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.html b/apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.html index 9eaa6d6eb..4148b321b 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.html +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.html @@ -7,9 +7,11 @@ {{ item.catalogAvailability?.price?.value?.value | currency: ' ' }} {{ item.catalogAvailability?.price?.value?.currency }} + +
Versandkostenfrei Versanddatum 27.02.21 -
+
@@ -58,12 +59,20 @@
- +
diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss index 241df45d2..af834ff0f 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss @@ -11,7 +11,7 @@ } .options-wrapper { - @apply flex flex-row justify-evenly items-stretch; + @apply flex flex-row justify-evenly items-stretch mt-2; } .option-product-summary { @@ -72,6 +72,10 @@ img.thumbnail { .cta-continue-shopping { @apply text-brand border-2 border-solid border-brand bg-white font-bold text-lg px-4 py-2 rounded-full; + + ::ng-deep.spin { + @apply text-brand; + } } .cta-continue { diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts index 1b5c7db40..1f59d360b 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts @@ -4,7 +4,7 @@ import { ApplicationService } from '@core/application'; import { DomainCheckoutService } from '@domain/checkout'; import { AddToShoppingCartDTO } from '@swagger/checkout'; import { UiModalRef } from '@ui/modal'; -import { first, map, mergeMap } from 'rxjs/operators'; +import { delay, first, map, mergeMap } from 'rxjs/operators'; import { PurchasingOptionsModalData } from './purchasing-options-modal.data'; import { PurchasingOptionsModalStore } from './purchasing-options-modal.store'; @@ -34,6 +34,8 @@ export class PurchasingOptionsModalComponent { readonly branch$ = this.purchasingOptionsModalStore.selectBranch; + activeSpinner: string; + constructor( public modalRef: UiModalRef, public purchasingOptionsModalStore: PurchasingOptionsModalStore, @@ -50,6 +52,8 @@ export class PurchasingOptionsModalComponent { } async continue(navigate: boolean = false) { + this.activeSpinner = navigate ? 'continue-shopping' : 'continue'; + try { const processId = await this.purchasingOptionsModalStore.selectProcessId.pipe(first()).toPromise(); const item = await this.item$.pipe(first()).toPromise(); @@ -120,5 +124,6 @@ export class PurchasingOptionsModalComponent { } catch (error) { console.log('PurchasingOptionsModalComponent.continue', error); } + this.activeSpinner = undefined; } } diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.module.ts b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.module.ts index f8cf66c32..fba1563ca 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.module.ts +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.module.ts @@ -18,6 +18,7 @@ import { PickUpDropdownComponent } from './pick-up-option/pick-up-dropdown/pick- import { PageCheckoutPipeModule } from '../../pipes/page-checkout-pipe.module'; import { ProductImageModule } from 'apps/cdn/product-image/src/public-api'; import { CheckoutQuantityControlModule } from '../../shared/quantity-control/quantity-control.module'; +import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; @NgModule({ imports: [ @@ -28,6 +29,7 @@ import { CheckoutQuantityControlModule } from '../../shared/quantity-control/qua PageCheckoutPipeModule, ProductImageModule, CheckoutQuantityControlModule, + UiSpinnerModule, ], exports: [PurchasingOptionsModalComponent], declarations: [ diff --git a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts index 1982e7748..056e5fcb9 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts @@ -18,6 +18,7 @@ interface PurchasingOptionsModalState { branch?: BranchDTO; processId?: number; availability?: AvailabilityDTO; + fetchingAvailability?: boolean; availableOptions: PurchasingOptions[]; availableBranches: BranchDTO[]; quantity: number; @@ -64,6 +65,8 @@ export class PurchasingOptionsModalStore extends ComponentStore s.filterResult); + readonly selectFetchingAvailability = this.select((s) => s.fetchingAvailability); + readonly selectOlaAvailability = this.select( (s): OLAAvailabilityDTO => ({ status: s.availability?.availabilityType, @@ -249,6 +252,7 @@ export class PurchasingOptionsModalStore extends ComponentStore = NEVER; if (!isNullOrUndefined(item) && quantity > 0 && isString(option)) { + this.patchState({ fetchingAvailability: true }); switch (option) { case 'take-away': if (!isNullOrUndefined(branch)) { @@ -278,8 +282,13 @@ export class PurchasingOptionsModalStore extends ComponentStore this.setAvailability(availability), - () => this.setAvailability(null) + (availability) => { + this.setAvailability(availability); + this.patchState({ fetchingAvailability: false }); + }, + () => { + this.setAvailability(null), this.patchState({ fetchingAvailability: false }); + } ) ); }) diff --git a/apps/page/checkout/src/lib/pipes/branch-address.pipe.ts b/apps/page/checkout/src/lib/pipes/branch-address.pipe.ts new file mode 100644 index 000000000..bb3676bbf --- /dev/null +++ b/apps/page/checkout/src/lib/pipes/branch-address.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { BranchDTO } from '@swagger/checkout'; + +@Pipe({ + name: 'branchAddress', +}) +export class BranchAddressPipe implements PipeTransform { + transform(branch: BranchDTO, ...args: any[]): any { + if (branch) { + return `${branch?.address?.street} ${branch?.address?.streetNumber}, ${branch?.address?.zipCode} ${branch?.address?.city}`; + } + } +} diff --git a/apps/page/checkout/src/lib/pipes/buyer-name.pipe.ts b/apps/page/checkout/src/lib/pipes/buyer-name.pipe.ts new file mode 100644 index 000000000..bc42a88e4 --- /dev/null +++ b/apps/page/checkout/src/lib/pipes/buyer-name.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { BuyerDTO } from '@swagger/checkout'; + +@Pipe({ + name: 'buyerName', +}) +export class BuyerNamePipe implements PipeTransform { + transform(buyer: BuyerDTO, ...args: any[]): any { + if (buyer) { + const organisationParts = [buyer?.organisation?.name].filter((f) => !!f); + + const customerParts = [buyer?.lastName, buyer?.firstName].filter((f) => !!f); + + return [organisationParts.join(), customerParts.join(' ')].filter((f) => !!f).join(' - '); + } + + return ''; + } +} diff --git a/apps/page/checkout/src/lib/pipes/page-checkout-pipe.module.ts b/apps/page/checkout/src/lib/pipes/page-checkout-pipe.module.ts index 0c293052c..e2d1301d3 100644 --- a/apps/page/checkout/src/lib/pipes/page-checkout-pipe.module.ts +++ b/apps/page/checkout/src/lib/pipes/page-checkout-pipe.module.ts @@ -1,4 +1,6 @@ import { NgModule } from '@angular/core'; +import { BranchAddressPipe } from './branch-address.pipe'; +import { BuyerNamePipe } from './buyer-name.pipe'; import { PayerAddressPipe } from './payer-address.pipe'; import { PurchaseOptionIconPipe } from './purchase-option-icon.pipe'; import { PurchaseOptionNamePipe } from './purchase-option-name.pipe'; @@ -6,7 +8,23 @@ import { ShippingAddressPipe } from './shipping-address.pipe'; import { TrimPipe } from './trim.pipe'; @NgModule({ - exports: [PayerAddressPipe, ShippingAddressPipe, TrimPipe, PurchaseOptionNamePipe, PurchaseOptionIconPipe], - declarations: [PayerAddressPipe, ShippingAddressPipe, TrimPipe, PurchaseOptionNamePipe, PurchaseOptionIconPipe], + exports: [ + PayerAddressPipe, + ShippingAddressPipe, + TrimPipe, + PurchaseOptionNamePipe, + PurchaseOptionIconPipe, + BuyerNamePipe, + BranchAddressPipe, + ], + declarations: [ + PayerAddressPipe, + ShippingAddressPipe, + TrimPipe, + PurchaseOptionNamePipe, + PurchaseOptionIconPipe, + BuyerNamePipe, + BranchAddressPipe, + ], }) export class PageCheckoutPipeModule {} diff --git a/apps/page/checkout/src/lib/shared/quantity-control/quantity-control.component.html b/apps/page/checkout/src/lib/shared/quantity-control/quantity-control.component.html index efeb1bce5..32ab69c61 100644 --- a/apps/page/checkout/src/lib/shared/quantity-control/quantity-control.component.html +++ b/apps/page/checkout/src/lib/shared/quantity-control/quantity-control.component.html @@ -1,9 +1,11 @@
- + + +
-
diff --git a/apps/page/customer/src/lib/customer-create/customer-create-branch.component.html b/apps/page/customer/src/lib/customer-create/customer-create-branch.component.html index 9e55c9c73..46c76f35f 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create-branch.component.html +++ b/apps/page/customer/src/lib/customer-create/customer-create-branch.component.html @@ -188,11 +188,10 @@
-
diff --git a/apps/page/customer/src/lib/customer-create/customer-create-guest.component.html b/apps/page/customer/src/lib/customer-create/customer-create-guest.component.html index c6f269762..b1b586269 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create-guest.component.html +++ b/apps/page/customer/src/lib/customer-create/customer-create-guest.component.html @@ -195,11 +195,10 @@
-
diff --git a/apps/page/customer/src/lib/customer-create/customer-create-online.component.html b/apps/page/customer/src/lib/customer-create/customer-create-online.component.html index e930f6658..4d7eafd12 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create-online.component.html +++ b/apps/page/customer/src/lib/customer-create/customer-create-online.component.html @@ -192,11 +192,10 @@
-
diff --git a/apps/page/customer/src/lib/customer-create/customer-create.component.scss b/apps/page/customer/src/lib/customer-create/customer-create.component.scss index 0cd421a69..641dce937 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create.component.scss +++ b/apps/page/customer/src/lib/customer-create/customer-create.component.scss @@ -78,3 +78,7 @@ page-customer-type-selector { .organisation-header { } + +::ng-deep.spin { + @apply text-white; +} diff --git a/apps/page/customer/src/lib/customer-create/customer-create.module.ts b/apps/page/customer/src/lib/customer-create/customer-create.module.ts index 6bb3cd486..f3834f61b 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create.module.ts +++ b/apps/page/customer/src/lib/customer-create/customer-create.module.ts @@ -15,6 +15,7 @@ import { AddressSelectionModalModule } from '../modals/address-selection-modal/a import { CantAddCustomerToCartModalModule } from '../modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.module'; import { UiIconModule } from '@ui/icon'; import { UiCheckboxModule } from '@ui/checkbox'; +import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; @NgModule({ imports: [ @@ -29,6 +30,7 @@ import { UiCheckboxModule } from '@ui/checkbox'; AddressSelectionModalModule, CantAddCustomerToCartModalModule, UiCheckboxModule, + UiSpinnerModule, ], exports: [CustomerCreateBranchComponent, CustomerCreateGuestComponent, CustomerCreateOnlineComponent, CustomerCreateB2BComponent], declarations: [ diff --git a/apps/page/customer/src/lib/customer-details/customer-details.component.html b/apps/page/customer/src/lib/customer-details/customer-details.component.html index a1b8e8912..691ce1f0f 100644 --- a/apps/page/customer/src/lib/customer-details/customer-details.component.html +++ b/apps/page/customer/src/lib/customer-details/customer-details.component.html @@ -129,12 +129,16 @@
- -
diff --git a/apps/page/customer/src/lib/customer-details/customer-details.component.ts b/apps/page/customer/src/lib/customer-details/customer-details.component.ts index d5c1f1721..a8457c493 100644 --- a/apps/page/customer/src/lib/customer-details/customer-details.component.ts +++ b/apps/page/customer/src/lib/customer-details/customer-details.component.ts @@ -42,6 +42,7 @@ export class CustomerDetailsComponent implements OnInit { isWebshopOrGuest$: Observable; cartExists$: Observable; hasCustomerCard$: Observable; + showSpinner: boolean; private currentBreadcrumb: Breadcrumb; @@ -152,6 +153,7 @@ export class CustomerDetailsComponent implements OnInit { } async continue() { + this.showSpinner = true; const customer = await this.customer$.pipe(first()).toPromise(); // Check if customer can be added to the checkout @@ -170,6 +172,7 @@ export class CustomerDetailsComponent implements OnInit { upgradeableTo: canBeExtendedTo, } as CantAddCustomerToCartData, }); + this.showSpinner = false; return; } else { const updateDestination = await this.checkoutService @@ -190,6 +193,7 @@ export class CustomerDetailsComponent implements OnInit { } as CantAddCustomerToCartData, }); + this.showSpinner = false; return; } } @@ -251,6 +255,8 @@ export class CustomerDetailsComponent implements OnInit { } else { this.router.navigate(['/product/search']); } + + this.showSpinner = false; } getCusomterFeatures(custoemr: CustomerDTO): { [key: string]: string } { diff --git a/apps/page/customer/src/lib/customer-details/customer-details.module.ts b/apps/page/customer/src/lib/customer-details/customer-details.module.ts index e311a22dc..b2e7eca4b 100644 --- a/apps/page/customer/src/lib/customer-details/customer-details.module.ts +++ b/apps/page/customer/src/lib/customer-details/customer-details.module.ts @@ -27,6 +27,7 @@ import { CardTemplateComponent } from './shared/card-template/card-template.comp import { CustomerOrdersComponent } from './customer-orders/customer-orders.component'; import { UiCommonModule } from '@ui/common'; import { CustomerHistoryComponent } from './customer-history/customer-history.component'; +import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; @NgModule({ imports: [ CommonModule, @@ -40,6 +41,7 @@ import { CustomerHistoryComponent } from './customer-history/customer-history.co FormsModule, UiRadioModule, UiCommonModule, + UiSpinnerModule, ], exports: [CustomerDetailsComponent], declarations: [ diff --git a/apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts b/apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts index 662a3184d..de037fd49 100644 --- a/apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts +++ b/apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts @@ -23,6 +23,8 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy { branchInfos: BranchInfoView[] = []; filteredBranchInfos: BranchInfoView[] = []; userBranch: BranchDTO; + @Output() loaded = new EventEmitter(); + @Output() destroymodal: EventEmitter = new EventEmitter(); destroy$ = new Subject(); @@ -76,6 +78,7 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy { .subscribe((t) => { this.branchInfos = t.filter((b) => b && b.load); this.filteredBranchInfos = this.loadDefaultBranches(); + this.loaded.emit(); }); } diff --git a/apps/sales/src/app/modules/product/pages/product-details/product-details.component.html b/apps/sales/src/app/modules/product/pages/product-details/product-details.component.html index e3b15d6ab..e3351beac 100644 --- a/apps/sales/src/app/modules/product/pages/product-details/product-details.component.html +++ b/apps/sales/src/app/modules/product/pages/product-details/product-details.component.html @@ -218,9 +218,9 @@
- weitere Verfügbarkeiten + + weitere Verfügbarkeiten + Note: Don't forget to add `--project spinner` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build spinner` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build spinner`, go to the dist folder `cd dist/spinner` and run `npm publish`. + +## Running unit tests + +Run `ng test spinner` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/apps/ui/spinner/karma.conf.js b/apps/ui/spinner/karma.conf.js new file mode 100644 index 000000000..12f24ea83 --- /dev/null +++ b/apps/ui/spinner/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma'), + ], + client: { + clearContext: false, // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../../coverage/ui/spinner'), + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true, + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true, + }); +}; diff --git a/apps/ui/spinner/ng-package.json b/apps/ui/spinner/ng-package.json new file mode 100644 index 000000000..6ae32bc5b --- /dev/null +++ b/apps/ui/spinner/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/ui/spinner", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/apps/ui/spinner/package.json b/apps/ui/spinner/package.json new file mode 100644 index 000000000..b1da9cc1e --- /dev/null +++ b/apps/ui/spinner/package.json @@ -0,0 +1,11 @@ +{ + "name": "@ui/spinner", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^10.1.2", + "@angular/core": "^10.1.2" + }, + "dependencies": { + "tslib": "^2.0.0" + } +} \ No newline at end of file diff --git a/apps/ui/spinner/src/lib/ui-spinner.component.html b/apps/ui/spinner/src/lib/ui-spinner.component.html new file mode 100644 index 000000000..188a47a33 --- /dev/null +++ b/apps/ui/spinner/src/lib/ui-spinner.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/ui/spinner/src/lib/ui-spinner.component.scss b/apps/ui/spinner/src/lib/ui-spinner.component.scss new file mode 100644 index 000000000..9be9e7a48 --- /dev/null +++ b/apps/ui/spinner/src/lib/ui-spinner.component.scss @@ -0,0 +1,16 @@ +:host { + @apply flex items-center relative; +} + +.content { + @apply w-full; +} + +.spin { + @apply animate-spin absolute; + left: calc(50% - 14px); +} + +.invisible { + visibility: hidden; +} diff --git a/apps/ui/spinner/src/lib/ui-spinner.component.ts b/apps/ui/spinner/src/lib/ui-spinner.component.ts new file mode 100644 index 000000000..b4875f18a --- /dev/null +++ b/apps/ui/spinner/src/lib/ui-spinner.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'ui-spinner', + templateUrl: 'ui-spinner.component.html', + styleUrls: ['./ui-spinner.component.scss'], +}) +export class SpinnerComponent implements OnInit { + @Input() + show: boolean; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/apps/ui/spinner/src/lib/ui-spinner.module.ts b/apps/ui/spinner/src/lib/ui-spinner.module.ts new file mode 100644 index 000000000..6217eade3 --- /dev/null +++ b/apps/ui/spinner/src/lib/ui-spinner.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { UiIconModule } from '@ui/icon'; +import { SpinnerComponent } from './ui-spinner.component'; + +@NgModule({ + declarations: [SpinnerComponent], + imports: [UiIconModule, CommonModule], + exports: [SpinnerComponent], +}) +export class UiSpinnerModule {} diff --git a/apps/ui/spinner/src/public-api.ts b/apps/ui/spinner/src/public-api.ts new file mode 100644 index 000000000..2f259b8f5 --- /dev/null +++ b/apps/ui/spinner/src/public-api.ts @@ -0,0 +1,4 @@ +/* + * Public API Surface of spinner + */ +export * from './lib'; diff --git a/apps/ui/spinner/src/test.ts b/apps/ui/spinner/src/test.ts new file mode 100644 index 000000000..504678a21 --- /dev/null +++ b/apps/ui/spinner/src/test.ts @@ -0,0 +1,24 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/zone'; +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context( + path: string, + deep?: boolean, + filter?: RegExp + ): { + keys(): string[]; + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/apps/ui/spinner/tsconfig.lib.json b/apps/ui/spinner/tsconfig.lib.json new file mode 100644 index 000000000..775bbc57d --- /dev/null +++ b/apps/ui/spinner/tsconfig.lib.json @@ -0,0 +1,25 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/lib", + "target": "es2015", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [], + "lib": [ + "dom", + "es2018" + ] + }, + "angularCompilerOptions": { + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "enableResourceInlining": true + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/apps/ui/spinner/tsconfig.lib.prod.json b/apps/ui/spinner/tsconfig.lib.prod.json new file mode 100644 index 000000000..5615c27df --- /dev/null +++ b/apps/ui/spinner/tsconfig.lib.prod.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "enableIvy": false + } +} diff --git a/apps/ui/spinner/tsconfig.spec.json b/apps/ui/spinner/tsconfig.spec.json new file mode 100644 index 000000000..85392ee8f --- /dev/null +++ b/apps/ui/spinner/tsconfig.spec.json @@ -0,0 +1,17 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/apps/ui/spinner/tslint.json b/apps/ui/spinner/tslint.json new file mode 100644 index 000000000..a012c694c --- /dev/null +++ b/apps/ui/spinner/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "ui", + "camelCase" + ], + "component-selector": [ + true, + "element", + "ui", + "kebab-case" + ] + } +} diff --git a/tsconfig.json b/tsconfig.json index 215ea4897..679c4d4df 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -176,6 +176,9 @@ ], "@cdn/product-image": [ "apps/cdn/product-image/cdn-product-image/src/public-api.ts" + ], + "@ui/spinner": [ + "apps/ui/spinner/src/public-api.ts" ] } }