feat(wizards/function): add create wizards for Function, SubFunction,…

… EqFunction and EqSubFunction element (#731) * feat(wizards/function): add create wizard * feat(wizard/wizard-library): add create wizard for Function element * feat(wizards/subfunction): add create wizard (#733) * feat(wizards/subfunction): add create wizard * feat(editors/substation/sub-function-editor): add add button * feat(wizards/eqfunction): add create wizard (#737) * feat(wizards/eqsubfunction): add create wizard (#757) * test(editors/substation): update snapshots
openscd · May 19, 2022 · 774add7 · 774add7
1 parent dd9843e
commit 774add7
Show file tree

Hide file tree

Showing 37 changed files with 2,833 additions and 26 deletions.
diff --git a/src/editors/substation/conducting-equipment-editor.ts b/src/editors/substation/conducting-equipment-editor.ts
@@ -4,13 +4,18 @@ import {
   html,
   LitElement,
   property,
+  query,
   TemplateResult,
 } from 'lit-element';
 import { translate } from 'lit-translate';
 
 import '@material/mwc-fab';
 import '@material/mwc-icon';
 import '@material/mwc-icon-button';
+import '@material/mwc-menu';
+import { Menu } from '@material/mwc-menu';
+import { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
@@ -21,9 +26,19 @@ import {
   getChildElementsByTagName,
   newActionEvent,
   newWizardEvent,
+  SCLTag,
+  tags,
 } from '../../foundation.js';
 import { BayEditor } from './bay-editor.js';
-import { wizards } from '../../wizards/wizard-library.js';
+import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
+
+function childTags(element: Element | null | undefined): SCLTag[] {
+  if (!element) return [];
+
+  return tags[<SCLTag>element.tagName].children.filter(
+    child => wizards[child].create !== emptyWizard
+  );
+}
 
 /** [[`SubstationEditor`]] subeditor for a `ConductingEquipment` element. */
 @customElement('conducting-equipment-editor')
@@ -40,6 +55,9 @@ export class ConductingEquipmentEditor extends LitElement {
   @property({ type: Boolean })
   showfunctions = false;
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
   private openEditWizard(): void {
     const wizard = wizards['ConductingEquipment'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -50,6 +68,12 @@ export class ConductingEquipmentEditor extends LitElement {
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element)
       this.dispatchEvent(
@@ -63,6 +87,11 @@ export class ConductingEquipmentEditor extends LitElement {
       );
   }
 
+  firstUpdated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   private renderLNodes(): TemplateResult {
     const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -85,6 +114,15 @@ export class ConductingEquipmentEditor extends LitElement {
     )}`;
   }
 
+  private renderAddButtons(): TemplateResult[] {
+    return childTags(this.element).map(
+      child =>
+        html`<mwc-list-item value="${child}"
+          ><span>${child}</span></mwc-list-item
+        >`
+    );
+  }
+
   renderContentPane(): TemplateResult {
     return html`<mwc-icon slot="icon" style="width:24px;height:24px"
         >${getIcon(this.element)}</mwc-icon
@@ -120,8 +158,26 @@ export class ConductingEquipmentEditor extends LitElement {
           mini
           icon="delete"
           @click="${() => this.remove()}}"
-        ></mwc-icon-button>
-      </abbr> `;
+        ></mwc-icon-button> </abbr
+      ><abbr
+        slot="action"
+        style="position:relative;"
+        title="${translate('add')}"
+      >
+        <mwc-icon-button
+          icon="playlist_add"
+          @click=${() => (this.addMenu.open = true)}
+        ></mwc-icon-button
+        ><mwc-menu
+          corner="BOTTOM_RIGHT"
+          menuCorner="END"
+          @selected=${(e: Event) => {
+            const tagName = (<ListItem>(<Menu>e.target).selected).value;
+            this.openCreateWizard(tagName);
+          }}
+          >${this.renderAddButtons()}</mwc-menu
+        >
+      </abbr>`;
   }
 
   renderContentIcon(): TemplateResult {

diff --git a/src/editors/substation/eq-function-editor.ts b/src/editors/substation/eq-function-editor.ts
@@ -6,11 +6,34 @@ import {
   customElement,
   state,
   css,
+  query,
 } from 'lit-element';
+import { translate } from 'lit-translate';
+
+import '@material/mwc-icon-button';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-menu';
+import { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { Menu } from '@material/mwc-menu';
 
 import '../../action-pane.js';
 import './eq-sub-function-editor.js';
-import { getChildElementsByTagName } from '../../foundation.js';
+import {
+  getChildElementsByTagName,
+  newWizardEvent,
+  SCLTag,
+  tags,
+} from '../../foundation.js';
+import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
+
+function childTags(element: Element | null | undefined): SCLTag[] {
+  if (!element) return [];
+
+  return tags[<SCLTag>element.tagName].children.filter(
+    child => wizards[child].create !== emptyWizard
+  );
+}
 
 /** Pane rendering `EqFunction` element with its children */
 @customElement('eq-function-editor')
@@ -27,6 +50,19 @@ export class EqFunctionEditor extends LitElement {
     return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
+  firstUpdated(): void {
+    this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   private renderLNodes(): TemplateResult {
     const lNodes = getChildElementsByTagName(this.element, 'LNode');
 
@@ -52,12 +88,39 @@ export class EqFunctionEditor extends LitElement {
     )}`;
   }
 
+  private renderAddButtons(): TemplateResult[] {
+    return childTags(this.element).map(
+      child =>
+        html`<mwc-list-item value="${child}"
+          ><span>${child}</span></mwc-list-item
+        >`
+    );
+  }
+
   render(): TemplateResult {
     return html`<action-pane
       label="${this.header}"
       icon="functions"
       secondary
       highlighted
+      ><abbr
+        slot="action"
+        style="position:relative;"
+        title="${translate('add')}"
+      >
+        <mwc-icon-button
+          icon="playlist_add"
+          @click=${() => (this.addMenu.open = true)}
+        ></mwc-icon-button
+        ><mwc-menu
+          corner="BOTTOM_RIGHT"
+          menuCorner="END"
+          @selected=${(e: Event) => {
+            const tagName = (<ListItem>(<Menu>e.target).selected).value;
+            this.openCreateWizard(tagName);
+          }}
+          >${this.renderAddButtons()}</mwc-menu
+        ></abbr
       >${this.renderLNodes()}${this.renderEqSubFunctions()}</action-pane
     >`;
   }

diff --git a/src/editors/substation/eq-sub-function-editor.ts b/src/editors/substation/eq-sub-function-editor.ts
@@ -6,11 +6,34 @@ import {
   customElement,
   state,
   css,
+  query,
 } from 'lit-element';
 
+import { translate } from 'lit-translate';
+
+import '@material/mwc-icon-button';
+import '@material/mwc-list/mwc-list-item';
+import '@material/mwc-menu';
+import { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { Menu } from '@material/mwc-menu';
+
 import '../../action-pane.js';
-import { getChildElementsByTagName } from '../../foundation.js';
+import {
+  getChildElementsByTagName,
+  newWizardEvent,
+  SCLTag,
+  tags,
+} from '../../foundation.js';
+import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 
+function childTags(element: Element | null | undefined): SCLTag[] {
+  if (!element) return [];
+
+  return tags[<SCLTag>element.tagName].children.filter(
+    child => wizards[child].create !== emptyWizard
+  );
+}
 /** Pane rendering `EqSubFunction` element with its children */
 @customElement('eq-sub-function-editor')
 export class EqSubFunctionEditor extends LitElement {
@@ -26,6 +49,31 @@ export class EqSubFunctionEditor extends LitElement {
     return `${name}${desc ? ` - ${desc}` : ''}${type ? ` (${type})` : ''}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
+  firstUpdated(): void {
+    this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
+  private renderLNodes(): TemplateResult {
+    const lNodes = getChildElementsByTagName(this.element, 'LNode');
+
+    return lNodes.length
+      ? html`<div class="container lnode">
+          ${lNodes.map(
+            lNode => html`<l-node-editor .element=${lNode}></l-node-editor>`
+          )}
+        </div>`
+      : html``;
+  }
+
   private renderEqSubFunctions(): TemplateResult {
     const eqSubFunctions = getChildElementsByTagName(
       this.element,
@@ -39,20 +87,35 @@ export class EqSubFunctionEditor extends LitElement {
     )}`;
   }
 
-  private renderLNodes(): TemplateResult {
-    const lNodes = getChildElementsByTagName(this.element, 'LNode');
-
-    return lNodes.length
-      ? html`<div class="container lnode">
-          ${lNodes.map(
-            lNode => html`<l-node-editor .element=${lNode}></l-node-editor>`
-          )}
-        </div>`
-      : html``;
+  private renderAddButtons(): TemplateResult[] {
+    return childTags(this.element).map(
+      child =>
+        html`<mwc-list-item value="${child}"
+          ><span>${child}</span></mwc-list-item
+        >`
+    );
   }
 
   render(): TemplateResult {
     return html`<action-pane label="${this.header}" icon="functions" secondary
+      ><abbr
+        slot="action"
+        style="position:relative;"
+        title="${translate('add')}"
+      >
+        <mwc-icon-button
+          icon="playlist_add"
+          @click=${() => (this.addMenu.open = true)}
+        ></mwc-icon-button
+        ><mwc-menu
+          corner="BOTTOM_RIGHT"
+          menuCorner="END"
+          @selected=${(e: Event) => {
+            const tagName = (<ListItem>(<Menu>e.target).selected).value;
+            this.openCreateWizard(tagName);
+          }}
+          >${this.renderAddButtons()}</mwc-menu
+        ></abbr
       >${this.renderLNodes()}${this.renderEqSubFunctions()}</action-pane
     >`;
   }