rollback page revisions

app/app/components/document/document-history.js

@@ -0,0 +1,55 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+	revision: {},
+	hasDiff: Ember.computed('diff', function () {
+		return this.get('diff').length > 0;
+	}),
+
+	didReceiveAttrs() {
+		let revisions = this.get('revisions');
+
+		revisions.forEach((revision) => {
+			Ember.set(revision, 'deleted', revision.revisions === 0);
+		});
+
+		this.set('revisions', revisions);
+	},
+
+	didInsertElement() {
+		this._super(...arguments);
+
+		this.eventBus.subscribe('resized', this, 'sizeSidebar');
+		this.sizeSidebar();
+	},
+
+	sizeSidebar() {
+		let size = $(window).height() - 200;
+		this.$('.document-history > .sidebar').css('height', size + "px");
+	},
+
+	actions: {
+		getDiff(revision) {
+			this.set('revision', revision);
+			if (!revision.deleted) {
+				this.attrs.onFetchDiff(revision.pageId, revision.id);
+			}
+		},
+
+		rollback() {
+			let revision = this.get('revision');
+			this.attrs.onRollback(revision.pageId, revision.id);
+		}
+	}
+});

app/app/components/ui/ui-avatar.js

@@ -0,0 +1,20 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+import TooltipMixin from '../../mixins/tooltip';
+
+export default Ember.Component.extend(TooltipMixin, {
+	didRender() {
+		let refId = this.get('refId');
+		this.addTooltip(document.getElementById(`avatar-${refId}`));
+	},
+});

app/app/models/page.js

@@ -39,6 +39,11 @@ export default Model.extend({
 		let tocIndent = this.get('tocIndent');
 		return `margin-left-${tocIndent}`;
 	}),
+
+	hasRevisions: Ember.computed('revisions', function () {
+		return this.get('revisions') > 0;
+	}),
+
 	created: attr(),
 	revised: attr()
 });

app/app/pods/document/history/controller.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import NotifierMixin from '../../../mixins/notifier';
+
+export default Ember.Controller.extend(NotifierMixin, {
+	documentService: Ember.inject.service('document'),
+
+	actions: {
+		onFetchDiff(pageId, revisionId) {
+			this.audit.record("compared-diff");
+
+			this.get('documentService').getPageRevisionDiff(this.get('model.document.id'), pageId, revisionId).then((revision) => {
+				this.set('model.diff', revision);
+			});
+		},
+
+		onRollback(pageId, revisionId) {
+			this.audit.record("restored-page");
+
+			this.get('documentService').rollbackPage(this.get('model.document.id'), pageId, revisionId).then(() => {
+				this.transitionToRoute('document', {
+					queryParams: {
+						page: pageId
+					}
+				});
+			});
+		}
+	}
+});

app/app/pods/document/history/route.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+	documentService: Ember.inject.service('document'),
+	folderService: Ember.inject.service('folder'),
+
+	model() {
+		return Ember.RSVP.hash({
+			folders: this.modelFor('document').folders,
+			folder: this.modelFor('document').folder,
+			document: this.modelFor('document').document,
+			pages: this.modelFor('document').pages,
+			diff: "",
+			revisions: this.get('documentService').getDocumentRevisions(this.modelFor('document').document.get('id'))
+		});
+	}
+});

app/app/pods/document/history/template.hbs

@@ -0,0 +1,2 @@
+{{document/document-history document=model.document folder=model.folder pages=model.pages revisions=model.revisions diff=model.diff
+	onFetchDiff=(action 'onFetchDiff') onRollback=(action 'onRollback')}}

app/app/router.js

@@ -47,6 +47,9 @@ export default Router.map(function () {
 		this.route('wizard', {
 			path: 'add'
 		});
+		this.route('history', {
+			path: 'history'
+		});
 	});
 
 	this.route('customize', {

app/app/services/document.js

@@ -170,6 +170,14 @@ export default Ember.Service.extend({
 		});
 	},
 
+	getDocumentRevisions(documentId) {
+		let url = `documents/${documentId}/revisions`;
+
+		return this.get('ajax').request(url, {
+			method: "GET"
+		});
+	},
+
 	getPageRevisions(documentId, pageId) {
 		let url = `documents/${documentId}/pages/${pageId}/revisions`;
 
@@ -184,6 +192,10 @@ export default Ember.Service.extend({
 		return this.get('ajax').request(url, {
 			method: "GET",
 			dataType: 'text'
+		}).then((response) => {
+			return response;
+		}).catch((error) => {
+			return "";
 		});
 	},
 

app/app/styles/view/document/all.scss

@@ -3,6 +3,7 @@
 @import "edit-tools.scss";
 @import "editor.scss";
 @import "files.scss";
+@import "history.scss";
 @import "sidebar.scss";
 @import "toolbar.scss";
 @import "wizard.scss";

app/app/styles/view/document/history.scss

@@ -0,0 +1,72 @@
+.document-history {
+	position: relative;
+
+	> .sidebar {
+		position: relative;
+		overflow-y: scroll;
+
+		> .heading {
+			font-size: 1.2rem;
+			font-family: $font-light;
+			color: $color-off-black;
+		}
+
+		> .line {
+			width: 2px;
+			background-color: $color-stroke;
+			height: 100%;
+			position: absolute;
+			left: 17px;
+			z-index: -1;
+		}
+
+		> .items {
+			list-style-type: none;
+			margin: 0;
+			padding: 20px 0 10px;
+			white-space: nowrap;
+
+			> .item {
+				margin: 0;
+				padding: 10px 0;
+				width: 100%;
+				color: $color-off-black;
+				@include ease-in();
+				cursor: pointer;
+
+				> .avatar-box {
+					display: inline-block;
+				}
+
+				> .date {
+					display: inline-block;
+					font-size: 1rem;
+					font-family: $font-light;
+					margin-left: 25px;
+				}
+
+				> .detail {
+					display: block;
+					font-size: 1.2rem;
+					font-family: $font-semibold;
+					margin-left: 65px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				&:hover {
+					color: $color-link;
+				}
+			}
+
+			> .deleted {
+				color: $color-red;
+				cursor: not-allowed;
+
+				&:hover {
+					color: $color-red;
+				}
+			}
+		}
+	}
+}

app/app/styles/view/document/toolbar.scss

@@ -88,5 +88,27 @@
 				color: $color-primary;
 			}
 		}
+
+		> a  {
+			display: inline-block;
+
+			> .option {
+				list-style-type: none;
+				display: inline-block;
+				margin: 0 0 0 20px;
+				padding: 0;
+				color: $color-gray;
+				cursor: pointer;
+				@include ease-in();
+
+				&:hover {
+					color: $color-link;
+				}
+
+				> .pinned {
+					color: $color-primary;
+				}
+			}
+		}
 	}
 }

app/app/templates/components/document/document-history.hbs

@@ -0,0 +1,40 @@
+<div class="container width-100">
+	<div class="row">
+
+		<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
+			{{#if hasDiff}}
+				<div id="restore-history-button" class="regular-button button-green pull-right margin-right-40">
+					Restore
+				</div>
+				{{#dropdown-dialog target="restore-history-button" position="bottom right" button="Restore" color="flat-green" onAction=(action 'rollback')}}
+					<p>Are you sure you want to roll back to this version?</p>
+				{{/dropdown-dialog}}
+				<div class="clearfix" />
+				<div class="doc-layout">
+					{{{diff}}}
+				</div>
+			{{/if}}
+		</div>
+
+		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
+			<div class="document-history">
+				<div class="sidebar">
+					<p class="heading">{{revisions.length}} changes</p>
+					<div class="line" />
+					<ul class="items">
+						{{#each revisions as |r|}}
+				            <li class="item {{if r.deleted 'deleted'}}" {{action 'getDiff' r}}>
+								<div class="avatar-box">
+									{{ui/ui-avatar refId=r.id firstname=r.firstname lastname=r.lastname}}
+				                </div>
+								<div class="date">{{time-ago r.created}}</div>
+				                <div class="detail">{{r.title}}</div>
+				            </li>
+				        {{/each}}
+					</ul>
+				</div>
+			</div>
+		</div>
+
+	</div>
+</div>

app/app/templates/components/document/document-toolbar.hbs

@@ -36,6 +36,11 @@
 				<li class="option" id="pin-document-button"><i class="material-icons">star_border</i></li>
 			{{/if}}
 		{{/if}}
+		{{#if session.authenticated}}
+			{{#link-to 'document.history'}}
+				<li class="option"><i class="material-icons">history</i></li>
+			{{/link-to}}
+		{{/if}}
 		{{#if isEditor}}
 			<li class="option" id="save-template-button"><i class="material-icons">content_copy</i></li>
 			<li class="option" id="set-meta-button"><i class="material-icons">settings</i></li>

app/app/templates/components/ui/ui-avatar.hbs

@@ -0,0 +1,3 @@
+<div class="avatar" id="avatar-{{refId}}" data-tooltip="{{firstname}} {{lastname}}" data-tooltip-position="top center">
+	{{user-initials firstname lastname}}
+</div>

app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "documize",
-	"version": "0.34.1",
+	"version": "0.35.0",
 	"description": "The Document IDE",
 	"private": true,
 	"directories": {