989 add process (openscd#1219)

* feat(line-editor.ts):unit_test_added

* feat(line-editor):add_edit_wizard

* feat(line-editor-wizard-editing.test):part-of-test

* feat(line-editor_wizard_editing)_continue

* feat(line.test,etc):editing_and_testing

* feat(line.ts):createLineWizard_added

* feat(zeroline-pane):create_Line_added

* feat(line.test.ts):create_tests_added

* feat(line-editor.ts):remove_line_and_test

* feat(line-editor):add_add_button_and_test

* feat(process-editor.ts):editor_added

* fix(Process.scd):GeneralEquipment_added

* fix(Process.scd):GeneralEquipment_added

* feat(process-editor):edit_wizard_added

* feat(process-editor-wizard-editing.test):added

* feat(process-editor-snap):snapshot_updated

* feat(process-editor-wizard-editing):added

* feat(process.test.ts):test_added

* feat(process.ts):create_wizard_added

* feat(process.test):test_added

* feat(process-editor):delete_added

* feat(process-editor):add_added

* fix(process.ts):fixed_tagname

* fix: fixed snapshot test

* fix: substation warning, styling, guess correction

---------

Co-authored-by: Steffen van den Driest <[email protected]>
Co-authored-by: Stef3st <[email protected]>

Author: marcvanraalte

src/editors/Substation.ts

@@ -21,7 +21,9 @@ export default class SubstationPlugin extends LitElement {
 
   render(): TemplateResult {
     return html` <zeroline-pane .doc=${this.doc}></zeroline-pane>
-      ${!this.doc?.querySelector(':root > Substation')
+      ${!this.doc?.querySelector(
+        ':root > Substation, :root > Line, :root > Process'
+      )
         ? html`<h1>
             <mwc-fab
               extended

src/editors/substation/process-editor.ts

@@ -6,13 +6,17 @@ import {
   TemplateResult,
   property,
   state,
+  query,
 } from 'lit-element';
 
 import { translate } from 'lit-translate';
 
 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 './conducting-equipment-editor.js';
 import './function-editor.js';
@@ -28,9 +32,19 @@ import {
   getChildElementsByTagName,
   newActionEvent,
   newWizardEvent,
+  SCLTag,
+  tags,
 } from '../../foundation.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
+  );
+}
 
 @customElement('process-editor')
 export class ProcessEditor extends LitElement {
@@ -52,11 +66,20 @@ export class ProcessEditor extends LitElement {
     return `${name} ${desc ? `—${desc}` : ''}`;
   }
 
+  @query('mwc-menu') addMenu!: Menu;
+  @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
+
   private openEditWizard(): void {
     const wizard = wizards['Process'].edit(this.element);
     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));
+  }
+
   private renderConductingEquipments(): TemplateResult {
     const ConductingEquipments = getChildElementsByTagName(
       this.element,
@@ -154,6 +177,20 @@ export class ProcessEditor extends LitElement {
       : html``;
   }
 
+  private renderAddButtons(): TemplateResult[] {
+    return childTags(this.element).map(
+      child =>
+        html`<mwc-list-item value="${child}"
+          ><span>${child}</span></mwc-list-item
+        >`
+    );
+  }
+
+  updated(): void {
+    if (this.addMenu && this.addButton)
+      this.addMenu.anchor = <HTMLElement>this.addButton;
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -180,6 +217,25 @@ export class ProcessEditor extends LitElement {
           @click=${() => this.remove()}
         ></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"
+          @action=${(e: Event) => {
+            const tagName = (<ListItem>(<Menu>e.target).selected).value;
+            this.openCreateWizard(tagName);
+          }}
+          >${this.renderAddButtons()}</mwc-menu
+        ></abbr
+      >
       ${this.renderConductingEquipments()}${this.renderGeneralEquipments()}${this.renderFunctions()}${this.renderLNodes()}
       ${this.renderLines()} ${this.renderSubstations()}${this.renderProcesses()}
     </action-pane>`;

src/editors/substation/zeroline-pane.ts

@@ -148,11 +148,13 @@ export class ZerolinePane extends LitElement {
                 ></substation-editor>`
             )}
         </section>`
-      : html`<h1>
+      : !this.doc?.querySelector(':root > Line, :root > Process')
+      ? html`<h1>
           <span style="color: var(--base1)"
             >${translate('substation.missing')}</span
           >
-        </h1>`;
+        </h1>`
+      : html``;
   }
 
   renderLines(): TemplateResult {
@@ -305,6 +307,8 @@ export class ZerolinePane extends LitElement {
 
     section {
       padding: 8px 12px 16px;
+      display: grid;
+      gap: 12px;
     }
 
     abbr {

src/wizards/substation.ts

@@ -63,7 +63,9 @@ export function createAction(parent: Element): WizardActor {
 }
 
 export function createSubstationWizard(parent: Element): Wizard {
-  const guessable = parent.querySelector('Substation') === null;
+  const guessable =
+    parent.ownerDocument.querySelector('Substation') === null &&
+    parent.tagName === 'SCL';
 
   return [
     {

test/integration/editors/substation/process-editor-wizard-editing.test.ts

@@ -2,10 +2,48 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 import '../../../mock-wizard-editor.js';
 import { MockWizardEditor } from '../../../mock-wizard-editor.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
 import '../../../../src/editors/substation/process-editor.js';
 import { ProcessEditor } from '../../../../src/editors/substation/process-editor.js';
 import { WizardTextField } from '../../../../src/wizard-textfield.js';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+
+const openAndCancelMenu: (
+  parent: MockWizardEditor,
+  element: ProcessEditor
+) => Promise<void> = (
+  parent: MockWizardEditor,
+  element: ProcessEditor
+): Promise<void> =>
+  new Promise(async resolve => {
+    expect(parent.wizardUI.dialog).to.be.undefined;
+
+    element?.shadowRoot
+      ?.querySelector<MenuBase>("mwc-icon-button[icon='playlist_add']")!
+      .click();
+    const lnodMenuItem: ListItemBase =
+      element?.shadowRoot?.querySelector<ListItemBase>(
+        `mwc-list-item[value='LNode']`
+      )!;
+    lnodMenuItem.click();
+    await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+    expect(parent.wizardUI.dialog).to.exist;
+
+    const secondaryAction: HTMLElement = <HTMLElement>(
+      parent.wizardUI.dialog?.querySelector(
+        'mwc-button[slot="secondaryAction"][dialogaction="close"]'
+      )
+    );
+
+    secondaryAction.click();
+    await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+    expect(parent.wizardUI.dialog).to.be.undefined;
+
+    return resolve();
+  });
 
 describe('process-editor wizarding editing integration', () => {
   let doc: XMLDocument;
@@ -146,5 +184,36 @@ describe('process-editor wizarding editing integration', () => {
           .exist;
       });
     });
+    describe('Open add wizard', () => {
+      let doc: XMLDocument;
+      let parent: MockWizardEditor;
+      let element: ProcessEditor | null;
+
+      beforeEach(async () => {
+        doc = await fetch('/test/testfiles/editors/substation/Process.scd')
+          .then(response => response.text())
+          .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+        parent = <MockWizardEditor>(
+          await fixture(
+            html`<mock-wizard-editor
+              ><process-editor
+                .element=${doc.querySelector(
+                  'Process[name="ProcessGenConduct"]'
+                )}
+              ></process-editor
+            ></mock-wizard-editor>`
+          )
+        );
+
+        element = parent.querySelector('process-editor');
+
+        await parent.updateComplete;
+      });
+
+      it('Should open the same wizard for the second time', async () => {
+        await openAndCancelMenu(parent, element!);
+        await openAndCancelMenu(parent, element!);
+      });
+    });
   });
 });