refactor(admin-ui): Pull out variants list into component

admin-ui/src/app/catalog/catalog.module.ts

@@ -11,6 +11,7 @@ import { FacetListComponent } from './components/facet-list/facet-list.component
 import { GenerateProductVariantsComponent } from './components/generate-product-variants/generate-product-variants.component';
 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 { 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';
@@ -31,6 +32,7 @@ import { ProductResolver } from './providers/routing/product-resolver';
         FacetListComponent,
         FacetDetailComponent,
         GenerateProductVariantsComponent,
+        ProductVariantsListComponent,
     ],
     entryComponents: [CreateOptionGroupDialogComponent, SelectOptionGroupDialogComponent],
     providers: [ProductResolver, FacetResolver],

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

@@ -60,34 +60,11 @@
                 </div>
             </vdr-form-item>
 
-            <table class="variants-list table" formArrayName="variants">
-                <thead>
-                <tr>
-                    <th>{{ 'catalog.product-variant-table-sku' | translate }}</th>
-                    <th>{{ 'catalog.product-variant-table-name' | translate }}</th>
-                    <th>{{ 'catalog.product-variant-table-options' | translate }}</th>
-                    <th>{{ 'catalog.product-variant-table-price' | translate }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr class="variant"
-                    *ngFor="let variant of variants$ | async; let i = index"
-                    [formGroupName]="i">
-                    <td>
-                        <input type="text" formControlName="sku">
-                    </td>
-                    <td>
-                        <input type="text" formControlName="name">
-                    </td>
-                    <td>
-                        <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
-                    </td>
-                    <td>
-                        <vdr-currency-input formControlName="price"></vdr-currency-input>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
+            <vdr-product-variants-list [variants]="variants$ | async"
+                                       [productVariantsFormArray]="productForm.get('variants')">
+                <label>Apply to selected</label>
+
+            </vdr-product-variants-list>
         </ng-template>
 
     </section>

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, forkJoin, Observable, Subject } from 'rxjs';
@@ -21,12 +21,12 @@ import {
     UpdateProductVariantInput,
 } from '../../../data/types/gql-generated-types';
 import { ModalService } from '../../../shared/providers/modal/modal.service';
-import { ProductVariantsWizardComponent } from '../product-variants-wizard/product-variants-wizard.component';
 
 @Component({
     selector: 'vdr-product-detail',
     templateUrl: './product-detail.component.html',
     styleUrls: ['./product-detail.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductDetailComponent implements OnInit, OnDestroy {
     product$: Observable<ProductWithVariants>;

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

@@ -0,0 +1,40 @@
+<div class="multi-actions" *ngIf="selectedVariantIds.length">
+    <ng-content></ng-content>
+</div>
+<table class="variants-list table">
+    <thead>
+    <tr>
+        <th>
+            <vdr-select-toggle size="small"
+                               [selected]="areAllSelected()"
+                               (selectedChange)="toggleSelectAll()"></vdr-select-toggle>
+        </th>
+        <th>{{ 'catalog.product-variant-table-sku' | translate }}</th>
+        <th>{{ 'catalog.product-variant-table-name' | translate }}</th>
+        <th>{{ 'catalog.product-variant-table-options' | translate }}</th>
+        <th>{{ 'catalog.product-variant-table-price' | translate }}</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr class="variant"
+        *ngFor="let variant of variants; let i = index">
+        <td>
+            <vdr-select-toggle size="small"
+                               [selected]="isVariantSelected(variant.id)"
+                               (selectedChange)="toggleSelectVariant(variant.id)"></vdr-select-toggle>
+        </td>
+        <td>
+            <input type="text" [formControl]="formArray.get([i, 'sku'])">
+        </td>
+        <td>
+            <input type="text" [formControl]="formArray.get([i, 'name'])">
+        </td>
+        <td>
+            <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
+        </td>
+        <td>
+            <vdr-currency-input [formControl]="formArray.get([i, 'price'])"></vdr-currency-input>
+        </td>
+    </tr>
+    </tbody>
+</table>

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

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormArray } from '@angular/forms';
+
+import { ProductWithVariants_variants } from '../../../data/types/gql-generated-types';
+
+@Component({
+    selector: 'vdr-product-variants-list',
+    templateUrl: './product-variants-list.component.html',
+    styleUrls: ['./product-variants-list.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductVariantsListComponent {
+    @Input('productVariantsFormArray') formArray: FormArray;
+    @Input() variants: ProductWithVariants_variants[];
+    selectedVariantIds: string[] = [];
+
+    areAllSelected(): boolean {
+        return !!this.variants && this.selectedVariantIds.length === this.variants.length;
+    }
+
+    toggleSelectAll() {
+        if (this.areAllSelected()) {
+            this.selectedVariantIds = [];
+        } else {
+            this.selectedVariantIds = this.variants.map(v => v.id);
+        }
+    }
+
+    toggleSelectVariant(variantId: string) {
+        const index = this.selectedVariantIds.indexOf(variantId);
+        if (-1 < index) {
+            this.selectedVariantIds.splice(index, 1);
+        } else {
+            this.selectedVariantIds.push(variantId);
+        }
+    }
+
+    isVariantSelected(variantId: string): boolean {
+        return -1 < this.selectedVariantIds.indexOf(variantId);
+    }
+}

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.html

@@ -1,8 +1,9 @@
 <div class="toggle"
+     [class.small]="size === 'small'"
      tabindex="0"
      [class.selected]="selected"
      (keydown.enter)="selectedChange.emit(!selected)"
      (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
      (click)="selectedChange.emit(!selected)">
-    <clr-icon shape="check" size="32"></clr-icon>
+    <clr-icon shape="check" [attr.size]="size === 'small' ? 16 : 32"></clr-icon>
 </div>

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.scss

@@ -22,6 +22,11 @@
     color: $color-grey-3;
     transition: background-color 0.2s, border 0.2s;
 
+    &.small {
+        width: 24px;
+        height: 24px;
+    }
+
     &:hover {
         border-color: $color-success;
         background-color: transparentize($color-success, 0.9);

admin-ui/src/app/shared/components/select-toggle/select-toggle.component.ts

@@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectToggleComponent {
+    @Input() size: 'small' | 'large' = 'large';
     @Input() selected = false;
     @Output() selectedChange = new EventEmitter<boolean>();
 }