Per space label, icon, description

Labels introduce visual grouping and filtering of spaces.

gui/app/pods/folders/controller.js

@@ -78,7 +78,7 @@ export default Controller.extend(AuthMixin, Modals, {
 
 			switch(view) {
 				case 'all':
-					this.set('selectedSpaces', this.get('model'));
+					this.set('selectedSpaces', this.get('model.spaces'));
 					break;
 				case 'public':
 					this.set('selectedSpaces', this.get('publicSpaces'));
@@ -89,6 +89,9 @@ export default Controller.extend(AuthMixin, Modals, {
 				case 'personal':
 					this.set('selectedSpaces', this.get('personalSpaces'));
 					break;
+				default:
+					this.set('selectedSpaces', this.get(view));
+					break;
 			}
 		}
 	}

gui/app/pods/folders/route.js

@@ -9,6 +9,7 @@
 //
 // https://documize.com
 
+import { hash } from 'rsvp';
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
@@ -17,6 +18,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	appMeta: service(),
 	folderService: service('folder'),
 	localStorage: service(),
+	labelSvc: service('label'),
 
 	beforeModel() {
 		if (this.get('appMeta.setupMode')) {
@@ -26,19 +28,22 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	},
 
 	model() {
-		return this.get('folderService').getAll();
+		return hash({
+			spaces: this.get('folderService').getAll(),
+			labels: this.get('labelSvc').getAll()
+		});
 	},
 
 	setupController(controller, model) {
 		this._super(controller, model);
-		controller.set('selectedSpaces', model);
+		controller.set('selectedSpaces', model.spaces);
 
 		let constants = this.get('constants');
 		let publicSpaces = [];
 		let protectedSpaces = [];
 		let personalSpaces = [];
 
-		_.each(model, space => {
+		_.each(model.spaces, space => {
 			if (space.get('spaceType') === constants.SpaceType.Public) {
 				publicSpaces.pushObject(space);
 			}
@@ -50,6 +55,14 @@ export default Route.extend(AuthenticatedRouteMixin, {
 			}
 		});
 
+		_.each(model.labels, label => {
+			let spaces = _.where(model.spaces, {labelId: label.get('id')});
+			label.set('count', spaces.length);
+			controller.set(label.get('id'), spaces);
+		});
+
+		controller.set('labels', model.labels);
+		controller.set('spaces', publicSpaces);
 		controller.set('publicSpaces', publicSpaces);
 		controller.set('protectedSpaces', protectedSpaces);
 		controller.set('personalSpaces', personalSpaces);

gui/app/pods/folders/template.hbs

@@ -6,7 +6,7 @@
 		<div class="list">
 			<div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
 				<i class={{concat "dicon " constants.Icon.All}} />
-				<div class="name">All ({{model.length}})</div>
+				<div class="name">All ({{model.spaces.length}})</div>
 			</div>
 			<div class="item {{if (eq selectedView "public") "selected"}}" {{action "onSelect" "public"}}>
 				<i class={{concat "dicon " constants.Icon.World}} />
@@ -24,6 +24,25 @@
 			{{/if}}
 		</div>
 	</div>
+
+	{{ui/ui-spacer size=300}}
+
+	<div class="section">
+		<div class="title">label</div>
+		{{#if labels}}
+			<div class="list">
+				{{#each labels as |label|}}
+					<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
+						<i class={{concat "dicon " constants.Icon.Checkbox}}
+							style={{label.bgfgColor}}/>
+						<div class="name">{{label.name}} ({{label.count}})</div>
+					</div>
+				{{/each}}
+			</div>
+		{{else}}
+			<div class="empty">No labels</div>
+		{{/if}}
+	</div>
 {{/layout/master-sidebar}}
 
 {{#layout/master-content}}
@@ -46,7 +65,7 @@
 
 	{{ui/ui-spacer size=400}}
 
-	{{spaces/space-list spaces=selectedSpaces}}
+	{{spaces/space-list spaces=selectedSpaces labels=labels}}
 
 	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
 		<div class="modal-dialog" role="document">