Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhance plsPlusAddress with custom key support #38

Merged
merged 1 commit into from
Apr 26, 2022
Merged

enhance plsPlusAddress with custom key support #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 81 additions & 28 deletions src/components/PlsPlusAddress/PlsPlusAddress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@ const addressValidation = {
"You have exceeded the character limit or included html or special characters, e.g. <,>,{,},\\",
maxLength: 40,
};

const addressKeys = [
"autocompleteAddress",
"selectedAddress",
"mode",
"address1",
"address2",
"address3",
"city",
"state",
"postcode",
];
export class PlsPlusAddress extends FieldsetComponent {
constructor(...args) {
super(...args);
Expand All @@ -38,7 +50,7 @@ export class PlsPlusAddress extends FieldsetComponent {
return FieldsetComponent.schema(
{
type: "plsplusaddress",
label: "Address",
label: "PlsPlus Address",
key: "plsplusaddress",
switchToManualModeLabel: "Can't find address? Switch to manual mode.",
providerOptions: {},
Expand All @@ -49,31 +61,34 @@ export class PlsPlusAddress extends FieldsetComponent {
persistent: "client-only",
components: [
{
key: "address",
key: "addressData",
type: "container",
label: "Address data",
tableView: true,
tags: ["container"],
components: [
{
label: "Autocomplete address",
tableView: false,
key: "autocompleteAddress",
tags: ["autocompleteAddress"],
type: "hidden",
},
{
label: "Selected address",
tableView: false,
key: "selectedAddress",
tags: ["selectedAddress"],
type: "hidden",
},
{
label: "Mode",
tableView: false,
key: "mode",
tags: ["mode"],
type: "hidden",
},
{
label: "Address line 1 <i>(include unit number if needed)</i>",
tableView: false,
key: "address1",
tags: ["address1"],
type: "textfield",
input: true,
validate: {
Expand All @@ -83,24 +98,24 @@ export class PlsPlusAddress extends FieldsetComponent {
},
{
label: "Address line 2",
tableView: false,
key: "address2",
tags: ["address2"],
type: "textfield",
input: true,
validate: addressValidation,
},
{
label: "Address line 3",
tableView: false,
key: "address3",
tags: ["address3"],
type: "textfield",
input: true,
validate: addressValidation,
},
{
label: "Town, City or Suburb",
tableView: false,
key: "city",
tags: ["city"],
type: "textfield",
input: true,
validate: {
Expand All @@ -110,17 +125,17 @@ export class PlsPlusAddress extends FieldsetComponent {
},
{
label: "State",
tableView: false,
key: "state",
tags: ["state"],
type: "textfield",
input: true,
disabled: true,
defaultValue: "QLD",
},
{
label: "Postcode",
tableView: false,
key: "postcode",
tags: ["postcode"],
type: "textfield",
input: true,
inputMask: "9999",
Expand Down Expand Up @@ -194,9 +209,12 @@ export class PlsPlusAddress extends FieldsetComponent {
onChange(flags, fromRoot) {
if (this.autocompleteMode) {
if (this.address)
this.address.selectedAddress = this.address.autocompleteAddress;
this.setAddressProp(
"selectedAddress",
this.address.autocompleteAddress
);
} else if (this.address)
this.address.selectedAddress = this.composedAddress;
this.setAddressProp("selectedAddress", this.composedAddress);
return super.onChange(flags, fromRoot);
}

Expand Down Expand Up @@ -229,14 +247,11 @@ export class PlsPlusAddress extends FieldsetComponent {
if (!this.manualModeEnabled) {
return PlsPlusAddressMode.Autocomplete;
}
return this.address?.mode || PlsPlusAddressMode.Autocomplete;
return this.address.mode || PlsPlusAddressMode.Autocomplete;
}

set mode(value) {
this.address.mode = value;
if (this.manualModeEnabled) {
this.onChange();
}
this.setAddressProp("mode", value);
}

get emptyValue() {
Expand Down Expand Up @@ -270,22 +285,55 @@ export class PlsPlusAddress extends FieldsetComponent {
}

get container() {
return this.getComponents()[0];
return this.getComponents().find((comp) =>
comp.originalComponent.tags?.includes("container")
);
}

get address() {
return this.container?.dataValue;
const dataValue = this.container?.dataValue;
const addressData = addressKeys.map((k) => {
if (this.container) {
const componentKey = this.container
.getComponents()
.find((comp) => comp.originalComponent.tags?.includes(k))
?.component.key;
return {
[k]: dataValue[componentKey],
};
}
return {};
});

return Object.assign({}, ...addressData);
}

set address(value) {
this.container.dataValue = value;
this.dataValue = value;
this.onChange();
let changed = false;
if (this.container) {
addressKeys.forEach((k) => {
const componentKey = this.container
.getComponents()
.find((comp) => comp.originalComponent.tags?.includes(k))
?.component.key;
if (this.container.dataValue[componentKey] !== value[k]) {
this.container.dataValue[componentKey] = value[k];
changed = true;
}
});
}
if (changed) this.onChange({ modified: true });
}

setAddressProp(prop, value) {
if (this.address[prop] === value) return;
this.address = { ...this.address, [prop]: value };
}

restoreComponentsContext() {
this.container.getComponents().forEach((component) => {
component.data = this.address;
this.container?.getComponents().forEach((component) => {
component.data = this.container.dataValue;
component.setValue(component.dataValue, {
noUpdateEvent: true,
});
Expand Down Expand Up @@ -376,8 +424,13 @@ export class PlsPlusAddress extends FieldsetComponent {
}

component.onChange = (flags, fromRoot) => {
this.address.selectedAddress = this.composedAddress;
return super.onChange(flags, fromRoot);
if (flags.modified && component.originalComponent.tags.length) {
this.setAddressProp(
component.originalComponent.tags[0],
component.dataValue
);
}
return this.onChange(flags, fromRoot);
};
});
if (!this.builderMode) {
Expand Down Expand Up @@ -411,7 +464,7 @@ export class PlsPlusAddress extends FieldsetComponent {
}

onSelectAddress(address, element, index) {
this.address.autocompleteAddress = address;
this.setAddressProp("autocompleteAddress", address);

if (element) {
element.value = this.getDisplayValue(this.address);
Expand Down Expand Up @@ -561,7 +614,7 @@ export class PlsPlusAddress extends FieldsetComponent {
element.value = "";
}

this.container.getComponents().forEach((component) => {
this.container?.getComponents().forEach((component) => {
const childElement = document.getElementById(
`${component.id}-${component.component.key}`
);
Expand Down
Loading