feat(admin-ui): Implement list types for custom fields

Relates to #416
vendure-ecommerce · Jul 29, 2020 · e72f0b3 · e72f0b3
1 parent 1fa3cf1
commit e72f0b3
Show file tree

Hide file tree

Showing 26 changed files with 241 additions and 142 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,34 +1,34 @@
 {
-  "generatedOn": "2020-07-14T09:36:35.279Z",
-  "lastCommit": "49c2ad4d53c15d4e25ba7795183084f60194d653",
+  "generatedOn": "2020-07-28T15:41:10.262Z",
+  "lastCommit": "2f4760e74e7b14caf171772e03c3095212eb17bc",
   "translationStatus": {
     "de": {
-      "tokenCount": 659,
+      "tokenCount": 661,
       "translatedCount": 609,
       "percentage": 92
     },
     "en": {
-      "tokenCount": 659,
-      "translatedCount": 659,
+      "tokenCount": 661,
+      "translatedCount": 660,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 659,
+      "tokenCount": 661,
       "translatedCount": 467,
       "percentage": 71
     },
     "pl": {
-      "tokenCount": 659,
+      "tokenCount": 661,
       "translatedCount": 566,
       "percentage": 86
     },
     "zh_Hans": {
-      "tokenCount": 659,
+      "tokenCount": 661,
       "translatedCount": 550,
       "percentage": 83
     },
     "zh_Hant": {
-      "tokenCount": 659,
+      "tokenCount": 661,
       "translatedCount": 550,
       "percentage": 83
     }

diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -187,6 +187,7 @@ export type BooleanCustomFieldConfig = CustomField & {
    __typename?: 'BooleanCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -1053,6 +1054,7 @@ export type CustomerSortParameter = {
 export type CustomField = {
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -1100,6 +1102,7 @@ export type DateTimeCustomFieldConfig = CustomField & {
    __typename?: 'DateTimeCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -1225,6 +1228,7 @@ export type FloatCustomFieldConfig = CustomField & {
    __typename?: 'FloatCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -1334,6 +1338,7 @@ export type IntCustomFieldConfig = CustomField & {
    __typename?: 'IntCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -1744,6 +1749,7 @@ export type LocaleStringCustomFieldConfig = CustomField & {
    __typename?: 'LocaleStringCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
   readonly?: Maybe<Scalars['Boolean']>;
@@ -3503,6 +3509,7 @@ export type StringCustomFieldConfig = CustomField & {
    __typename?: 'StringCustomFieldConfig';
   name: Scalars['String'];
   type: Scalars['String'];
+  list: Scalars['Boolean'];
   length?: Maybe<Scalars['Int']>;
   label?: Maybe<Array<LocalizedString>>;
   description?: Maybe<Array<LocalizedString>>;
@@ -6187,7 +6194,7 @@ export type UpdateGlobalSettingsMutation = (
 
 type CustomFieldConfig_StringCustomFieldConfig_Fragment = (
   { __typename?: 'StringCustomFieldConfig' }
-  & Pick<StringCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<StringCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>
@@ -6199,7 +6206,7 @@ type CustomFieldConfig_StringCustomFieldConfig_Fragment = (
 
 type CustomFieldConfig_LocaleStringCustomFieldConfig_Fragment = (
   { __typename?: 'LocaleStringCustomFieldConfig' }
-  & Pick<LocaleStringCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<LocaleStringCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>
@@ -6211,7 +6218,7 @@ type CustomFieldConfig_LocaleStringCustomFieldConfig_Fragment = (
 
 type CustomFieldConfig_IntCustomFieldConfig_Fragment = (
   { __typename?: 'IntCustomFieldConfig' }
-  & Pick<IntCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<IntCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>
@@ -6223,7 +6230,7 @@ type CustomFieldConfig_IntCustomFieldConfig_Fragment = (
 
 type CustomFieldConfig_FloatCustomFieldConfig_Fragment = (
   { __typename?: 'FloatCustomFieldConfig' }
-  & Pick<FloatCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<FloatCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>
@@ -6235,7 +6242,7 @@ type CustomFieldConfig_FloatCustomFieldConfig_Fragment = (
 
 type CustomFieldConfig_BooleanCustomFieldConfig_Fragment = (
   { __typename?: 'BooleanCustomFieldConfig' }
-  & Pick<BooleanCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<BooleanCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>
@@ -6247,7 +6254,7 @@ type CustomFieldConfig_BooleanCustomFieldConfig_Fragment = (
 
 type CustomFieldConfig_DateTimeCustomFieldConfig_Fragment = (
   { __typename?: 'DateTimeCustomFieldConfig' }
-  & Pick<DateTimeCustomFieldConfig, 'name' | 'type' | 'readonly'>
+  & Pick<DateTimeCustomFieldConfig, 'name' | 'type' | 'list' | 'readonly'>
   & { description?: Maybe<Array<(
     { __typename?: 'LocalizedString' }
     & Pick<LocalizedString, 'languageCode' | 'value'>

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/configurable-operation-utils.ts b/packages/admin-ui/src/lib/core/src/common/utilities/configurable-operation-utils.ts
@@ -1,4 +1,4 @@
-import { ConfigArgType } from '@vendure/common/lib/shared-types';
+import { ConfigArgType, CustomFieldType } from '@vendure/common/lib/shared-types';
 import { assertNever } from '@vendure/common/lib/shared-utils';
 
 import { ConfigArgDefinition } from '../generated-types';
@@ -27,7 +27,7 @@ export function getDefaultConfigArgValue(arg: ConfigArgDefinition): any {
     return arg.list ? [] : getDefaultConfigArgSingleValue(arg.type as ConfigArgType);
 }
 
-export function getDefaultConfigArgSingleValue(type: ConfigArgType): any {
+export function getDefaultConfigArgSingleValue(type: ConfigArgType | CustomFieldType): any {
     switch (type) {
         case 'boolean':
             return 'false';
@@ -37,6 +37,7 @@ export function getDefaultConfigArgSingleValue(type: ConfigArgType): any {
         case 'ID':
             return '';
         case 'string':
+        case 'localeString':
             return '';
         case 'datetime':
             return new Date();

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/create-updated-translatable.spec.ts b/packages/admin-ui/src/lib/core/src/common/utilities/create-updated-translatable.spec.ts
@@ -113,8 +113,8 @@ describe('createUpdatedTranslatable()', () => {
 
     it('updates custom fields correctly', () => {
         const customFieldConfig: CustomFieldConfig[] = [
-            { name: 'available', type: 'boolean' },
-            { name: 'shortName', type: 'localeString' },
+            { name: 'available', type: 'boolean', list: false },
+            { name: 'shortName', type: 'localeString', list: false },
         ];
         product.customFields = {
             available: true,
@@ -151,8 +151,8 @@ describe('createUpdatedTranslatable()', () => {
 
     it('updates custom fields when none initially exists', () => {
         const customFieldConfig: CustomFieldConfig[] = [
-            { name: 'available', type: 'boolean' },
-            { name: 'shortName', type: 'localeString' },
+            { name: 'available', type: 'boolean', list: false },
+            { name: 'shortName', type: 'localeString', list: false },
         ];
 
         const formValue = {
@@ -184,11 +184,11 @@ describe('createUpdatedTranslatable()', () => {
 
     it('coerces empty customFields to correct type', () => {
         const customFieldConfig: CustomFieldConfig[] = [
-            { name: 'a', type: 'boolean' },
-            { name: 'b', type: 'int' },
-            { name: 'c', type: 'float' },
-            { name: 'd', type: 'datetime' },
-            { name: 'e', type: 'string' },
+            { name: 'a', type: 'boolean', list: false },
+            { name: 'b', type: 'int', list: false },
+            { name: 'c', type: 'float', list: false },
+            { name: 'd', type: 'datetime', list: false },
+            { name: 'e', type: 'string', list: false },
         ];
 
         const formValue = {

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/interpolate-description.spec.ts b/packages/admin-ui/src/lib/core/src/common/utilities/interpolate-description.spec.ts
@@ -5,7 +5,7 @@ import { interpolateDescription } from './interpolate-description';
 describe('interpolateDescription()', () => {
     it('works for single argument', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'foo', type: 'string' }],
+            args: [{ name: 'foo', type: 'string', list: false }],
             description: 'The value is { foo }',
         };
         const result = interpolateDescription(operation as any, { foo: 'val' });
@@ -15,7 +15,10 @@ describe('interpolateDescription()', () => {
 
     it('works for multiple arguments', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'foo', type: 'string' }, { name: 'bar', type: 'string' }],
+            args: [
+                { name: 'foo', type: 'string', list: false },
+                { name: 'bar', type: 'string', list: false },
+            ],
             description: 'The value is { foo } and { bar }',
         };
         const result = interpolateDescription(operation as any, { foo: 'val1', bar: 'val2' });
@@ -25,7 +28,7 @@ describe('interpolateDescription()', () => {
 
     it('is case-insensitive', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'foo', type: 'string' }],
+            args: [{ name: 'foo', type: 'string', list: false }],
             description: 'The value is { FOo }',
         };
         const result = interpolateDescription(operation as any, { foo: 'val' });
@@ -35,17 +38,20 @@ describe('interpolateDescription()', () => {
 
     it('ignores whitespaces in interpolation', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'foo', type: 'string' }, { name: 'bar', type: 'string' }],
+            args: [
+                { name: 'foo', type: 'string', list: false },
+                { name: 'bar', type: 'string', list: false },
+            ],
             description: 'The value is {foo} and {      bar    }',
         };
         const result = interpolateDescription(operation as any, { foo: 'val1', bar: 'val2' });
 
         expect(result).toBe('The value is val1 and val2');
     });
 
-    it('formats money as a decimal', () => {
+    it('formats currency-form-input value as a decimal', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'price', type: 'int', config: { inputType: 'money' } }],
+            args: [{ name: 'price', type: 'int', list: false, ui: { component: 'currency-form-input' } }],
             description: 'The price is { price }',
         };
         const result = interpolateDescription(operation as any, { price: 1234 });
@@ -55,7 +61,7 @@ describe('interpolateDescription()', () => {
 
     it('formats Date object as human-readable', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'date', type: 'datetime' }],
+            args: [{ name: 'date', type: 'datetime', list: false }],
             description: 'The date is { date }',
         };
         const date = new Date('2017-09-15 00:00:00');
@@ -66,7 +72,7 @@ describe('interpolateDescription()', () => {
 
     it('formats date string object as human-readable', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'date', type: 'datetime' }],
+            args: [{ name: 'date', type: 'datetime', list: false }],
             description: 'The date is { date }',
         };
         const date = '2017-09-15';
@@ -77,7 +83,7 @@ describe('interpolateDescription()', () => {
 
     it('correctly interprets falsy-looking values', () => {
         const operation: Partial<ConfigurableOperationDefinition> = {
-            args: [{ name: 'foo', type: 'int' }],
+            args: [{ name: 'foo', type: 'int', list: false }],
             description: 'The value is { foo }',
         };
         const result = interpolateDescription(operation as any, { foo: 0 });

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/interpolate-description.ts b/packages/admin-ui/src/lib/core/src/common/utilities/interpolate-description.ts
@@ -19,9 +19,9 @@ export function interpolateDescription(
         }
         let formatted = value;
         const argDef = operation.args.find(arg => arg.name === normalizedArgName);
-        /*if (argDef && argDef.type === 'int' && argDef.config && argDef.config.inputType === 'money') {
+        if (argDef && argDef.type === 'int' && argDef.ui && argDef.ui.component === 'currency-form-input') {
             formatted = value / 100;
-        }*/
+        }
         if (argDef && argDef.type === 'datetime' && value instanceof Date) {
             formatted = value.toLocaleDateString();
         }

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts
@@ -442,6 +442,7 @@ export const CUSTOM_FIELD_CONFIG_FRAGMENT = gql`
     fragment CustomFieldConfig on CustomField {
         name
         type
+        list
         description {
             languageCode
             value

diff --git a/packages/admin-ui/src/lib/core/src/data/utils/add-custom-fields.spec.ts b/packages/admin-ui/src/lib/core/src/data/utils/add-custom-fields.spec.ts
@@ -144,7 +144,10 @@ describe('addCustomFields()', () => {
 
     it('Adds customFields to Product fragment', () => {
         const customFieldsConfig: Partial<CustomFields> = {
-            Product: [{ name: 'custom1', type: 'string' }, { name: 'custom2', type: 'boolean' }],
+            Product: [
+                { name: 'custom1', type: 'string', list: false },
+                { name: 'custom2', type: 'boolean', list: false },
+            ],
         };
 
         const result = addCustomFields(documentNode, customFieldsConfig as CustomFields);
@@ -158,7 +161,7 @@ describe('addCustomFields()', () => {
 
     it('Adds customFields to Product translations', () => {
         const customFieldsConfig: Partial<CustomFields> = {
-            Product: [{ name: 'customLocaleString', type: 'localeString' }],
+            Product: [{ name: 'customLocaleString', type: 'localeString', list: false }],
         };
 
         const result = addCustomFields(documentNode, customFieldsConfig as CustomFields);

diff --git a/packages/admin-ui/src/lib/core/src/data/utils/remove-readonly-custom-fields.spec.ts b/packages/admin-ui/src/lib/core/src/data/utils/remove-readonly-custom-fields.spec.ts
@@ -5,8 +5,8 @@ import { removeReadonlyCustomFields } from './remove-readonly-custom-fields';
 describe('removeReadonlyCustomFields', () => {
     it('readonly field and writable field', () => {
         const config: CustomFieldConfig[] = [
-            { name: 'weight', type: 'int' },
-            { name: 'rating', type: 'float', readonly: true },
+            { name: 'weight', type: 'int', list: false },
+            { name: 'rating', type: 'float', readonly: true, list: false },
         ];
         const entity = {
             id: 1,
@@ -28,7 +28,7 @@ describe('removeReadonlyCustomFields', () => {
     });
 
     it('single readonly field', () => {
-        const config: CustomFieldConfig[] = [{ name: 'rating', type: 'float', readonly: true }];
+        const config: CustomFieldConfig[] = [{ name: 'rating', type: 'float', readonly: true, list: false }];
         const entity = {
             id: 1,
             name: 'test',
@@ -46,7 +46,9 @@ describe('removeReadonlyCustomFields', () => {
     });
 
     it('readonly field in translation', () => {
-        const config: CustomFieldConfig[] = [{ name: 'alias', type: 'localeString', readonly: true }];
+        const config: CustomFieldConfig[] = [
+            { name: 'alias', type: 'localeString', readonly: true, list: false },
+        ];
         const entity = {
             id: 1,
             name: 'test',
@@ -63,8 +65,8 @@ describe('removeReadonlyCustomFields', () => {
 
     it('wrapped in an input object', () => {
         const config: CustomFieldConfig[] = [
-            { name: 'weight', type: 'int' },
-            { name: 'rating', type: 'float', readonly: true },
+            { name: 'weight', type: 'int', list: false },
+            { name: 'rating', type: 'float', readonly: true, list: false },
         ];
         const entity = {
             input: {

diff --git a/...in-ui/src/lib/core/src/providers/custom-field-component/custom-field-component.service.ts b/...in-ui/src/lib/core/src/providers/custom-field-component/custom-field-component.service.ts
@@ -2,7 +2,6 @@ import {
     APP_INITIALIZER,
     ComponentFactory,
     ComponentFactoryResolver,
-    ComponentRef,
     Injectable,
     Injector,
     Provider,
@@ -11,6 +10,7 @@ import { FormControl } from '@angular/forms';
 import { Type } from '@vendure/common/lib/shared-types';
 
 import { CustomFields, CustomFieldsFragment } from '../../common/generated-types';
+
 export type CustomFieldConfigType = CustomFieldsFragment;
 
 export interface CustomFieldControl {
-Original file line number
+Diff line change
@@ Expand Up / @@ -442,6 +442,7 @@ export const CUSTOM_FIELD_CONFIG_FRAGMENT = gql` @@
         fragment CustomFieldConfig on CustomField {
             name
             type
+            list
             description {
                 languageCode
                 value
@@ Expand Down @@