Merge pull request #176 from com-pas/ied-compare-from-compas

Use Compas Open Component to select Template Project in Compare IED plugin

public/js/plugins.js

@@ -213,9 +213,9 @@ export const officialPlugins = [
   },
   {
     name: 'Compare IED',
-    src: '/src/menu/CompareIED.js',
+    src: '/src/menu/CompasCompareIED.js',
     icon: 'compare_arrows',
-    default: false,
+    default: true,
     kind: 'menu',
     requireDoc: true,
     position: 'middle',

src/compas-editors/CompasVersions.ts

@@ -15,28 +15,65 @@ import '@material/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 import '@material/mwc-list/mwc-check-list-item';
 
+import { MultiSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
+
 import {
   newLogEvent,
   newOpenDocEvent,
   newWizardEvent,
   Wizard,
 } from '../foundation.js';
-import { MultiSelectedEvent } from '@material/mwc-list/mwc-list-foundation';
+import { renderDiff } from '../foundation/compare.js';
 
 import {
   CompasSclDataService,
   SDS_NAMESPACE,
 } from '../compas-services/CompasSclDataService.js';
 import { createLogEvent } from '../compas-services/foundation.js';
 import {
+  compareVersions,
   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 { wizards } from '../wizards/wizard-library.js';
 
+interface CompareOptions {
+  title: string;
+}
+
+function compareWizard(
+  plugin: Element,
+  oldElement: Element,
+  newElement: Element,
+  options: CompareOptions
+): Wizard {
+  function renderDialogContent(): TemplateResult {
+    return html` ${renderDiff(newElement, oldElement) ??
+    html`${translate('compas.compare.noDiff')}`}`;
+  }
+
+  function close() {
+    return function () {
+      plugin.dispatchEvent(newWizardEvent());
+      return [];
+    };
+  }
+
+  return [
+    {
+      title: options.title,
+      secondary: {
+        icon: '',
+        label: get('close'),
+        action: close(),
+      },
+      content: [renderDialogContent()],
+    },
+  ];
+}
+
 /** An editor [[`plugin`]] for selecting the `Substation` section. */
 export default class CompasVersionsPlugin extends LitElement {
   @property()
@@ -244,15 +281,15 @@ export default class CompasVersionsPlugin extends LitElement {
     const selectedVersions = this.getSelectedVersions();
     if (selectedVersions.length === 1) {
       const oldVersion = selectedVersions[0];
+
       const oldScl = await this.getVersion(oldVersion);
       const newScl = this.doc.documentElement;
 
       this.dispatchEvent(
         newWizardEvent(
           compareWizard(this, oldScl, newScl, {
-            title: get('compas.compare.title', {
+            title: get('compas.compare.titleCurrent', {
               oldVersion: oldVersion,
-              newVersion: 'current',
             }),
           })
         )
@@ -274,8 +311,9 @@ export default class CompasVersionsPlugin extends LitElement {
   async compareVersions(): Promise<void> {
     const selectedVersions = this.getSelectedVersions();
     if (selectedVersions.length === 2) {
-      const oldVersion = selectedVersions[0];
-      const newVersion = selectedVersions[1];
+      const sortedVersions = selectedVersions.slice().sort(compareVersions);
+      const oldVersion = sortedVersions[0];
+      const newVersion = sortedVersions[1];
 
       const oldScl = await this.getVersion(oldVersion);
       const newScl = await this.getVersion(newVersion);

src/compas/foundation.ts

@@ -65,3 +65,44 @@ export function updateDocumentInOpenSCD(
     newOpenDocEvent(doc, docName, { detail: { docId: id } })
   );
 }
+
+export function compareVersions(
+  leftVersion: string,
+  rightVersion: string
+): number {
+  // Function to compare parts of the version.
+  function comparePart(leftPart: string, rightPart: string): number {
+    // First make convert them to number and check if the strings are numbers.
+    const leftNumber = parseInt(leftPart);
+    const rightNumber = parseInt(rightPart);
+    if (isNaN(leftNumber) || isNaN(rightNumber)) {
+      return 0;
+    }
+    // Now compare the two numbers.
+    return leftNumber < rightNumber ? -1 : leftNumber > rightNumber ? 1 : 0;
+  }
+
+  // If the strings are the same, just return 0, because they are the same.
+  if (leftVersion.localeCompare(rightVersion) == 0) {
+    return 0;
+  }
+
+  // Split the version into parts.
+  const leftParts = leftVersion.split('.');
+  const rightParts = rightVersion.split('.');
+
+  // Version should exist out of 3 parts, major, minor, patch
+  if (leftParts.length != 3 && rightParts.length != 3) {
+    return 0;
+  }
+
+  // Now first compare the major version, if they are the same repeat for minor version and patch version.
+  let result = comparePart(leftParts[0], rightParts[0]);
+  if (result === 0) {
+    result = comparePart(leftParts[1], rightParts[1]);
+    if (result === 0) {
+      result = comparePart(leftParts[2], rightParts[2]);
+    }
+  }
+  return result;
+}

src/menu/CompasCompareIED.ts

@@ -0,0 +1,24 @@
+import { html, TemplateResult } from 'lit-element';
+
+import '../compas/CompasOpen.js';
+
+import { DocRetrievedEvent } from '../compas/CompasOpen.js';
+
+import CompareIEDPlugin from './CompareIED.js';
+
+export default class CompasCompareIEDPlugin extends CompareIEDPlugin {
+  /**
+   * Overwriting the render function for opening the template project.
+   * Now it will also be possible to select the template project from the CoMPAS Data Service.
+   *
+   * @override
+   */
+  protected renderSelectTemplateFile(): TemplateResult {
+    return html`<compas-open
+        @docRetrieved=${(evt: DocRetrievedEvent) => {
+          this.templateDoc = evt.detail.doc;
+        }}
+      ></compas-open>
+      ${this.renderCloseButton()}`;
+  }
+}

src/translations/de.ts

@@ -854,6 +854,8 @@ export const de: Translations = {
     },
     compare: {
       title: '???',
+      titleCurrent: '???',
+      noDiff: '???',
       attributes: 'Attribute',
       children: 'Kindelemente',
     },