mirror of
https://github.com/documize/community.git
synced 2025-07-23 07:09:43 +02:00
Update document view to use new UI framework
1. Sidebar contains ToC & attachments. 2. Document meta moved up before content (to frame context). 3. Per section toolbar re-designed. Co-Authored-By: Harvey Kandola <harvey@documize.com>
This commit is contained in:
sauls8t
parent
3d2060ca60
commit
93253be0f2
27 changed files with 528 additions and 553 deletions
|
|
@ -10,8 +10,6 @@
|
|||
// https://documize.com
|
||||
|
||||
import { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
|
@ -21,99 +19,13 @@ export default Component.extend(Modals, {
|
|||
sessionService: service('session'),
|
||||
categoryService: service('category'),
|
||||
router: service(),
|
||||
contributorMsg: '',
|
||||
approverMsg: '',
|
||||
userChanges: notEmpty('contributorMsg'),
|
||||
isApprover: computed('permissions', function() {
|
||||
return this.get('permissions.documentApprove');
|
||||
}),
|
||||
isSpaceAdmin: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
changeControlMsg: computed('document.protection', function() {
|
||||
let p = this.get('document.protection');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
switch (p) {
|
||||
case constants.ProtectionType.None:
|
||||
msg = constants.ProtectionType.NoneLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Lock:
|
||||
msg = constants.ProtectionType.LockLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Review:
|
||||
msg = constants.ProtectionType.ReviewLabel;
|
||||
break;
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
approvalMsg: computed('document.{protection,approval}', function() {
|
||||
let p = this.get('document.protection');
|
||||
let a = this.get('document.approval');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
if (p === constants.ProtectionType.Review) {
|
||||
switch (a) {
|
||||
case constants.ApprovalType.Anybody:
|
||||
msg = constants.ApprovalType.AnybodyLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Majority:
|
||||
msg = constants.ApprovalType.MajorityLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Unanimous:
|
||||
msg = constants.ApprovalType.UnanimousLabel;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.workflowStatus();
|
||||
this.load();
|
||||
},
|
||||
|
||||
workflowStatus() {
|
||||
let pages = this.get('pages');
|
||||
let contributorMsg = '';
|
||||
let userPendingCount = 0;
|
||||
let userReviewCount = 0;
|
||||
let userRejectedCount = 0;
|
||||
let approverMsg = '';
|
||||
let approverPendingCount = 0;
|
||||
let approverReviewCount = 0;
|
||||
let approverRejectedCount = 0;
|
||||
|
||||
pages.forEach((item) => {
|
||||
if (item.get('userHasChangePending')) userPendingCount+=1;
|
||||
if (item.get('userHasChangeAwaitingReview')) userReviewCount+=1;
|
||||
if (item.get('userHasChangeRejected')) userRejectedCount+=1;
|
||||
if (item.get('changePending')) approverPendingCount+=1;
|
||||
if (item.get('changeAwaitingReview')) approverReviewCount+=1;
|
||||
if (item.get('changeRejected')) approverRejectedCount+=1;
|
||||
});
|
||||
|
||||
if (userPendingCount > 0 || userReviewCount > 0 || userRejectedCount > 0) {
|
||||
let label = userPendingCount === 1 ? 'change' : 'changes';
|
||||
contributorMsg = `${userPendingCount} ${label} progressing, ${userReviewCount} awaiting review, ${userRejectedCount} rejected`;
|
||||
}
|
||||
this.set('contributorMsg', contributorMsg);
|
||||
|
||||
if (approverPendingCount > 0 || approverReviewCount > 0 || approverRejectedCount > 0) {
|
||||
let label = approverPendingCount === 1 ? 'change' : 'changes';
|
||||
approverMsg = `${approverPendingCount} ${label} progressing, ${approverReviewCount} awaiting review, ${approverRejectedCount} rejected`;
|
||||
}
|
||||
|
||||
this.set('approverMsg', approverMsg);
|
||||
this.set('selectedVersion', this.get('versions').findBy('documentId', this.get('document.id')));
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
|
|
@ -133,20 +45,6 @@ export default Component.extend(Modals, {
|
|||
},
|
||||
|
||||
actions: {
|
||||
onSelectVersion(version) {
|
||||
let space = this.get('folder');
|
||||
|
||||
this.get('router').transitionTo('document',
|
||||
space.get('id'), space.get('slug'),
|
||||
version.documentId, this.get('document.slug'));
|
||||
},
|
||||
|
||||
onEditLifecycle() {
|
||||
},
|
||||
|
||||
onEditProtection() {
|
||||
},
|
||||
|
||||
onEditCategory() {
|
||||
if (!this.get('permissions.spaceManage')) return;
|
||||
|
||||
|
|
|
|||
145
gui/app/components/document/document-toolbar.js
Normal file
145
gui/app/components/document/document-toolbar.js
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
// 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 $ from 'jquery';
|
||||
import { inject as service } from '@ember/service';
|
||||
import AuthMixin from '../../mixins/auth';
|
||||
import ModalMixin from '../../mixins/modal';
|
||||
import Notifier from '../../mixins/notifier';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(ModalMixin, AuthMixin, Notifier, {
|
||||
store: service(),
|
||||
spaceSvc: service('folder'),
|
||||
session: service(),
|
||||
appMeta: service(),
|
||||
pinned: service(),
|
||||
browserSvc: service('browser'),
|
||||
documentSvc: service('document'),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.pinState = {
|
||||
isPinned: false,
|
||||
pinId: '',
|
||||
newName: ''
|
||||
};
|
||||
this.saveTemplate = {
|
||||
name: '',
|
||||
description: ''
|
||||
};
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
let doc = this.get('document');
|
||||
|
||||
this.get('pinned').isDocumentPinned(doc.get('id')).then((pinId) => {
|
||||
this.set('pinState.pinId', pinId);
|
||||
this.set('pinState.isPinned', pinId !== '');
|
||||
this.set('pinState.newName', doc.get('name'));
|
||||
});
|
||||
|
||||
this.set('saveTemplate.name', this.get('document.name'));
|
||||
this.set('saveTemplate.description', this.get('document.excerpt'));
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
this.modalInputFocus('#document-template-modal', '#new-template-name');
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
},
|
||||
|
||||
actions: {
|
||||
onDocumentDelete() {
|
||||
this.modalClose('#document-delete-modal');
|
||||
|
||||
let cb = this.get('onDocumentDelete');
|
||||
cb();
|
||||
},
|
||||
|
||||
onPrintDocument() {
|
||||
window.print();
|
||||
},
|
||||
|
||||
onUnpin() {
|
||||
this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
|
||||
this.set('pinState.isPinned', false);
|
||||
this.set('pinState.pinId', '');
|
||||
this.eventBus.publish('pinChange');
|
||||
});
|
||||
},
|
||||
|
||||
onPin() {
|
||||
let pin = {
|
||||
pin: this.get('pinState.newName'),
|
||||
documentId: this.get('document.id'),
|
||||
spaceId: this.get('space.id')
|
||||
};
|
||||
|
||||
this.get('pinned').pinItem(pin).then((pin) => {
|
||||
this.set('pinState.isPinned', true);
|
||||
this.set('pinState.pinId', pin.get('id'));
|
||||
this.eventBus.publish('pinChange');
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
onSaveTemplate() {
|
||||
let name = this.get('saveTemplate.name');
|
||||
let excerpt = this.get('saveTemplate.description');
|
||||
|
||||
if (is.empty(name)) {
|
||||
$("#new-template-name").addClass("is-invalid").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (is.empty(excerpt)) {
|
||||
$("#new-template-desc").addClass("is-invalid").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
$("#new-template-name").removeClass("is-invalid");
|
||||
$("#new-template-desc").removeClass("is-invalid");
|
||||
|
||||
this.set('saveTemplate.name', '');
|
||||
this.set('saveTemplate.description', '');
|
||||
|
||||
let cb = this.get('onSaveTemplate');
|
||||
cb(name, excerpt);
|
||||
|
||||
this.modalClose('#document-template-modal');
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
onExport() {
|
||||
let spec = {
|
||||
spaceId: this.get('document.folderId'),
|
||||
data: [],
|
||||
filterType: 'document',
|
||||
};
|
||||
|
||||
spec.data.push(this.get('document.id'));
|
||||
|
||||
this.get('documentSvc').export(spec).then((htmlExport) => {
|
||||
this.get('browserSvc').downloadFile(htmlExport, this.get('document.slug') + '.html');
|
||||
this.notifySuccess('Exported');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
156
gui/app/components/document/zdocument-meta.js
Normal file
156
gui/app/components/document/zdocument-meta.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// 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 { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(Modals, {
|
||||
documentService: service('document'),
|
||||
sessionService: service('session'),
|
||||
categoryService: service('category'),
|
||||
router: service(),
|
||||
contributorMsg: '',
|
||||
approverMsg: '',
|
||||
userChanges: notEmpty('contributorMsg'),
|
||||
isApprover: computed('permissions', function() {
|
||||
return this.get('permissions.documentApprove');
|
||||
}),
|
||||
isSpaceAdmin: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
changeControlMsg: computed('document.protection', function() {
|
||||
let p = this.get('document.protection');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
switch (p) {
|
||||
case constants.ProtectionType.None:
|
||||
msg = constants.ProtectionType.NoneLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Lock:
|
||||
msg = constants.ProtectionType.LockLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Review:
|
||||
msg = constants.ProtectionType.ReviewLabel;
|
||||
break;
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
approvalMsg: computed('document.{protection,approval}', function() {
|
||||
let p = this.get('document.protection');
|
||||
let a = this.get('document.approval');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
if (p === constants.ProtectionType.Review) {
|
||||
switch (a) {
|
||||
case constants.ApprovalType.Anybody:
|
||||
msg = constants.ApprovalType.AnybodyLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Majority:
|
||||
msg = constants.ApprovalType.MajorityLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Unanimous:
|
||||
msg = constants.ApprovalType.UnanimousLabel;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.workflowStatus();
|
||||
this.load();
|
||||
},
|
||||
|
||||
workflowStatus() {
|
||||
let pages = this.get('pages');
|
||||
let contributorMsg = '';
|
||||
let userPendingCount = 0;
|
||||
let userReviewCount = 0;
|
||||
let userRejectedCount = 0;
|
||||
let approverMsg = '';
|
||||
let approverPendingCount = 0;
|
||||
let approverReviewCount = 0;
|
||||
let approverRejectedCount = 0;
|
||||
|
||||
pages.forEach((item) => {
|
||||
if (item.get('userHasChangePending')) userPendingCount+=1;
|
||||
if (item.get('userHasChangeAwaitingReview')) userReviewCount+=1;
|
||||
if (item.get('userHasChangeRejected')) userRejectedCount+=1;
|
||||
if (item.get('changePending')) approverPendingCount+=1;
|
||||
if (item.get('changeAwaitingReview')) approverReviewCount+=1;
|
||||
if (item.get('changeRejected')) approverRejectedCount+=1;
|
||||
});
|
||||
|
||||
if (userPendingCount > 0 || userReviewCount > 0 || userRejectedCount > 0) {
|
||||
let label = userPendingCount === 1 ? 'change' : 'changes';
|
||||
contributorMsg = `${userPendingCount} ${label} progressing, ${userReviewCount} awaiting review, ${userRejectedCount} rejected`;
|
||||
}
|
||||
this.set('contributorMsg', contributorMsg);
|
||||
|
||||
if (approverPendingCount > 0 || approverReviewCount > 0 || approverRejectedCount > 0) {
|
||||
let label = approverPendingCount === 1 ? 'change' : 'changes';
|
||||
approverMsg = `${approverPendingCount} ${label} progressing, ${approverReviewCount} awaiting review, ${approverRejectedCount} rejected`;
|
||||
}
|
||||
|
||||
this.set('approverMsg', approverMsg);
|
||||
this.set('selectedVersion', this.get('versions').findBy('documentId', this.get('document.id')));
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
});
|
||||
|
||||
let tagz = [];
|
||||
if (!_.isUndefined(this.get('document.tags')) && this.get('document.tags').length > 1) {
|
||||
let tags = this.get('document.tags').split('#');
|
||||
_.each(tags, function(tag) {
|
||||
if (tag.length > 0) {
|
||||
tagz.pushObject(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.set('tagz', A(tagz));
|
||||
},
|
||||
|
||||
actions: {
|
||||
onSelectVersion(version) {
|
||||
let space = this.get('folder');
|
||||
|
||||
this.get('router').transitionTo('document',
|
||||
space.get('id'), space.get('slug'),
|
||||
version.documentId, this.get('document.slug'));
|
||||
},
|
||||
|
||||
onEditLifecycle() {
|
||||
},
|
||||
|
||||
onEditProtection() {
|
||||
},
|
||||
|
||||
onEditCategory() {
|
||||
if (!this.get('permissions.spaceManage')) return;
|
||||
|
||||
this.get('router').transitionTo('document.settings', {queryParams: {tab: 'meta'}});
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue