mirror of
https://github.com/documize/community.git
synced 2025-07-21 22:29:41 +02:00
document view revisions UX
This commit is contained in:
Harvey Kandola
parent
66bc874d95
commit
e61b2d0aa8
13 changed files with 130 additions and 160 deletions
|
|
@ -1,51 +0,0 @@
|
||||||
// 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 { computed, set } from '@ember/object';
|
|
||||||
|
|
||||||
import Component from '@ember/component';
|
|
||||||
|
|
||||||
export default Component.extend({
|
|
||||||
revision: null,
|
|
||||||
hasDiff: computed('diff', function () {
|
|
||||||
return this.get('diff').length > 0;
|
|
||||||
}),
|
|
||||||
|
|
||||||
didReceiveAttrs() {
|
|
||||||
let revisions = this.get('revisions');
|
|
||||||
|
|
||||||
revisions.forEach((r) => {
|
|
||||||
set(r, 'deleted', r.revisions === 0);
|
|
||||||
set(r, 'label', `${r.created} - ${r.firstname} ${r.lastname} - ${r.title}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (revisions.length > 0 && is.null(this.get('revision'))) {
|
|
||||||
this.send('onSelectRevision', revisions[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.set('revisions', revisions);
|
|
||||||
},
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
onSelectRevision(revision) {
|
|
||||||
this.set('revision', revision);
|
|
||||||
|
|
||||||
if (!revision.deleted) {
|
|
||||||
this.attrs.onFetchDiff(revision.pageId, revision.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onRollback() {
|
|
||||||
let revision = this.get('revision');
|
|
||||||
this.attrs.onRollback(revision.pageId, revision.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
73
gui/app/components/document/view-revision.js
Normal file
73
gui/app/components/document/view-revision.js
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
// 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 { computed, set } from '@ember/object';
|
||||||
|
import { inject as service } from '@ember/service';
|
||||||
|
import Component from '@ember/component';
|
||||||
|
import ModalMixin from '../../mixins/modal';
|
||||||
|
|
||||||
|
export default Component.extend(ModalMixin, {
|
||||||
|
documentService: service('document'),
|
||||||
|
revisions: [],
|
||||||
|
revision: null,
|
||||||
|
diff: '',
|
||||||
|
hasRevisions: computed('revisions', function() {
|
||||||
|
return this.get('revisions').length > 0;
|
||||||
|
}),
|
||||||
|
hasDiff: computed('diff', function() {
|
||||||
|
return this.get('diff').length > 0;
|
||||||
|
}),
|
||||||
|
|
||||||
|
didReceiveAttrs() {
|
||||||
|
this._super(...arguments);
|
||||||
|
this.fetchRevisions();
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchRevisions() {
|
||||||
|
this.get('documentService').getDocumentRevisions(this.get('document.id')).then((revisions) => {
|
||||||
|
revisions.forEach((r) => {
|
||||||
|
set(r, 'deleted', r.revisions === 0);
|
||||||
|
let date = moment(r.created).format('Do MMMM YYYY HH:mm');
|
||||||
|
let format = `${r.firstname} ${r.lastname} on ${date} changed ${r.title}`;
|
||||||
|
set(r, 'label', format);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.set('revisions', revisions);
|
||||||
|
|
||||||
|
if (revisions.length > 0 && is.null(this.get('revision'))) {
|
||||||
|
this.send('onSelectRevision', revisions[0]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchDiff(pageId, revisionId) {
|
||||||
|
this.get('documentService').getPageRevisionDiff(this.get('document.id'), pageId, revisionId).then((revision) => {
|
||||||
|
this.set('diff', revision);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
onSelectRevision(revision) {
|
||||||
|
this.set('revision', revision);
|
||||||
|
|
||||||
|
if (!revision.deleted) {
|
||||||
|
this.fetchDiff(revision.pageId, revision.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onRollback() {
|
||||||
|
let revision = this.get('revision');
|
||||||
|
this.attrs.onRollback(revision.pageId, revision.id);
|
||||||
|
|
||||||
|
this.modalClose('#document-rollback-modal');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import { inject as service } from '@ember/service';
|
|
||||||
import Controller from '@ember/controller';
|
|
||||||
import NotifierMixin from '../../../mixins/notifier';
|
|
||||||
|
|
||||||
export default Controller.extend(NotifierMixin, {
|
|
||||||
documentService: service('document'),
|
|
||||||
|
|
||||||
actions: {
|
|
||||||
onFetchDiff(pageId, revisionId) {
|
|
||||||
this.get('documentService').getPageRevisionDiff(this.get('model.document.id'), pageId, revisionId).then((revision) => {
|
|
||||||
this.set('model.diff', revision);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onRollback(pageId, revisionId) {
|
|
||||||
this.get('documentService').rollbackPage(this.get('model.document.id'), pageId, revisionId).then(() => {
|
|
||||||
this.transitionToRoute('document.index',
|
|
||||||
this.get('model.folder.id'),
|
|
||||||
this.get('model.folder.slug'),
|
|
||||||
this.get('model.document.id'),
|
|
||||||
this.get('model.document.slug'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import { hash } from 'rsvp';
|
|
||||||
import { inject as service } from '@ember/service';
|
|
||||||
import Route from '@ember/routing/route';
|
|
||||||
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
|
||||||
|
|
||||||
export default Route.extend(AuthenticatedRouteMixin, {
|
|
||||||
documentService: service('document'),
|
|
||||||
folderService: service('folder'),
|
|
||||||
|
|
||||||
model() {
|
|
||||||
return 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'))
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
setupController(controller, model) {
|
|
||||||
controller.set('model', model);
|
|
||||||
controller.set('hasRevisions', model.revisions.length > 0);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<div class="zone-document-history">
|
|
||||||
<div class="page-container">
|
|
||||||
<div id="page-content-wrapper">
|
|
||||||
<div id="zone-document-content" class="zone-document-content">
|
|
||||||
<div class="back-to-space">
|
|
||||||
{{#link-to 'document.index' model.folder.id model.folder.slug model.document.id model.document.slug}}
|
|
||||||
<i class="material-icons">arrow_back</i> {{model.document.name}}
|
|
||||||
{{/link-to}}
|
|
||||||
</div>
|
|
||||||
{{document/document-heading document=model.document}}
|
|
||||||
{{#if hasRevisions}}
|
|
||||||
{{document/document-history document=model.document folder=model.folder pages=model.pages
|
|
||||||
revisions=model.revisions diff=model.diff onFetchDiff=(action 'onFetchDiff') onRollback=(action 'onRollback')}}
|
|
||||||
{{else}}
|
|
||||||
No revisions made
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -238,6 +238,13 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
|
||||||
let doc = this.get('model.document');
|
let doc = this.get('model.document');
|
||||||
doc.set('tags', tags);
|
doc.set('tags', tags);
|
||||||
this.get('documentService').save(doc);
|
this.get('documentService').save(doc);
|
||||||
}
|
},
|
||||||
|
|
||||||
|
onRollback(pageId, revisionId) {
|
||||||
|
this.get('documentService').rollbackPage(this.get('model.document.id'), pageId, revisionId).then(() => {
|
||||||
|
this.set('tab', 'content');
|
||||||
|
this.get('target._routerMicrolib').refresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,10 @@
|
||||||
{{#if (eq tab 'activity')}}
|
{{#if (eq tab 'activity')}}
|
||||||
{{document/view-activity document=model.document pages=model.pages permissions=model.permissions}}
|
{{document/view-activity document=model.document pages=model.pages permissions=model.permissions}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if (eq tab 'revision')}}
|
||||||
|
{{document/view-revision document=model.document folder=model.folder pages=model.pages onRollback=(action 'onRollback')}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<div id="zone-document-content" class="zone-document-content">
|
<div id="zone-document-content" class="zone-document-content">
|
||||||
{{document/document-sidebar tab=tab
|
{{document/document-sidebar tab=tab
|
||||||
|
|
|
||||||
|
|
@ -38,9 +38,6 @@ export default Router.map(function () {
|
||||||
this.route('block', {
|
this.route('block', {
|
||||||
path: 'block/:block_id'
|
path: 'block/:block_id'
|
||||||
});
|
});
|
||||||
this.route('history', {
|
|
||||||
path: 'history'
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.route('customize', {
|
this.route('customize', {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
@import "history.scss";
|
|
||||||
@import "toc.scss";
|
@import "toc.scss";
|
||||||
@import "new-section.scss";
|
@import "new-section.scss";
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,5 @@
|
||||||
@import "section-editor.scss";
|
@import "section-editor.scss";
|
||||||
@import "view-attachment.scss";
|
@import "view-attachment.scss";
|
||||||
@import "view-activity.scss";
|
@import "view-activity.scss";
|
||||||
|
@import "view-revision.scss";
|
||||||
@import "wysiwyg.scss";
|
@import "wysiwyg.scss";
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
.zone-document-history {
|
.view-revision {
|
||||||
margin-left: 60px;
|
> .diff-zone {
|
||||||
padding: 20px 60px;
|
|
||||||
z-index: 777;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.diff-zone {
|
|
||||||
@extend .transition-all;
|
@extend .transition-all;
|
||||||
@include border-radius(2px);
|
@include border-radius(2px);
|
||||||
@include ease-in();
|
@include ease-in();
|
||||||
|
|
@ -12,16 +7,10 @@
|
||||||
padding: 25px 50px;
|
padding: 25px 50px;
|
||||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
|
margin: 50px 0;
|
||||||
|
|
||||||
> .canvas {
|
> .canvas {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.revision-picker {
|
|
||||||
width: 300px;
|
|
||||||
float: left;
|
|
||||||
margin-top: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
{{ui-select tagName="span" class="revision-picker" content=revisions action=(action 'onSelectRevision') optionValuePath="id" optionLabelPath="label"}}
|
|
||||||
|
|
||||||
<div id="restore-history-button" class="regular-button button-green pull-right">Restore</div>
|
|
||||||
{{#dropdown-dialog target="restore-history-button" position="bottom right" button="Restore" color="flat-green" onAction=(action 'onRollback')}}
|
|
||||||
<p>Are you sure you want to roll back to this version?</p>
|
|
||||||
{{/dropdown-dialog}}
|
|
||||||
<div class="clearfix" />
|
|
||||||
<div class="margin-bottom-50" />
|
|
||||||
|
|
||||||
<div class="diff-zone">
|
|
||||||
{{#if hasDiff}}
|
|
||||||
<div class="is-a-page wysiwyg">
|
|
||||||
{{{diff}}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
<div class="clearfix" />
|
|
||||||
</div>
|
|
||||||
41
gui/app/templates/components/document/view-revision.hbs
Normal file
41
gui/app/templates/components/document/view-revision.hbs
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<div class="mt-5">
|
||||||
|
{{#if hasRevisions}}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-10">
|
||||||
|
{{ui-select tagName="span" class="revision-picker" content=revisions action=(action 'onSelectRevision') optionValuePath="id" optionLabelPath="label"}}
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div id="restore-history-button" class="btn btn-success" data-toggle="modal" data-target="#document-rollback-modal" data-backdrop="static">Restore</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 view-revision">
|
||||||
|
<div class="diff-zone">
|
||||||
|
{{#if hasDiff}}
|
||||||
|
<div class="wysiwyg">
|
||||||
|
{{{diff}}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="document-rollback-modal" class="modal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">Rollback Document Section</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>AAre you sure you want to roll back to this revision?</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-success" onclick={{action 'onRollback'}}>Rollback</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
<p>No revisions made</p>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue