feat(wizards): add function type create wizards (openscd#768)

* feat(wizards/function): add edit wizard (openscd#762) * feat(wizards/function): add edit wizard * test(editors/substation/function-editor): make linter happy * refactor(wizards/function): review comments * feat(wizards/subfunction): add edit wizard (openscd#763) * feat(wizards/eqfunction): add edit wizard (openscd#764) * feat(wizards/eqfunction): add edit wizard * refactor(wizards/eqfunction): review comments * feat(wizards/eqsubfunction): add edit wizard (openscd#765) * feat(wizards/eqsubfunction): add edit wizard * refactor(wizards/eqsubfunction): review comments
sprinteins · May 23, 2022 · 6e9c928 · 6e9c928
1 parent ce9dea1
commit 6e9c928
Show file tree

Hide file tree

Showing 26 changed files with 1,237 additions and 35 deletions.
diff --git a/src/editors/substation/eq-function-editor.ts b/src/editors/substation/eq-function-editor.ts
@@ -54,6 +54,11 @@ export class EqFunctionEditor extends LitElement {
   @query('mwc-menu') addMenu!: Menu;
   @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
 
+  private openEditWizard(): void {
+    const wizard = wizards['EqFunction'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -116,6 +121,11 @@ export class EqFunctionEditor extends LitElement {
       icon="functions"
       secondary
       highlighted
+      ><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"
@@ -144,6 +154,11 @@ export class EqFunctionEditor extends LitElement {
   }
 
   static styles = css`
+    abbr {
+      text-decoration: none;
+      border-bottom: none;
+    }
+
     .container.lnode {
       display: grid;
       grid-gap: 12px;

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/editors/substation/function-editor.ts b/src/editors/substation/function-editor.ts
@@ -50,6 +50,11 @@ export class FunctionEditor extends LitElement {
   @query('mwc-menu') addMenu!: Menu;
   @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
 
+  private openEditWizard(): void {
+    const wizard = wizards['Function'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -109,6 +114,11 @@ export class FunctionEditor extends LitElement {
       icon="functions"
       secondary
       highlighted
+      ><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"
@@ -137,6 +147,11 @@ export class FunctionEditor extends LitElement {
   }
 
   static styles = css`
+    abbr {
+      text-decoration: none;
+      border-bottom: none;
+    }
+
     .container.lnode {
       display: grid;
       grid-gap: 12px;

diff --git a/src/editors/substation/sub-function-editor.ts b/src/editors/substation/sub-function-editor.ts
@@ -54,6 +54,11 @@ export class SubFunctionEditor extends LitElement {
   @query('mwc-menu') addMenu!: Menu;
   @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
 
+  private openEditWizard(): void {
+    const wizard = wizards['SubFunction'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -109,6 +114,11 @@ export class SubFunctionEditor 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"
@@ -137,6 +147,11 @@ export class SubFunctionEditor extends LitElement {
   }
 
   static styles = css`
+    abbr {
+      text-decoration: none;
+      border-bottom: none;
+    }
+
     .container.lnode {
       display: grid;
       grid-gap: 12px;

diff --git a/src/wizards/eqfunction.ts b/src/wizards/eqfunction.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 updateEqFunctionAction(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 editEqFunctionWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const reservedNames: string[] = getChildElementsByTagName(
+    element.parentElement!,
+    'EqFunction'
+  )
+    .filter(sibling => sibling !== element)
+    .map(sibling => sibling.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: 'EqFunction' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateEqFunctionAction(element),
+      },
+      content: [
+        ...contentFunctionWizard({
+          name,
+          desc,
+          type,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}
+
 function createEqFunctionAction(parent: Element): WizardActor {
   return (inputs: WizardInputElement[]) => {
     const eqFunctionAttrs: Record<string, string | null> = {};

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/function.ts b/src/wizards/function.ts
@@ -2,8 +2,11 @@ import { html, TemplateResult } from 'lit-element';
 import { get, translate } from 'lit-translate';
 
 import {
+  cloneElement,
   createElement,
+  getChildElementsByTagName,
   getValue,
+  SimpleAction,
   Wizard,
   WizardActor,
   WizardInputElement,
@@ -44,6 +47,61 @@ export function contentFunctionWizard(
   ];
 }
 
+function updateFunctionAction(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 editFunctionWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const reservedNames: string[] = getChildElementsByTagName(
+    element.parentElement!,
+    'Function'
+  )
+    .filter(sibling => sibling !== element)
+    .map(sibling => sibling.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: 'Function' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateFunctionAction(element),
+      },
+      content: [
+        ...contentFunctionWizard({
+          name,
+          desc,
+          type,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}
+
 function createFunctionAction(parent: Element): WizardActor {
   return (inputs: WizardInputElement[]) => {
     const functionAttrs: Record<string, string | null> = {};