Refactor CoMPAS Versions Tab, added delete buttons.

Signed-off-by: Dennis Labordus <[email protected]>

Author: Dennis Labordus

src/compas-editors/CompasVersions.ts

@@ -1,6 +1,6 @@
 import {css, html, LitElement, property, TemplateResult} from 'lit-element';
 import {get, translate} from 'lit-translate';
-import {newWizardEvent, Wizard} from "../foundation.js";
+import {newLogEvent, newWizardEvent, Wizard} from "../foundation.js";
 
 import {CompasSclDataService, SDS_NAMESPACE} from "../compas-services/CompasSclDataService.js";
 import {getTypeFromDocName, updateDocumentInOpenSCD} from "../compas/foundation.js";
@@ -36,6 +36,14 @@ export default class CompasVersionsPlugin extends LitElement {
     this.dispatchEvent(newWizardEvent(confirmRestoreCompasWizard(this.docName, this.docId, version)))
   }
 
+  confirmDeleteCompas(): void {
+    this.dispatchEvent(newWizardEvent(confirmDeleteCompasWizard(this.docName, this.docId)))
+  }
+
+  confirmDeleteVersionCompas(version: string): void {
+    this.dispatchEvent(newWizardEvent(confirmDeleteVersionCompasWizard(this.docName, this.docId, version)))
+  }
+
   private getElementbyName(parent: Element, namespace: string, tagName: string): Element | null {
     const elements = parent.getElementsByTagNameNS(namespace, tagName);
     if (elements.length > 0) {
@@ -63,20 +71,39 @@ export default class CompasVersionsPlugin extends LitElement {
     return html`
       <div id="containerCompasVersions">
         <section tabindex="0">
-          <h1>${translate('compas.versions.title')}</h1>
+          <h1>
+            ${translate('compas.versions.title')}
+            <mwc-icon-button icon="delete_forever"
+                             @click=${() => {
+                               this.confirmDeleteCompas();
+                             }}></mwc-icon-button>
+          </h1>
           <mwc-list>
-            ${this.scls.map( item => {
+            ${this.scls.map( (item, index, items) => {
                 let element = this.getElementbyName(item, SDS_NAMESPACE, "Name");
                 if (element === null) {
                   element = this.getElementbyName(item, SDS_NAMESPACE, "Id");
                 }
                 const name = element!.textContent ?? '';
                 const version = this.getElementbyName(item, SDS_NAMESPACE, "Version")!.textContent ?? '';
+                if (items.length - 1 === index) {
+                  return html`<mwc-list-item tabindex="0" graphic="control">
+                                ${name} (${version})
+                                <span slot="graphic" style="width: 90px"></span>
+                              </mwc-list-item>`
+                }
                 return html`<mwc-list-item tabindex="0"
-                                        @click=${() => {
-                                          this.confirmRestoreCompas(version);
-                                        }}>
+                                           hasMeta
+                                           graphic="control">
                                 ${name} (${version})
+                                <span slot="graphic" style="width: 90px">
+                                  <mwc-icon @click=${() => {
+                                              this.confirmRestoreCompas(version);
+                                            }}>restore</mwc-icon>
+                                  <mwc-icon @click=${() => {
+                                              this.confirmDeleteVersionCompas(version);
+                                            }}>delete</mwc-icon>
+                                </span>
                             </mwc-list-item>`
             })}
           </mwc-list>
@@ -123,8 +150,54 @@ function openScl(docName: string, docId: string, version: string) {
     const type = getTypeFromDocName(docName);
     fetchScl(type, docId, version);
 
+    const openScd = getOpenScdElement();
+    openScd.dispatchEvent(
+      newLogEvent({
+        kind: 'info',
+        title: get('compas.versions.restoreVersionSuccess', {version : version})
+      }));
+
+    // Close the Restore Dialog.
+    openScd.dispatchEvent(newWizardEvent());
+
+    return [];
+  }
+}
+
+function deleteScl(docName: string, docId: string) {
+  return function () {
+    const type = getTypeFromDocName(docName);
+    CompasSclDataService().deleteSclDocument(type, docId);
+
+    const openScd = getOpenScdElement();
+    openScd.docId = '';
+    openScd.dispatchEvent(
+      newLogEvent({
+        kind: 'info',
+        title: get('compas.versions.deleteSuccess')
+      }));
+
     // Close the Restore Dialog.
-    getOpenScdElement().dispatchEvent(newWizardEvent());
+    openScd.dispatchEvent(newWizardEvent());
+
+    return [];
+  }
+}
+
+function deleteSclVersion(docName: string, docId: string, version: string) {
+  return function () {
+    const type = getTypeFromDocName(docName);
+    CompasSclDataService().deleteSclDocumentVersion(type, docId, version);
+
+    const openScd = getOpenScdElement();
+    openScd.dispatchEvent(
+      newLogEvent({
+        kind: 'info',
+        title: get('compas.versions.deleteVersionSuccess', {version : version})
+      }));
+
+    // Close the Restore Dialog.
+    openScd.dispatchEvent(newWizardEvent());
 
     return [];
   }
@@ -133,14 +206,46 @@ function openScl(docName: string, docId: string, version: string) {
 function confirmRestoreCompasWizard(docName: string, docId: string, version: string): Wizard {
   return [
     {
-      title: get('compas.versions.confirmTitle'),
+      title: get('compas.versions.confirmRestoreTitle'),
       primary: {
         icon: '',
         label: get('compas.versions.confirmButton'),
         action: openScl(docName, docId, version),
       },
       content: [
-        html`<span>${translate('compas.versions.confirm')}</span>`,
+        html`<span>${translate('compas.versions.confirmRestore', {version : version})}</span>`,
+      ],
+    },
+  ];
+}
+
+function confirmDeleteCompasWizard(docName: string, docId: string): Wizard {
+  return [
+    {
+      title: get('compas.versions.confirmDeleteTitle'),
+      primary: {
+        icon: '',
+        label: get('compas.versions.confirmButton'),
+        action: deleteScl(docName, docId),
+      },
+      content: [
+        html`<span>${translate('compas.versions.confirmDelete')}</span>`,
+      ],
+    },
+  ];
+}
+
+function confirmDeleteVersionCompasWizard(docName: string, docId: string, version: string): Wizard {
+  return [
+    {
+      title: get('compas.versions.confirmDeleteVersionTitle'),
+      primary: {
+        icon: '',
+        label: get('compas.versions.confirmButton'),
+        action: deleteSclVersion(docName, docId, version),
+      },
+      content: [
+        html`<span>${translate('compas.versions.confirmDeleteVersion', {version : version})}</span>`,
       ],
     },
   ];

src/compas-services/CompasSclDataService.ts

@@ -69,6 +69,16 @@ export function CompasSclDataService() {
         .then(str => new DOMParser().parseFromString(str, 'application/xml'))
     },
 
+    deleteSclDocumentVersion(type: string, id: string, version: string): Promise<Response> {
+      const sclUrl = getCompasSettings().sclDataServiceUrl + '/scl/v1/' + type?.toUpperCase() + '/' + id + '/' + version;
+      return fetch(sclUrl, {method: 'DELETE'});
+    },
+
+    deleteSclDocument(type: string, id: string): Promise<Response> {
+      const sclUrl = getCompasSettings().sclDataServiceUrl + '/scl/v1/' + type?.toUpperCase() + '/' + id;
+      return fetch(sclUrl, {method: 'DELETE'});
+    },
+
     addSclDocument(type: string, body: CreateRequestBody): Promise<Document> {
       const sclUrl = getCompasSettings().sclDataServiceUrl + '/scl/v1/' + type?.toUpperCase();
       return fetch(sclUrl, {

src/translations/de.ts

@@ -412,8 +412,15 @@ export const de: Translations = {
       title: '???',
       noVersions: "???",
       noScls: "???",
-      confirmTitle: "???",
-      confirm: "???",
+      confirmRestoreTitle: "???",
+      confirmRestore: "??? {{version}}?",
+      restoreVersionSuccess: '??? {{version}}',
+      confirmDeleteTitle: '???',
+      confirmDelete: '???',
+      deleteSuccess: '???',
+      confirmDeleteVersionTitle: '???',
+      confirmDeleteVersion: '??? {{version}}?',
+      deleteVersionSuccess: '??? {{version}}',
       confirmButton: "???",
     },
     settings: {

src/translations/en.ts

@@ -409,8 +409,15 @@ export const en = {
       title: 'CoMPAS Versions',
       noVersions: 'No CoMPAS versions found',
       noScls: 'No versions found for this SCL in CoMPAS',
-      confirmTitle: 'Restore?',
-      confirm: 'Are you sure to restore previous version?',
+      confirmRestoreTitle: 'Restore version?',
+      confirmRestore: 'Are you sure to restore version {{version}}?',
+      restoreVersionSuccess: 'Restored version {{version}}',
+      confirmDeleteTitle: 'Delete SCL?',
+      confirmDelete: 'Are you sure to delete all version(s)?',
+      deleteSuccess: 'Removed SCL from CoMPAS',
+      confirmDeleteVersionTitle: 'Delete version?',
+      confirmDeleteVersion: 'Are you sure to delete version {{version}}?',
+      deleteVersionSuccess: 'Removed version {{version}} from CoMPAS',
       confirmButton: 'Confirm',
     },
     settings: {