mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
add category to document
This commit is contained in:
Harvey Kandola
parent
508ec00c6a
commit
f0582e18f7
19 changed files with 334 additions and 58 deletions
|
|
@ -15,11 +15,15 @@ import NotifierMixin from '../../mixins/notifier';
|
|||
|
||||
export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
|
||||
documentService: Ember.inject.service('document'),
|
||||
sectionService: Ember.inject.service('section'),
|
||||
categoryService: Ember.inject.service('category'),
|
||||
sessionService: Ember.inject.service('session'),
|
||||
appMeta: Ember.inject.service(),
|
||||
userService: Ember.inject.service('user'),
|
||||
localStorage: Ember.inject.service(),
|
||||
categories: [],
|
||||
hasCategories: Ember.computed('categories', function() {
|
||||
return this.get('categories').length > 0;
|
||||
}),
|
||||
canAdd: Ember.computed('categories', function() {
|
||||
return this.get('categories').length > 0 && this.get('permissions.documentEdit');
|
||||
}),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
|
@ -27,8 +31,62 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
|
|||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.load();
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
|
||||
this.set('categories', categories);
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
selected.forEach((s) => {
|
||||
let cats = this.set('categories', categories);
|
||||
let cat = categories.findBy('id', s.id);
|
||||
cat.set('selected', true);
|
||||
this.set('categories', cats);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
onSave() {
|
||||
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.get('categoryService').setCategoryMembership(toUnlink, 'unlink').then(() => {
|
||||
this.get('categoryService').setCategoryMembership(toLink, 'link').then(() => {
|
||||
this.load();
|
||||
});
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,27 +10,29 @@
|
|||
{{#layout/zone-content}}
|
||||
<div id="zone-document-content" class="zone-document-content">
|
||||
|
||||
<div class="pull-left">
|
||||
{{document/space-category document=model.document folder=model.folder folders=model.folders permissions=model.permissions}}
|
||||
<div class="document-header-zone">
|
||||
<div class="pull-left">
|
||||
{{document/space-category document=model.document folder=model.folder folders=model.folders permissions=model.permissions}}
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
{{document/document-toolbar
|
||||
document=model.document folder=model.folder folders=model.folders permissions=model.permissions
|
||||
onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
|
||||
onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
|
||||
onGotoPage=(action 'onGotoPage')}}
|
||||
</div>
|
||||
<div class="clearfix"/>
|
||||
|
||||
{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
{{document/document-toolbar
|
||||
document=model.document folder=model.folder folders=model.folders permissions=model.permissions
|
||||
onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')
|
||||
onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
|
||||
onGotoPage=(action 'onGotoPage')}}
|
||||
</div>
|
||||
<div class="clearfix"/>
|
||||
{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
|
||||
|
||||
{{#if model.document.template}}
|
||||
<div class="document-template-header">Template</div>
|
||||
{{/if}}
|
||||
|
||||
{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
|
||||
|
||||
{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
|
||||
|
||||
{{document/document-view
|
||||
document=model.document links=model.links pages=model.pages
|
||||
folder=model.folder folders=model.folders sections=model.sections permissions=model.permissions pageId=pageId
|
||||
|
|
|
|||
|
|
@ -126,5 +126,22 @@ export default BaseService.extend({
|
|||
}).then((response) => {
|
||||
return response;
|
||||
});
|
||||
},
|
||||
|
||||
setCategoryMembership(categories, mode) {
|
||||
return this.get('ajax').request(`category/member?mode=${mode}`, {
|
||||
method: 'POST',
|
||||
contentType: 'json',
|
||||
data: JSON.stringify(categories)
|
||||
});
|
||||
},
|
||||
|
||||
// Get categories associated with a document.
|
||||
getDocumentCategories(documentId) {
|
||||
return this.get('ajax').request(`category/document/${documentId}`, {
|
||||
method: 'GET'
|
||||
}).then((response) => {
|
||||
return response;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
> .normal-state {
|
||||
margin: 10px;
|
||||
font-size: 1.2rem;
|
||||
|
|
@ -17,13 +16,4 @@
|
|||
.back-to-space {
|
||||
margin: 0 0 10px 0;
|
||||
display: inline-block;
|
||||
|
||||
> a {
|
||||
> .regular-button {
|
||||
> .name {
|
||||
// max-width: 150px;
|
||||
// @extend .truncate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,4 @@
|
|||
@import "toc.scss";
|
||||
@import "view.scss";
|
||||
@import "wysiwyg.scss";
|
||||
@import "space-category-tag.scss";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
.document-attachments {
|
||||
margin: 0;
|
||||
margin: 0 0 50px 0;
|
||||
// @include content-container();
|
||||
|
||||
> h2 {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
> .upload-document-files {
|
||||
margin: 10px 0 0 0;
|
||||
|
|
|
|||
53
gui/app/styles/view/document/space-category-tag.scss
Normal file
53
gui/app/styles/view/document/space-category-tag.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.document-space {
|
||||
display: inline-block;
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.document-category {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 30px;
|
||||
|
||||
> .regular-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.document-tags {
|
||||
margin: 20px 0 0 0;
|
||||
|
||||
> .caption {
|
||||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
> .regular-button {
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
> .material-icons {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,18 +1,25 @@
|
|||
.zone-document-content {
|
||||
> .document-header-zone {
|
||||
padding: 20px 30px;
|
||||
border: 1px solid $color-stroke;
|
||||
@include border-radius(3px);
|
||||
background-color: $color-off-white;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 2rem;
|
||||
margin: 30px 0 10px;
|
||||
margin: 50px 0 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 60px;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
|
||||
.edit-document-heading {
|
||||
margin: 30px 0 0 0;
|
||||
margin: 50px 0 0 0;
|
||||
|
||||
.edit-doc-title {
|
||||
> input {
|
||||
|
|
@ -32,7 +39,7 @@
|
|||
}
|
||||
|
||||
.document-view {
|
||||
margin: 0 0 50px 0;
|
||||
margin: 0 0 0 0;
|
||||
|
||||
.is-a-page {
|
||||
@include content-container();
|
||||
|
|
@ -359,7 +366,3 @@
|
|||
font-size: 1.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.document-tags {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -242,6 +242,13 @@
|
|||
border: 1px solid $color-gray;
|
||||
}
|
||||
|
||||
.button-chip {
|
||||
background-color: $color-chip;
|
||||
color: $color-chip-text;
|
||||
border: 1px solid $color-chip-border;
|
||||
@include button-hover-state($color-chip);
|
||||
}
|
||||
|
||||
.flat-button {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
.chip {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $color-chip-border;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
line-height: 0;
|
||||
margin: 0 5px 10px 0;
|
||||
border: 1px solid $color-chip-border;
|
||||
background-color: $color-chip;
|
||||
color: $color-chip-text;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
> i.material-icons {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .chip-text {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
font-size: 1rem;
|
||||
color: $color-chip-text;
|
||||
padding: 11px 10px 0 10px;
|
||||
letter-spacing: 0.7px;
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
}
|
||||
|
||||
> i.material-icons {
|
||||
visibility: hidden;
|
||||
color: $color-chip-text;
|
||||
font-size: 13px;
|
||||
margin: 13px 8px 0 0;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="document-attachments">
|
||||
<h2>Attachments</h2>
|
||||
{{#if hasAttachments}}
|
||||
<ul class="list">
|
||||
{{#each files key="id" as |a index|}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{{document/document-attachments document=document permissions=permissions}}
|
||||
|
||||
<div class="document-view {{if (is-equal document.layout 'doc') 'document-view-unified'}}">
|
||||
|
||||
{{#if hasPages}}
|
||||
|
|
@ -103,3 +101,5 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{document/document-attachments document=document permissions=permissions}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="back-to-space">
|
||||
<div class="back-to-space document-space">
|
||||
<div class="caption">Space</div>
|
||||
{{#link-to 'folder' folder.id folder.slug}}
|
||||
<div class="regular-button button-gray">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
|
|
@ -7,8 +8,23 @@
|
|||
{{/link-to}}
|
||||
</div>
|
||||
|
||||
<div class="document-category hide">
|
||||
<div class="chip chip-action">
|
||||
<span id="upload-document-files" class="chip-text">+ category</span>
|
||||
</div>
|
||||
<div class="document-category">
|
||||
<div class="caption">Category</div>
|
||||
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="regular-button button-blue">{{cat.category}}</div>
|
||||
{{/each}}
|
||||
|
||||
{{#if hasCategories}}
|
||||
<div class="regular-button button-white" id="document-category-button">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
|
||||
{{#dropdown-dialog target="document-category-button" position="bottom left" button="set" color="flat-green" onAction=(action 'onSave')}}
|
||||
<p class="heading">Select categories for document</p>
|
||||
{{ui/ui-list-picker items=categories nameField='category'}}
|
||||
{{/dropdown-dialog}}
|
||||
{{else}}
|
||||
<p> </p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
<div class="document-tags">
|
||||
<div class="caption">Tag</div>
|
||||
{{#each tagz as |tg|}}
|
||||
<div class="chip">
|
||||
<span class="chip-text">#{{tg}}</span>
|
||||
{{#if permissions.documentEdit}}
|
||||
<i class="material-icons pull-right" {{action 'removeTag' tg}}>close</i>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="regular-button button-chip">{{concat '#' tg}}</div>
|
||||
{{/each}}
|
||||
{{#if canAdd}}
|
||||
<div class="chip-action">
|
||||
<span id="add-tag-button" class="chip-text">+ tag</span>
|
||||
<span id="add-tag-button" class="chip-text">+</span>
|
||||
</div>
|
||||
{{#dropdown-dialog target="add-tag-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addTag') focusOn="add-tag-field" onOpenCallback=(action 'onTagEditor') targetOffset="20px 0"}}
|
||||
<div class="input-control">
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'onGrantCancel'}}>cancel</div>
|
||||
<div class="flat-button flat-blue" {{action 'onGrantAccess'}}>grant access</div>
|
||||
<div class="flat-button flat-blue" {{action 'onGrantAccess'}}>set access</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue