feat(admin-ui): Add enabled/disabled toggle to ProductVariants

Relates to #62
vendure-ecommerce · Apr 24, 2019 · 406ab28 · 406ab28
1 parent a117bbe
commit 406ab28
Show file tree

Hide file tree

Showing 9 changed files with 1,326 additions and 1,309 deletions.
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
@@ -31,6 +31,7 @@ import { VariantAssetChange } from '../product-variants-list/product-variants-li
 
 export type TabName = 'details' | 'variants';
 export interface VariantFormValue {
+    enabled: boolean;
     sku: string;
     name: string;
     price: number;
@@ -359,6 +360,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             const variantTranslation = variant.translations.find(t => t.languageCode === languageCode);
             const facetValueIds = variant.facetValues.map(fv => fv.id);
             const group: VariantFormValue = {
+                enabled: variant.enabled,
                 sku: variant.sku,
                 name: variantTranslation ? variantTranslation.name : '',
                 price: variant.price,

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
@@ -61,7 +61,7 @@
         <td class="left align-middle">
             {{ groupByProduct ? result.productName : result.productVariantName }}
         </td>
-        <td>
+        <td class="align-middle">
             <vdr-chip *ngIf="!result.enabled">{{ 'common.disabled' | translate }}</vdr-chip>
         </td>
         <td class="right align-middle">

diff --git a/...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html b/...-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html
@@ -45,6 +45,17 @@
                 </div>
             </div>
             <div class="flex-spacer"></div>
+            <div>
+                <clr-toggle-wrapper>
+                    <input
+                        type="checkbox"
+                        clrToggle
+                        name="enabled"
+                        [formControl]="formArray.get([i, 'enabled'])"
+                    />
+                    <label>{{ 'common.enabled' | translate }}</label>
+                </clr-toggle-wrapper>
+            </div>
         </div>
         <div class="card-block">
             <div class="row">

diff --git a/admin-ui/src/app/data/definitions/product-definitions.ts b/admin-ui/src/app/data/definitions/product-definitions.ts
@@ -15,6 +15,7 @@ export const ASSET_FRAGMENT = gql`
 export const PRODUCT_VARIANT_FRAGMENT = gql`
     fragment ProductVariant on ProductVariant {
         id
+        enabled
         languageCode
         name
         price

diff --git a/admin-ui/src/app/data/providers/product-data.service.ts b/admin-ui/src/app/data/providers/product-data.service.ts
@@ -126,6 +126,7 @@ export class ProductDataService {
             input: variants.map(
                 pick([
                     'id',
+                    'enabled',
                     'translations',
                     'sku',
                     'price',

diff --git a/packages/common/src/generated-shop-types.ts b/packages/common/src/generated-shop-types.ts
@@ -1,5 +1,5 @@
 // tslint:disable
-// Generated in 2019-04-24T17:04:25+02:00
+// Generated in 2019-04-24T20:30:12+02:00
 export type Maybe<T> = T | null;
 
 export interface OrderListOptions {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ export const ASSET_FRAGMENT = gql` @@
     export const PRODUCT_VARIANT_FRAGMENT = gql`
         fragment ProductVariant on ProductVariant {
             id
+            enabled
             languageCode
             name
             price
@@ Expand Down @@