Merge pull request #148 from com-pas/update-compas-name

Added feature to update SCL Name in CoMPAS Private element.

Author: Rob Tjalma

src/compas-editors/CompasVersions.ts

@@ -1,5 +1,5 @@
-import {css, html, LitElement, property, TemplateResult} from 'lit-element';
-import {get, translate} from 'lit-translate';
+import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+import { get, translate } from 'lit-translate';
 
 import '@material/mwc-fab';
 import '@material/mwc-icon';
@@ -8,23 +8,30 @@ import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 import '@material/mwc-list/mwc-check-list-item';
 
-import {newLogEvent, newWizardEvent, Wizard} from "../foundation.js";
-import {MultiSelectedEvent} from "@material/mwc-list/mwc-list-foundation";
+import { newLogEvent, newWizardEvent, Wizard } from "../foundation.js";
+import { MultiSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
 
-import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
-import {createLogEvent} from "../compas-services/foundation.js";
+import { CompasSclDataService, SDS_NAMESPACE } from "../compas-services/CompasSclDataService.js";
+import { createLogEvent } from "../compas-services/foundation.js";
 import {
   dispatchEventOnOpenScd,
   getOpenScdElement,
   getTypeFromDocName,
   updateDocumentInOpenSCD
 } from "../compas/foundation.js";
-import {addVersionToCompasWizard} from "../compas/CompasUploadVersion.js";
-import {compareWizard} from "../compas/CompasCompareDialog.js";
-import {getElementByName, styles} from './foundation.js';
+import { addVersionToCompasWizard } from "../compas/CompasUploadVersion.js";
+import { compareWizard } from "../compas/CompasCompareDialog.js";
+import { getElementByName, styles } from './foundation.js';
+import { wizards } from "../wizards/wizard-library.js";
 
 // Save the selection for the current document.
 let selectedVersionsOnCompasVersionsEditor: Set<number> = new Set();
+// We will also add an Event Listener when a new document is opened. We then want to reset the selection.
+function resetSelection(): void {
+  // When a new document is loaded the selection will be reset.
+  selectedVersionsOnCompasVersionsEditor = new Set();
+}
+addEventListener('open-doc', resetSelection);
 
 /** An editor [[`plugin`]] for selecting the `Substation` section. */
 export default class CompasVersionsPlugin extends LitElement {
@@ -38,21 +45,6 @@ export default class CompasVersionsPlugin extends LitElement {
   @property()
   scls!: Element[];
 
-  constructor() {
-    super();
-
-    // Add event to get a notification when a new document is opened.
-    const openSCD = getOpenScdElement();
-    if (openSCD !== null) {
-      openSCD.addEventListener('open-doc', this.resetSelection);
-    }
-  }
-
-  resetSelection() {
-    // When a new document is loaded the selection will be reset.
-    selectedVersionsOnCompasVersionsEditor = new Set();
-  }
-
   firstUpdated(): void {
     if (!this.docId) {
       this.scls = [];
@@ -141,6 +133,21 @@ export default class CompasVersionsPlugin extends LitElement {
       });
   }
 
+  private openEditWizard(): void {
+    const wizard = wizards['SCL'].edit(this.doc.documentElement);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
+  private getCurrentVersion(): string {
+    const header = this.doc.querySelector('Header');
+    return header!.getAttribute('version') ?? 'unknown';
+  }
+
+  private getCurrentName(): string {
+    const sclName = this.doc.querySelector('SCL > Private[type="compas_scl"] > SclName');
+    return sclName!.textContent ?? 'unknown';
+  }
+
   render(): TemplateResult {
     if (!this.scls) {
       return html `
@@ -158,6 +165,10 @@ export default class CompasVersionsPlugin extends LitElement {
     }
     return html`
       <h1>
+        ${translate('compas.versions.sclInfo',
+          { name: this.getCurrentName(),
+            version: this.getCurrentVersion()
+          })}
         <nav>
           <abbr title="${translate('compas.versions.addVersionButton')}">
             <mwc-icon-button icon="playlist_add"
@@ -174,10 +185,18 @@ export default class CompasVersionsPlugin extends LitElement {
                              }}></mwc-icon-button>
           </abbr>
         </nav>
+        <nav>
+          <abbr title="${translate('edit')}">
+            <mwc-icon-button icon="edit"
+                             @click=${() => this.openEditWizard()}></mwc-icon-button>
+          </abbr>
+        </nav>
       </h1>
       <div id="containerCompasVersions">
         <section tabindex="0">
-          <h1>${translate('compas.versions.title')}</h1>
+          <h1>
+            ${translate('compas.versions.title')}
+          </h1>
           <mwc-list multi
                     @selected=${(evt: MultiSelectedEvent) => {
                       selectedVersionsOnCompasVersionsEditor = evt.detail.index;
@@ -248,7 +267,7 @@ export default class CompasVersionsPlugin extends LitElement {
     }
 
     #containerCompasVersions {
-      padding: 8px 12px 16px;
+      padding: 16px 12px 16px 12px;
       box-sizing: border-box;
       grid-template-columns: repeat(auto-fit, minmax(316px, auto));
     }

src/compas-wizards/scl.ts

@@ -0,0 +1,84 @@
+import { html, TemplateResult } from 'lit-element';
+import { get, translate } from 'lit-translate';
+
+import {
+  cloneElement,
+  EditorAction,
+  getValue,
+  Wizard,
+  WizardActor,
+  WizardInputElement,
+} from '../foundation.js';
+import { COMPAS_SCL_PRIVATE_TYPE } from "../compas/private.js";
+import {
+  createCompasSclName,
+  createPrivate,
+  getCompasSclName,
+  getPrivate
+} from "../compas/private.js";
+
+export function updateSCL(sclElement: Element): WizardActor {
+  return (inputs: WizardInputElement[]): EditorAction[] => {
+    const newValue = getValue(inputs.find(i => i.label === 'filename')!)!;
+    const oldSclNameElement = getCompasSclName(sclElement);
+
+    if (oldSclNameElement) {
+      // Update the value in the existing SclName Element by cloning.
+      const oldValue = oldSclNameElement.textContent;
+      if (newValue === oldValue) {
+        return [];
+      }
+
+      const newSclNameElement = cloneElement(oldSclNameElement, {});
+      newSclNameElement.textContent = newValue;
+      return [{ old: { element: oldSclNameElement }, new: { element: newSclNameElement } }];
+    } else {
+      let privateElement = getPrivate(sclElement, COMPAS_SCL_PRIVATE_TYPE);
+      if (!privateElement) {
+        // No Private Element under SCL, so create both Private and SclName Element to be added to the SCL Element.
+        const newSclNameElement = createCompasSclName(sclElement, newValue);
+        privateElement = createPrivate(sclElement, COMPAS_SCL_PRIVATE_TYPE);
+        privateElement.prepend(newSclNameElement);
+        return [{ new: { parent: sclElement, element: privateElement } }];
+      }
+
+      // There is a Private Element, but no SclName Element, so only create a new SclName Element.
+      const newSclNameElement = createCompasSclName(sclElement, newValue);
+      return [{ new: { parent: privateElement, element: newSclNameElement } }];
+    }
+  };
+}
+
+export function renderCompasSCL(
+  sclElement: Element
+): TemplateResult[] {
+  const privateFilenameElement = getCompasSclName(sclElement);
+  const filename = privateFilenameElement ? privateFilenameElement.textContent : '';
+
+  return [
+    html`<wizard-textfield
+      label="filename"
+      .maybeValue=${filename}
+      helper="${translate('compas.scl.filenameHelper')}"
+      required
+      validationMessage="${translate('textfield.required')}"
+      dialogInitialFocus>
+    </wizard-textfield>`,
+  ];
+}
+
+
+export function editCompasSCLWizard(sclElement: Element): Wizard {
+  return [
+    {
+      title: get('compas.scl.wizardTitle'),
+      element: sclElement,
+      primary: {
+        icon: 'edit',
+        label: get('save'),
+        action: updateSCL(sclElement),
+      },
+      content: renderCompasSCL(sclElement),
+    },
+  ];
+}

src/compas/private.ts

@@ -0,0 +1,36 @@
+import { SCL_NAMESPACE } from "../schemas.js";
+
+export const COMPAS_NAMESPACE = 'https://www.lfenergy.org/compas/extension/v1';
+export const COMPAS_PREFIX = 'compas';
+export const COMPAS_SCL_PRIVATE_TYPE = 'compas_scl';
+
+export function getPrivate(element: Element, type: string): Element | null {
+  return element.querySelector(`Private[type="${type}"]`);
+}
+
+export function createPrivate(parent: Element, type: string): Element {
+  const privateElement = parent.ownerDocument.createElementNS(SCL_NAMESPACE, "Private");
+  privateElement.setAttribute('type', type);
+  return privateElement;
+}
+
+export function getCompasSclName(element: Element): Element | null {
+  const privateElement = getPrivate(element, COMPAS_SCL_PRIVATE_TYPE);
+  return privateElement ? privateElement.querySelector(`SclName`) : null;
+}
+
+export function createCompasSclName(parent: Element, value: string): Element {
+  // Make sure the prefix is available.
+  addPrefixAndNamespaceToDocument(parent, COMPAS_NAMESPACE, COMPAS_PREFIX);
+
+  const newSclNameElement = parent.ownerDocument.createElementNS(COMPAS_NAMESPACE, COMPAS_PREFIX + ":SclName");
+  newSclNameElement.textContent = value;
+  return newSclNameElement;
+}
+
+export function addPrefixAndNamespaceToDocument(element: Element, namespace: string, prefix: string) : void {
+  const rootElement = element.ownerDocument.firstElementChild!;
+  if (!rootElement.hasAttribute('xmlns:' +  prefix)) {
+    rootElement.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:' +  prefix, namespace);
+  }
+}

src/translations/de.ts

@@ -621,6 +621,7 @@ export const de: Translations = {
     },
     versions: {
       title: '???',
+      sclInfo: '???: {{name}}, ???: {{version}}',
       addVersionButton: '???',
       confirmRestoreTitle: "???",
       confirmRestore: "??? {{version}}?",
@@ -640,6 +641,10 @@ export const de: Translations = {
       selectOneVersionsTitle: "???",
       selectOneVersionsMessage: "???",
     },
+    scl: {
+      wizardTitle: '???',
+      filenameHelper: '???',
+    },
     compare: {
       title: '???',
       attributes: 'Attribute',

src/translations/en.ts

@@ -616,6 +616,7 @@ export const en = {
     },
     versions: {
       title: 'CoMPAS Versions',
+      sclInfo: 'Current project - Name: {{name}}, Version: {{version}}',
       addVersionButton: 'Add version',
       confirmRestoreTitle: 'Restore version?',
       confirmRestore: 'Are you sure to restore version {{version}}?',
@@ -635,6 +636,10 @@ export const en = {
       selectOneVersionsTitle: 'Select one version?',
       selectOneVersionsMessage: 'Select maximum one version to compare the current project against. Currently selected: {{size}}.',
     },
+    scl: {
+      wizardTitle: 'Edit SCL',
+      filenameHelper: 'Filename used by CoMPAS when saving to a filesystem',
+    },
     compare: {
       title: 'Compare version {{oldVersion}} with version {{newVersion}}',
       attributes: 'Attributes from',

src/wizard-dialog.ts

@@ -352,13 +352,15 @@ export class WizardDialog extends LitElement {
             style="--mdc-theme-primary: var(--mdc-theme-error)"
           ></mwc-button>`}
       ${this.code && page.element
-        ? html`<mwc-button
-            slot="primaryAction"
-            @click=${() => this.act(codeAction(page.element!))}
-            icon="code"
-            label="${translate('save')}"
-            trailingIcon
-          ></mwc-button>`
+        ? (page.element.parentElement)
+          ? html`<mwc-button
+              slot="primaryAction"
+              @click=${() => this.act(codeAction(page.element!))}
+              icon="code"
+              label="${translate('save')}"
+              trailingIcon
+            ></mwc-button>`
+          : html ``
         : page.primary
         ? html`<mwc-button
             slot="primaryAction"

src/wizards/wizard-library.ts

@@ -19,6 +19,7 @@ import { createPowerTransformerWizard, editPowerTransformerWizard } from './powe
 import { editSubNetworkWizard } from './subnetwork.js';
 import { editIEDWizard } from './ied.js';
 import { editTrgOpsWizard } from './trgops.js';
+import { editCompasSCLWizard } from "../compas-wizards/scl.js";
 
 type SclElementWizard = (element: Element) => Wizard | undefined;
 
@@ -398,7 +399,7 @@ export const wizards: Record<
     create: emptyWizard,
   },
   SCL: {
-    edit: emptyWizard,
+    edit: editCompasSCLWizard,
     create: emptyWizard,
   },
   SDI: {

test/integration/compas-editors/CompasVersions.test.ts

@@ -19,13 +19,21 @@ describe('compas-versions-plugin', () => {
     'compas-versions-plugin',
     Wizarding(Editing(CompasVersionsPlugin))
   );
+  let doc: Document;
   let element: CompasVersionsPlugin;
   let stub: SinonStub;
 
+  beforeEach(async () => {
+    doc = await fetch('/test/testfiles/compas/test-scd.cid')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+  })
+
   describe('no-compas-document', () => {
     beforeEach(async () => {
       element = fixtureSync(html`
-        <compas-versions-plugin></compas-versions-plugin>`);
+        <compas-versions-plugin .doc="${doc}">
+        </compas-versions-plugin>`);
 
       stub = stubFetchResponseFunction(element, FETCH_FUNCTION, undefined, VERSION_ENTRY_ELEMENT_NAME,
         () => {
@@ -49,8 +57,8 @@ describe('compas-versions-plugin', () => {
   describe('show-loading', () => {
     beforeEach(async () => {
       element = fixtureSync(html`
-        <compas-versions-plugin></compas-versions-plugin>`);
-      element.docId = docId;
+        <compas-versions-plugin .doc="${doc}" .docId="${docId}">
+        </compas-versions-plugin>`);
 
       stub = stubFetchResponseFunction(element, FETCH_FUNCTION, undefined, VERSION_ENTRY_ELEMENT_NAME,
         () => {
@@ -72,8 +80,8 @@ describe('compas-versions-plugin', () => {
   describe('no-items-in-list', () => {
     beforeEach(async () => {
       element = fixtureSync(html`
-        <compas-versions-plugin></compas-versions-plugin>`);
-      element.docId = docId;
+        <compas-versions-plugin .doc="${doc}" .docId="${docId}">
+        </compas-versions-plugin>`);
 
       stub = stubFetchResponseFunction(element, FETCH_FUNCTION, undefined, VERSION_ENTRY_ELEMENT_NAME,
         (result: Element[]) => {
@@ -97,8 +105,8 @@ describe('compas-versions-plugin', () => {
   describe('items-in-list', () => {
     beforeEach(async () => {
       element = fixtureSync(html`
-        <compas-versions-plugin></compas-versions-plugin>`);
-      element.docId = docId;
+        <compas-versions-plugin .doc="${doc}" .docId="${docId}">
+        </compas-versions-plugin>`);
 
       stub = stubFetchResponseFunction(element, FETCH_FUNCTION, BASIC_VERSIONS_LIST_RESPONSE, VERSION_ENTRY_ELEMENT_NAME,
         (result: Element[]) => {