Skip to content

Commit 4bd8ae6

Browse files
dtng95dtng95
committed
V14 integrations (active campaign/forms)
- Continue implementing UI for ActiveCampaign integration
1 parent dccbb6c commit 4bd8ae6

File tree

9 files changed

+196
-20
lines changed

9 files changed

+196
-20
lines changed

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Api/Management/Controllers/Contacts/GetContactFieldsController.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ public GetContactFieldsController(IOptions<ActiveCampaignSettings> options, ICon
2323

2424
[HttpGet("fields")]
2525
[ProducesResponseType(typeof(List<ContactFieldSettings>), StatusCodes.Status200OK)]
26-
public IActionResult GetContactFields() => Ok(new JsonResult(_settings.ContactFields));
26+
public IActionResult GetContactFields() => Ok(_settings.ContactFields);
2727
}
2828
}

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Api/Management/Controllers/Contacts/GetCustomFieldsController.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@ public GetCustomFieldsController(IOptions<ActiveCampaignSettings> options, ICont
2424
[HttpGet("custom")]
2525
[ProducesResponseType(typeof(CustomFieldCollectionResponseDto), StatusCodes.Status200OK)]
2626
public IActionResult GetCustomFields() =>
27-
Ok(new JsonResult(_contactService.GetCustomFields().ConfigureAwait(false).GetAwaiter().GetResult()));
27+
Ok(_contactService.GetCustomFields().ConfigureAwait(false).GetAwaiter().GetResult());
2828
}
2929
}

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "active-campaign",
2+
"name": "activecampaign-crm",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",

‎src/Umbraco.Forms.Integrations.Crm.ActiveCampaign/Client/public/umbraco-package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"name": "Umbraco EntryPoint",
88
"alias": "Umb.ActiveCampaign.EntryPoint",
99
"type": "entryPoint",
10-
"js": "/App_Plugins/ActiveCampaign/active-campaign.js"
10+
"js": "/App_Plugins/ActiveCampaign/activecampaign-crm.js"
1111
}
1212
]
1313
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class ActiveCampaignContext extends UmbControllerBase {
1313
constructor(host: UmbControllerHost) {
1414
super(host);
1515

16-
this.provideContext(ACTIVECAMPAIGN_FORMS_CONTEXT_TOKEN, this);
16+
this.provideContext(ACTIVECAMPAIGN_CONTEXT_TOKEN, this);
1717
this.#repository = new ActiveCampaignRepository(host);
1818
}
1919

@@ -43,5 +43,5 @@ export class ActiveCampaignContext extends UmbControllerBase {
4343

4444
export default ActiveCampaignContext;
4545

46-
export const ACTIVECAMPAIGN_FORMS_CONTEXT_TOKEN =
46+
export const ACTIVECAMPAIGN_CONTEXT_TOKEN =
4747
new UmbContextToken<ActiveCampaignContext>(ActiveCampaignContext.name);

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,61 @@
1-
import { html, customElement, property, css, when } from '@umbraco-cms/backoffice/external/lit';
1+
import { html, customElement, property , state} from '@umbraco-cms/backoffice/external/lit';
22
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import { ACTIVECAMPAIGN_CONTEXT_TOKEN } from '@umbraco-integrations/activecampaign/context';
5+
import { AccountDto } from '@umbraco-integrations/activecampaign/generated';
6+
import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
47

58
const elementName = "account-property-editor";
69

710
@customElement(elementName)
811
export class AccountPropertyUiElement extends UmbLitElement implements UmbPropertyEditorUiElement {
9-
render() {
10-
return html`<div><span>ABCD</span></div>`;
11-
}
12+
#activeCampaignContext!: typeof ACTIVECAMPAIGN_CONTEXT_TOKEN.TYPE;
13+
14+
@property({ type: String })
15+
public value = "";
16+
17+
@state()
18+
private accounts: Array<AccountDto> | undefined = [];
19+
20+
constructor() {
21+
super();
22+
this.consumeContext(ACTIVECAMPAIGN_CONTEXT_TOKEN, (context) => {
23+
if (!context) return;
24+
this.#activeCampaignContext = context;
25+
});
26+
}
27+
28+
async connectedCallback() {
29+
super.connectedCallback();
30+
31+
await this.#getAccount();
32+
}
33+
34+
async #getAccount(){
35+
var result = await this.#activeCampaignContext.getAccount();
36+
if(!result) return;
37+
38+
this.accounts = result.data?.accounts;
39+
}
40+
41+
#onSelectChange(e: UUISelectEvent){
42+
this.value = e.target.value.toString();
43+
this.requestUpdate();
44+
this.dispatchEvent(new CustomEvent('property-value-change'));
45+
}
46+
47+
render() {
48+
return html`<uui-select
49+
@change=${(e : UUISelectEvent) => this.#onSelectChange(e)}
50+
.options=${
51+
this.accounts?.map((ft) => ({
52+
name: ft.name,
53+
value: ft.id,
54+
selected: ft.id === this.value,
55+
})) ?? []}
56+
></uui-select>`;
1257
}
58+
}
1359

1460
export default AccountPropertyUiElement;
1561

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,61 @@
1-
import { html, customElement, property, css, when } from '@umbraco-cms/backoffice/external/lit';
1+
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
22
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import { ACTIVECAMPAIGN_CONTEXT_TOKEN } from '@umbraco-integrations/activecampaign/context';
5+
import { ContactFieldSettings } from '@umbraco-integrations/activecampaign/generated';
6+
import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
47

58
const elementName = "contact-mapping-property-editor";
69

710
@customElement(elementName)
811
export class ContactMappingPropertyUiElement extends UmbLitElement implements UmbPropertyEditorUiElement {
9-
render() {
10-
return html`<div><span>ABCD</span></div>`;
11-
}
12+
#activeCampaignContext!: typeof ACTIVECAMPAIGN_CONTEXT_TOKEN.TYPE;
13+
14+
@property({ type: String })
15+
public value = "";
16+
17+
@state()
18+
private contactFields: Array<ContactFieldSettings> | undefined = [];
19+
20+
constructor() {
21+
super();
22+
this.consumeContext(ACTIVECAMPAIGN_CONTEXT_TOKEN, (context) => {
23+
if (!context) return;
24+
this.#activeCampaignContext = context;
25+
});
26+
}
27+
28+
async connectedCallback() {
29+
super.connectedCallback();
30+
31+
await this.#getContactFields();
32+
}
33+
34+
async #getContactFields(){
35+
var result = await this.#activeCampaignContext.getContactFields();
36+
if (!result) return;
37+
38+
this.contactFields = result.data;
39+
}
40+
41+
#onSelectChange(e: UUISelectEvent){
42+
this.value = e.target.value.toString();
43+
this.requestUpdate();
44+
this.dispatchEvent(new CustomEvent('property-value-change'));
45+
}
46+
47+
render() {
48+
return html`<uui-select
49+
@change=${(e : UUISelectEvent) => this.#onSelectChange(e)}
50+
.options=${
51+
this.contactFields?.map((ft) => ({
52+
name: ft.displayName,
53+
value: ft.name,
54+
selected: ft.name === this.value,
55+
})) ?? []}
56+
></uui-select>`;
1257
}
58+
}
1359

1460
export default ContactMappingPropertyUiElement;
1561

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

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,98 @@
1-
import { html, customElement, property, css, when } from '@umbraco-cms/backoffice/external/lit';
1+
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
22
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
33
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
4+
import { ACTIVECAMPAIGN_CONTEXT_TOKEN } from '@umbraco-integrations/activecampaign/context';
5+
import { CustomFieldDto } from '@umbraco-integrations/activecampaign/generated';
6+
import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
47

58
const elementName = "custom-mapping-property-editor";
69

710
@customElement(elementName)
811
export class CustomMappingPropertyUiElement extends UmbLitElement implements UmbPropertyEditorUiElement {
9-
render() {
10-
return html`<div><span>ABCD</span></div>`;
11-
}
12+
#activeCampaignContext!: typeof ACTIVECAMPAIGN_CONTEXT_TOKEN.TYPE;
13+
14+
@property({ type: String })
15+
public value = "";
16+
@property({ type: String })
17+
public mappingValue = "";
18+
19+
@state()
20+
private customFields: Array<CustomFieldDto> | undefined = [];
21+
22+
constructor() {
23+
super();
24+
this.consumeContext(ACTIVECAMPAIGN_CONTEXT_TOKEN, (context) => {
25+
if (!context) return;
26+
this.#activeCampaignContext = context;
27+
});
28+
}
29+
30+
async connectedCallback() {
31+
super.connectedCallback();
32+
33+
await this.#getCustomFields();
34+
}
35+
36+
async #getCustomFields(){
37+
var result = await this.#activeCampaignContext.getCustomFields();
38+
if(!result) return;
39+
40+
this.customFields = result.data?.fields;
41+
debugger;
42+
}
43+
44+
#onSelectChange(e: UUISelectEvent){
45+
this.value = e.target.value.toString();
46+
this.requestUpdate();
47+
this.dispatchEvent(new CustomEvent('property-value-change'));
48+
}
49+
50+
addButtonClick(){
51+
52+
}
53+
54+
render() {
55+
return html`
56+
<div>
57+
<uui-select
58+
@change=${(e : UUISelectEvent) => this.#onSelectChange(e)}
59+
.options=${
60+
this.customFields?.map((ft) => ({
61+
name: ft.title,
62+
value: ft.id,
63+
selected: ft.id === this.value,
64+
})) ?? []}
65+
></uui-select>
66+
<uui-select
67+
@change=${(e : UUISelectEvent) => this.#onSelectChange(e)}
68+
.options=${
69+
this.customFields?.map((ft) => ({
70+
name: ft.title,
71+
value: ft.id,
72+
selected: ft.id === this.value,
73+
})) ?? []}
74+
></uui-select>
75+
</div>
76+
77+
<div>
78+
<uui-button label="Add mapping" click=${this.addButtonClick()}></uui-button>
79+
</div>
80+
81+
<div>
82+
<table>
83+
<thead>
84+
<tr>
85+
<th>Contact Field</th>
86+
<th>Form Field</th>
87+
<th></th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
</tbody>
92+
</table>
93+
</div>
94+
`;
95+
}
1296
}
1397

1498
export default CustomMappingPropertyUiElement;

0 commit comments

Comments
 (0)