Migrate another set of UI dialogs to or-vaadin-dialog

ui/app/manager/src/components/configuration/or-conf-json.ts

@@ -20,11 +20,11 @@ import { html } from "lit";
 import { OrElement } from "@openremote/or-element";
 import { customElement, property } from "lit/decorators.js";
 import "@openremote/or-components/or-ace-editor";
-import type { DialogAction } from "@openremote/or-mwc-components/or-mwc-dialog";
-import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { type OrVaadinDialog, showDialog } from "@openremote/or-vaadin-components/or-vaadin-dialog";
 import { createRef, type Ref, ref } from "lit/directives/ref.js";
 import type { OrAceEditor, OrAceEditorChangedEvent } from "@openremote/or-components/or-ace-editor";
 import type { ManagerAppConfig, MapConfig } from "@openremote/model";
+import type { OrVaadinButton } from "@openremote/or-vaadin-components/or-vaadin-button";
 
 @customElement("or-conf-json")
 export class OrConfJson extends OrElement {
@@ -34,6 +34,7 @@ export class OrConfJson extends OrElement {
   public heading: string;
 
   protected _aceEditor: Ref<OrAceEditor> = createRef();
+  protected _updateButton: Ref<OrVaadinButton> = createRef();
 
   public beforeSave(): false | string | undefined {
     if (!this._aceEditor.value) {
@@ -48,7 +49,7 @@ export class OrConfJson extends OrElement {
   }
 
   protected _showConfigDialog() {
-    let dialog: OrMwcDialog;
+    let dialog: OrVaadinDialog | undefined;
     const _saveConfig = () => {
       const config = this.beforeSave();
       if (config) {
@@ -59,55 +60,42 @@ export class OrConfJson extends OrElement {
       return false;
     };
 
-    const dialogActions: DialogAction[] = [
-      {
-        actionName: "cancel",
-        content: "cancel",
-      },
-      {
-        actionName: "ok",
-        content: "update",
-        action: _saveConfig,
-      },
-    ];
-
-    dialog = new OrMwcDialog()
-      .setActions(dialogActions)
-      .setHeading(this.heading)
-      .setContent(html`
-        <or-ace-editor
-          ${ref(this._aceEditor)}
-          .value="${this.config}"
-          @or-ace-editor-changed="${(ev: OrAceEditorChangedEvent) => {
-            const okButton = dialog.actions?.find((action) => action.actionName === "ok");
-            if (okButton) {
-              okButton.disabled = !ev.detail.valid;
-              dialog.requestUpdate();
-            }
-          }}"
-        ></or-ace-editor>
-      `)
-      .setStyles(html`
-        <style>
-          .mdc-dialog__surface {
-            width: 1024px;
-            overflow-x: visible !important;
-            overflow-y: visible !important;
-          }
-          #dialog-content {
-            border-top-width: 1px;
-            border-top-style: solid;
-            border-bottom-width: 1px;
-            border-bottom-style: solid;
-            padding: 0;
-            overflow: visible;
-            height: 60vh;
-          }
-        </style>
-      `)
-      .setDismissAction(null);
+    const onCancel = () => {
+      dialog?.close();
+    };
+    const onOk = () => {
+      if (_saveConfig()) {
+        dialog?.close();
+      }
+    };
 
-    showDialog(dialog);
+    dialog = showDialog(
+      this.shadowRoot!,
+      html`
+        <or-vaadin-dialog width="768px" no-close-on-esc no-close-on-outside-click>
+          <h2 slot="header-content">${this.heading}</h2>
+          <or-ace-editor
+            ${ref(this._aceEditor)}
+            .value="${this.config}"
+            style="aspect-ratio: 1/1;"
+            @or-ace-editor-changed="${(ev: OrAceEditorChangedEvent) => {
+              if (this._updateButton.value) {
+                this._updateButton.value.disabled = !ev.detail.valid;
+                dialog?.requestUpdate();
+              }
+            }}"
+          ></or-ace-editor>
+          <div slot="footer" style="width: 100%; display: flex; justify-content: space-between">
+            <or-vaadin-button theme="tertiary" @click=${onCancel}>
+              <or-translate value="cancel"></or-translate>
+            </or-vaadin-button>
+            <or-vaadin-button theme="primary" ${ref(this._updateButton)} @click=${onOk}>
+              <or-translate value="update"></or-translate>
+            </or-vaadin-button>
+          </div>
+        </or-vaadin-dialog>
+      `
+    );
   }
 
   render() {

ui/app/manager/src/components/configuration/or-conf-map/or-conf-map-card.ts

@@ -23,7 +23,7 @@ import { when } from "lit/directives/when.js";
 import "@openremote/or-components/or-file-uploader";
 import { i18next } from "@openremote/or-translate";
 import type { MapRealmConfig } from "@openremote/model";
-import { type DialogAction, OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { getConfirmDialogContent, showConfirmDialog } from "@openremote/or-vaadin-components/or-vaadin-confirm-dialog";
 import type { OrVaadinToggle } from "@openremote/or-vaadin-components/or-vaadin-toggle";
 import type { OrMapLongPressEvent } from "@openremote/or-map";
 import type { LngLat } from "maplibre-gl";
@@ -57,37 +57,13 @@ export class OrConfMapCard extends OrElement {
   }
 
   protected _showRemoveMapDialog() {
-    const dialogActions: DialogAction[] = [
-      {
-        actionName: "cancel",
-        content: "cancel",
-      },
-      {
-        default: true,
-        actionName: "ok",
-        content: "yes",
-        action: () => {
-          this.dispatchEvent(new CustomEvent("remove"));
-        },
-      },
-    ];
-    showDialog(
-      new OrMwcDialog()
-        .setHeading(i18next.t("delete"))
-        .setActions(dialogActions)
-        .setContent(html` ${i18next.t("configuration.deleteMapCustomizationConfirm")} `)
-        .setStyles(html`
-          <style>
-            .mdc-dialog__surface {
-              padding: 4px 8px;
-            }
-
-            #dialog-content {
-              padding: 24px;
-            }
-          </style>
-        `)
-        .setDismissAction(null)
+    showConfirmDialog(
+      this.shadowRoot!,
+      html`
+        <or-vaadin-confirm-dialog @confirm=${() => this.dispatchEvent(new CustomEvent("remove"))}>
+          ${getConfirmDialogContent("error", "delete", "configuration.deleteMapCustomizationConfirm", "delete", "cancel")}
+        </or-vaadin-confirm-dialog>
+      `
     );
   }
 

ui/app/manager/src/components/configuration/or-conf-map/or-conf-map-geojson.ts

@@ -17,12 +17,14 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import type { GeoJsonConfig } from "@openremote/model";
-import { OrMwcDialog, showDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { type OrVaadinDialog, showDialog } from "@openremote/or-vaadin-components/or-vaadin-dialog";
 import { html } from "lit";
 import { OrElement } from "@openremote/or-element";
 import { customElement, property, state } from "lit/decorators.js";
 import "@openremote/or-components/or-ace-editor";
-import type { OrAceEditorChangedEvent } from "@openremote/or-components/or-ace-editor";
+import type { OrAceEditor, OrAceEditorChangedEvent } from "@openremote/or-components/or-ace-editor";
+import type { OrVaadinButton } from "@openremote/or-vaadin-components/or-vaadin-button";
+import { createRef, type Ref, ref } from "lit/directives/ref.js";
 
 @customElement("or-conf-map-geojson")
 export class OrConfMapGeoJson extends OrElement {
@@ -32,71 +34,58 @@ export class OrConfMapGeoJson extends OrElement {
   @state()
   protected _jsonValid: boolean = true;
 
-  protected _dialog: OrMwcDialog;
+  protected _dialog: OrVaadinDialog;
   // Value of or-ace-editor without state to prevent UI update
   protected _aceEditorValue: string;
 
   /* -------------- */
 
   protected render() {
     return html`
-      <or-vaadin-button @click=${() => this.showDialog()}>
+      <or-vaadin-button @click=${() => this._showDialog()}>
         <or-icon slot="prefix" icon="pencil"></or-icon>
         <or-translate value="configuration.geoJson"></or-translate>
       </or-vaadin-button>
     `;
   }
 
-  protected showDialog() {
+  protected _showDialog() {
+    const buttonRef: Ref<OrVaadinButton> = createRef();
+    const editorRef: Ref<OrAceEditor> = createRef();
+    const onOk = () => {
+      this.geoJson = this.parseGeoJson(this._aceEditorValue); // update with new value
+      this.dispatchEvent(new CustomEvent("update", { detail: { value: this.geoJson } }));
+      this._dialog?.close();
+    };
     this._dialog = showDialog(
-      new OrMwcDialog()
-        .setHeading("GeoJSON editor")
-        .setStyles(
-          html` <style>
-            .mdc-dialog__surface {
-              width: 1024px;
-              overflow-x: visible !important;
-              overflow-y: visible !important;
-            }
-            #dialog-content {
-              border-top-width: 1px;
-              border-top-style: solid;
-              border-bottom-width: 1px;
-              border-bottom-style: solid;
-              padding: 0;
-              overflow: visible;
-              height: 60vh;
-            }
-          </style>`
-        )
-        .setActions([
-          {
-            actionName: "close",
-            content: "close",
-          },
-          {
-            actionName: "ok",
-            content: "update",
-            disabled: !this._jsonValid,
-            action: () => {
-              this.geoJson = this.parseGeoJson(this._aceEditorValue); // update with new value
-              this.dispatchEvent(new CustomEvent("update", { detail: { value: this.geoJson } }));
-            },
-          },
-        ])
-        .setContent(
-          () =>
-            html` <or-ace-editor
-              .value="${this.geoJson?.source}"
-              @or-ace-editor-changed="${(ev: OrAceEditorChangedEvent) => {
-                this._jsonValid = ev.detail.valid;
-                if (this._jsonValid) {
-                  this._aceEditorValue = ev.detail.value;
-                }
-              }}"
-            ></or-ace-editor>`
-        )
-        .setDismissAction(null)
+      this.shadowRoot!,
+      html`
+        <or-vaadin-dialog width="768px" no-close-on-esc no-close-on-outside-click>
+          <h2 slot="header-content">
+            <span>GeoJSON editor</span>
+          </h2>
+          <or-ace-editor
+            ${ref(editorRef)}
+            .value="${this.geoJson?.source}"
+            style="width: 100%; aspect-ratio: 1/1;"
+            @or-ace-editor-changed="${(ev: OrAceEditorChangedEvent) => {
+              this._jsonValid = ev.detail.valid;
+              buttonRef.value!.disabled = !this._jsonValid;
+              if (this._jsonValid) {
+                this._aceEditorValue = ev.detail.value;
+              }
+            }}"
+          ></or-ace-editor>
+          <div slot="footer" style="width: 100%; display: flex; justify-content: space-between">
+            <or-vaadin-button theme="tertiary" @click=${() => this._dialog?.close()}>
+              <or-translate value="close"></or-translate>
+            </or-vaadin-button>
+            <or-vaadin-button theme="primary" ${ref(buttonRef)} disabled @click=${onOk}>
+              <or-translate value="update"></or-translate>
+            </or-vaadin-button>
+          </div>
+        </or-vaadin-dialog>
+      `
     );
   }