mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
Streamline document meta view and editing experience
Meta data: 1. Condensed layout. 2. Unified editing. Co-Authored-By: Saul S <sauls8t@users.noreply.github.com>
This commit is contained in:
McMatts
parent
f70d4b33a3
commit
27fde0dac8
26 changed files with 2389 additions and 1956 deletions
|
|
@ -10,36 +10,18 @@
|
|||
// https://documize.com
|
||||
|
||||
import $ from 'jquery';
|
||||
import { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { A } from '@ember/array';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import ModalMixin from '../../mixins/modal';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Tooltips from '../../mixins/tooltip';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(ModalMixin, {
|
||||
documentService: service('document'),
|
||||
categoryService: service('category'),
|
||||
export default Component.extend(Modals, Tooltips, {
|
||||
documentService: service('document'),
|
||||
sessionService: service('session'),
|
||||
|
||||
categories: A([]),
|
||||
newCategory: '',
|
||||
showCategoryModal: false,
|
||||
hasCategories: computed('categories', function() {
|
||||
return this.get('categories').length > 0;
|
||||
}),
|
||||
canSelectCategory: computed('categories', function() {
|
||||
return (this.get('categories').length > 0 && this.get('permissions.documentEdit'));
|
||||
}),
|
||||
canAddCategory: computed('categories', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
|
||||
maxTags: 3,
|
||||
tagz: A([]),
|
||||
tagzModal: A([]),
|
||||
newTag: '',
|
||||
categoryService: service('category'),
|
||||
|
||||
contributorMsg: '',
|
||||
approverMsg: '',
|
||||
|
|
@ -91,67 +73,56 @@ export default Component.extend(ModalMixin, {
|
|||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.load();
|
||||
|
||||
this.workflowStatus();
|
||||
this.popovers();
|
||||
this.load();
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
$('#document-tags-modal').on('show.bs.modal', (event) => { // eslint-disable-line no-unused-vars
|
||||
schedule('afterRender', () => {
|
||||
$("#add-tag-field").focus();
|
||||
|
||||
$("#add-tag-field").off("keydown").on("keydown", function(e) {
|
||||
if (e.shiftKey) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e.which === 13 || e.which === 45 || e.which === 189 || e.which === 8 || e.which === 127 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) || (e.which >= 48 && e.which <= 57)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// make copy of tags for editing
|
||||
this.set('tagzEdit', this.get('tagz'));
|
||||
});
|
||||
});
|
||||
this.popovers();
|
||||
this.renderTooltips();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
$("#add-tag-field").off("keydown");
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
|
||||
let cats = A(categories);
|
||||
this.set('categories', cats);
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
selected.forEach((s) => {
|
||||
let cat = cats.findBy('id', s.id);
|
||||
if (is.not.undefined(cat)) {
|
||||
cat.set('selected', true);
|
||||
this.set('categories', cats);
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#document-lifecycle-popover').popover('dispose');
|
||||
$('#document-protection-popover').popover('dispose');
|
||||
this.removeTooltips();
|
||||
},
|
||||
|
||||
popovers() {
|
||||
let constants = this.get('constants');
|
||||
|
||||
$('#document-lifecycle-popover').popover('dispose');
|
||||
$('#document-protection-popover').popover('dispose');
|
||||
|
||||
$('#document-lifecycle-popover').popover({
|
||||
html: true,
|
||||
title: 'Lifecycle',
|
||||
content: "<p>Draft — restricted visiblity and not searchable</p><p>Live — document visible to all</p><p>Archived — not visible or searchable</p>",
|
||||
placement: 'top'
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
let ccMsg = `<p>${this.changeControlMsg}</p>`;
|
||||
|
||||
this.set('tagz', A(tagz));
|
||||
if (this.get('document.protection') === constants.ProtectionType.Review) {
|
||||
ccMsg += '<ul>'
|
||||
ccMsg += `<li>${this.approvalMsg}</li>`;
|
||||
if (this.get('userChanges')) ccMsg += `<li>Your contributions: ${this.contributorMsg}</li>`;
|
||||
if (this.get('isApprover') && this.get('approverMsg.length') > 0) ccMsg += `<li>${this.approverMsg}</li>`;
|
||||
ccMsg += '</ul>'
|
||||
}
|
||||
|
||||
$('#document-protection-popover').popover({
|
||||
html: true,
|
||||
title: 'Change Control',
|
||||
content: ccMsg,
|
||||
placement: 'top'
|
||||
});
|
||||
},
|
||||
|
||||
workflowStatus() {
|
||||
|
|
@ -184,97 +155,38 @@ export default Component.extend(ModalMixin, {
|
|||
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')));
|
||||
|
||||
this.popovers();
|
||||
},
|
||||
|
||||
actions: {
|
||||
onShowCategoryModal() {
|
||||
this.set('showCategoryModal', true);
|
||||
},
|
||||
load() {
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
});
|
||||
|
||||
onSaveCategory() {
|
||||
let docId = this.get('document.id');
|
||||
let folderId = this.get('folder.id');
|
||||
let link = this.get('categories').filterBy('selected', true);
|
||||
let unlink = this.get('categories').filterBy('selected', false);
|
||||
let toLink = [];
|
||||
let toUnlink = [];
|
||||
|
||||
// prepare links associated with document
|
||||
link.forEach((l) => {
|
||||
let t = {
|
||||
folderId: folderId,
|
||||
documentId: docId,
|
||||
categoryId: l.get('id')
|
||||
};
|
||||
|
||||
toLink.push(t);
|
||||
});
|
||||
|
||||
// prepare links no longer associated with document
|
||||
unlink.forEach((l) => {
|
||||
let t = {
|
||||
folderId: folderId,
|
||||
documentId: docId,
|
||||
categoryId: l.get('id')
|
||||
};
|
||||
|
||||
toUnlink.pushObject(t);
|
||||
});
|
||||
|
||||
this.set('showCategoryModal', false);
|
||||
|
||||
this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
||||
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
||||
this.load();
|
||||
});
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
onAddTag(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let tags = this.get("tagzEdit");
|
||||
let tag = this.get('newTag');
|
||||
tag = tag.toLowerCase().trim();
|
||||
|
||||
// empty or dupe?
|
||||
if (tag.length === 0 || _.contains(tags, tag) || tags.length >= this.get('maxTags') || tag.startsWith('-')) {
|
||||
$('#add-tag-field').addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
tags.pushObject(tag);
|
||||
this.set('tagzEdit', tags);
|
||||
this.set('newTag', '');
|
||||
$('#add-tag-field').removeClass('is-invalid');
|
||||
},
|
||||
|
||||
onRemoveTag(tagToRemove) {
|
||||
this.set('tagzEdit', _.without(this.get("tagzEdit"), tagToRemove));
|
||||
},
|
||||
|
||||
onSaveTags() {
|
||||
let tags = this.get("tagzEdit");
|
||||
|
||||
let save = "#";
|
||||
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) {
|
||||
save = save + tag + "#";
|
||||
});
|
||||
if (tag.length > 0) {
|
||||
tagz.pushObject(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let doc = this.get('document');
|
||||
doc.set('tags', save);
|
||||
this.set('tagz', A(tagz));
|
||||
},
|
||||
|
||||
let cb = this.get('onSaveDocument');
|
||||
cb(doc);
|
||||
actions: {
|
||||
onSelectVersion(version) {
|
||||
let space = this.get('folder');
|
||||
|
||||
this.load();
|
||||
this.set('newTag', '');
|
||||
|
||||
$('#document-tags-modal').modal('hide');
|
||||
$('#document-tags-modal').modal('dispose');
|
||||
this.get('router').transitionTo('document',
|
||||
space.get('id'), space.get('slug'),
|
||||
version.documentId, this.get('document.slug'));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,31 +9,29 @@
|
|||
//
|
||||
// https://documize.com
|
||||
|
||||
import $ from 'jquery';
|
||||
import { empty } from '@ember/object/computed';
|
||||
import { computed } from '@ember/object';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Notifier from '../../mixins/notifier';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
documentService: service('document'),
|
||||
editMode: false,
|
||||
export default Component.extend(Notifier, {
|
||||
documentSvc: service('document'),
|
||||
docName: '',
|
||||
docExcerpt: '',
|
||||
hasNameError: empty('docName'),
|
||||
|
||||
canEdit: computed('permssions', 'document', function() {
|
||||
noEdits: computed('permssions', 'document', function() {
|
||||
let constants = this.get('constants');
|
||||
let permissions = this.get('permissions');
|
||||
|
||||
if (permissions.get('documentEdit') && this.get('document.protection') === constants.ProtectionType.None) {
|
||||
return true;
|
||||
if (permissions.get('documentEdit') && this.get('document.protection') !== constants.ProtectionType.None) {
|
||||
return false;
|
||||
} else if (permissions.get('documentApprove') && this.get('document.protection') === constants.ProtectionType.Review) {
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
return true;
|
||||
}),
|
||||
|
||||
keyUp(e) {
|
||||
|
|
@ -42,30 +40,31 @@ export default Component.extend({
|
|||
}
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.set('docName', this.get('document.name'));
|
||||
this.set('docExcerpt', this.get('document.excerpt'));
|
||||
},
|
||||
|
||||
actions: {
|
||||
toggleEdit() {
|
||||
this.set('docName', this.get('document.name'));
|
||||
this.set('docExcerpt', this.get('document.excerpt'));
|
||||
this.set('editMode', true);
|
||||
|
||||
schedule('afterRender', () => {
|
||||
$('#document-name').select();
|
||||
});
|
||||
},
|
||||
|
||||
onSave() {
|
||||
if (this.get('hasNameError')) return;
|
||||
|
||||
let constants = this.get('constants');
|
||||
|
||||
this.set('document.name', this.get('docName'));
|
||||
this.set('document.excerpt', this.get('docExcerpt').trim());
|
||||
this.set('editMode', false);
|
||||
|
||||
let lifecycle = this.get('lifecycle.selected');
|
||||
this.set('document.lifecycle', lifecycle);
|
||||
|
||||
let cb = this.get('onSaveDocument');
|
||||
cb(this.get('document'));
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.set('editMode', false);
|
||||
if (lifecycle === constants.Lifecycle.Draft) {
|
||||
this.get('activitySvc').clearChangeHistory(this.get('document.id'));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
173
gui/app/components/document/settings-meta.js
Normal file
173
gui/app/components/document/settings-meta.js
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
// 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 { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import Notifier from '../../mixins/notifier';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(Notifier, {
|
||||
documentSvc: service('document'),
|
||||
categoryService: service('category'),
|
||||
|
||||
categories: A([]),
|
||||
newCategory: '',
|
||||
showCategoryModal: false,
|
||||
hasCategories: computed('categories', function() {
|
||||
return this.get('categories').length > 0;
|
||||
}),
|
||||
canSelectCategory: computed('categories', function() {
|
||||
return (this.get('categories').length > 0 && this.get('permissions.documentEdit'));
|
||||
}),
|
||||
canAddCategory: computed('categories', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
|
||||
maxTags: 3,
|
||||
tag1: '',
|
||||
tag2: '',
|
||||
tag3: '',
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.load();
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
schedule('afterRender', () => {
|
||||
$("#add-tag-field0").focus();
|
||||
|
||||
$(".tag-input").off("keydown").on("keydown", function(e) {
|
||||
if (e.shiftKey && e.which === 9) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (e.shiftKey) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e.which === 9 || e.which === 13 || e.which === 16 || e.which === 45 || e.which === 189 || e.which === 8 || e.which === 127 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122) || (e.which >= 48 && e.which <= 57)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
$(".tag-input").off("keydown");
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getUserVisible(this.get('space.id')).then((categories) => {
|
||||
let cats = A(categories);
|
||||
this.set('categories', cats);
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
selected.forEach((s) => {
|
||||
let cat = cats.findBy('id', s.id);
|
||||
if (is.not.undefined(cat)) {
|
||||
cat.set('selected', true);
|
||||
this.set('categories', cats);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (!_.isUndefined(this.get('document.tags')) && this.get('document.tags').length > 1) {
|
||||
let tags = this.get('document.tags').split('#');
|
||||
let counter = 1;
|
||||
_.each(tags, (tag) => {
|
||||
tag = tag.trim();
|
||||
if (tag.length > 0) {
|
||||
this.set('tag' + counter, tag);
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
onSave() {
|
||||
this.showWait();
|
||||
|
||||
let docId = this.get('document.id');
|
||||
let folderId = this.get('space.id');
|
||||
let link = this.get('categories').filterBy('selected', true);
|
||||
let unlink = this.get('categories').filterBy('selected', false);
|
||||
let toLink = [];
|
||||
let toUnlink = [];
|
||||
|
||||
// prepare links associated with document
|
||||
link.forEach((l) => {
|
||||
let t = {
|
||||
folderId: folderId,
|
||||
documentId: docId,
|
||||
categoryId: l.get('id')
|
||||
};
|
||||
|
||||
toLink.push(t);
|
||||
});
|
||||
|
||||
// prepare links no longer associated with document
|
||||
unlink.forEach((l) => {
|
||||
let t = {
|
||||
folderId: folderId,
|
||||
documentId: docId,
|
||||
categoryId: l.get('id')
|
||||
};
|
||||
|
||||
toUnlink.pushObject(t);
|
||||
});
|
||||
|
||||
this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
||||
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
||||
this.showDone();
|
||||
});
|
||||
});
|
||||
|
||||
let tag1 = this.get("tag1").toLowerCase().trim();
|
||||
let tag2 = this.get("tag2").toLowerCase().trim();
|
||||
let tag3 = this.get("tag3").toLowerCase().trim();
|
||||
let save = "#";
|
||||
|
||||
if (tag1.startsWith('-')) {
|
||||
$('#add-tag-field1').addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
if (tag2.startsWith('-')) {
|
||||
$('#add-tag-field2').addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
if (tag3.startsWith('-')) {
|
||||
$('#add-tag-field3').addClass('is-invalid');
|
||||
return;
|
||||
}
|
||||
|
||||
(tag1.length > 0 ) ? save += (tag1 + "#") : this.set('tag1', '');
|
||||
(tag2.length > 0 && tag2 !== tag1) ? save += (tag2 + "#") : this.set('tag2', '');
|
||||
(tag3.length > 0 && tag3 !== tag1 && tag3 !== tag2) ? save += (tag3 + "#") : this.set('tag3', '');
|
||||
|
||||
let doc = this.get('document');
|
||||
doc.set('tags', save);
|
||||
|
||||
this.get('onSaveDocument')(doc);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -15,7 +15,6 @@ import { inject as service } from '@ember/service';
|
|||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['row d-print-none'],
|
||||
documentService: service('document'),
|
||||
appMeta: service(),
|
||||
hasAttachments: notEmpty('files'),
|
||||
|
|
@ -26,12 +25,12 @@ export default Component.extend({
|
|||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
this.getAttachments();
|
||||
this.deleteAttachment = { id: '', name: '' };
|
||||
},
|
||||
|
||||
this.deleteAttachment = {
|
||||
id: "",
|
||||
name: "",
|
||||
};
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.getAttachments();
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ export default Component.extend(TooltipMixin, Notifier, {
|
|||
}),
|
||||
voteThanks: false,
|
||||
showLikes: false,
|
||||
|
||||
showDeleteBlockDialog: false,
|
||||
deleteBlockId: '',
|
||||
|
||||
|
|
@ -107,6 +106,16 @@ export default Component.extend(TooltipMixin, Notifier, {
|
|||
}
|
||||
},
|
||||
|
||||
addSection(model) {
|
||||
let constants = this.get('constants');
|
||||
|
||||
if (this.get('document.protection') === constants.ProtectionType.Review) {
|
||||
model.page.set('status', model.page.get('relativeId') === '' ? constants.ChangeState.PendingNew : constants.ChangeState.Pending);
|
||||
}
|
||||
|
||||
return this.get('onInsertSection')(model);
|
||||
},
|
||||
|
||||
actions: {
|
||||
onSavePageAsBlock(block) {
|
||||
let cb = this.get('onSavePageAsBlock');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue