mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
document list: show by selected space/category
This commit is contained in:
Harvey Kandola
parent
2cee83d570
commit
5481de4e1c
21 changed files with 342 additions and 157 deletions
|
|
@ -12,15 +12,6 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
folderService: Ember.inject.service('folder'),
|
||||
moveTarget: null,
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.set('deleteTargets', this.get('folders').rejectBy('id', this.get('folder.id')));
|
||||
},
|
||||
|
||||
actions: {
|
||||
selectDocument(documentId) {
|
||||
let doc = this.get('documents').findBy('id', documentId);
|
||||
|
|
|
|||
|
|
@ -26,6 +26,54 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
|||
selectedDocuments: [],
|
||||
hasSelectedDocuments: Ember.computed.gt('selectedDocuments.length', 0),
|
||||
showStartDocument: false,
|
||||
filteredDocs: [],
|
||||
selectedCategory: '',
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
let categories = this.get('categories');
|
||||
let categorySummary = this.get('categorySummary');
|
||||
let selectedCategory = '';
|
||||
|
||||
categories.forEach((cat)=> {
|
||||
let summary = _.findWhere(categorySummary, {type: "documents", categoryId: cat.get('id')});
|
||||
let docCount = is.not.undefined(summary) ? summary.count : 0;
|
||||
cat.set('docCount', docCount);
|
||||
if (docCount > 0 && selectedCategory === '') selectedCategory = cat.get('id');
|
||||
});
|
||||
|
||||
this.set('categories', categories);
|
||||
this.set('selectedCategory', selectedCategory);
|
||||
|
||||
// Default document view logic:
|
||||
//
|
||||
// 1. show space root documents if we have any
|
||||
// 2. show category documents for first category that has documents
|
||||
if (this.get('rootDocCount') > 0) {
|
||||
this.send('onDocumentFilter', 'space', this.get('folder.id'));
|
||||
} else {
|
||||
if (selectedCategory !== '') {
|
||||
this.send('onDocumentFilter', 'category', selectedCategory);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
didRender() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('categories.length') > 0) {
|
||||
this.addTooltip(document.getElementById("uncategorized-button"));
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) return;
|
||||
|
||||
this.destroyTooltips();
|
||||
},
|
||||
|
||||
actions: {
|
||||
onMoveDocument(folder) {
|
||||
|
|
@ -86,6 +134,36 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
|||
|
||||
onHideStartDocument() {
|
||||
this.set('showStartDocument', false);
|
||||
},
|
||||
|
||||
onDocumentFilter(filter, id) {
|
||||
let docs = this.get('documents');
|
||||
let categoryMembers = this.get('categoryMembers');
|
||||
let filtered = [];
|
||||
|
||||
// filter doc list by category
|
||||
if (filter === 'category') {
|
||||
let allowed = _.pluck(_.where(categoryMembers, {'categoryId': id}), 'documentId');
|
||||
docs.forEach((d) => {
|
||||
if (_.contains(allowed, d.get('id'))) {
|
||||
filtered.pushObject(d);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// filter doc list by space (i.e. have no category)
|
||||
if (filter === 'space') {
|
||||
this.set('selectedCategory', id);
|
||||
let allowed = _.pluck(categoryMembers, 'documentId');
|
||||
docs.forEach((d) => {
|
||||
if (!_.contains(allowed, d.get('id'))) {
|
||||
filtered.pushObject(d);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.set('filteredDocs', filtered);
|
||||
this.set('selectedCategory', id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ import Ember from 'ember';
|
|||
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
|
||||
|
||||
export default Ember.Route.extend(AuthenticatedRouteMixin, {
|
||||
categoryService: Ember.inject.service('category'),
|
||||
|
||||
model() {
|
||||
this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
|
||||
|
||||
|
|
@ -23,9 +25,29 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
|
|||
documents: this.modelFor('folder').documents,
|
||||
templates: this.modelFor('folder').templates,
|
||||
showStartDocument: false,
|
||||
categories: this.get('categoryService').getUserVisible(this.modelFor('folder').folder.get('id')),
|
||||
categorySummary: this.get('categoryService').getSummary(this.modelFor('folder').folder.get('id')),
|
||||
categoryMembers: this.get('categoryService').getSpaceCategoryMembership(this.modelFor('folder').folder.get('id')),
|
||||
rootDocCount: 0
|
||||
});
|
||||
},
|
||||
|
||||
afterModel(model, transition) { // eslint-disable-line no-unused-vars
|
||||
let docs = model.documents;
|
||||
let categoryMembers = model.categoryMembers;
|
||||
let rootDocCount = 0;
|
||||
|
||||
// get documentId's from category members
|
||||
let withCat = _.pluck(categoryMembers, 'documentId');
|
||||
|
||||
// calculate documents without category;
|
||||
docs.forEach((d) => {
|
||||
if (!withCat.includes(d.get('id'))) rootDocCount+=1;
|
||||
});
|
||||
|
||||
model.rootDocCount = rootDocCount;
|
||||
},
|
||||
|
||||
activate() {
|
||||
this.set('model.showStartDocument', false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
{{#layout/zone-container}}
|
||||
|
||||
{{#layout/zone-sidebar}}
|
||||
{{folder/sidebar-zone folders=model.folders folder=model.folder
|
||||
permissions=model.permissions tab=tab onAddSpace=(action 'onAddSpace')}}
|
||||
{{folder/sidebar-zone
|
||||
folders=model.folders
|
||||
folder=model.folder
|
||||
permissions=model.permissions
|
||||
tab=tab
|
||||
onAddSpace=(action 'onAddSpace')}}
|
||||
{{/layout/zone-sidebar}}
|
||||
|
||||
{{#layout/zone-content}}
|
||||
|
||||
{{folder/space-view
|
||||
folders=model.folders
|
||||
folder=model.folder
|
||||
templates=model.templates
|
||||
permissions=model.permissions
|
||||
documents=model.documents
|
||||
onRefresh=(action 'onRefresh')}}
|
||||
|
||||
{{folder/space-view
|
||||
folders=model.folders
|
||||
folder=model.folder
|
||||
templates=model.templates
|
||||
permissions=model.permissions
|
||||
documents=model.documents
|
||||
categories=model.categories
|
||||
categorySummary=model.categorySummary
|
||||
categoryMembers=model.categoryMembers
|
||||
rootDocCount=model.rootDocCount
|
||||
onRefresh=(action 'onRefresh')}}
|
||||
{{/layout/zone-content}}
|
||||
|
||||
{{/layout/zone-container}}
|
||||
|
|
@ -143,5 +143,13 @@ export default BaseService.extend({
|
|||
}).then((response) => {
|
||||
return response;
|
||||
});
|
||||
},
|
||||
|
||||
getSpaceCategoryMembership(spaceId) {
|
||||
return this.get('ajax').request(`category/member/space/${spaceId}`, {
|
||||
method: 'GET'
|
||||
}).then((response) => {
|
||||
return response;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -51,24 +51,6 @@ export default Ember.Service.extend({
|
|||
});
|
||||
},
|
||||
|
||||
// getDocumentsByTag returns all documents for specified tag (not folder!).
|
||||
getAllByTag(tag) {
|
||||
return this.get('ajax').request(`documents?filter=tag&tag=${tag}`, {
|
||||
method: "GET"
|
||||
}).then((response) => {
|
||||
let documents = Ember.ArrayProxy.create({
|
||||
content: Ember.A([])
|
||||
});
|
||||
|
||||
documents = response.map((doc) => {
|
||||
let data = this.get('store').normalize('document', doc);
|
||||
return this.get('store').push(data);
|
||||
});
|
||||
|
||||
return documents;
|
||||
});
|
||||
},
|
||||
|
||||
// saveDocument updates an existing document record.
|
||||
save(doc) {
|
||||
let id = doc.get('id');
|
||||
|
|
@ -79,7 +61,7 @@ export default Ember.Service.extend({
|
|||
});
|
||||
},
|
||||
|
||||
changePageSequence: function (documentId, payload) {
|
||||
changePageSequence(documentId, payload) {
|
||||
let url = `documents/${documentId}/pages/sequence`;
|
||||
|
||||
return this.get('ajax').post(url, {
|
||||
|
|
@ -97,7 +79,7 @@ export default Ember.Service.extend({
|
|||
});
|
||||
},
|
||||
|
||||
deleteDocument: function (documentId) {
|
||||
deleteDocument(documentId) {
|
||||
let url = `documents/${documentId}`;
|
||||
|
||||
return this.get('ajax').request(url, {
|
||||
|
|
@ -122,7 +104,7 @@ export default Ember.Service.extend({
|
|||
},
|
||||
|
||||
// addPage inserts new page to an existing document.
|
||||
addPage: function (documentId, payload) {
|
||||
addPage(documentId, payload) {
|
||||
let url = `documents/${documentId}/pages`;
|
||||
|
||||
return this.get('ajax').post(url, {
|
||||
|
|
@ -132,7 +114,7 @@ export default Ember.Service.extend({
|
|||
},
|
||||
|
||||
// Nukes multiple pages from the document.
|
||||
deletePages: function (documentId, pageId, payload) {
|
||||
deletePages(documentId, pageId, payload) {
|
||||
let url = `documents/${documentId}/pages`;
|
||||
|
||||
return this.get('ajax').request(url, {
|
||||
|
|
@ -143,7 +125,7 @@ export default Ember.Service.extend({
|
|||
},
|
||||
|
||||
// Nukes a single page from the document.
|
||||
deletePage: function (documentId, pageId) {
|
||||
deletePage(documentId, pageId) {
|
||||
let url = `documents/${documentId}/pages/${pageId}`;
|
||||
|
||||
return this.get('ajax').request(url, {
|
||||
|
|
|
|||
|
|
@ -38,14 +38,25 @@ $color-border: #f3f5f8;
|
|||
|
||||
$color-checkbox: #0092d3;
|
||||
|
||||
// lightblue sidebar
|
||||
$color-sidebar: #f2faff;
|
||||
$color-sidebar-border: #dff0f9;
|
||||
$color-sidebar-text: $color-off-black;
|
||||
$color-sidebar-text: $color-black;
|
||||
$color-sidebar-link: $color-link;
|
||||
$color-selected-item: $color-sidebar;
|
||||
$color-nav-button: $color-sidebar;
|
||||
$color-nav-button-text: #2667af;
|
||||
$color-nav-button-border: #dff0f9;
|
||||
$color-selected-item: $color-sidebar;
|
||||
|
||||
// black sidebar
|
||||
// $color-sidebar: $color-off-black;
|
||||
// $color-sidebar-border: $color-black;
|
||||
// $color-sidebar-text: $color-white;
|
||||
// $color-sidebar-link: orange;
|
||||
// $color-nav-button: orange;
|
||||
// $color-nav-button-text: $color-off-black;
|
||||
// $color-nav-button-border: $color-black;
|
||||
// $color-selected-item: orange;
|
||||
|
||||
// Color utility classes for direct usage in HTML
|
||||
.color-white {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
text-transform: uppercase;
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.0rem;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,28 @@
|
|||
.folder-heading {
|
||||
.space-heading {
|
||||
margin: 0 0 55px 0;
|
||||
|
||||
.folder-title {
|
||||
.space-name {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: normal;
|
||||
// color: $color-primary;
|
||||
}
|
||||
|
||||
.space-summary {
|
||||
font-size: 1.2rem;
|
||||
color: $color-gray;
|
||||
margin: 0 0 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-folder-heading {
|
||||
.edit-space-heading {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
.edit-folder-title {
|
||||
.edit-space-name {
|
||||
> input {
|
||||
font-size: 2rem;
|
||||
font-weight: normal;
|
||||
margin: 0 0 10px;
|
||||
margin: 0 0 40px 0;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,6 +30,7 @@
|
|||
|
||||
.documents-list {
|
||||
@include content-container();
|
||||
margin-bottom: 50px;
|
||||
|
||||
.document-item {
|
||||
margin: 0;
|
||||
|
|
@ -68,7 +76,15 @@
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $color-off-black;
|
||||
color: $color-link;
|
||||
|
||||
> .title {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
> .snippet {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
|
|
@ -116,3 +132,11 @@
|
|||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
.category-filter {
|
||||
margin-bottom: 30px;
|
||||
|
||||
> .selected {
|
||||
@extend .button-nav;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
|
||||
> .link {
|
||||
font-size: 1rem;
|
||||
color: $color-off-black;
|
||||
color: $color-sidebar-text;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
color: $color-sidebar-link;
|
||||
}
|
||||
|
||||
> .item {
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
> .selected {
|
||||
color: $color-link;
|
||||
color: $color-sidebar-link;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@
|
|||
<div class="regular-button button-blue">{{cat.category}}</div>
|
||||
{{else}}
|
||||
{{#if canAddCategory}}
|
||||
{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
|
||||
{{#unless canSelectCategory}}
|
||||
{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
|
||||
{{/unless}}
|
||||
{{else}}
|
||||
<p> </p>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
<div class="documents-list">
|
||||
{{#each documents key="id" as |document|}}
|
||||
<div id="document-{{document.id}}">
|
||||
<div class="document-item {{if document.selected "selected-card"}}">
|
||||
{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
|
||||
<div class="title">{{ document.name }}</div>
|
||||
<div class="snippet">{{ document.excerpt }}</div>
|
||||
<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
|
||||
{{/link-to}}
|
||||
{{#if session.authenticated}}
|
||||
<div class="checkbox" {{action 'selectDocument' document.id}}>
|
||||
{{#if document.selected}}
|
||||
<i class="material-icons">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if (gt documents.length 0)}}
|
||||
<div class="documents-list">
|
||||
{{#each documents key="id" as |document|}}
|
||||
<div id="document-{{document.id}}">
|
||||
<div class="document-item {{if document.selected "selected-card"}}">
|
||||
{{#link-to 'document.index' folder.id folder.slug document.id document.slug class="link"}}
|
||||
<div class="title">{{ document.name }}</div>
|
||||
<div class="snippet">{{ document.excerpt }}</div>
|
||||
<div class="chips">{{folder/document-tags documentTags=document.tags}}</div>
|
||||
{{/link-to}}
|
||||
{{#if session.authenticated}}
|
||||
<div class="checkbox" {{action 'selectDocument' document.id}}>
|
||||
{{#if document.selected}}
|
||||
<i class="material-icons">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<div class="pull-left width-80">
|
||||
{{#unless editMode}}
|
||||
<div class="folder-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
|
||||
<h1 class="folder-title">{{folder.name}}</h1>
|
||||
<div class="space-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
|
||||
<h1 class="space-name">{{folder.name}}</h1>
|
||||
<div class="space-summary">
|
||||
This space contains {{documents.length}} {{if (eq rootDocCount.length 1) 'document' 'documents'}} across {{categories.length}} {{if (eq categories.length 1) 'category' 'categories'}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<form {{action "onSave" on="submit"}}>
|
||||
<div class="edit-folder-heading">
|
||||
<div class="input-inline input-transparent edit-folder-title">
|
||||
<div class="edit-space-heading">
|
||||
<div class="input-inline input-transparent edit-space-name">
|
||||
{{focus-input id="folder-name" type="text" value=folderName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,36 @@
|
|||
{{folder/space-heading folder=folder permissions=permissions}}
|
||||
<div class="margin-bottom-20">
|
||||
{{folder/space-heading folder=folder permissions=permissions documents=documents categories=categories}}
|
||||
|
||||
{{folder/space-toolbar folders=folders folder=folder
|
||||
permissions=permissions hasSelectedDocuments=hasSelectedDocuments
|
||||
onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
|
||||
onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
|
||||
|
||||
<div class="margin-bottom-20 clearfix" />
|
||||
{{folder/space-toolbar folders=folders folder=folder
|
||||
permissions=permissions hasSelectedDocuments=hasSelectedDocuments
|
||||
onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
|
||||
onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
|
||||
{{#if showStartDocument}}
|
||||
{{folder/start-document folder=folder templates=templates permissions=permissions
|
||||
onImport=(action 'onImport') onHideStartDocument=(action 'onHideStartDocument')}}
|
||||
{{else}}
|
||||
{{folder/documents-list documents=documents folders=folders folder=folder
|
||||
|
||||
{{#if (gt categories.length 0)}}
|
||||
<div class="category-filter">
|
||||
{{#if (gt rootDocCount 0)}}
|
||||
<div class="regular-button button-white {{if (eq folder.id selectedCategory) 'selected'}}" id="uncategorized-button" data-tooltip="Documents without category" data-tooltip-position="top center" {{action 'onDocumentFilter' 'space' folder.id}}>
|
||||
{{folder.name}} ({{rootDocCount}})
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each categories as |cat index|}}
|
||||
<div class="button-gap"/>
|
||||
<div class="regular-button button-white {{if (eq cat.id selectedCategory) 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>
|
||||
{{cat.category}} ({{cat.docCount}})
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{folder/documents-list documents=filteredDocs folders=folders folder=folder
|
||||
templates=templates permissions=permissions selectedDocuments=(mut selectedDocuments)
|
||||
onImport=(action 'onImport')}}
|
||||
|
||||
{{/if}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue