feat(wizards/eqfunction): add create wizard

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';
@@ -20,9 +25,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')
@@ -39,6 +54,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));
@@ -49,6 +67,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(
@@ -62,6 +86,11 @@ export class ConductingEquipmentEditor extends LitElement {
       );
   }
 
+  firstUpdated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   renderEqFunctions(): TemplateResult {
     if (!this.showfunctions) return html``;
 
@@ -72,6 +101,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
@@ -107,8 +145,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 {

src/editors/substation/powertransformer-editor.ts

@@ -4,28 +4,43 @@ 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 { IconButton } from '@material/mwc-icon-button';
+import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { Menu } from '@material/mwc-menu';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
 import { powerTransformerTwoWindingIcon } from '../../icons/icons.js';
-import { wizards } from '../../wizards/wizard-library.js';
+import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 import {
   getChildElementsByTagName,
   newActionEvent,
   newWizardEvent,
+  SCLTag,
+  tags,
 } from '../../foundation.js';
 import { startMove } from './foundation.js';
 import { SubstationEditor } from './substation-editor.js';
 import { BayEditor } from './bay-editor.js';
 import { VoltageLevelEditor } from './voltage-level-editor.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 child-less `PowerTransformer` element. */
 @customElement('powertransformer-editor')
 export class PowerTransformerEditor extends LitElement {
@@ -42,6 +57,9 @@ export class PowerTransformerEditor 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['PowerTransformer'].edit(this.element);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
@@ -65,6 +83,17 @@ export class PowerTransformerEditor extends LitElement {
       );
   }
 
+  private openCreateWizard(tagName: string): void {
+    const wizard = wizards[<SCLTag>tagName].create(this.element!);
+
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
+  firstUpdated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   renderEqFunctions(): TemplateResult {
     if (!this.showfunctions) return html``;
 
@@ -75,6 +104,15 @@ export class PowerTransformerEditor 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"
         >${powerTransformerTwoWindingIcon}</mwc-icon
@@ -115,8 +153,26 @@ export class PowerTransformerEditor extends LitElement {
           mini
           icon="delete"
           @click="${() => this.removeElement()}}"
-        ></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 {

src/wizards/eqfunction.ts

@@ -0,0 +1,56 @@
+import { get } from 'lit-translate';
+
+import {
+  createElement,
+  getValue,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '../foundation.js';
+import { contentFunctionWizard } from './function.js';
+
+function createEqFunctionAction(parent: Element): WizardActor {
+  return (inputs: WizardInputElement[]) => {
+    const eqFunctionAttrs: Record<string, string | null> = {};
+    const eqFunctionKeys = ['name', 'desc', 'type'];
+    eqFunctionKeys.forEach(key => {
+      eqFunctionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+    });
+
+    const eqFunction = createElement(
+      parent.ownerDocument,
+      'EqFunction',
+      eqFunctionAttrs
+    );
+
+    return [{ new: { parent, element: eqFunction } }];
+  };
+}
+
+export function createEqFunctionWizard(parent: Element): Wizard {
+  const name = '';
+  const desc = null;
+  const type = null;
+  const reservedNames = Array.from(parent.querySelectorAll('EqFunction')).map(
+    fUnction => fUnction.getAttribute('name')!
+  );
+
+  return [
+    {
+      title: get('wizard.title.add', { tagName: 'EqFunction' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: createEqFunctionAction(parent),
+      },
+      content: [
+        ...contentFunctionWizard({
+          name,
+          desc,
+          type,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}

src/wizards/function.ts

@@ -16,7 +16,9 @@ interface ContentOptions {
   reservedNames: string[];
 }
 
-function contentFunctionWizard(content: ContentOptions): TemplateResult[] {
+export function contentFunctionWizard(
+  content: ContentOptions
+): TemplateResult[] {
   return [
     html`<wizard-textfield
       label="name"

src/wizards/wizard-library.ts

@@ -25,6 +25,7 @@ import { editTrgOpsWizard } from './trgops.js';
 import { createDaWizard } from './da.js';
 import { editDAIWizard } from './dai.js';
 import { createFunctionWizard } from './function.js';
+import { createEqFunctionWizard } from './eqfunction.js';
 
 type SclElementWizard = (
   element: Element,
@@ -188,7 +189,7 @@ export const wizards: Record<
   },
   EqFunction: {
     edit: emptyWizard,
-    create: emptyWizard,
+    create: createEqFunctionWizard,
   },
   EqSubFunction: {
     edit: emptyWizard,