feat(wizards/eqsubfunction): add edit wizard (#765)

* feat(wizards/eqsubfunction): add edit wizard * refactor(wizards/eqsubfunction): review comments
openscd · May 23, 2022 · e5e1efe · e5e1efe
1 parent 81bfd7a
commit e5e1efe
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 21 deletions.
diff --git a/src/editors/substation/eq-sub-function-editor.ts b/src/editors/substation/eq-sub-function-editor.ts
@@ -53,6 +53,11 @@ export class EqSubFunctionEditor extends LitElement {
   @query('mwc-menu') addMenu!: Menu;
   @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
 
+  private openEditWizard(): void {
+    const wizard = wizards['EqSubFunction'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -111,6 +116,11 @@ export class EqSubFunctionEditor extends LitElement {
 
   render(): TemplateResult {
     return html`<action-pane label="${this.header}" icon="functions" secondary
+      ><abbr slot="action" title="${translate('edit')}">
+        <mwc-icon-button
+          icon="edit"
+          @click=${() => this.openEditWizard()}
+        ></mwc-icon-button> </abbr
       ><abbr slot="action" title="${translate('remove')}">
         <mwc-icon-button
           icon="delete"
@@ -139,6 +149,11 @@ export class EqSubFunctionEditor extends LitElement {
   }
 
   static styles = css`
+    abbr {
+      text-decoration: none;
+      border-bottom: none;
+    }
+
     .container.lnode {
       display: grid;
       grid-gap: 12px;

diff --git a/src/wizards/eqsubfunction.ts b/src/wizards/eqsubfunction.ts
@@ -1,14 +1,72 @@
 import { get } from 'lit-translate';
 
 import {
+  cloneElement,
   createElement,
+  getChildElementsByTagName,
   getValue,
+  SimpleAction,
   Wizard,
   WizardActor,
   WizardInputElement,
 } from '../foundation.js';
 import { contentFunctionWizard } from './function.js';
 
+function updateEqSubFunctionAction(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): SimpleAction[] => {
+    const functionAttrs: Record<string, string | null> = {};
+    const functionKeys = ['name', 'desc', 'type'];
+    functionKeys.forEach(key => {
+      functionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+    });
+
+    if (
+      functionKeys.some(key => functionAttrs[key] !== element.getAttribute(key))
+    ) {
+      const newElement = cloneElement(element, functionAttrs);
+      return [
+        {
+          old: { element },
+          new: { element: newElement },
+        },
+      ];
+    }
+
+    return [];
+  };
+}
+
+export function editEqSubFunctionWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const reservedNames: string[] = getChildElementsByTagName(
+    element.parentElement!,
+    'EqSubFunction'
+  )
+    .filter(sibling => sibling !== element)
+    .map(sibling => sibling.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: 'EqSubFunction' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateEqSubFunctionAction(element),
+      },
+      content: [
+        ...contentFunctionWizard({
+          name,
+          desc,
+          type,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}
+
 function createEqSubFunctionAction(parent: Element): WizardActor {
   return (inputs: WizardInputElement[]) => {
     const eqSubFunctionAttrs: Record<string, string | null> = {};

diff --git a/src/wizards/wizard-library.ts b/src/wizards/wizard-library.ts
@@ -26,7 +26,10 @@ import { createDaWizard } from './da.js';
 import { editDAIWizard } from './dai.js';
 import { editGseControlWizard } from './gsecontrol.js';
 import { createFunctionWizard, editFunctionWizard } from './function.js';
-import { createEqSubFunctionWizard } from './eqsubfunction.js';
+import {
+  createEqSubFunctionWizard,
+  editEqSubFunctionWizard,
+} from './eqsubfunction.js';
 import { createEqFunctionWizard, editEqFunctionWizard } from './eqfunction.js';
 import {
   createSubFunctionWizard,
@@ -198,7 +201,7 @@ export const wizards: Record<
     create: createEqFunctionWizard,
   },
   EqSubFunction: {
-    edit: emptyWizard,
+    edit: editEqSubFunctionWizard,
     create: createEqSubFunctionWizard,
   },
   ExtRef: {

diff --git a/test/integration/editors/substation/eq-sub-function-editor-wizarding-editing.test.ts b/test/integration/editors/substation/eq-sub-function-editor-wizarding-editing.test.ts
@@ -91,6 +91,67 @@ describe('eq-sub-function-editor wizarding editing integration', () => {
     });
   });
 
+  describe('open edit wizard', () => {
+    let nameField: WizardTextField;
+    let primaryAction: HTMLElement;
+
+    beforeEach(async () => {
+      element!.element = doc.querySelector(
+        'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubSubFunction"]'
+      )!;
+
+      (<HTMLElement>(
+        element?.shadowRoot?.querySelector('mwc-icon-button[icon="edit"]')
+      )).click();
+      await parent.updateComplete;
+
+      nameField = <WizardTextField>(
+        parent.wizardUI.dialog?.querySelector('wizard-textfield[label="name"]')
+      );
+
+      primaryAction = <HTMLElement>(
+        parent.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="primaryAction"]'
+        )
+      );
+    });
+
+    it('does not update EqSubFunction if name attribute is not unique', async () => {
+      expect(
+        doc.querySelectorAll(
+          'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqFunc2"]'
+        )
+      ).to.lengthOf(1);
+
+      nameField.value = 'myEqFunc2';
+      primaryAction.click();
+      await parent.updateComplete;
+
+      expect(
+        doc.querySelectorAll(
+          'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqFunc2"]'
+        )
+      ).to.lengthOf(1);
+    });
+
+    it('does update EqSubFunction if name attribute is unique', async () => {
+      nameField.value = 'someNewFunction';
+      await parent.updateComplete;
+      primaryAction.click();
+
+      expect(
+        doc.querySelector(
+          'ConductingEquipment[name="QA1"] EqSubFunction[name="someNewFunction"]'
+        )
+      ).to.exist;
+      expect(
+        doc.querySelector(
+          'ConductingEquipment[name="QA1"] EqSubFunction[name="myEqSubSubFunction"]'
+        )
+      ).to.not.exist;
+    });
+  });
+
   describe('has a delete icon button that', () => {
     let deleteButton: HTMLElement;
 

diff --git a/test/testfiles/zeroline/functions.scd b/test/testfiles/zeroline/functions.scd
@@ -52,42 +52,43 @@
 					<EqFunction name="myEqFuncQA1" desc="funcForQA1" type="eqFuncType">
                         <EqSubFunction name="myEqSubFunc">
     						<EqSubFunction name="myEqSubSubFunction" desc="my desc" type="sometype"/>
+							<EqSubFunction name="myEqFunc2"/>
     					</EqSubFunction>
                     </EqFunction>
                 </ConductingEquipment>
     			<ConductingEquipment name="QB1" type="DIS">
                     <EqFunction name="myEqFuncQB1">
                         <EqSubFunction name="myEqSubFunc">
-							<LNode iedName="None" prefix="DC" lnClass="XSWI" lnInst="1"/>
-							<LNode iedName="None" prefix="DC" lnClass="CSWI" lnInst="1"/>
-							<LNode iedName="None" prefix="DC" lnClass="CILO" lnInst="1"/>
-						</EqSubFunction>
+    						<LNode iedName="None" prefix="DC" lnClass="XSWI" lnInst="1"/>
+    						<LNode iedName="None" prefix="DC" lnClass="CSWI" lnInst="1"/>
+    						<LNode iedName="None" prefix="DC" lnClass="CILO" lnInst="1"/>
+    					</EqSubFunction>
                     </EqFunction>
                 </ConductingEquipment>
     			<ConductingEquipment name="QB2" type="DIS">
                     <EqFunction name="myEqFuncQB1">
                         <LNode iedName="None" prefix="DC" lnClass="XSWI" lnInst="1"/>
-						<LNode iedName="None" prefix="DC" lnClass="CSWI" lnInst="1"/>
-						<LNode iedName="None" prefix="DC" lnClass="CILO" lnInst="1"/>
+    					<LNode iedName="None" prefix="DC" lnClass="CSWI" lnInst="1"/>
+    					<LNode iedName="None" prefix="DC" lnClass="CILO" lnInst="1"/>
                     </EqFunction>
                 </ConductingEquipment>
     			<ConductingEquipment name="QC9" type="DIS">
-					<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
-					<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
-					<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
+    				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
+    				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
+    				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
                 </ConductingEquipment>
     		</Bay>
-			<Bay name="Q01" desc="Bay with LNode">
-				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
-				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
-				<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
+    		<Bay name="Q01" desc="Bay with LNode">
+    			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
+    			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
+    			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
             </Bay>
     	</VoltageLevel>
-		<VoltageLevel name="J1" desc="Voltage Level with LNode">
-			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
-			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
-			<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
-		</VoltageLevel>
+    	<VoltageLevel name="J1" desc="Voltage Level with LNode">
+    		<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="XCBR" lnInst="1"/>
+    		<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CSWI" lnInst="1"/>
+    		<LNode iedName="IED1" ldInst="CircuitBreaker_CB1" prefix="" lnClass="CILO" lnInst="1"/>
+    	</VoltageLevel>
     </Substation>
     <IED name="IED1" type="DummyIED" manufacturer="DummyManufactorer" configVersion="1" originalSclVersion="2007" originalSclRevision="B" owner="DummyOwner">
     	<Services>
@@ -517,4 +518,5 @@
     		<EnumVal ord="8">process</EnumVal>
     	</EnumType>
     </DataTypeTemplates>
+
 </SCL>
diff --git a/test/unit/editors/substation/__snapshots__/eq-sub-function-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/eq-sub-function-editor.test.snap.js
@@ -8,6 +8,13 @@ snapshots["web component rendering EqSubFunction element with complete attribute
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"
@@ -61,6 +68,13 @@ snapshots["web component rendering EqSubFunction element with missing desc and t
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"
@@ -105,6 +119,8 @@ snapshots["web component rendering EqSubFunction element with missing desc and t
   </abbr>
   <eq-sub-function-editor>
   </eq-sub-function-editor>
+  <eq-sub-function-editor>
+  </eq-sub-function-editor>
 </action-pane>
 `;
 /* end snapshot web component rendering EqSubFunction element with missing desc and type attribute looks like the latest snapshot */
@@ -116,6 +132,13 @@ snapshots["web component rendering EqSubFunction element with existing LNode chi
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"

diff --git a/test/unit/wizards/__snapshots__/eqsubfunction.test.snap.js b/test/unit/wizards/__snapshots__/eqsubfunction.test.snap.js
@@ -50,3 +50,50 @@ snapshots["Wizards for SCL EqSubFunction element define an create wizard that lo
 `;
 /* end snapshot Wizards for SCL EqSubFunction element define an create wizard that looks like the the latest snapshot */
 
+snapshots["Wizards for SCL EqSubFunction element define an edit wizard that looks like the the latest snapshot"] = 
+`<mwc-dialog
+  defaultaction="close"
+  heading="[wizard.title.edit]"
+  open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
+>
+  <div id="wizard-content">
+    <wizard-textfield
+      dialoginitialfocus=""
+      helper="[scl.name]"
+      label="name"
+      required=""
+      validationmessage="[textfield.required]"
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      helper="[scl.desc]"
+      label="desc"
+      nullable=""
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      helper="[scl.type]"
+      label="type"
+      nullable=""
+    >
+    </wizard-textfield>
+  </div>
+  <mwc-button
+    dialogaction="close"
+    label="[cancel]"
+    slot="secondaryAction"
+    style="--mdc-theme-primary: var(--mdc-theme-error)"
+  >
+  </mwc-button>
+  <mwc-button
+    icon="save"
+    label="[save]"
+    slot="primaryAction"
+    trailingicon=""
+  >
+  </mwc-button>
+</mwc-dialog>
+`;
+/* end snapshot Wizards for SCL EqSubFunction element define an edit wizard that looks like the the latest snapshot */
+