Skip to content

Commit 778044e

Browse files
dtng95dtng95
committed
V14: Integrations (ActiveCampaign/Forms)
- Continue implement UI
1 parent 8164d7a commit 778044e

File tree

4 files changed

+117
-76
lines changed

4 files changed

+117
-76
lines changed

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/src/lang/en.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ export default {
77
ContactMappingsDescription: `Map contact details with form fields`,
88
CustomFieldMappingsLabel: `Custom Fields Mappings`,
99
CustomFieldMappingsDescription: `Map contact custom fields with form fields`,
10-
11-
delete: "Delete"
10+
DeleteMapping: "Delete",
11+
AddMapping: "Add mapping",
12+
SelectContactField: "Select contact field",
13+
SelectFormField: "Select form field",
14+
SelectCustomField: "Select custom field",
15+
ContactField: "Contact Field",
16+
FormField: "Form Field",
17+
CustomField: "Custom Field"
1218
}
1319
} as UmbLocalizationDictionary;

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/src/models/activecampaign.model.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ export interface FormFieldValue {
99
}
1010

1111
export interface CustomMappingValue {
12-
customField: string;
12+
customField: CustomFieldValue | undefined;
1313
formField: FormFieldValue | undefined;
14+
}
15+
16+
export interface CustomFieldValue {
17+
id: string;
18+
title: string;
1419
}

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/src/property-editor/contact-mapping/contact-mapping-property-editor.element.ts

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
1616
public value = "";
1717

1818
@state()
19-
public contactMapping : Array<ContactMappingValue> = [];
19+
public contactMappingArray : Array<ContactMappingValue> = [];
2020

2121
@state()
2222
private selectedContactField: string = "";
@@ -41,6 +41,10 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
4141
async connectedCallback() {
4242
super.connectedCallback();
4343

44+
if(this.value){
45+
this.contactMappingArray = JSON.parse(this.value);
46+
}
47+
4448
await this.#getContactFields();
4549
await this.#getFormFields();
4650
}
@@ -53,7 +57,8 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
5357
}
5458

5559
async #getFormFields(){
56-
var result = await this.#activeCampaignContext.getFormFields("f595361a-37f9-44da-80ca-6a22d699d923");
60+
var formId = window.location.pathname.split("/")[7]; //Get the formid based on current url.
61+
var result = await this.#activeCampaignContext.getFormFields(formId);
5762

5863
if (!result) return;
5964

@@ -69,15 +74,15 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
6974
}
7075

7176
#addButtonClick(){
72-
this.contactMapping.push({
77+
this.contactMappingArray.push({
7378
contactField: this.selectedContactField,
7479
formField: {
7580
id: this.selectedFormField,
7681
value: this.getSelectedFieldCaption()!
7782
}
7883
});
7984

80-
this.value = JSON.stringify(this.contactMapping);
85+
this.value = JSON.stringify(this.contactMappingArray);
8186
this.requestUpdate();
8287
this.dispatchEvent(new CustomEvent('property-value-change'));
8388
}
@@ -91,9 +96,9 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
9196
}
9297

9398
#onDeleteClick(idx: number){
94-
this.contactMapping.splice(idx, 1);
99+
this.contactMappingArray.splice(idx, 1);
95100

96-
this.value = JSON.stringify(this.contactMapping);
101+
this.value = JSON.stringify(this.contactMappingArray);
97102
this.requestUpdate();
98103
this.dispatchEvent(new CustomEvent('property-value-change'));
99104
}
@@ -102,7 +107,7 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
102107
return html`
103108
<div>
104109
<uui-select
105-
placeholder="Select contact field"
110+
placeholder=${this.localize.term("formProviderWorkflows_SelectContactField")}
106111
@change=${(e : UUISelectEvent) => this.#onContactSelectChange(e)}
107112
.options=${
108113
this.contactFields?.map((ft) => ({
@@ -111,7 +116,7 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
111116
selected: ft.name === this.selectedContactField,
112117
})) ?? []}></uui-select>
113118
<uui-select
114-
placeholder="Select form field"
119+
placeholder=${this.localize.term("formProviderWorkflows_SelectFormField")}
115120
@change=${(e : UUISelectEvent) => this.#onFormFieldSelectChange(e)}
116121
.options=${
117122
this.formdFields?.map((ft) => ({
@@ -122,40 +127,44 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
122127
</div>
123128
124129
<div class="activecampaign-wf-required">
125-
Mandatory fields: ${this.contactFields?.filter(c => c.required).map(c => c.displayName).join(",")}
130+
Mandatory fields: ${this.contactFields?.filter(c => c.required).map(c => c.displayName).join(", ")}
126131
</div>
127132
128133
<div class="activecampaign-wf-button">
129-
<uui-button look="primary" ?disabled=${this.isDisabled()} label="Add mapping" @click=${this.#addButtonClick}></uui-button>
134+
<uui-button look="primary" ?disabled=${this.isDisabled()} label=${this.localize.term("formProviderWorkflows_AddMapping")} @click=${this.#addButtonClick}></uui-button>
130135
</div>
131136
132137
<div class="activecampaign-wf-table">
133-
<table>
134-
<thead>
135-
<tr>
136-
<th>Contact Field</th>
137-
<th>Form Field</th>
138-
<th></th>
139-
</tr>
140-
</thead>
141-
<tbody>
142-
${map(this.contactMapping, (mapping, idx) => html`
143-
<tr>
144-
<td>${mapping.contactField}</td>
145-
<td>${mapping.formField?.value}</td>
146-
<td>
147-
<uui-button
148-
label=${this.localize.term("formProviderWorkflows_delete")}
149-
look="secondary"
150-
color="default"
151-
@click=${() => this.#onDeleteClick(idx)}>
152-
<uui-icon name="delete"></uui-icon>
153-
</uui-button>
154-
</td>
155-
</tr>
156-
`)}
157-
</tbody>
158-
</table>
138+
${this.contactMappingArray.length > 0
139+
? html`
140+
<table>
141+
<thead>
142+
<tr>
143+
<th>${this.localize.term("formProviderWorkflows_ContactField")}</th>
144+
<th>${this.localize.term("formProviderWorkflows_FormField")}</th>
145+
<th></th>
146+
</tr>
147+
</thead>
148+
<tbody>
149+
${map(this.contactMappingArray, (mapping, idx) => html`
150+
<tr>
151+
<td>${mapping.contactField}</td>
152+
<td>${mapping.formField?.value}</td>
153+
<td>
154+
<uui-button
155+
label=${this.localize.term("formProviderWorkflows_delete")}
156+
look="secondary"
157+
color="default"
158+
@click=${() => this.#onDeleteClick(idx)}>
159+
<uui-icon name="delete"></uui-icon>
160+
</uui-button>
161+
</td>
162+
</tr>
163+
`)}
164+
</tbody>
165+
</table>
166+
`
167+
: html``}
159168
</div>
160169
`;
161170
}

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/src/property-editor/custom-mapping/custom-mapping-property-editor.element.ts

Lines changed: 58 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@ const elementName = "custom-mapping-property-editor";
1212
export class CustomMappingPropertyUiElement extends UmbLitElement implements UmbPropertyEditorUiElement {
1313
#activeCampaignContext!: typeof ACTIVECAMPAIGN_CONTEXT_TOKEN.TYPE;
1414

15-
@property({ attribute: false })
16-
public customMapping : Array<CustomMappingValue> = [];
15+
@property({ type: String })
16+
public value = "";
17+
18+
@state()
19+
public customMappingArray : Array<CustomMappingValue> = [];
1720

1821
@state()
1922
private selectedCustomField: string = "";
@@ -38,6 +41,10 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
3841
async connectedCallback() {
3942
super.connectedCallback();
4043

44+
if(this.value){
45+
this.customMappingArray = JSON.parse(this.value);
46+
}
47+
4148
await this.#getCustomFields();
4249
await this.#getFormFields();
4350
}
@@ -50,7 +57,8 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
5057
}
5158

5259
async #getFormFields(){
53-
var result = await this.#activeCampaignContext.getFormFields("f595361a-37f9-44da-80ca-6a22d699d923");
60+
var formId = window.location.pathname.split("/")[7]; //Get the formid based on current url.
61+
var result = await this.#activeCampaignContext.getFormFields(formId);
5462

5563
if (!result) return;
5664

@@ -66,29 +74,38 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
6674
}
6775

6876
#addButtonClick(){
69-
this.customMapping.push({
70-
customField: this.selectedCustomField,
77+
this.customMappingArray.push({
78+
customField: {
79+
id: this.selectedCustomField,
80+
title: this.getSelectedCustomFieldCaption()!
81+
},
7182
formField: {
7283
id: this.selectedFormField,
73-
value: this.getSelectedFieldCaption()!
84+
value: this.getSelectedFormFieldCaption()!
7485
}
7586
});
7687

88+
this.value = JSON.stringify(this.customMappingArray);
7789
this.requestUpdate();
7890
this.dispatchEvent(new CustomEvent('property-value-change'));
7991
}
8092

81-
getSelectedFieldCaption(){
93+
getSelectedFormFieldCaption(){
8294
return this.formdFields?.find(f => f.id == this.selectedFormField)?.caption;
8395
}
8496

97+
getSelectedCustomFieldCaption(){
98+
return this.customFields?.find(f => f.id == this.selectedCustomField)?.title;
99+
}
100+
85101
isDisabled(){
86102
return !this.selectedCustomField || !this.selectedFormField;
87103
}
88104

89105
#onDeleteClick(idx: number){
90-
this.customMapping.splice(idx, 1);
106+
this.customMappingArray.splice(idx, 1);
91107

108+
this.value = JSON.stringify(this.customMappingArray);
92109
this.requestUpdate();
93110
this.dispatchEvent(new CustomEvent('property-value-change'));
94111
}
@@ -97,7 +114,7 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
97114
return html`
98115
<div>
99116
<uui-select
100-
placeholder="Select contact field"
117+
placeholder=${this.localize.term("formProviderWorkflows_SelectCustomField")}
101118
@change=${(e : UUISelectEvent) => this.#onCustomSelectChange(e)}
102119
.options=${
103120
this.customFields?.map((ft) => ({
@@ -106,7 +123,7 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
106123
selected: ft.id === this.selectedCustomField,
107124
})) ?? []}></uui-select>
108125
<uui-select
109-
placeholder="Select form field"
126+
placeholder=${this.localize.term("formProviderWorkflows_SelectFormField")}
110127
@change=${(e : UUISelectEvent) => this.#onFormFieldSelectChange(e)}
111128
.options=${
112129
this.formdFields?.map((ft) => ({
@@ -117,36 +134,40 @@ export class CustomMappingPropertyUiElement extends UmbLitElement implements Umb
117134
</div>
118135
119136
<div class="activecampaign-wf-button">
120-
<uui-button look="primary" ?disabled=${this.isDisabled()} label="Add mapping" @click=${this.#addButtonClick}></uui-button>
137+
<uui-button look="primary" ?disabled=${this.isDisabled()} label=${this.localize.term("formProviderWorkflows_AddMapping")} @click=${this.#addButtonClick}></uui-button>
121138
</div>
122139
123140
<div class="activecampaign-wf-table">
124-
<table>
125-
<thead>
126-
<tr>
127-
<th>Custom Field</th>
128-
<th>Form Field</th>
129-
<th></th>
130-
</tr>
131-
</thead>
132-
<tbody>
133-
${map(this.customMapping, (mapping, idx) => html`
134-
<tr>
135-
<td>${mapping.customField}</td>
136-
<td>${mapping.formField?.value}</td>
137-
<td>
138-
<uui-button
139-
label=${this.localize.term("formProviderWorkflows_delete")}
140-
look="secondary"
141-
color="default"
142-
@click=${() => this.#onDeleteClick(idx)}>
143-
<uui-icon name="delete"></uui-icon>
144-
</uui-button>
145-
</td>
146-
</tr>
147-
`)}
148-
</tbody>
149-
</table>
141+
${this.customMappingArray.length > 0
142+
? html`
143+
<table>
144+
<thead>
145+
<tr>
146+
<th>${this.localize.term("formProviderWorkflows_CustomField")}</th>
147+
<th>${this.localize.term("formProviderWorkflows_FormField")}</th>
148+
<th></th>
149+
</tr>
150+
</thead>
151+
<tbody>
152+
${map(this.customMappingArray, (mapping, idx) => html`
153+
<tr>
154+
<td>${mapping.customField?.title}</td>
155+
<td>${mapping.formField?.value}</td>
156+
<td>
157+
<uui-button
158+
label=${this.localize.term("formProviderWorkflows_delete")}
159+
look="secondary"
160+
color="default"
161+
@click=${() => this.#onDeleteClick(idx)}>
162+
<uui-icon name="delete"></uui-icon>
163+
</uui-button>
164+
</td>
165+
</tr>
166+
`)}
167+
</tbody>
168+
</table>
169+
`
170+
: html``}
150171
</div>
151172
`;
152173
}

0 commit comments

Comments
 (0)