feat(wizard/dai): Set/Update a value for a type 'Timestamp' of Data Attribute Instance (openscd#959)

* Added functionality to add/edit Timestamp values by the Data Attributes.
* Added some extra test for DAI Wizard.
* Review comment processed.

Author: Dennis Labordus

src/editors/ied/da-container.ts

@@ -15,7 +15,10 @@ import { IconButtonToggle } from '@material/mwc-icon-button-toggle';
 import '../../action-pane.js';
 import { getNameAttribute, newWizardEvent } from '../../foundation.js';
 import { wizards } from '../../wizards/wizard-library.js';
-import { DaiValidationTypes, getCustomField } from './foundation/foundation.js';
+import {
+  DaiFieldTypes,
+  getCustomField,
+} from '../../wizards/foundation/dai-field-type.js';
 import { createDaInfoWizard } from './da-wizard.js';
 import {
   Container,
@@ -108,10 +111,10 @@ export class DAContainer extends Container {
       ['LN0', 'LN'].includes(element.tagName)
     )[0];
     const templateStructure = this.getTemplateStructure();
-    // First determine where to start creating new elements (DOI/SDI/DOI)
+    // First determine where to start creating new elements (DOI/SDI/DAI)
     const [parentElement, uninitializedTemplateStructure] =
       determineUninitializedStructure(lnElement, templateStructure);
-    // Next create all missing elements (DOI/SDI/DOI)
+    // Next create all missing elements (DOI/SDI/DAI)
     const newElement = initializeElements(uninitializedTemplateStructure);
 
     if (newElement) {
@@ -172,17 +175,13 @@ export class DAContainer extends Container {
                 ${this.instanceElement
                   ? html`<mwc-icon-button
                       icon="edit"
-                      .disabled="${!getCustomField()[
-                        <DaiValidationTypes>bType
-                      ]}"
+                      .disabled="${!getCustomField()[<DaiFieldTypes>bType]}"
                       @click=${() => this.openEditWizard()}
                     >
                     </mwc-icon-button>`
                   : html`<mwc-icon-button
                       icon="add"
-                      .disabled="${!getCustomField()[
-                        <DaiValidationTypes>bType
-                      ]}"
+                      .disabled="${!getCustomField()[<DaiFieldTypes>bType]}"
                       @click=${() => this.openCreateWizard()}
                     >
                     </mwc-icon-button>`}
@@ -215,7 +214,7 @@ export class DAContainer extends Container {
       font-weight: 300;
       margin: 0px;
       padding-left: 0.3em;
-      word-break: break-word; 
+      word-break: break-word;
       white-space: pre-wrap;
     }
 

src/editors/ied/foundation/foundation.ts

@@ -1,61 +1,78 @@
 import { html, TemplateResult } from 'lit-element';
-import { nothing } from "lit-html";
+import { nothing } from 'lit-html';
 import { get } from 'lit-translate';
-import { DaiValidationTypes, getCustomField } from '../editors/ied/foundation/foundation.js';
+
+import { DaiFieldTypes, getCustomField } from './foundation/dai-field-type.js';
 
 import '../../src/wizard-textfield.js';
 
 import {
   ComplexAction,
   EditorAction,
-  getValue,
   Wizard,
   WizardActor,
   WizardInputElement,
 } from '../foundation.js';
-import { SCL_NAMESPACE } from "../schemas.js";
+import { SCL_NAMESPACE } from '../schemas.js';
 
-export function updateValue(instanceElement: Element): WizardActor {
+export function updateValue(
+  element: Element,
+  instanceElement: Element
+): WizardActor {
   return (inputs: WizardInputElement[]): EditorAction[] => {
-    const newValue = getValue(inputs.find(i => i.value)!)!;
-    const name = instanceElement.getAttribute('name');
+    const bType = element.getAttribute('bType')!;
+    const newValue = getCustomField()[<DaiFieldTypes>bType].value(inputs);
 
+    const name = instanceElement.getAttribute('name');
     const complexAction: ComplexAction = {
       actions: [],
-      title: get('dai.action.updatedai', {daiName: name!}),
+      title: get('dai.action.updatedai', { daiName: name! }),
     };
 
     const oldVal = instanceElement.querySelector('Val');
     if (oldVal) {
       const newVal = <Element>oldVal.cloneNode(false);
       newVal.textContent = newValue;
-      complexAction.actions.push({old: {element: oldVal}, new: {element: newVal}});
+      complexAction.actions.push({
+        old: { element: oldVal },
+        new: { element: newVal },
+      });
     } else {
-      const newVal = instanceElement.ownerDocument.createElementNS(SCL_NAMESPACE, 'Val');
+      const newVal = instanceElement.ownerDocument.createElementNS(
+        SCL_NAMESPACE,
+        'Val'
+      );
       newVal.textContent = newValue;
-      complexAction.actions.push({new: {parent: instanceElement, element: newVal}});
+      complexAction.actions.push({
+        new: { parent: instanceElement, element: newVal },
+      });
     }
     return [complexAction];
   };
 }
 
-export function createValue(parent: Element, newElement: Element, instanceElement: Element): WizardActor {
+export function createValue(
+  parent: Element,
+  element: Element,
+  newElement: Element,
+  instanceElement: Element
+): WizardActor {
   return (inputs: WizardInputElement[]): EditorAction[] => {
-    const newValue = getValue(inputs.find(i => i.value)!)!;
-    const name = instanceElement.getAttribute('name');
-
-    const complexAction: ComplexAction = {
-      actions: [],
-      title: get('dai.action.createdai', {daiName: name!}),
-    };
+    const bType = element.getAttribute('bType')!;
+    const newValue = getCustomField()[<DaiFieldTypes>bType].value(inputs);
 
     let valElement = instanceElement.querySelector('Val');
     if (!valElement) {
       valElement = parent.ownerDocument.createElementNS(SCL_NAMESPACE, 'Val');
       instanceElement.append(valElement);
     }
     valElement.textContent = newValue;
-    complexAction.actions.push({new: {parent, element: newElement}});
+
+    const name = instanceElement.getAttribute('name');
+    const complexAction: ComplexAction = {
+      actions: [{ new: { parent, element: newElement } }],
+      title: get('dai.action.createdai', { daiName: name! }),
+    };
     return [complexAction];
   };
 }
@@ -68,49 +85,64 @@ export function renderDAIWizard(
   const daValue = element.querySelector('Val')?.textContent?.trim() ?? '';
 
   return [
-    html`
-      ${getCustomField()[<DaiValidationTypes>bType].render(element, instanceElement)}
-      ${daValue
-        ? html`<wizard-textfield label="DA Template Value"
-                 .maybeValue=${daValue}
-                 readonly
-                 disabled>
-               </wizard-textfield>`
-        : nothing}`,
+    html` ${getCustomField()[<DaiFieldTypes>bType].render(
+      element,
+      instanceElement
+    )}
+    ${daValue
+      ? html`<wizard-textfield
+          id="daVal"
+          label="DA Template Value"
+          .maybeValue=${daValue}
+          readonly
+          disabled
+        >
+        </wizard-textfield>`
+      : nothing}`,
   ];
 }
 
-export function createDAIWizard(parent: Element, newElement: Element, element: Element): Wizard {
+export function createDAIWizard(
+  parent: Element,
+  newElement: Element,
+  element: Element
+): Wizard {
   // Retrieve the created DAI, can be the new element or one of the child elements below.
-  const instanceElement = (newElement.tagName === 'DAI') ? newElement : newElement.querySelector('DAI')!;
+  const instanceElement =
+    newElement.tagName === 'DAI'
+      ? newElement
+      : newElement.querySelector('DAI')!;
 
   return [
     {
       title: get('dai.wizard.title.create', {
-        daiName: instanceElement?.getAttribute('name') ?? ''
+        daiName: instanceElement?.getAttribute('name') ?? '',
       }),
       element: instanceElement,
       primary: {
         icon: 'edit',
         label: get('save'),
-        action: createValue(parent, newElement, instanceElement),
+        action: createValue(parent, element, newElement, instanceElement),
       },
       content: renderDAIWizard(element, instanceElement),
     },
   ];
 }
 
-export function editDAIWizard(element: Element, instanceElement?: Element): Wizard {
+export function editDAIWizard(
+  element: Element,
+  instanceElement?: Element
+): Wizard {
   return [
     {
       title: get('dai.wizard.title.edit', {
-        daiName: instanceElement?.getAttribute('name') ?? ''
+        daiName: instanceElement?.getAttribute('name') ?? '',
       }),
       element: instanceElement,
       primary: {
         icon: 'edit',
         label: get('save'),
-        action: updateValue(instanceElement!),
+        action: updateValue(element, instanceElement!),
       },
       content: renderDAIWizard(element, instanceElement),
     },