Web components updates

Author: acoumb

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/generated/services.gen.ts

@@ -71,10 +71,7 @@ export class DynamicsService {
     public static checkOauthConfiguration(): CancelablePromise<CheckOauthConfigurationResponse> {
         return __request(OpenAPI, {
             method: 'GET',
-            url: '/dynamics/management/api/v1/forms/oauth-configuration',
-            errors: {
-                401: 'Unauthorized'
-            }
+            url: '/dynamics/management/api/v1/forms/oauth-configuration'
         });
     }
 

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/generated/types.gen.ts

@@ -826,10 +826,6 @@ export type $OpenApiTs = {
                  * OK
                  */
                 200: OAuthConfigurationDtoModel;
-                /**
-                 * Unauthorized
-                 */
-                401: unknown;
             };
         };
     };

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

@@ -88,7 +88,8 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
         }, false);
     }
 
-    async getAccessToken(oauthRequestDtoModel: OAuthRequestDtoModel){
+    async getAccessToken(oauthRequestDtoModel: OAuthRequestDtoModel) {
+        this._loading = false;
         const { data } = await this.#dynamicsContext.getAccessToken(oauthRequestDtoModel);
         if (!data) return;
 
@@ -162,7 +163,7 @@ export class DynamicsAuthorizationElement extends UmbElementMixin(LitElement){
                             @click=${this.#connectButtonClick}></uui-button>
                         <uui-button 
                             color="danger" 
-                            look="secondary" 
+                            look="primary" 
                             label="Revoke"
                             ?disabled=${!this._oauthSetup?.isConnected}
                             @click=${this.#revokeButtonClick}></uui-button>

src/Umbraco.Cms.Integrations.Crm.Dynamics/Client/src/helpers/dynamic-module.helper.ts

@@ -0,0 +1,8 @@
+import { DynamicsModuleModel } from "@umbraco-integrations/dynamics/generated";
+
+export function parseModule(module: string) {
+    switch (module) {
+        case "1": return DynamicsModuleModel.OUTBOUND;
+        case "2": return DynamicsModuleModel.REAL_TIME;
+    }
+}

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

@@ -1,17 +1,17 @@
-import { customElement, html, repeat, state } from "@umbraco-cms/backoffice/external/lit";
+import { css, customElement, html, nothing, property, repeat, state } from "@umbraco-cms/backoffice/external/lit";
 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 } 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 { UUIInputEvent } from "@umbraco-cms/backoffice/external/uui";
-import { UmbPropertyValueChangeEvent } from "@umbraco-cms/backoffice/property-editor";
+import {
+    type UmbPropertyEditorConfigCollection,
+    UmbPropertyValueChangeEvent
+} from "@umbraco-cms/backoffice/property-editor";
+import * as dynamicsModuleHelper from "../helpers/dynamic-module.helper";
 
 const elementName = "dynamics-forms-modal";
-enum testEnum {
-    OUTBOUND = "1",
-    REAL_TIME = "2"
-}
 
 @customElement(elementName)
 export default class DynamicsFormModalElement extends UmbModalBaseElement<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>{
@@ -23,12 +23,19 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
     @state()
     private _forms: Array<FormDtoModel> = [];
     @state()
-    private _filterForms: Array<FormDtoModel> = [];
+    private _filteredForms: Array<FormDtoModel> = [];
+    @state()
+    private _selectedForm: FormDtoModel = {
+        id: "",
+        module: DynamicsModuleModel.BOTH,
+        name: "",
+        rawHtml: "",
+        standaloneHtml: ""
+    };
     @state()
     private renderWithIFrame: boolean = false;
     @state()
     private toggleLabel: string = "Render with Script";
-    
 
     constructor() {
         super();
@@ -47,7 +54,7 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         await this.#checkOAuthConfiguration();
     }
 
-    async #checkOAuthConfiguration(){
+    async #checkOAuthConfiguration() {
         if (!this.#settingsModel) return;
 
         if (!this.#settingsModel.isAuthorized) {
@@ -57,34 +64,31 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         }
     }
 
-    async #getForms(){
+    async #getForms() {
         this._loading = true;
-        const { data } = await this.#dynamicsContext.getForms("Both");
-        if(!data) return;
+        const { data } = await this.#dynamicsContext.getForms(this.data?.module!);
+        if (!data) return;
 
         this._forms = data;
-        this._filterForms = data;
+        this._filteredForms = data;
         this._loading = false;
     }
 
-    async _onSelect(form: FormDtoModel){
-        var result = await this.checkEmbed(form);
-        if (result){
-            this.value = { selectedForm: form };
-            this._submitModal();
-        }
+    async _onSelect(form: FormDtoModel) {
+        this._selectedForm = form;
     }
 
-    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){
+    async _onSubmit() {
+        if (this.renderWithIFrame && dynamicsModuleHelper.parseModule(this._selectedForm.module.toString()) == DynamicsModuleModel.OUTBOUND) {
+            var { data } = await this.#dynamicsContext.getEmbedCode(this._selectedForm.id);
+            if (!data || data.result.length == 0) {
                 this._showError("Unable to embed selected form. Please check if it is live.");
                 return false;
             }
         }
 
-        return true;
+        this.value = { selectedForm: this._selectedForm, iframeEmbedded: this.renderWithIFrame };
+        this._submitModal();
     }
 
     private async _showError(message: string) {
@@ -98,63 +102,82 @@ export default class DynamicsFormModalElement extends UmbModalBaseElement<Dynami
         });
     }
 
-    onMessageOnSubmitIsHtmlChange(){
+    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());
+    #handleFilterInput(event: UUIInputEvent) {
+        let query = (event.target.value as string) || '';
+        query = query.toLowerCase();
+
+        const result = !query
+            ? this._forms
+            : this._forms.filter((form) => form.name?.toLowerCase().includes(query));
+
+        this._filteredForms = result;
+    }
+    private _renderFilter() {
+        return html` <uui-input
+			type="search"
+			id="filter"
+			@input="${this.#handleFilterInput}"
+			placeholder="Type to filter..."
+			label="Type to filter forms">
+			<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
+		</uui-input>`;
     }
 
-    render(){
+    render() {
         return html`
             <umb-body-layout>
-            ${this._loading ? 
-                html`<div class="center loader"><uui-loader></uui-loader></div>` : 
+            ${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>
-
-                            <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 ? 
+                            ${this._renderFilter()}
+                            ${this._filteredForms.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>
-                                ` : 
+                                            ${repeat(this._filteredForms, (form) => html`
+                                                <uui-ref-node-form
+                                                    selectable
+                                                    ?selected=${this._selectedForm.id == form.id}
+                                                    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>
                     </uui-box>
                 `}
 
+                <uui-button look="primary" slot="actions" label="Submit" @click=${this._onSubmit}></uui-button>
                 <uui-button slot="actions" label=${this.localize.term("general_close")} @click=${this._rejectModal}></uui-button>
             </umb-body-layout>
         `;
     }
+
+    static styles = [
+        css`
+            #filter {
+                width: 100%;
+                margin-bottom: var(--uui-size-3);
+            }
+
+            uui-icon {
+                margin: auto;
+                margin-left: var(--uui-size-2);
+            }
+        `];
 }
 

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

@@ -4,10 +4,12 @@ import { DynamicsFormPickerConfiguration } from "../types/types";
 
 export type DynamicsFormPickerModalData = {
     headline: string;
+    module: string;
 }
 
 export type DynamicsFormPickerModalValue = {
-    selectedForm : FormDtoModel;
+    selectedForm: FormDtoModel;
+    iframeEmbedded: boolean;
 }
 
 export const DYNAMICS_MODAL_TOKEN = new UmbModalToken<DynamicsFormPickerModalData, DynamicsFormPickerModalValue>("Dynamics.Modal", {

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

@@ -3,7 +3,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { DYNAMICS_CONTEXT_TOKEN } from "../context/dynamics.context";
 import { UMB_MODAL_MANAGER_CONTEXT } from "@umbraco-cms/backoffice/modal";
-import { FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
+import { DynamicsModuleModel, FormDtoModel, OAuthConfigurationDtoModel } from "@umbraco-integrations/dynamics/generated";
 import { DynamicsFormPickerConfiguration } from "../types/types";
 import { UmbPropertyEditorConfigCollection } from "@umbraco-cms/backoffice/property-editor";
 import { DYNAMICS_MODAL_TOKEN } from "../modal/dynamics.modal-token";
@@ -60,7 +60,7 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
         }, 3000);
     }
 
-    #checkConfiguration(){
+    #checkConfiguration() {
         if (this.value == null || this.value.length == 0) return;
 
         if(!this.#settingsModel) return;
@@ -76,10 +76,12 @@ export class DynamicsFormPickerPropertyEditor extends UmbLitElement implements U
 
     private async _openModal() {
         const module = this._config?.module == "Both" ? "Outbound | Real-Time" : this._config?.module;
+
         const pickerContext = this.#modalManagerContext?.open(this, DYNAMICS_MODAL_TOKEN, {
             data: {
-                headline:  `Dynamics Forms - ${module} Marketing Forms`
-            },
+                headline: `Dynamics Forms - ${module} Marketing Forms`,
+                module: this._config?.module!
+            }
         });
 
         const data = await pickerContext?.onSubmit();

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

@@ -8,7 +8,7 @@ export const propertyEditorUiManifest : ManifestPropertyEditorUi = {
     js: () => import("./dynamics-form-picker-property-editor.element"),
     meta: {
         label: "Dynamics Form Picker",
-        icon: "icon-book",
+        icon: "icon-handshake",
         group: "pickers",
 		propertyEditorSchemaAlias: 'Umbraco.Cms.Integrations.Crm.Dynamics.FormPicker',
         settings: {

src/Umbraco.Cms.Integrations.Crm.Dynamics/Umbraco.Cms.Integrations.Crm.Dynamics.csproj

@@ -30,10 +30,6 @@
 		<PackageReference Include="Umbraco.Cms.Web.Common" Version="[14.0.0, 15)" />
 	</ItemGroup>
 
-	<ItemGroup>
-	  <Folder Include="Client\" />
-	</ItemGroup>
-
 	<ItemGroup>
 		<FrameworkReference Include="Microsoft.AspNetCore.App" />
 		<SupportedPlatform Include="browser" />
@@ -50,6 +46,10 @@
 		<None Include="docs\readme.md" Pack="true" PackagePath="\" />
 	</ItemGroup>
 
+	<ItemGroup>
+		<Content Include="Views\**" />
+	</ItemGroup>
+
 	<!-- Build client assets using NPM  -->
 	<Import Project="build\Microsoft.AspNetCore.ClientAssets.targets" />
 	<PropertyGroup>