add dialog component for editing (sub)functions

Author: noraeb

function-editor.spec.ts editor/function-editor.spec.tsfunction-editor.spec.ts renamed to editor/function-editor.spec.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { html, fixture, expect } from '@open-wc/testing';
 import './function-editor.js';
-import { testScl } from './scl-bay-template.testfiles.js';
+import { testScl } from '../scl-bay-template.testfiles.js';
 
 describe('FunctionEditor', () => {
   let element: any;

function-editor.ts editor/function-editor.tsfunction-editor.ts renamed to editor/function-editor.ts

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-return-assign */
 /* eslint-disable lit-a11y/click-events-have-key-events */
-import { css, html, LitElement, nothing, TemplateResult } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { LitElement, html, css, nothing, TemplateResult } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
 
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -17,7 +17,7 @@ import '@material/mwc-textfield';
 import type { Dialog } from '@material/mwc-dialog';
 import type { TextField } from '@material/mwc-textfield';
 
-import { Edit, Insert, newEditEvent, Remove } from '@openscd/open-scd-core';
+import { Edit, Insert, Remove, newEditEvent } from '@openscd/open-scd-core';
 
 import '@openscd/oscd-tree-grid';
 import type { Path, TreeGrid } from '@openscd/oscd-tree-grid';
@@ -44,12 +44,12 @@ import {
   listAddPath,
   outputCirclePath,
   switchAddPath,
-} from './foundation/sldIcons.js';
+} from '../foundation/sldIcons.js';
 import {
   dataAttributeTree,
   getSourceDef,
-} from './foundation/dataAttributePicker.js';
-import { newCreateWizardEvent, newEditWizardEvent } from './foundation.js';
+} from '../foundation/dataAttributePicker.js';
+import './function-element-dialog.js';
 
 const uri6100 = 'http://www.iec.ch/61850/2019/SCL/6-100';
 const xmlnsNs = 'http://www.w3.org/2000/xmlns/';
@@ -818,137 +818,37 @@ export default class FunctionEditor9030 extends LitElement {
 
   @query('#lnlist') lnList!: SelectionList;
 
-  @query('#addSubFunctionDialog') addSubFunctionDialog!: Dialog;
-
-  @query('#subfunc-name') subFunctionNameField!: TextField;
-
-  @query('#subfunc-desc') subFunctionDescField!: TextField;
-
-  @query('#subfunc-type') subFunctionTypeField!: TextField;
-
   @state()
-  subFunctionDialogParent?: Element;
-
-  private openAddSubFunctionDialog(parent: Element): void {
-    this.subFunctionDialogParent = parent;
-    this.addSubFunctionDialog.show();
-  }
-
-  private onClosing(): void {
-    this.subFunctionNameField.value = '';
-    this.subFunctionNameField.setCustomValidity('');
-    this.subFunctionDescField.value = '';
-    this.subFunctionTypeField.value = '';
-  }
-
-  private isSubFunctionNameUnique(name: string): boolean {
-    if (!this.subFunctionDialogParent) return false;
-    return !Array.from(this.subFunctionDialogParent.children).some(
-      el =>
-        (el.tagName === 'SubFunction' || el.tagName === 'EqSubFunction') &&
-        el.getAttribute('name')?.trim().toLowerCase() === name.toLowerCase()
-    );
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private getSubFunctionTagName(
-    parent: Element
-  ): 'SubFunction' | 'EqSubFunction' {
-    return parent.tagName === 'Function' || parent.tagName === 'SubFunction'
-      ? 'SubFunction'
-      : 'EqSubFunction';
-  }
+  showElementDialog = false;
 
-  private createSubFunctionElement(
-    parent: Element,
-    name: string,
-    desc: string,
-    type: string
-  ): Element {
-    const tagName = this.getSubFunctionTagName(parent);
-    const doc = parent.ownerDocument;
-    const subFunc = doc.createElement(tagName);
-    subFunc.setAttribute('name', name);
-    if (desc) subFunc.setAttribute('desc', desc);
-    if (type) subFunc.setAttribute('type', type);
-    return subFunc;
-  }
-
-  private saveSubFunction(): void {
-    const name = this.subFunctionNameField.value.trim();
-    const desc = this.subFunctionDescField.value.trim();
-    const type = this.subFunctionTypeField.value.trim();
-
-    if (!this.subFunctionDialogParent) return;
-
-    if (!this.isSubFunctionNameUnique(name)) {
-      this.subFunctionNameField.setCustomValidity('Name must be unique.');
-      this.subFunctionNameField.reportValidity();
-      return;
-    }
-    this.subFunctionNameField.setCustomValidity('');
-
-    if (!this.subFunctionNameField.reportValidity()) return;
+  @state()
+  dialogRequireUniqueName = false;
 
-    const subFunc = this.createSubFunctionElement(
-      this.subFunctionDialogParent,
-      name,
-      desc,
-      type
-    );
+  @state()
+  dialogSiblings: Element[] = [];
 
-    const insertEdit = {
-      parent: this.subFunctionDialogParent,
-      node: subFunc,
-      reference: null,
-    };
-    this.dispatchEvent(newEditEvent(insertEdit as Insert));
-    this.addSubFunctionDialog.close();
-  }
+  @state()
+  dialogElement?: Element;
 
-  private renderAddSubFunctionDialog(): TemplateResult {
-    return html`
-      <mwc-dialog
-        id="addSubFunctionDialog"
-        heading=${`Add ${
-          this.subFunctionDialogParent?.tagName === 'Function' ||
-          this.subFunctionDialogParent?.tagName === 'SubFunction'
-            ? 'SubFunction'
-            : 'EqSubFunction'
-        }`}
-        @closing=${this.onClosing}
-      >
-        <div class="subfunc-dialog-content">
-          <mwc-textfield
-            id="subfunc-name"
-            label="Name"
-            required
-          ></mwc-textfield>
-          <mwc-textfield id="subfunc-desc" label="Description"></mwc-textfield>
-          <mwc-textfield id="subfunc-type" label="Type"></mwc-textfield>
-        </div>
-        <mwc-button slot="secondaryAction" dialogAction="close">
-          Close
-        </mwc-button>
-        <mwc-button
-          slot="primaryAction"
-          icon="save"
-          @click=${this.saveSubFunction}
-        >
-          Save
-        </mwc-button>
-      </mwc-dialog>
-    `;
-  }
+  @state()
+  dialogParent?: Element;
 
-  private openCreateWizard(tagName: string): void {
-    if (this.parent)
-      this.dispatchEvent(newCreateWizardEvent(this.parent, tagName));
-  }
+  @state()
+  dialogTagName?: string;
+
+  private closeElementDialog = () => {
+    this.showElementDialog = false;
+    this.dialogElement = undefined;
+    this.dialogParent = undefined;
+    this.dialogTagName = undefined;
+    this.dialogRequireUniqueName = false;
+    this.dialogSiblings = [];
+  };
 
-  private openEditWizard(element: Element): void {
-    this.dispatchEvent(newEditWizardEvent(element));
-  }
+  private handleElementDialogSave = (e: CustomEvent) => {
+    this.dispatchEvent(newEditEvent(e.detail));
+    this.closeElementDialog();
+  };
 
   private removeFunction(func: Element): void {
     this.dispatchEvent(newEditEvent({ node: func }));
@@ -958,18 +858,6 @@ export default class FunctionEditor9030 extends LitElement {
     this.dispatchEvent(newEditEvent({ node: srcRef }));
   }
 
-  addFunction(): void {
-    if (
-      (this.parent && this.parent?.tagName === 'Bay') ||
-      this.parent?.tagName === 'VoltageLevel'
-    ) {
-      this.openCreateWizard('Function');
-      return;
-    }
-
-    this.openCreateWizard('EqFunction');
-  }
-
   createNewLNodeElements(): void {
     if (!this.lnodeparent) return;
 
@@ -1131,6 +1019,22 @@ export default class FunctionEditor9030 extends LitElement {
     this.lnList.items = deselectedItems;
   }
 
+  openElementDialog(options: {
+    element?: Element;
+    parent?: Element;
+    tagName?: string;
+    heading?: string;
+    requireUniqueName?: boolean;
+    siblings?: Element[];
+  }) {
+    this.dialogElement = options.element;
+    this.dialogParent = options.parent;
+    this.dialogTagName = options.tagName;
+    this.dialogRequireUniqueName = !!options.requireUniqueName;
+    this.dialogSiblings = options.siblings ?? [];
+    this.showElementDialog = true;
+  }
+
   updated(changedProperties: Map<string, any>) {
     // make sure to put the 6-100 on the SCL element as defined by the IEC 61850-6
     if (!changedProperties.has('doc')) return;
@@ -1800,9 +1704,37 @@ export default class FunctionEditor9030 extends LitElement {
       })}"
     >
       <nav>
+        <mwc-icon-button
+          icon="edit"
+          @click="${() => {
+            this.openElementDialog({
+              element: subFunc!,
+              parent: this.parent!,
+              tagName: subFunc!.tagName,
+              requireUniqueName: true,
+              siblings: this.parent?.children
+                ? Array.from(this.parent?.children).filter(
+                    el => el.tagName === subFunc!.tagName
+                  )
+                : [],
+            });
+          }}"
+        >
+        </mwc-icon-button>
         <mwc-icon-button
           icon="account_tree"
-          @click="${() => this.openAddSubFunctionDialog(subFunc)}"
+          @click="${() => {
+            this.openElementDialog({
+              element: undefined,
+              parent: subFunc,
+              tagName: 'SubFunction',
+              heading: 'Add SubFunction',
+              requireUniqueName: true,
+              siblings: Array.from(subFunc.children).filter(
+                el => el.tagName === 'SubFunction'
+              ),
+            });
+          }}"
         ></mwc-icon-button>
         <mwc-icon-button
           icon="delete"
@@ -1841,12 +1773,34 @@ export default class FunctionEditor9030 extends LitElement {
         <nav>
           <mwc-icon-button
             icon="edit"
-            @click="${() => this.openEditWizard(this.function!)}"
+            @click="${() => {
+              this.openElementDialog({
+                element: this.function!,
+                parent: this.parent!,
+                tagName: this.function!.tagName,
+                requireUniqueName: true,
+                siblings: this.parent?.children
+                  ? Array.from(this.parent?.children).filter(
+                      el => el.tagName === this.function!.tagName
+                    )
+                  : [],
+              });
+            }}"
           >
           </mwc-icon-button>
           <mwc-icon-button
             icon="account_tree"
-            @click="${() => this.openAddSubFunctionDialog(this.function!)}"
+            @click="${() => {
+              this.openElementDialog({
+                element: undefined,
+                parent: this.function!,
+                tagName: 'SubFunction',
+                requireUniqueName: true,
+                siblings: Array.from(this.function!.children).filter(
+                  el => el.tagName === 'SubFunction'
+                ),
+              });
+            }}"
           >
           </mwc-icon-button>
           <mwc-icon-button
@@ -1891,7 +1845,16 @@ export default class FunctionEditor9030 extends LitElement {
         ${this.renderLNodeTypePicker()} ${this.renderLNodeDetail()}
         ${this.renderExtRefPicker()}
       </div>
-      ${this.renderAddSubFunctionDialog()}
+      <function-element-dialog
+        .element=${this.dialogElement}
+        .parent=${this.dialogParent}
+        .elTagName=${this.dialogTagName}
+        .open=${this.showElementDialog}
+        .requireUniqueName=${this.dialogRequireUniqueName}
+        .siblings=${this.dialogSiblings}
+        @save=${this.handleElementDialogSave}
+        @close=${this.closeElementDialog}
+      ></function-element-dialog>
     </main>`;
   }
 
@@ -2025,12 +1988,6 @@ export default class FunctionEditor9030 extends LitElement {
       margin: 8px 10px 16px;
     }
 
-    .subfunc-dialog-content {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
     * {
       --mdc-theme-primary: var(--fedit-primary);
       --mdc-theme-secondary: var(--fedit-secondary);