V14: Integrations (Dynamics)

- Refactoring

Author: dtng95

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/config/authorization/authorization-property-editor.element.ts

@@ -38,10 +38,7 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
     }
 
     async #checkOAuthConfiguration(){
-        //const { data } = await this.#dynamicsContext.checkOauthConfiguration();
-        if (!this.#settingsModel) {
-            return;
-        }
+        if (!this.#settingsModel) return;
 
         if (!this.#settingsModel.isAuthorized) {
             this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/config/authorization/manifests.ts

@@ -4,7 +4,7 @@ export const manifests : ManifestPropertyEditorUi = {
     type: 'propertyEditorUi',
     alias: 'Dynamics.PropertyEditorUi.Authorization',
     name: 'Dynamics Form Picker Authorization Setting',
-    element: () => import('./authorization-property-editor.element.js'),
+    js: () => import('./authorization-property-editor.element.js'),
     meta: {
         label: 'Authorization',
         icon: 'icon-autofill',

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/modal/dynamics-form-modal.element.ts

@@ -2,21 +2,35 @@ import { customElement, html, repeat, state } from "@umbraco-cms/backoffice/exte
 import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
 import { DynamicsFormPickerModalData, DynamicsFormPickerModalValue } from "./dynamics.modal-token";
 import { DYNAMICS_CONTEXT_TOKEN } from "../context/dynamics.context";
-import { FormDtoModel, OAuthConfigurationDtoModel, OAuthRequestDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { DynamicsModuleModel, FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
 import { UMB_NOTIFICATION_CONTEXT, UmbNotificationColor } from "@umbraco-cms/backoffice/notification";
-import { DynamicsOAuthSetup } from "../models/dynamics-service.model";
+import { UUIInputEvent } from "@umbraco-cms/backoffice/external/uui";
+import { UmbPropertyValueChangeEvent } from "@umbraco-cms/backoffice/property-editor";
+import { UmbArrayState } from "@umbraco-cms/backoffice/observable-api";
 
 const elementName = "dynamics-forms-modal";
+enum testEnum {
+    OUTBOUND = "1",
+    REAL_TIME = "2"
+}
 
 @customElement(elementName)
 export default class DynamicsFormModalElement extends UmbModalBaseElement<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>{
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
     #settingsModel?: OAuthConfigurationDtoModel;
+    //#selectionState: UmbArrayState<FormDtoModel> = [];
 
     @state()
     private _loading = false;
     @state()
     private _forms: Array<FormDtoModel> = [];
+    @state()
+    private _filterForms: Array<FormDtoModel> = [];
+    @state()
+    private renderWithIFrame: boolean = false;
+    @state()
+    private toggleLabel: string = "Render with Script";
+    
 
     constructor() {
         super();
@@ -36,15 +50,13 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
     }
 
     async #checkOAuthConfiguration(){
-        
         if (!this.#settingsModel) {
             return;
         }
 
         if (!this.#settingsModel.isAuthorized) {
-            this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.")
+            this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.");
         } else {
-
             await this.#getForms();
         }
     }
@@ -55,12 +67,29 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         if(!data) return;
 
         this._forms = data;
+        this._filterForms = data;
+        //this.#selectionState.setValue(data);
         this._loading = false;
     }
 
-    _onSelect(form: FormDtoModel){
-        this.value = { selectedForm: form };
-        this._submitModal();
+    async _onSelect(form: FormDtoModel){
+        var result = await this.checkEmbed(form);
+        if (result){
+            this.value = { selectedForm: form };
+            this._submitModal();
+        }
+    }
+
+    async checkEmbed(form: FormDtoModel){
+        if(this.renderWithIFrame && form.module.toString() === testEnum.REAL_TIME){
+            var { data } = await this.#dynamicsContext.getEmbedCode(form.id);
+            if (!data || data.result.length == 0){
+                this._showError("Unable to embed selected form. Please check if it is live.");
+                return false;
+            }
+        }
+
+        return true;
     }
 
     private async _showError(message: string) {
@@ -74,25 +103,54 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         });
     }
 
+    onMessageOnSubmitIsHtmlChange(){
+        this.renderWithIFrame = !this.renderWithIFrame;
+        this.toggleLabel = !this.renderWithIFrame ? "Render with Script" : "Render with iFrame";
+    }
+
+    onSearchChange(e: UUIInputEvent){
+        var searchText = e.target?.value as string;
+        this._filterForms = this._forms.filter(f => f.name.toLowerCase().includes(searchText.toLowerCase()));
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+
     render(){
         return html`
             <umb-body-layout>
-            
             ${this._loading ? 
                 html`<div class="center loader"><uui-loader></uui-loader></div>` : 
                 html`
                     <uui-box headline=${this.data!.headline}>
-                        <div slot="header">Select a form</div>
-
-                        ${repeat(this._forms, (form) => html`
-                            <uui-ref-node-form
-                                selectable
-                                name=${form.name ?? ""}
-                                @selected=${() => this._onSelect(form)}>
-                            </uui-ref-node-form>
-                        `)}
-                    </uui-box>
+                            <div slot="header">Select a form</div>
+
+                            <uui-input placeholder="Type to search..." @change=${(e: UUIInputEvent) => this.onSearchChange(e)}>
+                                <div slot="append" style="background:#f3f3f3; padding-left:var(--uui-size-2, 6px)">
+                                    <uui-icon-registry-essential>
+                                        <uui-icon name="search"></uui-icon>
+                                    </uui-icon-registry-essential>
+                                </div>
+                            </uui-input>
+
+                            ${this._filterForms.length > 0 ? 
+                                html`
+                                    ${repeat(this._filterForms, (form) => html`
+                                        <uui-ref-node-form
+                                            selectable
+                                            name=${form.name ?? ""}
+                                            @selected=${() => this._onSelect(form)}>
+                                        </uui-ref-node-form>
+                                    `)}
+
+                                    <uui-toggle
+                                        ?checked=${this.renderWithIFrame}
+                                        .label=${this.toggleLabel}
+                                        @change=${this.onMessageOnSubmitIsHtmlChange}></uui-toggle>
+                                ` : 
+                                html``}
+                        </uui-box>
+
                     <br />
+
                     <uui-box headline="Dynamics - OAuth Status">
                         <div slot="header">Please connect with your Microsoft account.</div>
                         <dynamics-authorization></dynamics-authorization>

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/dynamics-form-picker-property-editor.element.ts

@@ -57,10 +57,6 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
 
         if (this.value == null || this.value.length == 0) return;
 
-        await this.#checkOAuthConfiguration();
-    }
-
-    async #checkOAuthConfiguration(){
         if(!this.#settingsModel) return;
         if(!this.#settingsModel.isAuthorized) this._showError("Unable to connect to Dynamics. Please review the settings of the form picker property's data type.");
 
@@ -72,12 +68,12 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
         this.selectedForm = model;
     }
 
-    deleteForm(formId: string){
-        
+    #deleteForm(){
+        this.value = "";
+        this.dispatchEvent(new CustomEvent('property-value-change'));
     }
 
     private async _openModal() {
-        console.log(this._config?.module);
         const module = this._config?.module == "Both" ? "Outbound | Real-Time" : this._config?.module;
         const pickerContext = this.#modalManagerContext?.open(this, DYNAMICS_MODAL_TOKEN, {
             data: {
@@ -102,24 +98,25 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
 
     render() {
         return html`
-            <div>
-                <uui-button
-                    class="add-button"
-                    @click=${this._openModal}
-                    label=${this.localize.term('general_add')}
-                    look="placeholder"></uui-button>
-            </div>
-            ${this.selectedForm ? 
-                html`
-                    <div>
-                        <uui-ref-node-form name=${this.selectedForm!.name}>
-                            <uui-action-bar slot="actions">
-                                <uui-button label="Remove" @click=${() => this.deleteForm(this.selectedForm!.id)}>Remove</uui-button>
-                            </uui-action-bar>
-                        </uui-ref-node-form>
-                    </div>
-                ` : 
-                html``}
+        ${this.value == null || this.value.length == 0 ? 
+            html`
+                <div>
+                    <uui-button
+                        class="add-button"
+                        @click=${this._openModal}
+                        label=${this.localize.term('general_add')}
+                        look="placeholder"></uui-button>
+                </div>
+            ` : 
+            html`
+                <div>
+                    <uui-ref-node-form name=${this.selectedForm?.name ?? ""}>
+                        <uui-action-bar slot="actions">
+                            <uui-button label="Remove" @click=${this.#deleteForm}>Remove</uui-button>
+                        </uui-action-bar>
+                    </uui-ref-node-form>
+                </div>
+            `}
         `;
     }
 

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/property-editor/manifests.ts

@@ -5,7 +5,7 @@ export const propertyEditorUiManifest : ManifestPropertyEditorUi = {
     type: "propertyEditorUi",
     alias: "Dynamics.PropertyEditorUi.FormPicker",
     name: "Dynamics Form Picker Property Editor UI",
-    element: () => import("./dynamics-form-picker-property-editor.element"),
+    js: () => import("./dynamics-form-picker-property-editor.element"),
     meta: {
         label: "Dynamics Form Picker",
         icon: "icon-book",