Improved item library dialog UI

rpg-docs/.meteor/packages

@@ -46,3 +46,4 @@ templates:array
 ecmascript@0.6.1
 es5-shim@4.6.15
 differential:vulcanize
+reactive-dict

rpg-docs/client/views/character/inventory/itemLibraryDialog/itemLibraryDialog.css

@@ -2,6 +2,22 @@
 	background-color: #e4e4e4;
 }
 
-.item-library-dialog .paper-font-subhead {
-	color: rgba(0,0,0,0.54);
+.item-library-dialog .category-header {
+	font-size: 16px;
+}
+
+.item-library-dialog .category-header iron-icon {
+	transition: transform 0.3s ease;
+}
+
+.item-library-dialog .category-header iron-icon.open {
+	transform: rotate(90deg);
+}
+
+.item-library-dialog table {
+	border-collapse: collapse;
+}
+
+.item-library-dialog .library-item td {
+	position: relative;
 }

rpg-docs/client/views/character/inventory/itemLibraryDialog/itemLibraryDialog.html

@@ -10,32 +10,46 @@
 			</paper-input>
 		</app-toolbar>
 		<div class="flex scroll-y">
-			{{#if ready}}
-				<div class="items" style="padding:8px">
-					{{#if searchTerm}}
-						{{#if searchItems.count}}
-							{{#each item in searchItems}}
-								{{>libraryItem item=item selected=(isSelected item)}}
-							{{/each}}
-						{{else}}
+			<div class="items" style="padding:8px">
+				{{#if searchTerm}}
+					{{#if searchItems.count}}
+						<table style="width: 100%">
+							<tbody>
+								{{#each item in searchItems}}
+									{{>libraryItem item=item selected=(isSelected item)}}
+								{{/each}}
+							</tbody>
+						</table>
+					{{else}}{{#if searchReady}}
 							No items match "{{searchTerm}}"
-						{{/if}}
-					{{else}}
-						{{#each category in categories}}
-							<div class="paper-font-subhead">
-								{{category.name}}
-							</div>
-							{{#each item in (itemsInCategory category.key)}}
-								{{>libraryItem item=item selected=(isSelected item)}}
-							{{/each}}
-						{{/each}}
-					{{/if}}
-				</div>
-			{{else}}
-				<div class="fit layout vertical center center-justified">
-					<paper-spinner active></paper-spinner>
-				</div>
-			{{/if}}
+					{{/if}}{{/if}}
+					{{#unless searchReady}}
+						<div class="layout vertical center" style="width: 100%; padding: 16px;">
+							<paper-spinner active></paper-spinner>
+						</div>
+					{{/unless}}
+				{{else}}
+					{{#each categories}}
+						<div class="paper-font-body2 category-header clickable">
+							<iron-icon icon="chevron-right" class="{{#if isOpen key}}open{{/if}}">
+							</iron-icon>
+							{{name}}
+						</div>
+						<iron-collapse opened={{isOpen key}}>
+							<table style="width: 100%">
+								<tbody>
+									{{#each item in (itemsInCategory key)}}
+										{{>libraryItem item=item selected=(isSelected item)}}
+									{{/each}}
+								</tbody>
+							</table>
+							{{#unless ready key}}
+								<paper-spinner active></paper-spinner>
+							{{/unless}}
+						</iron-collapse>
+					{{/each}}
+				{{/if}}
+			</div>
 		</div>
 		<div class="layout horizontal end-justified">
 			<paper-button class="cancelButton">Cancel</paper-button>
@@ -45,10 +59,18 @@
 </template>
 
 <template name="libraryItem">
-	<div class="item library-item layout horizontal center {{#if selected}}selected{{/if}}">
-		<paper-ripple></paper-ripple>
-		<div class="itemName flex">
+	<tr class="item library-item {{#if selected}}selected{{/if}}">
+		<td class="itemName">
 			{{item.name}}
-		</div>
-	</div>
+			<paper-ripple></paper-ripple>
+		</td>
+		<td>
+			{{item.weight}} lb.
+			<paper-ripple></paper-ripple>
+ 		</td>
+		<td>
+			{{valueString item.value}}
+			<paper-ripple></paper-ripple>
+		</td>
+	</tr>
 </template>

rpg-docs/client/views/character/inventory/itemLibraryDialog/itemLibraryDialog.js

@@ -1,41 +1,74 @@
 const librarySubs = new SubsManager();
 
+const categories = [
+	{name: "Weapons", key: "weapons"},
+	{name: "Armor", key: "armor"},
+	{name: "Adventuring Gear", key: "adventuringGear"},
+	{name: "Tools", key: "tools"},
+];
+
 Template.itemLibraryDialog.onCreated(function(){
 	this.selectedItem = new ReactiveVar();
 	this.searchTerm = new ReactiveVar();
-	this.ready = new ReactiveVar();
+	this.categoriesOpen = new ReactiveVar([]);
+	this.readyDict = new ReactiveDict();
+	this.searchReady = new ReactiveVar();
+	librarySubs.subscribe("standardLibraries");
 	this.autorun(() => {
-		var handle = librarySubs.subscribe("standardLibraries");
-		this.ready.set(handle.ready());
+		// Subscribe to all open categories
+		_.each(this.categoriesOpen.get(), (key) => {
+			var handle = librarySubs.subscribe("standardLibraryItems", key);
+			this.autorun(() => {
+				this.readyDict.set(key, handle.ready());
+			});
+		});
+	});
+	this.autorun(() => {
+		// If we are searching, subscibe to all categories
+		if (this.searchTerm.get()){
+			let handles = _.map(categories, category =>
+				librarySubs.subscribe("standardLibraryItems", category.key)
+			);
+			// Ready when all handles are ready
+			this.autorun(() => {
+				this.searchReady.set(_.every(handles, h => h.ready()));
+			});
+		}
 	});
 });
 
 Template.itemLibraryDialog.helpers({
-	ready(){
-		return Template.instance().ready.get();
+	ready(key){
+		return Template.instance().readyDict.get(key);
 	},
 	categories(){
-		return [
-			{name: "Weapons", key: "weapons"},
-			{name: "Armor", key: "armor"},
-			{name: "Adventuring Gear", key: "adventuringGear"},
-		];
+		return categories;
 	},
 	itemsInCategory(categoryKey){
 		return LibraryItems.find({
 			library: "SRDLibraryGA3XWsd",
 			"settings.category": categoryKey,
+		}, {
+			sort: {name: 1},
 		});
 	},
 	isSelected(item){
 		const selected = Template.instance().selectedItem.get();
 		return selected && selected._id === item._id;
 	},
+	isOpen(key){
+		const cats = Template.instance().categoriesOpen.get();
+		return _.contains(cats, key);
+	},
 	searchTerm(){
 		return Template.instance().searchTerm.get();
 	},
+	searchReady(){
+		return Template.instance().searchReady.get();
+	},
 	searchItems(){
 		const searchTerm = Template.instance().searchTerm.get();
+		if (!searchTerm) return;
 		return LibraryItems.find({
 			library: "SRDLibraryGA3XWsd",
 			name: {
@@ -58,6 +91,17 @@ Template.itemLibraryDialog.events({
 	"click #backButton": function(event, template){
 		popDialogStack();
 	},
+	"click .category-header": function(event, template){
+		let cats = template.categoriesOpen.get();
+		const key = this.key;
+		// Toggle whether this key is in the array or not
+		if (_.contains(cats, key)){
+			cats = _.without(cats, key);
+		} else {
+			cats.push(key);
+		}
+		template.categoriesOpen.set(cats);
+	},
 	"input .search-input, change .search-input": function(event, template){
 		const value = event.currentTarget.value;
 		template.searchTerm.set(value);

rpg-docs/config.vulcanize

@@ -8,6 +8,7 @@
 	"/components/app-layout/app-scroll-effects/effects/parallax-background.html",
 	"/components/app-layout/app-scroll-effects/effects/resize-title.html",
 
+    "/components/iron-collapse/iron-collapse.html",
 	"/components/iron-icon/iron-icon.html",
 	"/components/iron-icons/av-icons.html",
 	"/components/iron-icons/editor-icons.html",

rpg-docs/server/publications/library.js

@@ -1,9 +1,16 @@
+const standardLibraryIds = [
+	"SRDLibraryGA3XWsd",
+];
+
 Meteor.publish("standardLibraries", function(){
-	const standardLibraryIds = [
-		"SRDLibraryGA3XWsd",
-	];
-	return [
-		LibraryItems.find({library: {$in: standardLibraryIds}}),
-		Libraries.find({_id: {$in: standardLibraryIds}}),
-	];
+	return Libraries.find({_id: {$in: standardLibraryIds}});
+});
+
+Meteor.publish("standardLibraryItems", function(categoryKey){
+	return LibraryItems.find({
+		library: {$in: standardLibraryIds},
+		"settings.category": categoryKey,
+	}, {
+		sort: {name: 1},
+	});
 });