mirror of
https://github.com/documize/community.git
synced 2025-07-22 06:39:43 +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');
|
||||
doc.set('tags', tags);
|
||||
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')}}
|
||||
{{document/view-activity document=model.document pages=model.pages permissions=model.permissions}}
|
||||
{{/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">
|
||||
{{document/document-sidebar tab=tab
|
||||
|
|
|
|||
|
|
@ -38,9 +38,6 @@ export default Router.map(function () {
|
|||
this.route('block', {
|
||||
path: 'block/:block_id'
|
||||
});
|
||||
this.route('history', {
|
||||
path: 'history'
|
||||
});
|
||||
});
|
||||
|
||||
this.route('customize', {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import "history.scss";
|
||||
@import "toc.scss";
|
||||
@import "new-section.scss";
|
||||
|
|
|
|||
|
|
@ -3,4 +3,5 @@
|
|||
@import "section-editor.scss";
|
||||
@import "view-attachment.scss";
|
||||
@import "view-activity.scss";
|
||||
@import "view-revision.scss";
|
||||
@import "wysiwyg.scss";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
.zone-document-history {
|
||||
margin-left: 60px;
|
||||
padding: 20px 60px;
|
||||
z-index: 777;
|
||||
position: relative;
|
||||
|
||||
.diff-zone {
|
||||
.view-revision {
|
||||
> .diff-zone {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
|
|
@ -12,16 +7,10 @@
|
|||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
margin: 50px 0;
|
||||
|
||||
> .canvas {
|
||||
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