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/modals/purchasing-options-modal/purchasing-options-modal.component.html b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html index dc1b0a2db..797258403 100644 --- a/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html +++ b/apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html @@ -55,12 +55,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..e7a378278 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 @@ -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 53afb07c1..25c868a0e 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, private 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 50db46ddd..60f113363 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,9 +18,10 @@ import { PickUpDropdownComponent } from './pick-up-option/pick-up-dropdown/pick- import { QuantityControlComponent } from './quantity-control/quantity-control.component'; import { PageCheckoutPipeModule } from '../../pipes/page-checkout-pipe.module'; import { ProductImageModule } from 'apps/cdn/product-image/src/public-api'; +import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; @NgModule({ - imports: [CommonModule, FormsModule, UiIconModule, OverlayModule, PageCheckoutPipeModule, ProductImageModule], + imports: [CommonModule, FormsModule, UiIconModule, OverlayModule, PageCheckoutPipeModule, ProductImageModule, UiSpinnerModule], exports: [PurchasingOptionsModalComponent], declarations: [ PurchasingOptionsModalComponent, diff --git a/apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html b/apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html index 1663c19b9..03007c4d1 100644 --- a/apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html +++ b/apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html @@ -195,11 +195,10 @@
-
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/ui/spinner/README.md b/apps/ui/spinner/README.md new file mode 100644 index 000000000..dc1565990 --- /dev/null +++ b/apps/ui/spinner/README.md @@ -0,0 +1,25 @@ +# Spinner + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.2. + +## Code scaffolding + +Run `ng generate component component-name --project spinner` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project spinner`. + +> 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..6bbd2c439 --- /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..55245f329 --- /dev/null +++ b/apps/ui/spinner/src/lib/ui-spinner.component.scss @@ -0,0 +1,12 @@ +:host { + @apply flex items-center relative; +} + +.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 a96dd0c47..9f2bcda32 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -175,6 +175,9 @@ ], "@cdn/product-image": [ "apps/cdn/product-image/cdn-product-image/src/public-api.ts" + ], + "@ui/spinner": [ + "apps/ui/spinner/src/public-api.ts" ] } }