mirror of
https://github.com/documize/community.git
synced 2025-07-23 07:09:43 +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(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}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
<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="section">
|
||||
<div class="title">REVISIONS</div>
|
||||
<div class="list">
|
||||
{{#each revisions as |revision|}}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
{{#layout/top-bar}}
|
||||
<li class="item">
|
||||
{{#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/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
{{#layout/middle-zone}}
|
||||
{{#layout/middle-zone-content}}
|
||||
<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">Document Options</div>
|
||||
<div class="list">
|
||||
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
||||
<i class={{concat "dicon " constants.Icon.Settings}} />
|
||||
<div class="name">Content Settings</div>
|
||||
</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/master-sidebar}}
|
||||
|
||||
{{#layout/master-content}}
|
||||
{{#if (eq tab "general")}}
|
||||
{{document/settings-general
|
||||
space=model.folder
|
||||
|
|
@ -26,24 +35,19 @@
|
|||
onSaveDocument=(action "onSaveDocument")}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (eq tab "meta")}}
|
||||
{{document/settings-meta
|
||||
{{#if (eq tab "category")}}
|
||||
{{document/settings-category
|
||||
space=model.folder
|
||||
document=model.document
|
||||
permissions=model.permissions
|
||||
onSaveDocument=(action "onSaveDocument")}}
|
||||
{{/if}}
|
||||
{{/layout/middle-zone-content}}
|
||||
|
||||
{{#layout/middle-zone-sidebar}}
|
||||
<div id="sidebar" class="sidebar">
|
||||
<ul class="tabnav-control tabnav-control-centered w-75">
|
||||
<li class="tab tab-vertical {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>General</li>
|
||||
<li class="tab tab-vertical {{if (eq tab "meta") "selected"}}" {{action "onTab" "meta"}}>Categories & Tags</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{/layout/middle-zone-sidebar}}
|
||||
{{/layout/middle-zone}}
|
||||
|
||||
{{#layout/bottom-bar}}
|
||||
{{/layout/bottom-bar}}
|
||||
{{#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}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
<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="section">
|
||||
<div class="title">space management</div>
|
||||
<div class="list">
|
||||
<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,6 +1,7 @@
|
|||
<div class="content-zone">
|
||||
<div class="explainer-header">General Options</div>
|
||||
<p class="explainer-text explainer-gap">Set name, excerpt and lifecycle stage</p>
|
||||
{{layout/logo-heading
|
||||
title="Content Settings"
|
||||
desc="Set name, description and lifecycle stage"
|
||||
icon=constants.Icon.Settings}}
|
||||
|
||||
<form class="view-document">
|
||||
<div class="form-group">
|
||||
|
|
@ -10,12 +11,15 @@
|
|||
</div>
|
||||
|
||||
<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"}}
|
||||
<small class="form-text text-muted">Optional description explaining content</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success text-uppercase bold-700 mt-5" {{action "onSave"}}>Save</button>
|
||||
{{ui/ui-button
|
||||
color=constants.Color.Green
|
||||
icon=constants.Icon.Settings
|
||||
label=constants.Label.Save
|
||||
light=true
|
||||
onClick=(action "onSave")}}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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