diff --git a/admin-ui/src/app/catalog/catalog.module.ts b/admin-ui/src/app/catalog/catalog.module.ts index 15635c49e2..0dfcca50e8 100644 --- a/admin-ui/src/app/catalog/catalog.module.ts +++ b/admin-ui/src/app/catalog/catalog.module.ts @@ -24,6 +24,7 @@ import { ProductAssetsComponent } from './components/product-assets/product-asse import { ProductDetailComponent } from './components/product-detail/product-detail.component'; import { ProductListComponent } from './components/product-list/product-list.component'; import { ProductVariantsListComponent } from './components/product-variants-list/product-variants-list.component'; +import { ProductVariantsTableComponent } from './components/product-variants-table/product-variants-table.component'; import { ProductVariantsWizardComponent } from './components/product-variants-wizard/product-variants-wizard.component'; import { SelectOptionGroupDialogComponent } from './components/select-option-group-dialog/select-option-group-dialog.component'; import { SelectOptionGroupComponent } from './components/select-option-group/select-option-group.component'; @@ -59,6 +60,7 @@ import { ProductResolver } from './providers/routing/product-resolver'; CollectionTreeComponent, CollectionTreeNodeComponent, CollectionContentsComponent, + ProductVariantsTableComponent, ], entryComponents: [ AssetPickerDialogComponent, diff --git a/admin-ui/src/app/catalog/catalog.routes.ts b/admin-ui/src/app/catalog/catalog.routes.ts index 147746d21f..fc7484d2d0 100644 --- a/admin-ui/src/app/catalog/catalog.routes.ts +++ b/admin-ui/src/app/catalog/catalog.routes.ts @@ -1,8 +1,11 @@ import { Route } from '@angular/router'; -import { FacetWithValues, ProductWithVariants } from 'shared/generated-types'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { FacetWithValues, OrderWithLines, ProductWithVariants } from 'shared/generated-types'; import { createResolveData } from '../common/base-entity-resolver'; import { detailBreadcrumb } from '../common/detail-breadcrumb'; +import { BreadcrumbValue } from '../core/components/breadcrumb/breadcrumb.component'; import { _ } from '../core/providers/i18n/mark-for-extraction'; import { CanDeactivateDetailGuard } from '../shared/providers/routing/can-deactivate-detail-guard'; diff --git a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html index ff05223cc7..dca51cb935 100644 --- a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html +++ b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.html @@ -106,29 +106,48 @@
+
+
+ + +
+
+ - - + (selectFacetValueClick)="selectVariantFacetValue($event)" + >
diff --git a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.scss b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.scss index 5ae7e29e6f..c2e2a9ec82 100644 --- a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.scss +++ b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.scss @@ -8,19 +8,11 @@ } } -.option-groups-list { - -} - .group-name { padding-right: 6px; } -.variants-list { - - .variant { - input { - width: 100%; - } - } +.view-mode { + display: flex; + justify-content: flex-end; } diff --git a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts index 090d523046..6c06ba403d 100644 --- a/admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts +++ b/admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { BehaviorSubject, combineLatest, forkJoin, merge, Observable } from 'rxjs'; -import { distinctUntilChanged, map, mergeMap, skip, take, withLatestFrom } from 'rxjs/operators'; +import { distinctUntilChanged, map, mergeMap, shareReplay, skip, take, withLatestFrom } from 'rxjs/operators'; import { CreateProductInput, FacetWithValues, @@ -69,6 +69,7 @@ export class ProductDetailComponent extends BaseDetailComponent; facets$ = new BehaviorSubject([]); selectedVariantIds: string[] = []; + variantDisplayMode: 'card' | 'table' = 'card'; constructor( route: ActivatedRoute, @@ -105,7 +106,8 @@ export class ProductDetailComponent extends BaseDetailComponent product.variants)); this.taxCategories$ = this.dataService.settings .getTaxCategories() - .mapSingle(data => data.taxCategories); + .mapSingle(data => data.taxCategories) + .pipe(shareReplay(1)); this.activeTab$ = this.route.paramMap.pipe(map(qpm => qpm.get('tab') as any)); // FacetValues are provided initially by the nested array of the diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/admin-ui/src/app/catalog/components/product-list/product-list.component.html index a343eb7f6c..781f9fc2f9 100644 --- a/admin-ui/src/app/catalog/components/product-list/product-list.component.html +++ b/admin-ui/src/app/catalog/components/product-list/product-list.component.html @@ -41,7 +41,7 @@ - +
+ + {{ 'common.name' | translate }} + {{ 'catalog.sku' | translate }} + + {{ optionGroup.name }} + + {{ 'catalog.price' | translate }} + {{ 'catalog.stock-on-hand' | translate }} + + + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + {{ option.name }} + + + + + + + + + + + + + + diff --git a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss new file mode 100644 index 0000000000..4b880e451c --- /dev/null +++ b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.scss @@ -0,0 +1,15 @@ +@import "variables"; + +.placeholder { + color: $color-grey-3; +} + +input { + width: 100%; +} + +.stock, .price { + input { + max-width: 96px; + } +} diff --git a/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.ts b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.ts new file mode 100644 index 0000000000..96c14b16d5 --- /dev/null +++ b/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.ts @@ -0,0 +1,15 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { FormArray } from '@angular/forms'; +import { ProductWithVariants } from 'shared/generated-types'; + +@Component({ + selector: 'vdr-product-variants-table', + templateUrl: './product-variants-table.component.html', + styleUrls: ['./product-variants-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductVariantsTableComponent { + @Input('productVariantsFormArray') formArray: FormArray; + @Input() variants: ProductWithVariants.Variants[]; + @Input() optionGroups: ProductWithVariants.OptionGroups[]; +} diff --git a/admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.ts b/admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.ts index 02c844974c..592a785d9d 100644 --- a/admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.ts +++ b/admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.ts @@ -26,10 +26,10 @@ export class VariantPriceDetailComponent implements OnInit, OnChanges { ngOnInit() { const taxRates$ = this.dataService.settings - .getTaxRates(99999, 0) + .getTaxRates(99999, 0, 'cache-first') .mapStream(data => data.taxRates.items); const activeChannel$ = this.dataService.settings - .getActiveChannel() + .getActiveChannel('cache-first') .mapStream(data => data.activeChannel); this.taxRate$ = combineLatest(activeChannel$, taxRates$, this.taxCategoryIdChange$).pipe( diff --git a/admin-ui/src/app/data/providers/settings-data.service.ts b/admin-ui/src/app/data/providers/settings-data.service.ts index b80ae700de..a00e6ceafa 100644 --- a/admin-ui/src/app/data/providers/settings-data.service.ts +++ b/admin-ui/src/app/data/providers/settings-data.service.ts @@ -1,3 +1,4 @@ +import { FetchPolicy } from 'apollo-client'; import { AddMembersToZone, CreateChannel, @@ -184,13 +185,17 @@ export class SettingsDataService { ); } - getTaxRates(take: number = 10, skip: number = 0) { - return this.baseDataService.query(GET_TAX_RATE_LIST, { - options: { - take, - skip, + getTaxRates(take: number = 10, skip: number = 0, fetchPolicy?: FetchPolicy) { + return this.baseDataService.query( + GET_TAX_RATE_LIST, + { + options: { + take, + skip, + }, }, - }); + fetchPolicy, + ); } getTaxRate(id: string) { @@ -221,9 +226,11 @@ export class SettingsDataService { }); } - getActiveChannel() { + getActiveChannel(fetchPolicy?: FetchPolicy) { return this.baseDataService.query( GET_ACTIVE_CHANNEL, + {}, + fetchPolicy, ); } diff --git a/admin-ui/src/app/shared/components/currency-input/currency-input.component.scss b/admin-ui/src/app/shared/components/currency-input/currency-input.component.scss index a962d1624d..e4fdf774a7 100644 --- a/admin-ui/src/app/shared/components/currency-input/currency-input.component.scss +++ b/admin-ui/src/app/shared/components/currency-input/currency-input.component.scss @@ -1,3 +1,8 @@ :host { padding: 0; } + +input { + width: 100%; + max-width: 96px; +} diff --git a/admin-ui/src/app/shared/components/data-table/data-table.component.html b/admin-ui/src/app/shared/components/data-table/data-table.component.html index a183c4c08b..9ae31f37cf 100644 --- a/admin-ui/src/app/shared/components/data-table/data-table.component.html +++ b/admin-ui/src/app/shared/components/data-table/data-table.component.html @@ -1,4 +1,4 @@ - + @@ -23,7 +23,8 @@ itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems - }) + }); + index as i " > - +
@@ -33,7 +34,9 @@ (selectedChange)="rowSelectChange.emit(item)" >
diff --git a/admin-ui/src/app/shared/components/data-table/data-table.component.scss b/admin-ui/src/app/shared/components/data-table/data-table.component.scss index 62615e35bf..c4875ae40a 100644 --- a/admin-ui/src/app/shared/components/data-table/data-table.component.scss +++ b/admin-ui/src/app/shared/components/data-table/data-table.component.scss @@ -1,5 +1,11 @@ @import "variables"; +:host { + display: block; + max-width: 100%; + overflow: auto; +} + thead th { position: sticky; top: 24px; diff --git a/admin-ui/src/i18n-messages/en.json b/admin-ui/src/i18n-messages/en.json index b64f22e800..69d308e134 100644 --- a/admin-ui/src/i18n-messages/en.json +++ b/admin-ui/src/i18n-messages/en.json @@ -38,6 +38,8 @@ "create-new-facet": "Create new facet", "create-new-option-group": "Create new option group", "create-new-product": "Create new product", + "display-variant-cards": "View details", + "display-variant-table": "View as table", "drop-files-to-upload": "Drop files to upload", "facet-values": "Facet values", "filter-by-group-name": "Filter by group name", @@ -61,8 +63,8 @@ "options": "Options", "original-asset-size": "Source size", "price": "Price", - "price-includes-tax-at": "Price includes tax at { rate }%", - "price-with-tax-in-default-zone": "Price with { rate }% tax: { price }", + "price-includes-tax-at": "Includes tax at { rate }%", + "price-with-tax-in-default-zone": "Inc. { rate }% tax: { price }", "private": "Private", "product-details": "Product details", "product-name": "Product name",