refactor(admin-ui): Extract custom field form logic into shared method

packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.ts

@@ -78,16 +78,7 @@ export class AssetDetailComponent extends BaseDetailComponent<GetAsset.Asset> im
         this.detailForm.get('name')?.setValue(entity.name);
         this.detailForm.get('tags')?.setValue(entity.tags);
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
         }
     }
 }

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts

@@ -240,19 +240,12 @@ export class CollectionDetailComponent
         entity.filters.forEach(f => this.addFilter(f));
 
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get(['customFields']) as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value =
-                    fieldDef.type === 'localeString'
-                        ? (currentTranslation as any).customFields[key]
-                        : (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['customFields']),
+                entity,
+                currentTranslation,
+            );
         }
     }
 

packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts

@@ -33,7 +33,8 @@ import { map, mapTo, mergeMap, switchMap, take } from 'rxjs/operators';
 })
 export class FacetDetailComponent
     extends BaseDetailComponent<FacetWithValues.Fragment>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     customFields: CustomFieldConfig[];
     customValueFields: CustomFieldConfig[];
     detailForm: FormGroup;
@@ -285,18 +286,12 @@ export class FacetDetailComponent
 
         if (this.customFields.length) {
             const customFieldsGroup = this.detailForm.get(['facet', 'customFields']) as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value =
-                    fieldDef.type === 'localeString'
-                        ? (currentTranslation as any).customFields[key]
-                        : (facet as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['facet', 'customFields']),
+                facet,
+                currentTranslation,
+            );
         }
 
         const currentValuesFormArray = this.detailForm.get('values') as FormArray;

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

@@ -609,19 +609,12 @@ export class ProductDetailComponent
         });
 
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get(['product', 'customFields']) as FormGroup;
-            const cfCurrentTranslation =
-                (currentTranslation && (currentTranslation as any).customFields) || {};
-            const cfProduct = (product as any).customFields || {};
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = fieldDef.type === 'localeString' ? cfCurrentTranslation[key] : cfProduct[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['product', 'customFields']),
+                product,
+                currentTranslation,
+            );
         }
         this.buildVariantFormArray(product.variantList.items, languageCode);
     }
@@ -672,18 +665,12 @@ export class ProductDetailComponent
                     );
                     variantFormGroup.addControl('customFields', customFieldsGroup);
                 }
-
-                for (const fieldDef of this.customVariantFields) {
-                    const key = fieldDef.name;
-                    const value =
-                        fieldDef.type === 'localeString'
-                            ? (variantTranslation as any).customFields[key]
-                            : (variant as any).customFields[key];
-                    const control = customFieldsGroup.get(key);
-                    if (control) {
-                        control.patchValue(value);
-                    }
-                }
+                this.setCustomFieldFormValues(
+                    this.customVariantFields,
+                    customFieldsGroup,
+                    variant,
+                    variantTranslation,
+                );
             }
         });
     }

packages/admin-ui/src/lib/core/src/common/base-detail.component.ts

@@ -1,4 +1,4 @@
-import { FormGroup } from '@angular/forms';
+import { AbstractControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { combineLatest, Observable, of, Subject } from 'rxjs';
 import { distinctUntilChanged, map, shareReplay, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -8,10 +8,12 @@ import { ServerConfigService } from '../data/server-config';
 
 import { DeactivateAware } from './deactivate-aware';
 import { CustomFieldConfig, CustomFields, LanguageCode } from './generated-types';
+import { TranslationOf } from './utilities/find-translation';
 import { getDefaultUiLanguage } from './utilities/get-default-ui-language';
 
 export abstract class BaseDetailComponent<Entity extends { id: string; updatedAt?: string }>
-    implements DeactivateAware {
+    implements DeactivateAware
+{
     entity$: Observable<Entity>;
     availableLanguages$: Observable<LanguageCode[]>;
     languageCode$: Observable<LanguageCode>;
@@ -76,6 +78,25 @@ export abstract class BaseDetailComponent<Entity extends { id: string; updatedAt
 
     protected abstract setFormValues(entity: Entity, languageCode: LanguageCode): void;
 
+    protected setCustomFieldFormValues<T = Entity>(
+        customFields: CustomFieldConfig[],
+        formGroup: AbstractControl | null,
+        entity: T,
+        currentTranslation?: TranslationOf<T>,
+    ) {
+        for (const fieldDef of customFields) {
+            const key = fieldDef.name;
+            const value =
+                fieldDef.type === 'localeString'
+                    ? (currentTranslation as any).customFields?.[key]
+                    : (entity as any).customFields?.[key];
+            const control = formGroup?.get(key);
+            if (control) {
+                control.patchValue(value);
+            }
+        }
+    }
+
     protected getCustomFieldConfig(key: Exclude<keyof CustomFields, '__typename'>): CustomFieldConfig[] {
         return this.serverConfigService.getCustomFieldsFor(key);
     }

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts

@@ -51,8 +51,10 @@ type CustomerWithOrders = NonNullable<GetCustomerQuery['customer']>;
     styleUrls: ['./customer-detail.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrders>
-    implements OnInit, OnDestroy {
+export class CustomerDetailComponent
+    extends BaseDetailComponent<CustomerWithOrders>
+    implements OnInit, OnDestroy
+{
     detailForm: FormGroup;
     customFields: CustomFieldConfig[];
     addressCustomFields: CustomFieldConfig[];
@@ -228,11 +230,13 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             .pipe(
                 take(1),
                 mergeMap(({ id }) => {
-                    const saveOperations: Array<Observable<
-                        | UpdateCustomer.UpdateCustomer
-                        | CreateCustomerAddress.CreateCustomerAddress
-                        | UpdateCustomerAddress.UpdateCustomerAddress
-                    >> = [];
+                    const saveOperations: Array<
+                        Observable<
+                            | UpdateCustomer.UpdateCustomer
+                            | CreateCustomerAddress.CreateCustomerAddress
+                            | UpdateCustomerAddress.UpdateCustomerAddress
+                        >
+                    > = [];
                     const customerForm = this.detailForm.get('customer');
                     if (customerForm && customerForm.dirty) {
                         const formValue = customerForm.value;
@@ -427,7 +431,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             });
     }
 
-    protected setFormValues(entity: Customer.Fragment): void {
+    protected setFormValues(entity: CustomerWithOrders): void {
         const customerGroup = this.detailForm.get('customer');
         if (customerGroup) {
             customerGroup.patchValue({
@@ -470,16 +474,11 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         }
 
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get(['customer', 'customFields']) as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields?.[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['customer', 'customFields']),
+                entity,
+            );
         }
         this.changeDetector.markForCheck();
     }

packages/admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.ts

@@ -231,16 +231,7 @@ export class PromotionDetailComponent
         });
         entity.actions.forEach(o => this.addOperation('actions', o));
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
 

packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.ts

@@ -34,7 +34,8 @@ export interface PermissionsByChannel {
 })
 export class AdminDetailComponent
     extends BaseDetailComponent<GetAdministrator.Administrator>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     customFields: CustomFieldConfig[];
     administrator$: Observable<GetAdministrator.Administrator>;
     permissionDefinitions: PermissionDefinition[];
@@ -190,16 +191,11 @@ export class AdminDetailComponent
             roles: administrator.user.roles,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (administrator as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['customFields']),
+                administrator,
+            );
         }
         const passwordControl = this.detailForm.get('password');
         if (passwordControl) {

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.ts

@@ -26,7 +26,8 @@ import { map, mergeMap, take } from 'rxjs/operators';
 })
 export class ChannelDetailComponent
     extends BaseDetailComponent<Channel.Fragment>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     customFields: CustomFieldConfig[];
     zones$: Observable<GetZones.Zones[]>;
     detailForm: FormGroup;
@@ -177,16 +178,7 @@ export class ChannelDetailComponent
             defaultTaxZoneId: entity.defaultTaxZone ? entity.defaultTaxZone.id : '',
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
         }
         if (entity.code === DEFAULT_CHANNEL_CODE) {
             const codeControl = this.detailForm.get('code');

packages/admin-ui/src/lib/settings/src/components/country-detail/country-detail.component.ts

@@ -152,19 +152,12 @@ export class CountryDetailComponent
         });
 
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get(['customFields']) as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value =
-                    fieldDef.type === 'localeString'
-                        ? (currentTranslation as any).customFields[key]
-                        : (country as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['customFields']),
+                country,
+                currentTranslation,
+            );
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.ts

@@ -102,16 +102,7 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
             outOfStockThreshold: entity.outOfStockThreshold,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts

@@ -251,16 +251,11 @@ export class PaymentMethodDetailComponent
             };
         }
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (paymentMethod as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get('customFields'),
+                paymentMethod,
+            );
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/profile/profile.component.ts

@@ -23,7 +23,8 @@ import { mergeMap, take } from 'rxjs/operators';
 })
 export class ProfileComponent
     extends BaseDetailComponent<GetActiveAdministrator.ActiveAdministrator>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     customFields: CustomFieldConfig[];
     detailForm: FormGroup;
 
@@ -100,16 +101,11 @@ export class ProfileComponent
             lastName: administrator.lastName,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (administrator as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get('customFields'),
+                administrator,
+            );
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.ts

@@ -39,7 +39,8 @@ import { TestOrderLine } from '../test-order-builder/test-order-builder.componen
 })
 export class ShippingMethodDetailComponent
     extends BaseDetailComponent<ShippingMethod.Fragment>
-    implements OnInit, OnDestroy {
+    implements OnInit, OnDestroy
+{
     detailForm: FormGroup;
     checkers: ConfigurableOperationDefinition[] = [];
     calculators: ConfigurableOperationDefinition[] = [];
@@ -323,19 +324,12 @@ export class ShippingMethodDetailComponent
             };
         }
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value =
-                    fieldDef.type === 'localeString'
-                        ? (currentTranslation as any).customFields[key]
-                        : (shippingMethod as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(
+                this.customFields,
+                this.detailForm.get(['customFields']),
+                shippingMethod,
+                currentTranslation,
+            );
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/tax-category-detail/tax-category-detail.component.ts

@@ -141,16 +141,7 @@ export class TaxCategoryDetailComponent
             isDefault: entity.isDefault,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
 }

packages/admin-ui/src/lib/settings/src/components/tax-rate-detail/tax-rate-detail.component.ts

@@ -163,16 +163,7 @@ export class TaxRateDetailComponent
             customerGroupId: entity.customerGroup ? entity.customerGroup.id : '',
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields') as FormGroup;
-
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = (entity as any).customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
 }