Display category names in documents list (space view)

We pre-fetch category names and attach them to documents.

gui/app/components/folder/document-categories.js

@@ -0,0 +1,16 @@
+// 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 Component from '@ember/component';
+
+export default Component.extend({
+	classNames: ['categories'],
+});

gui/app/models/document.js

@@ -31,14 +31,18 @@ export default Model.extend({
 	versionId: attr('string'),
 	versionOrder: attr('number', { defaultValue: 0 }),
 	groupId: attr('string'),
+	created: attr(),
+	revised: attr(),
+
+	// read-only presentation field
+	category: attr({defaultValue() {return [];}}),
 
-	// client-side property
-	selected: attr('boolean', { defaultValue: false }),
 	slug: computed('name', function () {
 		return stringUtil.makeSlug(this.get('name'));
 	}),
-	created: attr(),
-	revised: attr(),
+
+	// client-side property
+	selected: attr('boolean', { defaultValue: false }),
 
 	isDraft: computed('lifecycle', function () {
 		let constants = this.get('constants');

gui/app/styles/core/view/space.scss

@@ -71,6 +71,7 @@
 					@include border-radius(5px);
 					background-color: map-get($gray-shades, 300);
 					padding: 0.25rem 1rem;
+					margin-right: 20px;
 
 					> .draft {
 						color: map-get($yellow-shades, 600);
@@ -90,12 +91,34 @@
 					font-size: 20px;
 				}
 
+				.categories {
+					display: inline-block;
+					padding: 0;
+
+					> .category {
+						padding: 0 15px 0 0;
+						display: inline-block;
+
+						> .dicon {
+							color: map-get($gray-shades, 500);
+							font-size: 20px;
+							vertical-align: bottom;
+						}
+
+						> .name {
+							display: inline-block;
+							color: map-get($gray-shades, 800);
+							font-size: 1rem;
+						}
+					}
+				}
+
 				.hashtags {
 					display: inline-block;
-					padding: 0 10px 0 10px;
+					padding: 0;
 
 					> .hashtag {
-						padding: 0 10px 0 10px;
+						padding: 0 15px 0 0;
 
 						> .dicon {
 							color: map-get($gray-shades, 500);

gui/app/templates/components/folder/document-categories.hbs

@@ -0,0 +1,8 @@
+{{#if categories}}
+	{{#each categories as |cat|}}
+		<div class="category">
+			<i class="dicon {{constants.Icon.Category}}" />
+			<div class="name">{{cat}}</div>
+		</div>
+	{{/each}}
+{{/if}}

gui/app/templates/components/folder/documents-list.hbs

@@ -14,7 +14,7 @@
 							{{document.lifecycleLabel}}
 						</div>
 					</div>
-
+					{{folder/document-categories categories=document.category}}
 					{{folder/document-tags documentTags=document.tags}}
 				</div>