feat(admin-ui): Add toggle to enable/disable Product

Relates to #62

admin-ui/package.json

@@ -22,9 +22,9 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
-    "@clr/angular": "^1.0.4",
-    "@clr/icons": "^1.0.4",
-    "@clr/ui": "^1.0.4",
+    "@clr/angular": "^1.1.3",
+    "@clr/icons": "^1.1.3",
+    "@clr/ui": "^1.1.3",
     "@ng-select/ng-select": "^2.15.1",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
@@ -71,4 +71,4 @@
     "tslint": "^5.12.1",
     "typescript": "~3.2.4"
   }
-}
+}

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

@@ -1,5 +1,14 @@
 <vdr-action-bar>
     <vdr-ab-left>
+        <clr-toggle-wrapper>
+            <input
+                type="checkbox"
+                clrToggle
+                name="enabled"
+                [formControl]="detailForm.get(['product', 'enabled'])"
+            />
+            <label>{{ 'common.enabled' | translate }}</label>
+        </clr-toggle-wrapper>
         <vdr-language-selector
             [disabled]="isNew$ | async"
             [availableLanguageCodes]="availableLanguages$ | async"
@@ -11,7 +20,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else: updateButton"
+            *ngIf="(isNew$ | async); else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -98,7 +107,7 @@
             <clr-tab-content *clrIfActive="(activeTab$ | async) === 'variants'">
                 <section class="form-block" *ngIf="!(isNew$ | async)">
                     <vdr-generate-product-variants
-                        *ngIf="(variants$ | async)?.length === 0; else: variants"
+                        *ngIf="(variants$ | async)?.length === 0; else variants"
                         [product]="product"
                     ></vdr-generate-product-variants>
 

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

@@ -82,6 +82,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         this.customVariantFields = this.getCustomFieldConfig('ProductVariant');
         this.detailForm = this.formBuilder.group({
             product: this.formBuilder.group({
+                enabled: true,
                 name: ['', Validators.required],
                 slug: '',
                 description: '',
@@ -329,6 +330,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         const currentTranslation = product.translations.find(t => t.languageCode === languageCode);
         this.detailForm.patchValue({
             product: {
+                enabled: product.enabled,
                 name: currentTranslation ? currentTranslation.name : '',
                 slug: currentTranslation ? currentTranslation.slug : '',
                 description: currentTranslation ? currentTranslation.description : '',

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

@@ -40,6 +40,7 @@
     <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-result="item">
         <td class="left align-middle">
             <div class="image-placeholder">
@@ -48,7 +49,7 @@
                         groupByProduct
                             ? result.productPreview
                             : result.productVariantPreview || result.productPreview as image;
-                        else: imagePlaceholder
+                        else imagePlaceholder
                     "
                     [src]="image + '?preset=tiny'"
                 />
@@ -60,6 +61,9 @@
         <td class="left align-middle">
             {{ groupByProduct ? result.productName : result.productVariantName }}
         </td>
+        <td>
+            <vdr-chip *ngIf="!result.enabled">{{ 'common.disabled' | translate }}</vdr-chip>
+        </td>
         <td class="right align-middle">
             <vdr-table-row-action
                 iconShape="edit"

admin-ui/src/app/catalog/providers/routing/product-resolver.ts

@@ -12,6 +12,7 @@ export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Frag
             {
                 __typename: 'Product' as 'Product',
                 id: '',
+                enabled: true,
                 languageCode: getDefaultLanguage(),
                 name: '',
                 slug: '',

admin-ui/src/app/data/definitions/product-definitions.ts

@@ -64,6 +64,7 @@ export const PRODUCT_VARIANT_FRAGMENT = gql`
 export const PRODUCT_WITH_VARIANTS_FRAGMENT = gql`
     fragment ProductWithVariants on Product {
         id
+        enabled
         languageCode
         name
         slug
@@ -234,6 +235,7 @@ export const GET_PRODUCT_LIST = gql`
         products(languageCode: $languageCode, options: $options) {
             items {
                 id
+                enabled
                 languageCode
                 name
                 slug
@@ -290,6 +292,7 @@ export const SEARCH_PRODUCTS = gql`
         search(input: $input) {
             totalItems
             items {
+                enabled
                 productId
                 productName
                 productPreview

admin-ui/src/app/data/providers/product-data.service.ts

@@ -94,6 +94,7 @@ export class ProductDataService {
         const input: UpdateProduct.Variables = {
             input: pick(product, [
                 'id',
+                'enabled',
                 'translations',
                 'customFields',
                 'assetIds',

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

@@ -99,6 +99,7 @@
     "custom-fields": "Custom fields",
     "delete": "Delete",
     "description": "Description",
+    "disabled": "Disabled",
     "discard-changes": "Discard changes",
     "done": "Done",
     "edit": "Edit",

admin-ui/yarn.lock

@@ -314,22 +314,22 @@
     typescript "2.4.1"
     yargs "8.0.2"
 
-"@clr/angular@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-1.0.4.tgz#bec9e8e27c73de5674089535cd2bcf6a1df65e0d"
-  integrity sha512-ikvfsgJACuqerRzU92LFx1eD63v24BhKJETpqQaLZvqZvDAdilIBq5fVOmhfzqyiFjO38zlweYhBJ7k99IAGjg==
+"@clr/angular@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-1.1.3.tgz#00c4c0ea6ef3aa8d9a14204f2702d43fabf430c8"
+  integrity sha512-k3G5WGBQnmGkeD5rItHT9MQn2+p+jDTO2u5hiExANKG+HosRsX2D49y0tW1uKm0J/0L0sFZ9OZj8SKTJP36hKQ==
   dependencies:
     tslib "^1.9.0"
 
-"@clr/icons@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-1.0.4.tgz#40890e9cabe2ed68ba80735c8455a8514ac3f698"
-  integrity sha512-H+U+ScjCRbmE00hkCF/8Q43e/QHUrK+0ubMMAa82zwN8cmg4L8PsPEJsRSctlCeokeQ+kxADS0ZGqRIjoB/+cw==
+"@clr/icons@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-1.1.3.tgz#0154d3085528b568010ff10a9116c2e08448304b"
+  integrity sha512-UvTtQh8RBovHPmb9JzpYQKumuIkWF+ZkNsOGDxPlfFrDnabdGRYmiN/hBYY+aP49KFKDdJf9ucQteVGVo0Nz8Q==
 
-"@clr/ui@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-1.0.4.tgz#fc8c8c8a5e00f36a0b9331cbb312ad76a157d2ea"
-  integrity sha512-OAB4K7CQ/NXsiJB8q5Jj4xyHKIHDYjgy/8C6mjdgx4dTsiLb649ma7wBOh6uy83gCnEJmFJ6Og3jL3NyEkFpFA==
+"@clr/ui@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-1.1.3.tgz#b736ead16ced97938370090694cc4da64601b2f8"
+  integrity sha512-0H3/6YeVltmS3a0cNG8TyOB7nRhpHjVtzTSC06hmk2/cp4x14XPHdHabV1gwWq1ZXfGb5cLDRBb2cjWb546sKQ==
 
 "@ng-select/ng-select@^2.15.1":
   version "2.15.1"

packages/common/src/generated-shop-types.ts

@@ -1,5 +1,5 @@
 // tslint:disable
-// Generated in 2019-04-24T15:08:57+02:00
+// Generated in 2019-04-24T17:04:25+02:00
 export type Maybe<T> = T | null;
 
 export interface OrderListOptions {

packages/common/src/generated-types.ts

@@ -1,5 +1,5 @@
 // tslint:disable
-// Generated in 2019-04-24T15:08:58+02:00
+// Generated in 2019-04-24T17:04:27+02:00
 export type Maybe<T> = T | null;
 
 
@@ -676,42 +676,6 @@ export interface CreateAssetInput {
   file: Upload;
 }
 
-export interface CreateChannelInput {
-  
-  code: string;
-  
-  token: string;
-  
-  defaultLanguageCode: LanguageCode;
-  
-  pricesIncludeTax: boolean;
-  
-  currencyCode: CurrencyCode;
-  
-  defaultTaxZoneId?: Maybe<string>;
-  
-  defaultShippingZoneId?: Maybe<string>;
-}
-
-export interface UpdateChannelInput {
-  
-  id: string;
-  
-  code?: Maybe<string>;
-  
-  token?: Maybe<string>;
-  
-  defaultLanguageCode?: Maybe<LanguageCode>;
-  
-  pricesIncludeTax?: Maybe<boolean>;
-  
-  currencyCode?: Maybe<CurrencyCode>;
-  
-  defaultTaxZoneId?: Maybe<string>;
-  
-  defaultShippingZoneId?: Maybe<string>;
-}
-
 export interface CreateCollectionInput {
   
   featuredAssetId?: Maybe<string>;
@@ -811,6 +775,42 @@ export interface UpdateCountryInput {
   enabled?: Maybe<boolean>;
 }
 
+export interface CreateChannelInput {
+  
+  code: string;
+  
+  token: string;
+  
+  defaultLanguageCode: LanguageCode;
+  
+  pricesIncludeTax: boolean;
+  
+  currencyCode: CurrencyCode;
+  
+  defaultTaxZoneId?: Maybe<string>;
+  
+  defaultShippingZoneId?: Maybe<string>;
+}
+
+export interface UpdateChannelInput {
+  
+  id: string;
+  
+  code?: Maybe<string>;
+  
+  token?: Maybe<string>;
+  
+  defaultLanguageCode?: Maybe<LanguageCode>;
+  
+  pricesIncludeTax?: Maybe<boolean>;
+  
+  currencyCode?: Maybe<CurrencyCode>;
+  
+  defaultTaxZoneId?: Maybe<string>;
+  
+  defaultShippingZoneId?: Maybe<string>;
+}
+
 export interface CreateCustomerGroupInput {
   
   name: string;
@@ -1004,48 +1004,6 @@ export interface UpdatePaymentMethodInput {
   configArgs?: Maybe<ConfigArgInput[]>;
 }
 
-export interface CreateProductOptionGroupInput {
-  
-  code: string;
-  
-  translations: ProductOptionGroupTranslationInput[];
-  
-  options: CreateProductOptionInput[];
-  
-  customFields?: Maybe<Json>;
-}
-
-export interface ProductOptionGroupTranslationInput {
-  
-  id?: Maybe<string>;
-  
-  languageCode: LanguageCode;
-  
-  name?: Maybe<string>;
-  
-  customFields?: Maybe<Json>;
-}
-
-export interface CreateProductOptionInput {
-  
-  code: string;
-  
-  translations: ProductOptionGroupTranslationInput[];
-  
-  customFields?: Maybe<Json>;
-}
-
-export interface UpdateProductOptionGroupInput {
-  
-  id: string;
-  
-  code?: Maybe<string>;
-  
-  translations?: Maybe<ProductOptionGroupTranslationInput[]>;
-  
-  customFields?: Maybe<Json>;
-}
-
 export interface CreateProductInput {
   
   featuredAssetId?: Maybe<string>;
@@ -1125,6 +1083,48 @@ export interface ProductVariantTranslationInput {
   customFields?: Maybe<Json>;
 }
 
+export interface CreateProductOptionGroupInput {
+  
+  code: string;
+  
+  translations: ProductOptionGroupTranslationInput[];
+  
+  options: CreateProductOptionInput[];
+  
+  customFields?: Maybe<Json>;
+}
+
+export interface ProductOptionGroupTranslationInput {
+  
+  id?: Maybe<string>;
+  
+  languageCode: LanguageCode;
+  
+  name?: Maybe<string>;
+  
+  customFields?: Maybe<Json>;
+}
+
+export interface CreateProductOptionInput {
+  
+  code: string;
+  
+  translations: ProductOptionGroupTranslationInput[];
+  
+  customFields?: Maybe<Json>;
+}
+
+export interface UpdateProductOptionGroupInput {
+  
+  id: string;
+  
+  code?: Maybe<string>;
+  
+  translations?: Maybe<ProductOptionGroupTranslationInput[]>;
+  
+  customFields?: Maybe<Json>;
+}
+
 export interface CreatePromotionInput {
   
   name: string;
@@ -2830,6 +2830,8 @@ export namespace SearchProducts {
   export type Items = {
     __typename?: "SearchResult";
     
+    enabled: boolean;
+    
     productId: string;
     
     productName: string;
@@ -4538,12 +4540,6 @@ export interface Query {
   
   me?: Maybe<CurrentUser>;
   
-  channels: Channel[];
-  
-  channel?: Maybe<Channel>;
-  
-  activeChannel: Channel;
-  
   collections: CollectionList;
   
   collection?: Maybe<Collection>;
@@ -4554,6 +4550,12 @@ export interface Query {
   
   country?: Maybe<Country>;
   
+  channels: Channel[];
+  
+  channel?: Maybe<Channel>;
+  
+  activeChannel: Channel;
+  
   customerGroups: CustomerGroup[];
   
   customerGroup?: Maybe<CustomerGroup>;
@@ -4576,16 +4578,16 @@ export interface Query {
   
   paymentMethod?: Maybe<PaymentMethod>;
   
-  productOptionGroups: ProductOptionGroup[];
-  
-  productOptionGroup?: Maybe<ProductOptionGroup>;
-  
   search: SearchResponse;
   
   products: ProductList;
   
   product?: Maybe<Product>;
   
+  productOptionGroups: ProductOptionGroup[];
+  
+  productOptionGroup?: Maybe<ProductOptionGroup>;
+  
   promotion?: Maybe<Promotion>;
   
   promotions: PromotionList;
@@ -5404,42 +5406,6 @@ export interface PaymentMethod extends Node {
 }
 
 
-export interface ProductOptionGroup extends Node {
-  
-  id: string;
-  
-  createdAt: DateTime;
-  
-  updatedAt: DateTime;
-  
-  languageCode: LanguageCode;
-  
-  code: string;
-  
-  name: string;
-  
-  options: ProductOption[];
-  
-  translations: ProductOptionGroupTranslation[];
-  
-  customFields?: Maybe<Json>;
-}
-
-
-export interface ProductOptionGroupTranslation {
-  
-  id: string;
-  
-  createdAt: DateTime;
-  
-  updatedAt: DateTime;
-  
-  languageCode: LanguageCode;
-  
-  name: string;
-}
-
-
 export interface SearchResponse {
   
   items: SearchResult[];
@@ -5554,6 +5520,42 @@ export interface Product extends Node {
 }
 
 
+export interface ProductOptionGroup extends Node {
+  
+  id: string;
+  
+  createdAt: DateTime;
+  
+  updatedAt: DateTime;
+  
+  languageCode: LanguageCode;
+  
+  code: string;
+  
+  name: string;
+  
+  options: ProductOption[];
+  
+  translations: ProductOptionGroupTranslation[];
+  
+  customFields?: Maybe<Json>;
+}
+
+
+export interface ProductOptionGroupTranslation {
+  
+  id: string;
+  
+  createdAt: DateTime;
+  
+  updatedAt: DateTime;
+  
+  languageCode: LanguageCode;
+  
+  name: string;
+}
+
+
 export interface ProductTranslation {
   
   id: string;
@@ -5665,10 +5667,6 @@ export interface Mutation {
   login: LoginResult;
   
   logout: boolean;
-  /** Create a new Channel */
-  createChannel: Channel;
-  /** Update an existing Channel */
-  updateChannel: Channel;
   /** Create a new Collection */
   createCollection: Collection;
   /** Update an existing Collection */
@@ -5681,6 +5679,10 @@ export interface Mutation {
   updateCountry: Country;
   /** Delete a Country */
   deleteCountry: DeletionResponse;
+  /** Create a new Channel */
+  createChannel: Channel;
+  /** Update an existing Channel */
+  updateChannel: Channel;
   /** Create a new CustomerGroup */
   createCustomerGroup: CustomerGroup;
   /** Update an existing CustomerGroup */
@@ -5719,10 +5721,6 @@ export interface Mutation {
   importProducts?: Maybe<ImportInfo>;
   /** Update an existing PaymentMethod */
   updatePaymentMethod: PaymentMethod;
-  /** Create a new ProductOptionGroup */
-  createProductOptionGroup: ProductOptionGroup;
-  /** Update an existing ProductOptionGroup */
-  updateProductOptionGroup: ProductOptionGroup;
   
   reindex: SearchReindexResponse;
   /** Create a new Product */
@@ -5739,6 +5737,10 @@ export interface Mutation {
   generateVariantsForProduct: Product;
   /** Update existing ProductVariants */
   updateProductVariants: (Maybe<ProductVariant>)[];
+  /** Create a new ProductOptionGroup */
+  createProductOptionGroup: ProductOptionGroup;
+  /** Update an existing ProductOptionGroup */
+  updateProductOptionGroup: ProductOptionGroup;
   
   createPromotion: Promotion;
   
@@ -5849,10 +5851,6 @@ export interface AssetQueryArgs {
   
   id: string;
 }
-export interface ChannelQueryArgs {
-  
-  id: string;
-}
 export interface CollectionsQueryArgs {
   
   languageCode?: Maybe<LanguageCode>;
@@ -5873,6 +5871,10 @@ export interface CountryQueryArgs {
   
   id: string;
 }
+export interface ChannelQueryArgs {
+  
+  id: string;
+}
 export interface CustomerGroupQueryArgs {
   
   id: string;
@@ -5913,29 +5915,29 @@ export interface PaymentMethodQueryArgs {
   
   id: string;
 }
-export interface ProductOptionGroupsQueryArgs {
+export interface SearchQueryArgs {
+  
+  input: SearchInput;
+}
+export interface ProductsQueryArgs {
   
   languageCode?: Maybe<LanguageCode>;
   
-  filterTerm?: Maybe<string>;
+  options?: Maybe<ProductListOptions>;
 }
-export interface ProductOptionGroupQueryArgs {
+export interface ProductQueryArgs {
   
   id: string;
   
   languageCode?: Maybe<LanguageCode>;
 }
-export interface SearchQueryArgs {
-  
-  input: SearchInput;
-}
-export interface ProductsQueryArgs {
+export interface ProductOptionGroupsQueryArgs {
   
   languageCode?: Maybe<LanguageCode>;
   
-  options?: Maybe<ProductListOptions>;
+  filterTerm?: Maybe<string>;
 }
-export interface ProductQueryArgs {
+export interface ProductOptionGroupQueryArgs {
   
   id: string;
   
@@ -6015,14 +6017,6 @@ export interface LoginMutationArgs {
   
   rememberMe?: Maybe<boolean>;
 }
-export interface CreateChannelMutationArgs {
-  
-  input: CreateChannelInput;
-}
-export interface UpdateChannelMutationArgs {
-  
-  input: UpdateChannelInput;
-}
 export interface CreateCollectionMutationArgs {
   
   input: CreateCollectionInput;
@@ -6047,6 +6041,14 @@ export interface DeleteCountryMutationArgs {
   
   id: string;
 }
+export interface CreateChannelMutationArgs {
+  
+  input: CreateChannelInput;
+}
+export interface UpdateChannelMutationArgs {
+  
+  input: UpdateChannelInput;
+}
 export interface CreateCustomerGroupMutationArgs {
   
   input: CreateCustomerGroupInput;
@@ -6135,14 +6137,6 @@ export interface UpdatePaymentMethodMutationArgs {
   
   input: UpdatePaymentMethodInput;
 }
-export interface CreateProductOptionGroupMutationArgs {
-  
-  input: CreateProductOptionGroupInput;
-}
-export interface UpdateProductOptionGroupMutationArgs {
-  
-  input: UpdateProductOptionGroupInput;
-}
 export interface CreateProductMutationArgs {
   
   input: CreateProductInput;
@@ -6181,6 +6175,14 @@ export interface UpdateProductVariantsMutationArgs {
   
   input: UpdateProductVariantInput[];
 }
+export interface CreateProductOptionGroupMutationArgs {
+  
+  input: CreateProductOptionGroupInput;
+}
+export interface UpdateProductOptionGroupMutationArgs {
+  
+  input: UpdateProductOptionGroupInput;
+}
 export interface CreatePromotionMutationArgs {
   
   input: CreatePromotionInput;