V14: Integrations (ActiveCampaign/Forms)

- Continue update ActiveCampaign client implementation

Author: dtng95

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

@@ -6,4 +6,9 @@ export interface ContactMappingValue {
 export interface FormFieldValue {
     id: string;
     value: string;
+}
+
+export interface CustomMappingValue {
+    customField: string;
+    formField: FormFieldValue | undefined;
 }

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

@@ -16,8 +16,6 @@ export class AccountPropertyUiElement extends UmbLitElement implements UmbProper
 
   @state()
   private accounts: Array<AccountDto> | undefined = [];
-
-  
 
   constructor() {
     super();

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

@@ -12,7 +12,10 @@ const elementName = "contact-mapping-property-editor";
 export class ContactMappingPropertyUiElement extends UmbLitElement implements UmbPropertyEditorUiElement {
   #activeCampaignContext!: typeof ACTIVECAMPAIGN_CONTEXT_TOKEN.TYPE;
 
-  @property({ attribute: false })
+  @property({ type: String })
+  public value = "";
+
+  @state()
   public contactMapping : Array<ContactMappingValue> = [];
 
   @state()
@@ -74,6 +77,7 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
       }
     });
 
+    this.value = JSON.stringify(this.contactMapping);
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent('property-value-change'));
   }
@@ -89,6 +93,7 @@ export class ContactMappingPropertyUiElement extends UmbLitElement implements Um
   #onDeleteClick(idx: number){
     this.contactMapping.splice(idx, 1);
 
+    this.value = JSON.stringify(this.contactMapping);
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent('property-value-change'));
   }

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

@@ -4,6 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { ACTIVECAMPAIGN_CONTEXT_TOKEN } from '@umbraco-integrations/activecampaign/context';
 import { CustomFieldDto, Field } from '@umbraco-integrations/activecampaign/generated';
 import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { CustomMappingValue } from '../../models/activecampaign.model';
 
 const elementName = "custom-mapping-property-editor";