feat(wizards/reportcontrol): access edit wizard from select wizard

src/foundation.ts

@@ -235,6 +235,12 @@ export function newWizardEvent(
   });
 }
 
+export function newSubWizardEvent(
+  wizardOrFactory?: Wizard | WizardFactory
+): WizardEvent {
+  return newWizardEvent(wizardOrFactory, { detail: { subwizard: true } });
+}
+
 type InfoEntryKind = 'info' | 'warning' | 'error';
 
 export type LogEntryType =

src/wizards/reportcontrol.ts

@@ -3,6 +3,9 @@ import { get, translate } from 'lit-translate';
 
 import '@material/mwc-button';
 import '@material/mwc-list/mwc-list-item';
+import { List } from '@material/mwc-list';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
+import { SingleSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
 
 import '../wizard-textfield.js';
 import '../wizard-select.js';
@@ -15,6 +18,8 @@ import {
   getValue,
   identity,
   isPublic,
+  newSubWizardEvent,
+  selector,
   SimpleAction,
   Wizard,
   WizardActor,
@@ -230,6 +235,17 @@ export function selectReportControlWizard(element: Element): Wizard {
       title: get('wizard.title.select', { tagName: 'ReportControl' }),
       content: [
         html`<filtered-list
+          @selected=${(e: SingleSelectedEvent) => {
+            const identity = (<ListItemBase>(<List>e.target).selected).value;
+            const reportControl = element.querySelector(
+              selector('ReportControl', identity)
+            );
+            if (!reportControl) return;
+
+            e.target?.dispatchEvent(
+              newSubWizardEvent(() => editReportControlWizard(reportControl))
+            );
+          }}
           >${reportControls.map(
             reportControl =>
               html`<mwc-list-item twoline value="${identity(reportControl)}"

src/zeroline-pane.ts

@@ -19,7 +19,7 @@ import './zeroline/ied-editor.js';
 import { Settings } from './Setting.js';
 import { communicationMappingWizard } from './wizards/commmap-wizards.js';
 import { gooseIcon, smvIcon, reportIcon } from './icons.js';
-import { isPublic, newWizardEvent } from './foundation.js';
+import { isPublic, newSubWizardEvent, newWizardEvent } from './foundation.js';
 import { selectGseControlWizard } from './wizards/gsecontrol.js';
 import { wizards } from './wizards/wizard-library.js';
 import { getAttachedIeds } from './zeroline/foundation.js';
@@ -65,8 +65,11 @@ export class ZerolinePane extends LitElement {
   }
 
   openReportControlSelection(): void {
-    const wizard = selectReportControlWizard(this.doc.documentElement);
-    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+    this.dispatchEvent(
+      newSubWizardEvent(() =>
+        selectReportControlWizard(this.doc.documentElement)
+      )
+    );
   }
 
   openGseControlSelection(): void {

src/zeroline/ied-editor.ts

@@ -14,7 +14,7 @@ import { Fab } from '@material/mwc-fab';
 import '../action-icon.js';
 import { createClientLnWizard } from '../wizards/clientln.js';
 import { gooseIcon, smvIcon, reportIcon } from '../icons.js';
-import { newWizardEvent } from '../foundation.js';
+import { newSubWizardEvent, newWizardEvent } from '../foundation.js';
 import { selectGseControlWizard } from '../wizards/gsecontrol.js';
 import { selectSampledValueControlWizard } from '../wizards/sampledvaluecontrol.js';
 import { selectReportControlWizard } from '../wizards/reportcontrol.js';
@@ -34,8 +34,9 @@ export class IedEditor extends LitElement {
   @query('.connectreport') connectReport!: Fab;
 
   private openReportControlSelection(): void {
-    const wizard = selectReportControlWizard(this.element);
-    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+    this.dispatchEvent(
+      newSubWizardEvent(() => selectReportControlWizard(this.element))
+    );
   }
 
   private openGseControlSelection(): void {

test/integration/wizards/reportcontrol-wizarding-editing.test.ts

@@ -0,0 +1,143 @@
+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 { FilteredList } from '../../../src/filtered-list.js';
+import { WizardTextField } from '../../../src/wizard-textfield.js';
+import { selectReportControlWizard } from '../../../src/wizards/reportcontrol.js';
+
+describe('Wizards for SCL element ReportControl', () => {
+  let doc: XMLDocument;
+  let element: MockWizardEditor;
+
+  beforeEach(async () => {
+    element = await fixture(html`<mock-wizard-editor></mock-wizard-editor>`);
+    doc = await fetch('/test/testfiles/wizards/reportcontrol.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  });
+
+  describe('define a select wizards that ', () => {
+    let reportControlList: FilteredList;
+
+    beforeEach(async () => {
+      const wizard = selectReportControlWizard(doc.documentElement);
+      element.workflow.push(() => wizard);
+      await element.requestUpdate();
+
+      reportControlList = <FilteredList>(
+        element.wizardUI.dialog?.querySelector('filtered-list')
+      );
+      await reportControlList.updateComplete;
+    });
+
+    it('shows all ReportControl elements within a project', () =>
+      expect(reportControlList.items.length).to.equal(
+        doc.querySelectorAll('ReportControl').length
+      ));
+
+    it('allows to filter ReportControl elements per IED', async () => {
+      const wizard = selectReportControlWizard(doc.querySelector('IED')!);
+      element.workflow.unshift();
+      element.workflow.push(() => wizard);
+      await element.requestUpdate();
+
+      expect(reportControlList.items.length).to.equal(
+        doc.querySelector('IED')!.querySelectorAll('ReportControl').length
+      );
+    });
+
+    it('opens edit wizard for selected ReportControl element on click', async () => {
+      const gse2 = <ListItemBase>reportControlList.items[1];
+      gse2.click();
+      await new Promise(resolve => setTimeout(resolve, 20)); // await animation
+
+      const nameField = <WizardTextField>(
+        element.wizardUI.dialog?.querySelector('wizard-textfield[label="name"]')
+      );
+      await nameField.requestUpdate();
+
+      expect(nameField.value).to.equal(
+        doc.querySelectorAll('ReportControl')[1].getAttribute('name')
+      );
+    });
+  });
+
+  describe('defines an edit wizard that', () => {
+    let nameField: WizardTextField;
+    let secondaryAction: HTMLElement;
+    let primaryAction: HTMLElement;
+    let reportControl: Element;
+
+    beforeEach(async () => {
+      reportControl = doc.querySelector('IED')!;
+      element.workflow.push(() => selectReportControlWizard(reportControl));
+      await element.requestUpdate();
+      await new Promise(resolve => setTimeout(resolve, 20)); // await animation
+
+      const report = <ListItemBase>(
+        (<FilteredList>element.wizardUI.dialog?.querySelector('filtered-list'))
+          .items[0]
+      );
+      report.click();
+      await new Promise(resolve => setTimeout(resolve, 20)); // await animation
+
+      nameField = element.wizardUI.dialog!.querySelector(
+        'wizard-textfield[label="name"]'
+      )!;
+      primaryAction = <HTMLElement>(
+        element.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="primaryAction"]'
+        )
+      );
+      secondaryAction = <HTMLElement>(
+        element.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="secondaryAction"]'
+        )
+      );
+      await nameField.updateComplete;
+    });
+
+    it('rejects name attribute starting with decimals', async () => {
+      nameField.value = '4adsasd';
+      primaryAction.click();
+      expect(reportControl.getAttribute('name')).to.not.equal('4adsasd');
+    });
+
+    it('edits name attribute on primary action', async () => {
+      nameField.value = 'myNewName';
+      primaryAction.click();
+      expect(reportControl.getAttribute('name')).to.not.equal('myNewName');
+    });
+
+    it('dynamically updates wizards after attribute change', async () => {
+      nameField.value = 'myNewName';
+      primaryAction.click();
+
+      await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+      const report = <ListItemBase>(
+        (<FilteredList>element.wizardUI.dialog?.querySelector('filtered-list'))
+          .items[0]
+      );
+
+      expect(report.innerHTML).to.contain('myNewName');
+    });
+
+    it('returns back to its starting wizard on secondary action', async () => {
+      secondaryAction.click();
+
+      await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+      const report = <ListItemBase>(
+        (<FilteredList>element.wizardUI.dialog?.querySelector('filtered-list'))
+          .items[0]
+      );
+
+      expect(report.innerHTML).to.contain('ReportCb');
+    });
+  });
+});