fix(admin-ui): Use appropriate default values for custom fields

Fixes #2362
vendure-ecommerce · Aug 30, 2023 · 85a8866 · 85a8866
1 parent 2471350
commit 85a8866
Show file tree

Hide file tree

Showing 25 changed files with 87 additions and 105 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.ts
@@ -6,6 +6,7 @@ import {
     AssetDetailQueryDocument,
     AssetDetailQueryQuery,
     DataService,
+    getCustomFieldsDefaults,
     LanguageCode,
     NotificationService,
     TAG_FRAGMENT,
@@ -40,9 +41,7 @@ export class AssetDetailComponent
     detailForm = new FormGroup({
         name: new FormControl(''),
         tags: new FormControl([] as string[]),
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
 
     constructor(

diff --git a/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts b/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts
@@ -10,7 +10,6 @@ import { FormBuilder, UntypedFormArray, UntypedFormControl, Validators } from '@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     Asset,
-    Collection,
     COLLECTION_FRAGMENT,
     CollectionDetailQueryDocument,
     CollectionFragment,
@@ -23,6 +22,7 @@ import {
     encodeConfigArgValue,
     findTranslation,
     getConfigArgValue,
+    getCustomFieldsDefaults,
     LanguageCode,
     LocalStorageService,
     ModalService,
@@ -66,9 +66,7 @@ export class CollectionDetailComponent
         visible: false,
         inheritFilters: true,
         filters: this.formBuilder.array([]),
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     assetChanges: { assets?: Asset[]; featuredAsset?: Asset } = {};
     filters: ConfigurableOperation[] = [];

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts
@@ -16,6 +16,7 @@ import {
     FACET_WITH_VALUES_FRAGMENT,
     FacetWithValuesFragment,
     findTranslation,
+    getCustomFieldsDefaults,
     GetFacetDetailDocument,
     LanguageCode,
     ModalService,
@@ -57,9 +58,7 @@ export class FacetDetailComponent
             code: ['', Validators.required],
             name: '',
             visible: true,
-            customFields: this.formBuilder.group(
-                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-            ),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         }),
         values: this.formBuilder.array<{
             id: string;

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts
@@ -4,17 +4,15 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     Asset,
-    BaseDetailComponent,
     CreateProductInput,
     createUpdatedTranslatable,
     DataService,
     findTranslation,
     getChannelCodeFromUserStatus,
-    getDefaultUiLanguage,
+    getCustomFieldsDefaults,
     GetProductDetailDocument,
     GetProductDetailQuery,
     GetProductWithVariantsQuery,
-    ItemOf,
     LanguageCode,
     ModalService,
     NotificationService,
@@ -84,9 +82,7 @@ export class ProductDetailComponent
         slug: ['', unicodePatternValidator(/^[\p{Letter}0-9._-]+$/)],
         description: '',
         facetValueIds: [[] as string[]],
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     assetChanges: SelectedAssets = {};
     productChannels$: Observable<ProductDetailFragment['channels']>;

diff --git a/...src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.ts b/...src/lib/catalog/src/components/product-variant-detail/product-variant-detail.component.ts
@@ -8,6 +8,7 @@ import {
     CurrencyCode,
     DataService,
     findTranslation,
+    getCustomFieldsDefaults,
     GetProductVariantDetailDocument,
     GetProductVariantDetailQuery,
     GlobalFlag,
@@ -83,9 +84,7 @@ export class ProductVariantDetailComponent
         outOfStockThreshold: 0,
         trackInventory: GlobalFlag.TRUE,
         facetValueIds: [],
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     stockLevelsForm = this.formBuilder.array<
         FormGroup<{

diff --git a/...i/src/lib/catalog/src/components/stock-location-detail/stock-location-detail.component.ts b/...i/src/lib/catalog/src/components/stock-location-detail/stock-location-detail.component.ts
@@ -5,6 +5,7 @@ import {
     CreateStockLocationDocument,
     CreateStockLocationInput,
     DataService,
+    getCustomFieldsDefaults,
     GetStockLocationDetailDocument,
     NotificationService,
     StockLocationDetailFragment,
@@ -66,9 +67,7 @@ export class StockLocationDetailComponent
     detailForm = this.formBuilder.group({
         name: ['', Validators.required],
         description: [''],
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
 
     constructor(

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/create-updated-translatable.ts b/packages/admin-ui/src/lib/core/src/common/utilities/create-updated-translatable.ts
@@ -1,9 +1,9 @@
 import { CustomFieldsObject, CustomFieldType } from '@vendure/common/lib/shared-types';
-import { assertNever } from '@vendure/common/lib/shared-utils';
 
 import { CustomFieldConfig, LanguageCode } from '../generated-types';
 
 import { findTranslation } from './find-translation';
+import { getDefaultValue } from './custom-field-default-value';
 
 export interface TranslatableUpdateOptions<T extends { translations: any[] } & MayHaveCustomFields> {
     translatable: T;
@@ -39,7 +39,9 @@ export function createUpdatedTranslatable<T extends { translations: any[] } & Ma
                 newTranslatedCustomFields[field.name] = value;
             } else {
                 newCustomFields[field.name] =
-                    value === '' ? getDefaultValue(field.type as CustomFieldType) : value;
+                    value === ''
+                        ? getDefaultValue(field.type as CustomFieldType, field.nullable ?? true)
+                        : value;
             }
         }
         newTranslation.customFields = newTranslatedCustomFields;
@@ -59,27 +61,6 @@ export function createUpdatedTranslatable<T extends { translations: any[] } & Ma
     return newTranslatable;
 }
 
-function getDefaultValue(type: CustomFieldType): any {
-    switch (type) {
-        case 'localeString':
-        case 'string':
-        case 'text':
-        case 'localeText':
-            return '';
-        case 'boolean':
-            return false;
-        case 'float':
-        case 'int':
-            return 0;
-        case 'datetime':
-            return new Date();
-        case 'relation':
-            return null;
-        default:
-            assertNever(type);
-    }
-}
-
 /**
  * Returns a shallow clone of `obj` with any properties contained in `patch` overwriting
  * those of `obj`.

diff --git a/packages/admin-ui/src/lib/core/src/common/utilities/custom-field-default-value.ts b/packages/admin-ui/src/lib/core/src/common/utilities/custom-field-default-value.ts
@@ -0,0 +1,36 @@
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
+import { assertNever } from '@vendure/common/lib/shared-utils';
+import { CustomFieldConfig } from '../generated-types';
+
+export function getCustomFieldsDefaults(customFieldConfig: CustomFieldConfig[]): {
+    [key: string]: ReturnType<typeof getDefaultValue>;
+} {
+    return customFieldConfig.reduce(
+        (hash, field) => ({
+            ...hash,
+            [field.name]: getDefaultValue(field.type as CustomFieldType, field.nullable ?? undefined),
+        }),
+        {},
+    );
+}
+
+export function getDefaultValue(type: CustomFieldType, isNullable?: boolean) {
+    switch (type) {
+        case 'localeString':
+        case 'string':
+        case 'text':
+        case 'localeText':
+            return '';
+        case 'boolean':
+            return false;
+        case 'float':
+        case 'int':
+            return isNullable ? null : 0;
+        case 'datetime':
+            return isNullable ? null : new Date();
+        case 'relation':
+            return null;
+        default:
+            assertNever(type);
+    }
+}
diff --git a/packages/admin-ui/src/lib/core/src/public_api.ts b/packages/admin-ui/src/lib/core/src/public_api.ts
@@ -16,6 +16,7 @@ export * from './common/title-setter';
 export * from './common/utilities/bulk-action-utils';
 export * from './common/utilities/configurable-operation-utils';
 export * from './common/utilities/create-updated-translatable';
+export * from './common/utilities/custom-field-default-value';
 export * from './common/utilities/find-translation';
 export * from './common/utilities/get-default-ui-language';
 export * from './common/utilities/interpolate-description';

diff --git a/...ges/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts b/...ges/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts
@@ -5,7 +5,6 @@ import {
     CreateAddressInput,
     CreateCustomerAddressMutation,
     CreateCustomerInput,
-    Customer,
     CUSTOMER_FRAGMENT,
     CustomerDetailQueryDocument,
     CustomerDetailQueryQuery,
@@ -14,6 +13,7 @@ import {
     EditNoteDialogComponent,
     GetAvailableCountriesQuery,
     GetCustomerHistoryQuery,
+    getCustomFieldsDefaults,
     ModalService,
     NotificationService,
     SortOrder,
@@ -90,9 +90,7 @@ export class CustomerDetailComponent
             phoneNumber: '',
             emailAddress: ['', [Validators.required, Validators.email]],
             password: '',
-            customFields: this.formBuilder.group(
-                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-            ),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         }),
         addresses: new UntypedFormArray([]),
     });

diff --git a/...mer/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.ts b/...mer/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.ts
@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import {
     CreateCustomerGroupInput,
     CustomFieldConfig,
     Dialog,
+    getCustomFieldsDefaults,
     ServerConfigService,
-    UpdateCustomerGroupInput,
 } from '@vendure/admin-ui/core';
 
 @Component({
@@ -27,9 +27,7 @@ export class CustomerGroupDetailDialogComponent implements Dialog<CreateCustomer
     ngOnInit() {
         this.form = this.formBuilder.group({
             name: [this.group.name, Validators.required],
-            customFields: this.formBuilder.group(
-                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-            ),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         if (this.customFields.length) {
             const customFieldsGroup = this.form.get('customFields') as UntypedFormGroup;

diff --git a/.../src/lib/customer/src/components/customer-group-detail/customer-group-detail.component.ts b/.../src/lib/customer/src/components/customer-group-detail/customer-group-detail.component.ts
@@ -5,6 +5,7 @@ import { ResultOf } from '@graphql-typed-document-node/core';
 import {
     DataService,
     GetCustomerGroupDetailDocument,
+    getCustomFieldsDefaults,
     ModalService,
     NotificationService,
     TypedBaseDetailComponent,
@@ -38,9 +39,7 @@ export class CustomerGroupDetailComponent
     customFields = this.getCustomFieldConfig('CustomerGroup');
     detailForm = this.formBuilder.group({
         name: '',
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
 
     constructor(

diff --git a/.../admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.ts b/.../admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.ts
@@ -11,6 +11,7 @@ import {
     encodeConfigArgValue,
     findTranslation,
     getConfigArgValue,
+    getCustomFieldsDefaults,
     getDefaultConfigArgValue,
     GetPromotionDetailDocument,
     LanguageCode,
@@ -54,9 +55,7 @@ export class PromotionDetailComponent
         endsAt: null,
         conditions: this.formBuilder.array([]),
         actions: this.formBuilder.array([]),
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     conditions: ConfigurableOperation[] = [];
     actions: ConfigurableOperation[] = [];

diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts
@@ -5,6 +5,7 @@ import {
     DataService,
     EditNoteDialogComponent,
     FulfillmentFragment,
+    getCustomFieldsDefaults,
     GetOrderHistoryQuery,
     GetOrderQuery,
     ModalService,
@@ -54,9 +55,7 @@ export class OrderDetailComponent
     customFields = this.getCustomFieldConfig('Order');
     orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
     detailForm = new FormGroup({
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     history$: Observable<NonNullable<GetOrderHistoryQuery['order']>['history']['items'] | undefined>;
     nextStates$: Observable<string[]>;

diff --git a/packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.ts b/packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.ts
@@ -3,11 +3,11 @@ import { FormBuilder, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ResultOf } from '@graphql-typed-document-node/core';
 import {
-    Administrator,
     ADMINISTRATOR_FRAGMENT,
     CreateAdministratorInput,
     DataService,
     GetAdministratorDetailDocument,
+    getCustomFieldsDefaults,
     LanguageCode,
     NotificationService,
     Permission,
@@ -58,9 +58,7 @@ export class AdminDetailComponent
                 ResultOf<typeof GetAdministratorDetailDocument>['administrator']
             >['user']['roles'],
         ],
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
     permissionDefinitions: PermissionDefinition[];
     allRoles$: Observable<RoleFragment[]>;

diff --git a/packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.ts b/packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.ts
@@ -1,19 +1,15 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    BaseDetailComponent,
     CHANNEL_FRAGMENT,
     ChannelFragment,
     CreateChannelInput,
     CurrencyCode,
-    CustomFieldConfig,
     DataService,
     GetChannelDetailDocument,
+    getCustomFieldsDefaults,
     GetSellersQuery,
-    GetZoneListQuery,
-    ItemOf,
     LanguageCode,
     NotificationService,
     Permission,
@@ -60,9 +56,7 @@ export class ChannelDetailComponent
         defaultLanguageCode: [undefined as LanguageCode | undefined],
         defaultTaxZoneId: ['', Validators.required],
         sellerId: ['', Validators.required],
-        customFields: this.formBuilder.group(
-            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-        ),
+        customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
     });
 
     availableLanguageCodes$: Observable<LanguageCode[]>;