feat(admin-ui): Improvements to ProductVariant list

admin-ui/src/app/catalog/components/product-assets/product-assets.component.html

@@ -20,7 +20,7 @@
 <ng-template #compactView>
     <div class="featured-asset compact">
         <clr-dropdown *ngIf="featuredAsset">
-            <img clrDropdownTrigger [src]="featuredAsset!.preview + '?preset=thumb'" />
+            <img clrDropdownTrigger [src]="featuredAsset!.preview + '?preset=tiny'" />
             <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                 <button
                     type="button"
@@ -33,7 +33,7 @@
             </clr-dropdown-menu>
         </clr-dropdown>
 
-        <div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="64"></clr-icon></div>
+        <div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="48"></clr-icon></div>
         <button class="compact-select btn btn-icon btn-sm" (click)="selectAssets()">
             <clr-icon shape="attachment"></clr-icon>
         </button>

admin-ui/src/app/catalog/components/product-assets/product-assets.component.scss

@@ -4,7 +4,7 @@
     width: 340px;
     display: block;
     &.compact {
-        width: 150px;
+        width: 50px;
     }
 }
 
@@ -19,8 +19,8 @@
     padding: 6px;
 
     &.compact {
-        width: 150px;
-        min-height: 60px;
+        width: 50px;
+        min-height: 40px;
         padding: 0;
         position: relative;
     }

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -92,27 +92,18 @@
                     ></vdr-generate-product-variants>
 
                     <ng-template #variants>
-                        <vdr-form-item
-                            *ngIf="product?.optionGroups.length"
-                            [label]="'catalog.product-option-groups' | translate"
-                        >
-                            <div class="option-groups-list">
-                                <div *ngFor="let optionGroup of product?.optionGroups" class="option-group">
-                                    <vdr-chip>{{ optionGroup.name }} ({{ optionGroup.code }})</vdr-chip>
-                                </div>
-                            </div>
-                        </vdr-form-item>
-
                         <vdr-product-variants-list
                             [variants]="variants$ | async"
                             [facets]="facets$ | async"
                             [productVariantsFormArray]="productForm.get('variants')"
                             [taxCategories]="taxCategories$ | async"
                             (assetChange)="variantAssetChange($event)"
+                            (selectionChange)="selectedVariantIds = $event"
                             #productVariantsList
                         >
                             <button
                                 class="btn btn-sm btn-secondary"
+                                [disabled]="selectedVariantIds.length === 0"
                                 (click)="selectFacetValue(productVariantsList.selectedVariantIds)"
                             >
                                 {{ 'catalog.apply-facets' | translate }}

admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts

@@ -61,6 +61,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
     assetChanges: SelectedAssets = {};
     variantAssetChanges: { [variantId: string]: SelectedAssets } = {};
     facets$ = new BehaviorSubject<FacetWithValues.Fragment[]>([]);
+    selectedVariantIds: string[] = [];
 
     constructor(
         route: ActivatedRoute,

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -4,10 +4,7 @@
         [selected]="areAllSelected()"
         (selectedChange)="toggleSelectAll()"
     ></vdr-select-toggle>
-    <ng-container *ngIf="selectedVariantIds.length">
-        <label>{{ 'catalog.with-selected' | translate }}:</label>
-        <ng-content></ng-content>
-    </ng-container>
+    <ng-content></ng-content>
 </div>
 <div class="variants-list">
     <div class="variant-container card" *ngFor="let variant of variants; let i = index">

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.ts

@@ -35,6 +35,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
     @Input() taxCategories: TaxCategory[];
     @Input() facets: FacetWithValues.Fragment[];
     @Output() assetChange = new EventEmitter<VariantAssetChange>();
+    @Output() selectionChange = new EventEmitter<string[]>();
     selectedVariantIds: string[] = [];
     private facetValues: FacetValue.Fragment[];
     private formSubscription: Subscription;
@@ -78,6 +79,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
         } else {
             this.selectedVariantIds = this.variants.map(v => v.id);
         }
+        this.selectionChange.emit(this.selectedVariantIds);
     }
 
     toggleSelectVariant(variantId: string) {
@@ -87,6 +89,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
         } else {
             this.selectedVariantIds.push(variantId);
         }
+        this.selectionChange.emit(this.selectedVariantIds);
     }
 
     pendingFacetValues(index: number) {

admin-ui/src/app/common/utilities/string-to-color.ts

@@ -6,29 +6,29 @@ export function stringToColor(input: string): string {
         return '#fff';
     }
     const safeColors = [
-        '#FF4343',
-        '#9A0089',
-        '#881798',
+        // '#FF4343',
+        // '#9A0089',
+        // '#881798',
         '#10893E',
         '#107C10',
         '#7E735F',
         '#2F5646',
-        '#D13438',
-        '#C239B3',
-        '#B146C2',
+        // '#D13438',
+        // '#C239B3',
+        // '#B146C2',
         '#498205',
         '#847545',
-        '#EF6950',
-        '#BF0077',
+        // '#EF6950',
+        // '#BF0077',
         '#744DA9',
         '#018574',
         '#486860',
         '#525E54',
         '#647C64',
         '#567C73',
-        '#DA3B01',
+        // '#DA3B01',
         '#8764B8',
-        '#C30052',
+        // '#C30052',
         '#515C6B',
         '#4A5459',
         '#69797E',

admin-ui/src/i18n-messages/en.json

@@ -58,7 +58,6 @@
     "price-with-tax-in-default-zone": "Price with { rate }% tax: { price }",
     "product-details": "Product details",
     "product-name": "Product name",
-    "product-option-groups": "Option groups",
     "product-variants": "Product variants",
     "remove-asset": "Remove asset",
     "select-assets": "Select assets",
@@ -71,8 +70,7 @@
     "taxes": "Taxes",
     "truncated-options-count": "{count} further {count, plural, one {option} other {options}}",
     "upload-assets": "Upload assets",
-    "values": "Values",
-    "with-selected": "With selected"
+    "values": "Values"
   },
   "common": {
     "ID": "ID",
@@ -218,4 +216,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}