V14: Integrations (Dynamics)

- Add settimeout to handle async await

Author: dtng95

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

@@ -19,6 +19,9 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
         isAccessTokenValid: false
     };
 
+    @state()
+    private _loading: boolean = true;
+
     constructor() {
         super();
 
@@ -34,10 +37,12 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
     async connectedCallback() {
         super.connectedCallback();
 
-        await this.#checkOAuthConfiguration();
+        setTimeout(() => {
+            this.#checkConfiguration();
+        }, 3000);
     }
 
-    async #checkOAuthConfiguration(){
+    #checkConfiguration(){
         if (!this.#settingsModel) return;
 
         if (!this.#settingsModel.isAuthorized) {
@@ -49,6 +54,8 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
                 isAccessTokenValid: true
             }
         }
+
+        this._loading = false;
     }
 
     async #connectButtonClick(){
@@ -83,7 +90,6 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
 
             this.dispatchEvent(new CustomEvent("connect"));
         }
-
     }
 
     async #revokeButtonClick(){
@@ -114,33 +120,40 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
 
     render(){
         return html`
-            <div>
-                ${this._oauthSetup.isConnected ? 
-                    html`
-                        <span>
-                            <b>Connected</b>: ${this.#settingsModel?.fullName}
-                        </span>
-                    ` : 
-                    html`
-                        <span>
-                            <b>Disconnected</b>
-                        </span>
-                    `}
-                
-            </div>
-            <div>
-                <uui-button 
-                    look="primary" 
-                    label="Connect"
-                    ?disabled=${this._oauthSetup?.isConnected}
-                    @click=${this.#connectButtonClick}></uui-button>
-                <uui-button 
-                    color="danger" 
-                    look="secondary" 
-                    label="Revoke"
-                    ?disabled=${!this._oauthSetup?.isConnected}
-                    @click=${this.#revokeButtonClick}></uui-button>
-            </div>
+            ${this._loading ? 
+                html`
+                    <div class="center loader"><uui-loader></uui-loader></div>
+                ` : 
+                html`
+                    <div>
+                        ${this._oauthSetup.isConnected ? 
+                            html`
+                                <span>
+                                    <b>Connected</b>: ${this.#settingsModel?.fullName}
+                                </span>
+                            ` : 
+                            html`
+                                <span>
+                                    <b>Disconnected</b>
+                                </span>
+                            `}
+                        
+                    </div>
+                    <div>
+                        <uui-button 
+                            look="primary" 
+                            label="Connect"
+                            ?disabled=${this._oauthSetup?.isConnected}
+                            @click=${this.#connectButtonClick}></uui-button>
+                        <uui-button 
+                            color="danger" 
+                            look="secondary" 
+                            label="Revoke"
+                            ?disabled=${!this._oauthSetup?.isConnected}
+                            @click=${this.#revokeButtonClick}></uui-button>
+                    </div>
+                `
+            }
         `;
     }
 }

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

@@ -2,11 +2,10 @@ 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 { DynamicsModuleModel, FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
 import { UMB_NOTIFICATION_CONTEXT, UmbNotificationColor } from "@umbraco-cms/backoffice/notification";
 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 {
@@ -18,7 +17,6 @@ enum testEnum {
 export default class DynamicsFormModalElement extends UmbModalBaseElement<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>{
     #dynamicsContext!: typeof DYNAMICS_CONTEXT_TOKEN.TYPE;
     #settingsModel?: OAuthConfigurationDtoModel;
-    //#selectionState: UmbArrayState<FormDtoModel> = [];
 
     @state()
     private _loading = false;
@@ -50,9 +48,7 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
     }
 
     async #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.");
@@ -68,7 +64,6 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
 
         this._forms = data;
         this._filterForms = data;
-        //this.#selectionState.setValue(data);
         this._loading = false;
     }
 

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

@@ -55,17 +55,18 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
     async connectedCallback() {
         super.connectedCallback();
 
+        setTimeout(() => {
+            this.#checkConfiguration();
+        }, 3000);
+    }
+
+    #checkConfiguration(){
         if (this.value == null || this.value.length == 0) 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.");
 
-        await this.#getForm();
-    }
-
-    async #getForm(){
-        const model: FormDtoModel = JSON.parse(JSON.stringify(this.value));
-        this.selectedForm = model;
+        this.selectedForm = JSON.parse(JSON.stringify(this.value));
     }
 
     #deleteForm(){
@@ -109,13 +110,19 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
                 </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>
+            ${this.selectedForm ? 
+                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>
+                ` : 
+                html`
+                    <div class="center loader"><uui-loader></uui-loader></div>
+                `}
             `}
         `;
     }