Skip to content

Commit

Permalink
refactor: use field library for address forms (#1017)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaxKless
MaxKless committed Mar 31, 2022
1 parent 58db85f commit 45d7bf3
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 212 deletions.
128 changes: 3 additions & 125 deletions src/app/shared/formly-address-forms/configurations/address-form.configuration.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { FormlyFieldConfig } from '@ngx-formly/core';

import { Address } from 'ish-core/models/address/address.model';
import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';

/*
* Abstract class that valid address configurations have to extend.
Expand All @@ -16,129 +15,6 @@ export abstract class AddressFormConfiguration {

abstract getModel(model?: Partial<Address>): Partial<Address>;
}

// post-processing method that will be called for every field configuration
function applyStandardStyles(config: FormlyFieldConfig): FormlyFieldConfig {
/* do some customization here */
return config;
}

// collection of standard address form field configurations
const standardFields: { [key: string]: Omit<FormlyFieldConfig, 'key'> } = {
companyName1: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.address.company_name.label',
required: true,
},
validation: {
messages: {
required: 'account.address.company_name.error.required',
},
},
},
companyName2: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.address.company_name_2.label',
required: false,
},
},
firstName: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.firstname.label',
required: true,
},
validators: {
validation: [SpecialValidators.noSpecialChars],
},
validation: {
messages: {
required: 'account.address.firstname.missing.error',
noSpecialChars: 'account.name.error.forbidden.chars',
},
},
},
lastName: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.lastname.label',
required: true,
},
validators: {
validation: [SpecialValidators.noSpecialChars],
},
validation: {
messages: {
required: 'account.address.lastname.missing.error',
noSpecialChars: 'account.name.error.forbidden.chars',
},
},
},
addressLine1: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.street.label',
required: true,
},
validation: {
messages: {
required: 'account.address.address1.missing.error',
},
},
},
addressLine2: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.street2.label',
required: false,
},
},
postalCode: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.postalcode.label',
required: true,
},
validation: {
messages: {
required: 'account.address.postalcode.missing.error',
},
},
},
city: {
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.city.label',
required: true,
},
validation: {
messages: {
required: 'account.address.city.missing.error',
},
},
},
phoneHome: {
type: 'ish-phone-field',
templateOptions: {
label: 'account.profile.phone.label',
required: false,
},
},
fax: {},
};

function standardField(key: keyof Address | (FormlyFieldConfig & { key: keyof Address })): FormlyFieldConfig {
if (typeof key === 'string') {
if (!standardFields[key]) {
throw new TypeError(`Cannot find "${key}" in standard fields.`);
}
return applyStandardStyles({ key, ...standardFields[key] });
}
return applyStandardStyles(key);
}

// helper method to reduce repetition when defining address form configurations containing standard fields
export function addressesFieldConfiguration(
keys: (
Expand All @@ -154,7 +30,9 @@ export function addressesFieldConfiguration(
type: 'ish-fieldset-field',
fieldGroup: addressesFieldConfiguration(key),
}
: standardField(key)
: typeof key === 'string'
? { type: `#${key}` }
: key
)
.filter(x => !!x);
}
26 changes: 3 additions & 23 deletions src/app/shared/formly-address-forms/configurations/de/address-form-de.configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,17 @@ import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { pick } from 'lodash-es';
import { of } from 'rxjs';

import { Address } from 'ish-core/models/address/address.model';
import {
AddressFormConfiguration,
addressesFieldConfiguration,
} from 'ish-shared/formly-address-forms/configurations/address-form.configuration';
import { FormsService } from 'ish-shared/forms/utils/forms.service';

@Injectable()
export class AddressFormDEConfiguration extends AddressFormConfiguration {
countryCode = 'DE';

constructor(private formsService: FormsService) {
super();
}
getModel(model: Partial<Address> = {}): Partial<Address> {
return pick(
model,
Expand All @@ -38,46 +33,31 @@ export class AddressFormDEConfiguration extends AddressFormConfiguration {
getFieldConfiguration(): FormlyFieldConfig[] {
return addressesFieldConfiguration([
this.businessCustomer && !this.shortForm && ['companyName1', 'companyName2'],
!this.shortForm && [
{
key: 'title',
type: 'ish-select-field',
templateOptions: {
label: 'account.default_address.title.label',
options: of(this.formsService.getSalutationOptionsForCountryCode(this.countryCode)),
placeholder: 'account.option.select.text',
},
},
'firstName',
'lastName',
],
!this.shortForm && ['title', 'firstName', 'lastName'],
[
'addressLine1',
'addressLine2',
{
key: 'addressLine3',
type: 'ish-text-input-field',
templateOptions: {
label: 'account.default_address.street3.label',
label: 'account.address.street3.label',
required: false,
},
},
],
[
{
key: 'postalCode',
type: 'ish-text-input-field',
type: '#postalCode',
templateOptions: {
label: 'account.default_address.postalcode.label',
required: true,
maxLength: 5,
},
validators: {
validation: [Validators.pattern('[0-9]{5}')],
},
validation: {
messages: {
required: 'account.address.postalcode.missing.error',
pattern: 'account.address.de.postalcode.error.regexp',
},
},
Expand Down
27 changes: 3 additions & 24 deletions src/app/shared/formly-address-forms/configurations/fr/address-form-fr.configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,17 @@ import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { pick } from 'lodash-es';
import { of } from 'rxjs';

import { Address } from 'ish-core/models/address/address.model';
import {
AddressFormConfiguration,
addressesFieldConfiguration,
} from 'ish-shared/formly-address-forms/configurations/address-form.configuration';
import { FormsService } from 'ish-shared/forms/utils/forms.service';

@Injectable()
export class AddressFormFRConfiguration extends AddressFormConfiguration {
countryCode = 'FR';

constructor(private formsService: FormsService) {
super();
}

getModel(model: Partial<Address> = {}): Partial<Address> {
return pick(
model,
Expand All @@ -38,36 +32,21 @@ export class AddressFormFRConfiguration extends AddressFormConfiguration {
getFieldConfiguration(): FormlyFieldConfig[] {
return addressesFieldConfiguration([
this.businessCustomer && !this.shortForm && ['companyName1', 'companyName2'],
!this.shortForm && [
{
key: 'title',
type: 'ish-select-field',
templateOptions: {
label: 'account.default_address.title.label',
options: of(this.formsService.getSalutationOptionsForCountryCode(this.countryCode)),
placeholder: 'account.option.select.text',
},
},
'firstName',
'lastName',
],
!this.shortForm && ['title', 'firstName', 'lastName'],
['addressLine1', 'addressLine2'],
[
{
key: 'postalCode',
type: 'ish-text-input-field',
type: '#postalCode',
templateOptions: {
label: 'account.default_address.postalcode.label',
required: true,
maxLength: 5,
},
validators: {
validation: [Validators.pattern('[0-9]{5}')],
},
validation: {
messages: {
required: 'account.address.postalcode.missing.error',
pattern: 'account.address.de.postalcode.error.regexp',
pattern: 'account.address.fr.postalcode.error.regexp',
},
},
},
Expand Down
29 changes: 3 additions & 26 deletions src/app/shared/formly-address-forms/configurations/gb/address-form-gb.configuration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,17 @@ import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { pick } from 'lodash-es';
import { of } from 'rxjs';

import { Address } from 'ish-core/models/address/address.model';
import {
AddressFormConfiguration,
addressesFieldConfiguration,
} from 'ish-shared/formly-address-forms/configurations/address-form.configuration';
import { FormsService } from 'ish-shared/forms/utils/forms.service';

@Injectable()
export class AddressFormGBConfiguration extends AddressFormConfiguration {
countryCode = 'GB';

constructor(private formsService: FormsService) {
super();
}

getModel(model: Partial<Address> = {}): Partial<Address> {
return pick(
model,
Expand All @@ -39,26 +33,14 @@ export class AddressFormGBConfiguration extends AddressFormConfiguration {
getFieldConfiguration(): FormlyFieldConfig[] {
return addressesFieldConfiguration([
this.businessCustomer && !this.shortForm && ['companyName1', 'companyName2'],
!this.shortForm && [
{
key: 'title',
type: 'ish-select-field',
templateOptions: {
label: 'account.default_address.title.label',
options: of(this.formsService.getSalutationOptionsForCountryCode(this.countryCode)),
placeholder: 'account.option.select.text',
},
},
'firstName',
'lastName',
],
!this.shortForm && ['title', 'firstName', 'lastName'],
[
'addressLine1',
'addressLine2',
{
key: 'addressLine3',
templateOptions: {
label: 'account.default_address.uk.locality.label',
label: 'account.address.uk.locality.label',
required: false,
},
type: 'ish-text-input-field',
Expand All @@ -68,10 +50,7 @@ export class AddressFormGBConfiguration extends AddressFormConfiguration {
'city',
{
key: 'postalCode',
templateOptions: {
label: 'account.default_address.postalcode.label',
required: true,
},
type: '#postalCode',
validators: {
validation: [
Validators.pattern(
Expand All @@ -82,11 +61,9 @@ export class AddressFormGBConfiguration extends AddressFormConfiguration {
},
validation: {
messages: {
required: 'account.address.postalcode.missing.error',
pattern: 'account.address.uk.postalcode.error.regexp',
},
},
type: 'ish-text-input-field',
},
],
!this.shortForm ? 'phoneHome' : undefined,
Expand Down
Loading

0 comments on commit 45d7bf3

Please sign in to comment.