refactor(wizards): move wizards in substation editor to wizard library (#242)

* feat(wizards/wizard-library): create empty library

* refactor(editors/substation): move wizards to functions

* refactor(editors/substation): move yet more wizards to library

* refactor(wizards/lnode): move lnode wizard to wizard library

* fix(wizards): fix broken imports

* refactor(wizardslibrary): better naming

Author: JakobVogelsang

src/editors/Substation.ts

@@ -2,6 +2,7 @@ import { LitElement, html, TemplateResult, property, css } from 'lit-element';
 import { translate, get } from 'lit-translate';
 
 import { newWizardEvent } from '../foundation.js';
+import { wizards } from '../wizards/wizard-library.js';
 
 import { selectors, styles } from './substation/foundation.js';
 
@@ -16,11 +17,8 @@ export default class SubstationPlugin extends LitElement {
 
   /** Opens a [[`WizardDialog`]] for creating a new `Substation` element. */
   openCreateSubstationWizard(): void {
-    this.dispatchEvent(
-      newWizardEvent(
-        SubstationEditor.wizard({ parent: this.doc.documentElement })
-      )
-    );
+    const wizard = wizards['Substation'].create(this.doc.documentElement);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   render(): TemplateResult {

src/editors/substation/bay-editor.ts

@@ -6,32 +6,14 @@ import {
   property,
   TemplateResult,
 } from 'lit-element';
-import { translate, get } from 'lit-translate';
+import { translate } from 'lit-translate';
 
-import {
-  createElement,
-  EditorAction,
-  getReference,
-  getValue,
-  newActionEvent,
-  newWizardEvent,
-  Wizard,
-  WizardActor,
-  WizardInput,
-} from '../../foundation.js';
+import { newActionEvent, newWizardEvent } from '../../foundation.js';
 
-import {
-  isCreateOptions,
-  startMove,
-  styles,
-  updateNamingAction,
-  WizardOptions,
-  cloneElement,
-} from './foundation.js';
+import { startMove, styles, cloneElement } from './foundation.js';
 import './conducting-equipment-editor.js';
-import { ConductingEquipmentEditor } from './conducting-equipment-editor.js';
-import { editlNode } from './lnodewizard.js';
 import { VoltageLevelEditor } from './voltage-level-editor.js';
+import { wizards } from '../../wizards/wizard-library.js';
 
 /** [[`SubstationEditor`]] subeditor for a `Bay` element. */
 @customElement('bay-editor')
@@ -49,21 +31,19 @@ export class BayEditor extends LitElement {
   }
 
   openEditWizard(): void {
-    this.dispatchEvent(
-      newWizardEvent(BayEditor.wizard({ element: this.element }))
-    );
+    const wizard = wizards['Bay'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   openConductingEquipmentWizard(): void {
-    if (!this.element) return;
-    const event = newWizardEvent(
-      ConductingEquipmentEditor.wizard({ parent: this.element })
-    );
-    this.dispatchEvent(event);
+    const wizard = wizards['ConductingEquipment'].create(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  /** Opens a [[`WizardDialog`]] for editing `LNode` connections. */
   openLNodeWizard(): void {
-    this.dispatchEvent(newWizardEvent(editlNode(this.element)));
+    const wizard = wizards['LNode'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   remove(): void {
@@ -141,78 +121,6 @@ export class BayEditor extends LitElement {
     </section> `;
   }
 
-  static createAction(parent: Element): WizardActor {
-    return (inputs: WizardInput[]): EditorAction[] => {
-      const name = getValue(inputs.find(i => i.label === 'name')!);
-      const desc = getValue(inputs.find(i => i.label === 'desc')!);
-      const element = createElement(parent.ownerDocument, 'Bay', {
-        name,
-        desc,
-      });
-
-      const action = {
-        new: {
-          parent,
-          element,
-          reference: getReference(parent, 'Bay'),
-        },
-      };
-
-      return [action];
-    };
-  }
-
-  static wizard(options: WizardOptions): Wizard {
-    const [heading, actionName, actionIcon, action, name, desc, element] =
-      isCreateOptions(options)
-        ? [
-            get('bay.wizard.title.add'),
-            get('add'),
-            'add',
-            BayEditor.createAction(options.parent),
-            '',
-            '',
-            undefined,
-          ]
-        : [
-            get('bay.wizard.title.edit'),
-            get('save'),
-            'edit',
-            updateNamingAction(options.element),
-            options.element.getAttribute('name'),
-            options.element.getAttribute('desc'),
-            options.element,
-          ];
-
-    return [
-      {
-        title: heading,
-        element,
-        primary: {
-          icon: actionIcon,
-          label: actionName,
-          action: action,
-        },
-        content: [
-          html`<wizard-textfield
-            label="name"
-            .maybeValue=${name}
-            helper="${translate('bay.wizard.nameHelper')}"
-            required
-            validationMessage="${translate('textfield.required')}"
-            dialogInitialFocus
-          ></wizard-textfield>`,
-          html`<wizard-textfield
-            label="desc"
-            .maybeValue=${desc}
-            nullable
-            helper="${translate('bay.wizard.descHelper')}"
-          ></wizard-textfield>`,
-        ],
-      },
-    ];
-  }
-
   static styles = css`
     ${styles}
 

src/editors/substation/conducting-equipment-editor.ts

@@ -6,31 +6,16 @@ import {
   property,
   TemplateResult,
 } from 'lit-element';
-import { translate, get } from 'lit-translate';
 
-import {
-  createElement,
-  EditorAction,
-  getReference,
-  getValue,
-  newActionEvent,
-  newWizardEvent,
-  Wizard,
-  WizardActor,
-  WizardInput,
-} from '../../foundation.js';
+import { newActionEvent, newWizardEvent } from '../../foundation.js';
 
-import {
-  isCreateOptions,
-  selectors,
-  startMove,
-  updateNamingAction,
-  WizardOptions,
-} from './foundation.js';
-import { typeIcon, typeName, types } from './conducting-equipment-types.js';
-import { editlNode } from './lnodewizard.js';
+import { startMove } from './foundation.js';
 import { BayEditor } from './bay-editor.js';
 
+import { typeIcon } from './conducting-equipment-types.js';
+
+import { wizards } from '../../wizards/wizard-library.js';
+
 /** [[`SubstationEditor`]] subeditor for a `ConductingEquipment` element. */
 @customElement('conducting-equipment-editor')
 export class ConductingEquipmentEditor extends LitElement {
@@ -47,15 +32,14 @@ export class ConductingEquipmentEditor extends LitElement {
   }
 
   openEditWizard(): void {
-    this.dispatchEvent(
-      newWizardEvent(
-        ConductingEquipmentEditor.wizard({ element: this.element })
-      )
-    );
+    const wizard = wizards['ConductingEquipment'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
+  /** Opens a [[`WizardDialog`]] for editing `LNode` connections. */
   openLNodeWizard(): void {
-    this.dispatchEvent(newWizardEvent(editlNode(this.element)));
+    const wizard = wizards['LNode'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   remove(): void {
@@ -105,135 +89,6 @@ export class ConductingEquipmentEditor extends LitElement {
     `;
   }
 
-  static createAction(parent: Element): WizardActor {
-    return (inputs: WizardInput[]): EditorAction[] => {
-      const name = getValue(inputs.find(i => i.label === 'name')!);
-      const desc = getValue(inputs.find(i => i.label === 'desc')!);
-      const proxyType = getValue(inputs.find(i => i.label === 'type')!);
-      const type = proxyType === 'ERS' ? 'DIS' : proxyType;
-
-      const element = createElement(
-        parent.ownerDocument,
-        'ConductingEquipment',
-        { name, type, desc }
-      );
-
-      if (proxyType === 'ERS')
-        element.appendChild(
-          createElement(parent.ownerDocument, 'Terminal', {
-            name: 'T1',
-            cNodeName: 'grounded',
-          })
-        );
-
-      const action = {
-        new: {
-          parent,
-          element,
-          reference: getReference(parent, 'ConductingEquipment'),
-        },
-      };
-
-      return [action];
-    };
-  }
-
-  static wizard(options: WizardOptions): Wizard {
-    const [
-      heading,
-      actionName,
-      actionIcon,
-      action,
-      name,
-      desc,
-      reservedNames,
-      element,
-    ] = isCreateOptions(options)
-      ? [
-          get('conductingequipment.wizard.title.add'),
-          get('add'),
-          'add',
-          ConductingEquipmentEditor.createAction(options.parent),
-          '',
-          '',
-          Array.from(
-            options.parent.querySelectorAll(selectors.ConductingEquipment)
-          ).map(condEq => condEq.getAttribute('name') ?? ''),
-          undefined,
-        ]
-      : [
-          get('conductingequipment.wizard.title.edit'),
-          get('save'),
-          'edit',
-          updateNamingAction(options.element),
-          options.element.getAttribute('name'),
-          options.element.getAttribute('desc'),
-          Array.from(
-            options.element.parentNode!.querySelectorAll(
-              selectors.ConductingEquipment
-            )
-          )
-            .map(condEq => condEq.getAttribute('name') ?? '')
-            .filter(name => name !== options.element.getAttribute('name')),
-          options.element,
-        ];
-
-    return [
-      {
-        title: heading,
-        element,
-        primary: {
-          icon: actionIcon,
-          label: actionName,
-          action: action,
-        },
-        content: [
-          ConductingEquipmentEditor.renderTypeSelector(options),
-          html`<wizard-textfield
-            label="name"
-            .maybeValue=${name}
-            helper="${translate('conductingequipment.wizard.nameHelper')}"
-            required
-            validationMessage="${translate('textfield.required')}"
-            dialogInitialFocus
-            .reservedValues=${reservedNames}
-          ></wizard-textfield>`,
-          html`<wizard-textfield
-            label="desc"
-            .maybeValue=${desc}
-            nullable
-            helper="${translate('conductingequipment.wizard.descHelper')}"
-          ></wizard-textfield>`,
-        ],
-      },
-    ];
-  }
-
-  static renderTypeSelector(options: WizardOptions): TemplateResult {
-    return isCreateOptions(options)
-      ? html`<mwc-select
-          style="--mdc-menu-max-height: 196px;"
-          required
-          label="type"
-          helper="${translate('conductingequipment.wizard.typeHelper')}"
-          validationMessage="${translate('textfield.required')}"
-        >
-          ${Object.keys(types).map(
-            v => html`<mwc-list-item value="${v}">${types[v]}</mwc-list-item>`
-          )}
-        </mwc-select>`
-      : html`<mwc-select
-          label="type"
-          helper="${translate('conductingequipment.wizard.typeHelper')}"
-          validationMessage="${translate('textfield.required')}"
-          disabled
-        >
-          <mwc-list-item selected value="0"
-            >${typeName(options.element)}</mwc-list-item
-          >
-        </mwc-select>`;
-  }
-
   static styles = css`
     #container {
       color: var(--mdc-theme-on-surface);