GH-108 Version History & Audit Log

blocks/edit/da-content/da-content.css

@@ -16,7 +16,16 @@ da-editor {
   z-index: 1;
 }
 
-da-preview {
+da-version {
+  display: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+da-preview,
+da-versions {
   visibility: hidden;
   position: absolute;
   width: 0;
@@ -25,15 +34,17 @@ da-preview {
   justify-self: right;
 }
 
-da-preview.show-preview {
+da-preview.show-preview,
+da-versions.show-versions {
   visibility: unset;
   position: relative;
   width: unset;
   height: unset;
   overflow: unset;
 }
 
-.da-preview-menubar {
+.da-preview-menubar,
+.da-versions-menubar {
   display: none;
   position: absolute;
   top: 20px;
@@ -45,11 +56,17 @@ da-preview.show-preview {
   right: -56px;
 }
 
+
 :host(.show-preview) .da-preview-menubar {
   display: none;
 }
 
-.da-preview-menuitem {
+:host(.show-versions) .da-preview-menubar {
+  display: none;
+}
+
+.da-preview-menuitem,
+.da-versions-menuitem {
   display: block;
   width: 50px;
   height: 44px;
@@ -65,6 +82,11 @@ da-preview.show-preview {
   background-blend-mode: hard-light;
 }
 
+.da-versions-menuitem.show-versions {
+  background: url("/blocks/edit/img/Smock_FilingCabinet_18_N.svg") center center / 20px no-repeat rgb(239, 239, 239);
+  background-blend-mode: hard-light;
+}
+
 @media (min-width: 600px) {
   :host {
     padding: 0 80px;
@@ -74,7 +96,8 @@ da-preview.show-preview {
     min-width: 375px;
   }
 
-  .da-preview-menubar {
+  .da-preview-menubar,
+  .da-versions-menubar {
     display: unset;
   }
 }
@@ -91,10 +114,13 @@ da-preview.show-preview {
   }
 
   da-editor {
-    
+
   }
 
   :host(.show-preview) da-editor {
 
   }
+
+  :host(.show-versions) da-editor {
+  }
 }

blocks/edit/da-content/da-content.js

@@ -3,6 +3,8 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
 import getSheet from '../../shared/sheet.js';
 import '../da-editor/da-editor.js';
 import '../da-preview/da-preview.js';
+import '../da-version/da-version.js';
+import '../da-versions/da-versions.js';
 
 const sheet = await getSheet('/blocks/edit/da-content/da-content.css');
 
@@ -20,15 +22,29 @@ export default class DaContent extends LitElement {
     this.shadowRoot.querySelector('da-preview').classList.add('show-preview');
   }
 
+  showVersions(e) {
+    this.classList.add('show-versions');
+    e.target.parentElement.classList.add('show-versions');
+
+    const dav = this.shadowRoot.querySelector('da-versions');
+    // Force an update on the versions panel to load the latest versions
+    dav.requestUpdate();
+
+    dav.classList.add('show-versions');
+  }
+
   render() {
     return html`
       <div class="editor-wrapper">
         <da-editor path="${this.details.sourceUrl}"></da-editor>
+        <da-version></da-version>
         <div class="da-preview-menubar">
-          <span class="da-preview-menuitem show-preview" @click=${this.showPreview}></span>
+          <span class="da-preview-menuitem show-preview" title="Preview" @click=${this.showPreview}></span>
+          <span class="da-versions-menuitem show-versions" title="Versions" @click=${this.showVersions}></span>
         </div>
       </div>
       <da-preview path=${this.details.previewUrl}></da-preview>
+      <da-versions path="${this.details.sourceUrl}"></da-versions>
     `;
   }
 }

blocks/edit/da-title/da-title.js

@@ -33,6 +33,32 @@
     inlinesvg({ parent: this.shadowRoot, paths: ICONS });
   }
 
+  async saveVersion(pathname) {
+    const edit = this.parentNode.querySelector('da-content').shadowRoot.querySelector('da-editor');
+    if (!edit) {
+      // eslint-disable-next-line no-console
+      console.log('Not able to obtain document path');
+      return;
+    }
+    // TODO there must be a better way to obtain path
+    const url = new URL(edit._path);
+    const pathName = url.pathname;
+    if (!pathName.startsWith('/source/')) {
+      // Unexpected document URL
+      // eslint-disable-next-line no-console
+      console.log('Unexpected document URL', this.path);
+      return;
+    }
+
+    const versionURL = `${url.origin}/versionsource/${pathName.slice(8)}`;
+
+    const res = await fetch(versionURL, { method: 'POST' });
+    if (res.status !== 201) {
+      // eslint-disable-next-line no-console
+      console.log('Unable to create version', res.status);
+    }
+  }
+
   async handleAction(action) {
     this.toggleActions();
     const sendBtn = this.shadowRoot.querySelector('.da-title-action-send-icon');
@@ -55,6 +81,8 @@
       if (action === 'publish') json = await saveToAem(aemPath, 'live');
       const { url } = action === 'publish' ? json.live : json.preview;
       window.open(url, '_blank');
+
+      this.saveVersion(pathname);
     }
     sendBtn.classList.remove('is-sending');
   }

blocks/edit/da-version/da-version.css

@@ -0,0 +1,3 @@
+.ProseMirror {
+  background-color: lavender;
+}

blocks/edit/da-version/da-version.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
+import getSheet from '../../shared/sheet.js';
+
+const editorSheet = await getSheet('/blocks/edit/da-editor/da-editor.css');
+const versionSheet = await getSheet('/blocks/edit/da-version/da-version.css');
+
+export default class DaVersion extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [editorSheet, versionSheet];
+  }
+
+  render() {
+    return html`
+    <div class="da-version-view">
+      <div contenteditable="false" translate="no" class="ProseMirror">
+      </div>
+    </div>
+    `;
+  }
+}
+
+customElements.define('da-version', DaVersion);

blocks/edit/da-versions/da-versions.css

@@ -0,0 +1,155 @@
+.da-versions-panel {
+  display: block;
+  width: 375px;
+  min-height: 844px;
+  margin: 0 auto;
+  padding-left: 32px;
+  border: none;
+  overflow: hidden;
+  font-weight: 700;
+}
+
+.da-versions-menubar {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 12px;
+  padding: 6px 6px 0px;
+  border-radius: 4px;
+  box-shadow: rgb(181, 181, 181) 0px 0px 5px 0px;
+  background: rgb(255, 255, 255);
+  box-sizing: border-box;
+  grid-area: toolbar;
+  z-index: 1;
+}
+
+.da-versions-menuitem {
+  display: block;
+  width: 44px;
+  height: 44px;
+  text-indent: -1000px;
+  overflow: hidden;
+  border-radius: 2px;
+  margin-bottom: 6px;
+  background-color: rgb(239, 239, 239);
+}
+
+.da-versions-panel .audit-entry {
+  display: flex;
+}
+
+.da-versions-panel .audit-entry-hidden {
+  display: none;
+}
+
+.da-versions-panel .audit-group {
+  position: relative;
+  user-select: none;
+}
+
+.da-versions-panel .audit-group-collapse {
+  max-height: 200px;
+  overflow: hidden;
+}
+
+.da-versions-panel .audit-group-collapse:before {
+  content:'';
+  width:100%;
+  height:100%;
+  position:absolute;
+  left:0;
+  top:0;
+  background:linear-gradient(transparent 100px, white);
+}
+
+.da-versions-panel .label {
+  max-width: 300px;
+}
+
+.da-versions-panel .entry-time {
+  width: 64px;
+}
+
+.da-versions-panel .history-title {
+  font-size: 22px;
+  height: 2.7rem;
+}
+
+.da-versions-panel .version {
+  display: flex;
+}
+
+.da-versions-panel .version-group {
+  display: flex;
+  margin-top: 1rem;
+}
+
+.da-versions-panel .version-line {
+  background:#cecece;
+  z-index:1;
+  width:2px;
+  height:100%;
+  position:absolute;
+  top: 10px;
+  left: 30px;
+}
+
+.da-versions-panel .versions-wrapper {
+  position: relative;
+}
+
+.da-versions-panel .user-list {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+}
+
+/* Bullets in the version list */
+.da-versions-panel .bullet {
+  width: 64px;
+  height: 24px;
+  background-position-x: center;
+  background-repeat: no-repeat;
+  z-index: 2;
+}
+
+.da-versions-panel .bullet-audit-first {
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle stroke='rgb(206 206 206)' stroke-width='2' fill='white' cx='15' cy='15' r='13'/></svg>");
+  height: 32px;
+}
+
+.da-versions-panel .bullet-audit {
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle fill='rgb(200 200 200)' cx='15' cy='13' r='6'/></svg>");
+}
+
+.da-versions-panel .bullet-audit + div {
+  color: #8e8e8e;
+}
+
+.da-versions-panel .bullet-history {
+  height: 32px;
+  background-image: url("/blocks/edit/img/Smock_Calendar_18_N.svg");
+  background-size: 32px;
+  background-position-y: top;
+}
+
+.da-versions-panel .bullet-stored {
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle fill='rgb(123 160 47)' cx='15' cy='15' r='8'/></svg>");
+}
+
+/* Toolbar buttons */
+.da-versions-close {
+  background: url("/blocks/edit/img/Smock_Close_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}
+
+.da-versions-create {
+  background: url("/blocks/edit/img/Smock_DataAdd_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}
+
+.da-versions-restore {
+  background: url("/blocks/edit/img/Smock_DataUpload_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}
+
+.da-versions-name {
+  background: url("/blocks/edit/img/Smock_Rename_18_N.svg") center center / 20px no-repeat #EFEFEF;
+}