Added library UI for selecting a library item

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

@@ -0,0 +1,7 @@
+.item-library-dialog .item.selected {
+	background-color: #e4e4e4;
+}
+
+.item-library-dialog .paper-font-subhead {
+	color: rgba(0,0,0,0.54);
+}

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

@@ -0,0 +1,54 @@
+<template name="itemLibraryDialog">
+	<div class="fit item-library-dialog layout vertical">
+		<app-toolbar class="app-grey white-text">
+			<paper-icon-button id="backButton"
+							   icon="arrow-back">
+			</paper-icon-button>
+			<div main-title>Items</div>
+			<paper-input label="Search" class="search-input">
+				<iron-icon icon="search" prefix></iron-icon>
+			</paper-input>
+		</app-toolbar>
+		<div class="flex scroll-y">
+			<div class="items" style="padding:8px">
+				{{#if searchTerm}}
+					{{#if searchItems.count}}
+						{{#each item in searchItems}}
+							{{>libraryItem item=item selected=(isSelected item)}}
+						{{/each}}
+					{{else}}
+						No items match "{{searchTerm}}"
+					{{/if}}
+				{{else}}
+					{{#each category in categories}}
+						<div class="paper-font-subhead">
+							{{category.name}}
+						</div>
+						{{#each item in itemsInCategory category.value}}
+							{{>libraryItem item=item selected=(isSelected item)}}
+						{{/each}}
+					{{/each}}
+				{{/if}}
+			</div>
+		</div>
+		<div class="layout horizontal end-justified">
+			<paper-button class="cancelButton">Cancel</paper-button>
+			<paper-button class="okButton">OK</paper-button>
+		</div>
+	</div>
+</template>
+
+<template name="libraryItem">
+	<div class="item library-item layout horizontal center {{#if selected}}selected{{/if}}">
+		<paper-ripple></paper-ripple>
+		<div class="itemName flex">
+			{{item.name}}
+		</div>
+		<div style="margin: 0 8px">
+			{{item.weight}}
+		</div>
+		<div style="margin: 0 8px">
+			{{item.value}}
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,57 @@
+Template.itemLibraryDialog.onCreated(function(){
+	this.selectedItem = new ReactiveVar();
+	this.searchTerm = new ReactiveVar();
+});
+
+Template.itemLibraryDialog.helpers({
+	categories(){
+		return [
+			{name: "Weapons", key: "weapons"},
+			{name: "Armor", key: "armor"},
+			{name: "Adventuring Equipment", key: "adventuringEquipment"},
+			{name: "Tools", key: "tools"},
+		];
+	},
+	itemsInCategory(category){
+		//TODO return a cursor of all library items in the category
+		// As a dummy function returns a random 2 items
+		let count = Items.find({}).count();
+		return Items.find({}, {
+			limit: 5,
+			skip: Math.floor(Math.random() * (count - 5)),
+		});
+	},
+	isSelected(item){
+		const selected = Template.instance().selectedItem.get();
+		return selected && selected._id === item._id;
+	},
+	searchTerm(){
+		return Template.instance().searchTerm.get();
+	},
+	searchItems(){
+		const searchTerm = Template.instance().searchTerm.get();
+		//TODO return something relevant to the search terms
+		return Items.find({name: {
+			$regex: new RegExp(".*" + searchTerm + ".*", "gi")
+		}});
+	},
+});
+
+Template.itemLibraryDialog.events({
+	"click .cancelButton": function(event, template){
+		popDialogStack();
+	},
+	"click .okButton": function(event, template){
+		popDialogStack(template.selectedItem.get());
+	},
+	"click .library-item": function(event, template){
+		template.selectedItem.set(this.item);
+	},
+	"click #backButton": function(event, template){
+		popDialogStack();
+	},
+	"input .search-input, change .search-input": function(event, template){
+		const value = event.currentTarget.value;
+		template.searchTerm.set(value);
+	},
+});