Added library UI for selecting a library item

rpg-docs/Model/Inventory/Items.js

@@ -10,6 +10,9 @@ Schemas.Item = new SimpleSchema({
 	value:		{type: Number, min: 0, defaultValue: 0, decimal: true},
 	enabled:    {type: Boolean, defaultValue: false},
 	requiresAttunement: {type: Boolean, defaultValue: false},
+	category:   {type: String, optional: true, allowedValues: [
+		"adventuringGear", "armor", "weapons", "tools",
+	],},
 	"settings.showIncrement": {type: Boolean, defaultValue: false},
 	color:      {
 		type: String,

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

@@ -1,6 +1,6 @@
 <template name="itemDialog">
 	{{#with item}}
-		{{#baseDialog title=itemHeading class=colorClass startEditing=../startEditing}}
+		{{#baseDialog title=itemHeading class=colorClass startEditing=../startEditing showLibrary=true}}
 			{{> itemDetails}}
 		{{else}}
 			{{> itemEdit}}

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

@@ -33,6 +33,21 @@ Template.itemDialog.events({
 	"click #doneEditingButton": function(event, instance){
 		instance.editing.set(false);
 	},
+	"click #libraryButton": function(event, instance){
+		pushDialogStack({
+			template: "itemLibraryDialog",
+			element: event.currentTarget,
+			callback: function(result){
+				if (!result) return;
+				delete result.parent;
+				delete result._id;
+				delete result.charId;
+				result.quantity = 1;
+				Items.update(instance.data.itemId, {$set: result});
+				//TODO Replace the effects with the effects of the library item
+			},
+		})
+	},
 	"color-change": function(event, instance){
 		Items.update(instance.data.itemId, {$set: {color: event.color}});
 	},

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);
+	},
+});

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html

@@ -16,6 +16,12 @@
 				{{#unless hideColor}}
 					{{> colorDropdown}}
 				{{/unless}}
+				{{#if showLibrary}}
+					<paper-icon-button id="libraryButton"
+									   tabindex="0"
+									   icon="av:library-books">
+   					</paper-icon-button>
+				{{/if}}
 				<paper-icon-button id="doneEditingButton"
 								   icon="done">
 				</paper-icon-button>