feat(iededitor): Added implementation to change enum values in IED Ed…

…itor.
sprinteins · Apr 28, 2022 · 865f7ab · 865f7ab
1 parent ffe7859
commit 865f7ab
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 59 deletions.
diff --git a/src/editors/ied/foundation/foundation.ts b/src/editors/ied/foundation/foundation.ts
@@ -1,21 +1,27 @@
 import { html, TemplateResult } from "lit-html";
 import { translate } from "lit-translate";
 
+import '@material/mwc-list/mwc-list-item';
+
 import '../../../../src/wizard-textfield.js';
 import '../../../../src/wizard-select.js';
 
 export interface CustomField {
-  render(value: string): TemplateResult;
+  render(
+    element: Element,
+    instanceElement?: Element
+  ): TemplateResult;
 }
 
-const daiValidationTypes = ['BOOLEAN', 'INT8', 'INT16', 'INT24', 'INT32', 'INT64',
+const daiValidationTypes = ['BOOLEAN', 'Enum', 'INT8', 'INT16', 'INT24', 'INT32', 'INT64',
   'INT128', 'INT8U', 'INT16U', 'INT24U', 'INT32U', 'FLOAT32', 'FLOAT64', 'VisString32', 'VisString64',
   'VisString65', 'VisString129', 'VisString255'] as const;
 export type DaiValidationTypes = typeof daiValidationTypes[number];
 
 export function getCustomField(): Record<DaiValidationTypes, CustomField> {
   return {
     BOOLEAN: booleanField(),
+    Enum: enumField(),
     INT8: integerField('INT8', -(2**8), 2**8-1),
     INT16: integerField('INT16', -(2**16), 2**16-1),
     INT24: integerField('INT24', -(2**24), 2**24-1),
@@ -37,10 +43,10 @@ export function getCustomField(): Record<DaiValidationTypes, CustomField> {
 
   function booleanField(): CustomField {
     return {
-      render: (value: string) => {
+      render: (element: Element, instanceElement?: Element) => {
         return html`<wizard-select
           label="Val"
-          .maybeValue=${value}
+          .maybeValue=${getValue(instanceElement)}
           fixedMenuPosition
         >
           <mwc-list-item value="true">true</mwc-list-item>
@@ -50,48 +56,85 @@ export function getCustomField(): Record<DaiValidationTypes, CustomField> {
     }
   }
 
+  function enumField(): CustomField {
+    return {
+      render: (element: Element, instanceElement?: Element) => {
+        return html`<wizard-select
+          label="val"
+          .maybeValue=${getValue(instanceElement)}
+          fixedMenuPosition
+        >
+        ${getEnumValues(element).map(
+          enumValue => {
+            return html`<mwc-list-item value="${enumValue}">${enumValue}</mwc-list-item>`;
+          })}
+        </wizard-select>`;
+      }
+    }
+  }
+
   function integerField(type: string, min: number, max: number): CustomField {
     return {
-      render: (value: string) => {
+      render: (element: Element, instanceElement?: Element) => {
         return html`<wizard-textfield
           label="Val"
-          .maybeValue=${value}
+          .maybeValue=${getValue(instanceElement)}
           helper="${translate('dai.wizard.valueHelper', { type })}"
           type="number"
           min=${min}
-          max=${max}
-        ></wizard-textfield>`;
+          max=${max}>
+        </wizard-textfield>`;
       }
     }
   }
 
   function floatField(type: string, min: number, max: number): CustomField {
     return {
-      render: (value: string) => {
+      render: (element: Element, instanceElement?: Element) => {
         return html`<wizard-textfield
           label="Val"
-          .maybeValue=${value}
+          .maybeValue=${getValue(instanceElement)}
           helper="${translate('dai.wizard.valueHelper', { type })}"
           type="number"
           min=${min}
           max=${max}
-          step="0.1"
-        ></wizard-textfield>`;
+          step="0.1">
+        </wizard-textfield>`;
       }
     }
   }
 
   function stringField(type: string, maxNrOfCharacters: number): CustomField {
     return {
-      render: (value: string) => {
+      render: (element: Element, instanceElement?: Element) => {
         return html`<wizard-textfield
           label="Val"
-          .maybeValue=${value}
+          .maybeValue=${getValue(instanceElement)}
           helper="${translate('dai.wizard.valueHelper', { type })}"
           maxLength=${maxNrOfCharacters}
-          type="text"
-        ></wizard-textfield>`;
+          type="text">
+        </wizard-textfield>`;
       }
     }
   }
-}
+
+  function getValue(instanceElement?: Element): string {
+    return instanceElement!.querySelector('Val')?.textContent?.trim() ?? '';
+  }
+
+  function getEnumValues(element: Element): string[] {
+    const daType = element.getAttribute('type');
+    const values: string[] = [];
+
+    // No retrieve all the EnumVal Element to process these as values for the Select Element.
+    // Sort them on the attribute 'ord' and filter the ones that don't have a value.
+    Array.from(element.ownerDocument.querySelectorAll(`EnumType[id="${daType}"] > EnumVal`))
+      .filter(enumValElement => enumValElement.textContent && enumValElement.textContent !== "")
+      .sort((eve1, eve2) => parseInt(eve1.getAttribute('ord') ?? "0") - parseInt(eve2.getAttribute('ord') ?? "0"))
+      .forEach(enumValElement => {
+        values.push(enumValElement.textContent ?? '');
+      });
+
+    return values;
+  }
+}
diff --git a/src/wizards/dai.ts b/src/wizards/dai.ts
@@ -36,10 +36,9 @@ export function renderDAIWizard(
   instanceElement?: Element
 ): TemplateResult[] {
   const bType = element.getAttribute('bType')!;
-  const value = instanceElement!.querySelector('Val')?.textContent?.trim() ?? '';
 
   return [
-    html`${getCustomField()[<DaiValidationTypes>bType].render(value)}`,
+    html`${getCustomField()[<DaiValidationTypes>bType].render(element, instanceElement)}`,
   ];
 }
 

diff --git a/test/testfiles/valid2007B4ForDAIValidation.scd b/test/testfiles/valid2007B4ForDAIValidation.scd
@@ -141,6 +141,9 @@
 							<DAI name="booleantest">
 								<Val>true</Val>
 							</DAI>
+							<DAI name="enumtest">
+								<Val>blocked</Val>
+							</DAI>
 							<DAI name="int8test">
 								<Val>5</Val>
 							</DAI>
@@ -206,7 +209,7 @@
 							</DAI>
 						</DOI>
 					</LN>
-					<LN prefix="CB" lnClass="XCBR" inst="2" lnType="Dummy.XCBR1">						
+					<LN prefix="CB" lnClass="XCBR" inst="2" lnType="Dummy.XCBR1">
 						<DOI name="Pos">
 							<DAI name="ctlModel">
 								<Val>status-only</Val>
@@ -569,6 +572,7 @@
 			<DA fc="ST" name="stVal" bType="Enum" type="Dummy_Beh" />
 			<DA fc="ST" name="q" bType="Quality" />
 			<DA fc="ST" name="t" bType="Timestamp" />
+      <DA fc="ST" name="enumtest" bType="Enum" type="Dummy_Beh" />
 			<DA fc="ST" name="int8test" bType="BOOLEAN" />
 			<DA fc="ST" name="int8test" bType="INT8" />
 			<DA fc="ST" name="int16test" bType="INT16" />
@@ -742,4 +746,4 @@
 			<EnumVal ord="8">process</EnumVal>
 		</EnumType>
 	</DataTypeTemplates>
-</SCL>
+</SCL>
diff --git a/test/unit/editors/ied/foundation/__snapshots__/foundation.test.snap.js b/test/unit/editors/ied/foundation/__snapshots__/foundation.test.snap.js
@@ -56,6 +56,61 @@ snapshots["foundation getCustomField renders a BOOLEAN field correctly"] =
 `;
 /* end snapshot foundation getCustomField renders a BOOLEAN field correctly */
 
+snapshots["foundation getCustomField renders a ENUM field correctly"] = 
+`<div style="display: flex; flex-direction: row;">
+  <div style="flex: auto;">
+    <div class="mdc-select mdc-select--filled">
+      <input
+        class="formElement"
+        hidden=""
+      >
+      <div
+        aria-autocomplete="none"
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-invalid="false"
+        aria-labelledby="label"
+        aria-required="false"
+        class="mdc-select__anchor"
+        role="combobox"
+        tabindex="0"
+      >
+        <span class="mdc-select__ripple">
+        </span>
+        <span
+          class="mdc-floating-label mdc-floating-label--float-above"
+          id="label"
+        >
+          val
+        </span>
+        <span class="mdc-select__selected-text-container">
+          <span class="mdc-select__selected-text">
+            blocked
+          </span>
+        </span>
+        <span class="mdc-select__dropdown-icon">
+        </span>
+        <span class="mdc-line-ripple">
+        </span>
+      </div>
+      <mwc-menu
+        activatable=""
+        class="mdc-menu mdc-menu-surface mdc-select__menu"
+        innerrole="listbox"
+        wrapfocus=""
+      >
+        <slot>
+        </slot>
+      </mwc-menu>
+    </div>
+  </div>
+  <div style="display: flex; align-items: center; height: 56px;">
+  </div>
+</div>
+`;
+/* end snapshot foundation getCustomField renders a ENUM field correctly */
+
 snapshots["foundation getCustomField renders a INT8 field correctly"] = 
 `<div style="display: flex; flex-direction: row;">
   <div style="flex: auto;">