mirror of
https://github.com/documize/community.git
synced 2025-07-23 15:19:42 +02:00
Break out document tag and category mng sections
Separate out screens for tag and category management.
This commit is contained in:
McMatts
parent
3c81297fc6
commit
e140caff55
9 changed files with 315 additions and 105 deletions
|
|
@ -156,7 +156,6 @@ export default Component.extend(Notifier, {
|
||||||
|
|
||||||
this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
||||||
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
||||||
this.notifySuccess('Saved');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
189
gui/app/components/document/settings-tag.js
Normal file
189
gui/app/components/document/settings-tag.js
Normal file
|
|
@ -0,0 +1,189 @@
|
||||||
|
// 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, {
|
||||||
|
appMeta: service(),
|
||||||
|
documentSvc: service('document'),
|
||||||
|
categoryService: service('category'),
|
||||||
|
|
||||||
|
tagz: A([]),
|
||||||
|
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');
|
||||||
|
}),
|
||||||
|
|
||||||
|
didReceiveAttrs() {
|
||||||
|
this._super(...arguments);
|
||||||
|
this.load();
|
||||||
|
},
|
||||||
|
|
||||||
|
didInsertElement() {
|
||||||
|
this._super(...arguments);
|
||||||
|
|
||||||
|
schedule('afterRender', () => {
|
||||||
|
$("#add-tag-field-1").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 === 37 ||
|
||||||
|
e.which === 38 ||
|
||||||
|
e.which === 39 ||
|
||||||
|
e.which === 40 ||
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let counter = 1;
|
||||||
|
let tagz = A([]);
|
||||||
|
let maxTags = this.get('appMeta.maxTags');
|
||||||
|
|
||||||
|
if (!_.isUndefined(this.get('document.tags')) && this.get('document.tags').length > 1) {
|
||||||
|
let tags = this.get('document.tags').split('#');
|
||||||
|
|
||||||
|
_.each(tags, (tag) => {
|
||||||
|
tag = tag.trim();
|
||||||
|
if (tag.length > 0 && counter <= maxTags) {
|
||||||
|
tagz.pushObject({number: counter, value: tag});
|
||||||
|
counter++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let index = counter; index <= maxTags; index++) {
|
||||||
|
tagz.pushObject({number: index, value: ''});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.set('tagz', tagz);
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
onSave() {
|
||||||
|
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 = {
|
||||||
|
spaceId: folderId,
|
||||||
|
documentId: docId,
|
||||||
|
categoryId: l.get('id')
|
||||||
|
};
|
||||||
|
|
||||||
|
toLink.push(t);
|
||||||
|
});
|
||||||
|
|
||||||
|
// prepare links no longer associated with document
|
||||||
|
unlink.forEach((l) => {
|
||||||
|
let t = {
|
||||||
|
spaceId: folderId,
|
||||||
|
documentId: docId,
|
||||||
|
categoryId: l.get('id')
|
||||||
|
};
|
||||||
|
|
||||||
|
toUnlink.pushObject(t);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
||||||
|
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let tagz = this.get('tagz');
|
||||||
|
let tagzToSave = [];
|
||||||
|
|
||||||
|
_.each(tagz, (t) => {
|
||||||
|
let tag = t.value.toLowerCase().trim();
|
||||||
|
if (tag.length> 0) {
|
||||||
|
if (!_.contains(tagzToSave, tag) && is.not.startWith(tag, '-')) {
|
||||||
|
tagzToSave.push(tag);
|
||||||
|
this.$('#add-tag-field-' + t.number).removeClass('is-invalid');
|
||||||
|
} else {
|
||||||
|
this.$('#add-tag-field-' + t.number).addClass('is-invalid');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let save = "#";
|
||||||
|
_.each(tagzToSave, (t) => {
|
||||||
|
save += t;
|
||||||
|
save += '#';
|
||||||
|
});
|
||||||
|
|
||||||
|
let doc = this.get('document');
|
||||||
|
doc.set('tags', save);
|
||||||
|
|
||||||
|
this.get('onSaveDocument')(doc);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{{#layout/master-sidebar}}
|
{{#layout/master-sidebar}}
|
||||||
{{ui/ui-spacer size=300}}
|
{{ui/ui-spacer size=300}}
|
||||||
|
|
||||||
{{#link-to "document.index"}}
|
|
||||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
|
|
||||||
{{/link-to}}
|
|
||||||
|
|
||||||
{{ui/ui-spacer size=400}}
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
{{#link-to "document.index"}}
|
||||||
|
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
|
||||||
|
{{/link-to}}
|
||||||
|
|
||||||
|
{{ui/ui-spacer size=400}}
|
||||||
|
|
||||||
<div class="title">REVISIONS</div>
|
<div class="title">REVISIONS</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
{{#each revisions as |revision|}}
|
{{#each revisions as |revision|}}
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,53 @@
|
||||||
{{#layout/top-bar}}
|
{{#layout/master-sidebar}}
|
||||||
<li class="item">
|
{{ui/ui-spacer size=300}}
|
||||||
{{#link-to "folder.index" model.folder.id model.folder.slug class="link"}}
|
|
||||||
{{model.folder.name}}
|
|
||||||
{{/link-to}}
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
{{#link-to "document.index" model.folder.id model.folder.slug model.document.id model.document.slug class="link"}}
|
|
||||||
{{model.document.name}}
|
|
||||||
{{/link-to}}
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
{{#link-to "document.settings" model.folder.id model.folder.slug class="link selected"}}
|
|
||||||
Settings
|
|
||||||
{{/link-to}}
|
|
||||||
</li>
|
|
||||||
{{/layout/top-bar}}
|
|
||||||
|
|
||||||
{{#layout/middle-zone}}
|
<div class="section">
|
||||||
{{#layout/middle-zone-content}}
|
{{#link-to "document.index"}}
|
||||||
{{#if (eq tab "general")}}
|
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
|
||||||
{{document/settings-general
|
{{/link-to}}
|
||||||
space=model.folder
|
|
||||||
document=model.document
|
|
||||||
permissions=model.permissions
|
|
||||||
onSaveDocument=(action "onSaveDocument")}}
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if (eq tab "meta")}}
|
{{ui/ui-spacer size=400}}
|
||||||
{{document/settings-meta
|
|
||||||
space=model.folder
|
|
||||||
document=model.document
|
|
||||||
permissions=model.permissions
|
|
||||||
onSaveDocument=(action "onSaveDocument")}}
|
|
||||||
{{/if}}
|
|
||||||
{{/layout/middle-zone-content}}
|
|
||||||
|
|
||||||
{{#layout/middle-zone-sidebar}}
|
<div class="title">Document Options</div>
|
||||||
<div id="sidebar" class="sidebar">
|
<div class="list">
|
||||||
<ul class="tabnav-control tabnav-control-centered w-75">
|
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
||||||
<li class="tab tab-vertical {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>General</li>
|
<i class={{concat "dicon " constants.Icon.Settings}} />
|
||||||
<li class="tab tab-vertical {{if (eq tab "meta") "selected"}}" {{action "onTab" "meta"}}>Categories & Tags</li>
|
<div class="name">Content Settings</div>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="item {{if (eq tab "category") "selected"}}" {{action "onTab" "category"}}>
|
||||||
|
<i class={{concat "dicon " constants.Icon.Category}} />
|
||||||
|
<div class="name">Categories</div>
|
||||||
|
</div>
|
||||||
|
<div class="item {{if (eq tab "tag") "selected"}}" {{action "onTab" "tag"}}>
|
||||||
|
<i class={{concat "dicon " constants.Icon.Tag}} />
|
||||||
|
<div class="name">Tags</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/layout/middle-zone-sidebar}}
|
</div>
|
||||||
{{/layout/middle-zone}}
|
{{/layout/master-sidebar}}
|
||||||
|
|
||||||
{{#layout/bottom-bar}}
|
{{#layout/master-content}}
|
||||||
{{/layout/bottom-bar}}
|
{{#if (eq tab "general")}}
|
||||||
|
{{document/settings-general
|
||||||
|
space=model.folder
|
||||||
|
document=model.document
|
||||||
|
permissions=model.permissions
|
||||||
|
onSaveDocument=(action "onSaveDocument")}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if (eq tab "category")}}
|
||||||
|
{{document/settings-category
|
||||||
|
space=model.folder
|
||||||
|
document=model.document
|
||||||
|
permissions=model.permissions
|
||||||
|
onSaveDocument=(action "onSaveDocument")}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if (eq tab "tag")}}
|
||||||
|
{{document/settings-tag
|
||||||
|
space=model.folder
|
||||||
|
document=model.document
|
||||||
|
permissions=model.permissions
|
||||||
|
onSaveDocument=(action "onSaveDocument")}}
|
||||||
|
{{/if}}
|
||||||
|
{{/layout/master-content}}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
{{#layout/master-sidebar}}
|
{{#layout/master-sidebar}}
|
||||||
{{ui/ui-spacer size=300}}
|
{{ui/ui-spacer size=300}}
|
||||||
|
|
||||||
{{#link-to "folder.index"}}
|
|
||||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}}
|
|
||||||
{{/link-to}}
|
|
||||||
|
|
||||||
{{ui/ui-spacer size=400}}
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
{{#link-to "folder.index"}}
|
||||||
|
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}}
|
||||||
|
{{/link-to}}
|
||||||
|
|
||||||
|
{{ui/ui-spacer size=400}}
|
||||||
|
|
||||||
<div class="title">space management</div>
|
<div class="title">space management</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
||||||
|
|
|
||||||
19
gui/app/templates/components/document/settings-category.hbs
Normal file
19
gui/app/templates/components/document/settings-category.hbs
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{{layout/logo-heading
|
||||||
|
title="Categories"
|
||||||
|
desc="Assign one or more categories to help organize content within this space"
|
||||||
|
icon=constants.Icon.Category}}
|
||||||
|
|
||||||
|
{{ui/ui-list-picker items=categories nameField="category" singleSelect=false}}
|
||||||
|
|
||||||
|
{{#unless categories}}
|
||||||
|
<p class="color-green-700">This space has no categories yet</p>
|
||||||
|
{{/unless}}
|
||||||
|
|
||||||
|
{{ui/ui-spacer size=300}}
|
||||||
|
|
||||||
|
{{ui/ui-button
|
||||||
|
color=constants.Color.Green
|
||||||
|
icon=constants.Icon.Category
|
||||||
|
label=constants.Label.Save
|
||||||
|
light=true
|
||||||
|
onClick=(action "onSave")}}
|
||||||
|
|
@ -1,21 +1,25 @@
|
||||||
<div class="content-zone">
|
{{layout/logo-heading
|
||||||
<div class="explainer-header">General Options</div>
|
title="Content Settings"
|
||||||
<p class="explainer-text explainer-gap">Set name, excerpt and lifecycle stage</p>
|
desc="Set name, description and lifecycle stage"
|
||||||
|
icon=constants.Icon.Settings}}
|
||||||
|
|
||||||
<form class="view-document">
|
<form class="view-document">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="document-name">Name</label>
|
<label for="document-name">Name</label>
|
||||||
{{focus-input id="document-name" type="text" value=docName
|
{{focus-input id="document-name" type="text" value=docName
|
||||||
class=(if hasNameError "form-control mousetrap is-invalid" "form-control mousetrap") placeholder="Title" autocomplete="off"}}
|
class=(if hasNameError "form-control mousetrap is-invalid" "form-control mousetrap") placeholder="Title" autocomplete="off"}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="document-excerpt">Excerpt</label>
|
<label for="document-excerpt">Description</label>
|
||||||
{{textarea id="document-excerpt" rows="4" value=docExcerpt class="form-control mousetrap" placeholder="Excerpt" autocomplete="off"}}
|
{{textarea id="document-excerpt" rows="4" value=docExcerpt class="form-control mousetrap" placeholder="Excerpt" autocomplete="off"}}
|
||||||
<small class="form-text text-muted">Optional description explaining content</small>
|
<small class="form-text text-muted">Optional description explaining content</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-success text-uppercase bold-700 mt-5" {{action "onSave"}}>Save</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{{ui/ui-button
|
||||||
|
color=constants.Color.Green
|
||||||
|
icon=constants.Icon.Settings
|
||||||
|
label=constants.Label.Save
|
||||||
|
light=true
|
||||||
|
onClick=(action "onSave")}}
|
||||||
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<div class="content-zone">
|
|
||||||
<div class="explainer-header">Categories & Tags</div>
|
|
||||||
<p class="explainer-text explainer-gap">Categorize your content, assign tags to suppliment</p>
|
|
||||||
|
|
||||||
<h1>Specify up to {{appMeta.maxTags}} tags</h1>
|
|
||||||
<p class="form-text text-muted">Lowercase, characters, numbers, hyphens only</p>
|
|
||||||
<form>
|
|
||||||
{{#each tagz as |tag|}}
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<div class="input-group-prepend">
|
|
||||||
<span class="input-group-text">#</span>
|
|
||||||
</div>
|
|
||||||
{{input type="text" id=(concat "add-tag-field-" tag.number) class="form-control mousetrap tag-input" placeholder="Tag name" value=tag.value}}
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="mt-5" />
|
|
||||||
|
|
||||||
<h1>Assign categories</h1>
|
|
||||||
<p class="form-text text-muted">Categories allow you divide a space into logical chunks</p>
|
|
||||||
|
|
||||||
{{ui/ui-list-picker items=categories nameField="category" singleSelect=false}}
|
|
||||||
{{#unless selectedCategories}}
|
|
||||||
<p class="text-danger">This space has no categories defined yet.</p>
|
|
||||||
{{/unless}}
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-success text-uppercase bold-700 mt-5" {{action "onSave"}}>Save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
25
gui/app/templates/components/document/settings-tag.hbs
Normal file
25
gui/app/templates/components/document/settings-tag.hbs
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{{layout/logo-heading
|
||||||
|
title="Tags"
|
||||||
|
desc=(concat "Specify up to " appMeta.maxTags " tags — lowercase, characters, numbers, hyphens only")
|
||||||
|
icon=constants.Icon.Category}}
|
||||||
|
|
||||||
|
{{#each tagz as |tag|}}
|
||||||
|
<div class="input-group">
|
||||||
|
<div class="input-group-prepend">
|
||||||
|
<span class="input-group-text">
|
||||||
|
<i class="dicon {{constants.Icon.Tag}}" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{{input type="text" id=(concat "add-tag-field-" tag.number) class="form-control mousetrap tag-input" placeholder="Tag name" value=tag.value}}
|
||||||
|
</div>
|
||||||
|
{{ui/ui-spacer size=200}}
|
||||||
|
{{/each}}
|
||||||
|
|
||||||
|
{{ui/ui-spacer size=300}}
|
||||||
|
|
||||||
|
{{ui/ui-button
|
||||||
|
color=constants.Color.Green
|
||||||
|
icon=constants.Icon.Tag
|
||||||
|
label=constants.Label.Save
|
||||||
|
light=true
|
||||||
|
onClick=(action "onSave")}}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue