Iteration on library UI

app/imports/constants/PROPERTY_ICONS.js

@@ -0,0 +1,21 @@
+const PROPERTY_ICONS = Object.freeze({
+  action: 'offline_bolt',
+  attribute: 'donut_small',
+  buff: 'star',
+  classLevel: 'school',
+  damageMultiplier: 'layers',
+  effect: 'show_chart',
+  experience: 'add',
+  feature: 'subject',
+  folder: 'folder',
+  note: 'note',
+  proficiency: 'radio_button_checked',
+  roll: 'flare',
+  skill: 'check_box',
+  spellList: 'list',
+  spell: 'whatshot',
+  container: 'work',
+  item: 'category',
+});
+
+export default PROPERTY_ICONS;

app/imports/ui/components/tree/TreeNode.vue

@@ -9,10 +9,9 @@
 			>
 				<v-icon v-if="hasChildren || organize">chevron_right</v-icon>
 			</v-btn>
-			<v-icon class="handle mr-2" v-if="organize" :disabled="expanded">reorder</v-icon>
-			<div>
-				<span class="mr-2 caption">{{node && node.order}}</span>
-				<span class="mr-2 caption">({{node && node.type}})</span>
+			<v-icon class="handle mr-2" v-if="organize" :disabled="expanded">drag_handle</v-icon>
+			<div class="layout row center" style="align-items: center">
+				<v-icon v-if="node.type" class="mr-2">{{icon(node.type)}}</v-icon>
 				{{node && node.name}}
 			</div>
 		</div>
@@ -38,6 +37,7 @@
 	* the tree view shows off the full character structure, and where each part of
 	* character comes from.
 	**/
+	import PROPERTY_ICONS from '/imports/constants/PROPERTY_ICONS.js';
 	export default {
 		name: 'tree-node',
 		beforeCreate() {
@@ -69,8 +69,14 @@
 					children.push(...this.getChildren())
 				}
 				return children;
-			}
+			},
 		},
+		methods: {
+			icon(type){
+				console.log({icon: PROPERTY_ICONS[type],PROPERTY_ICONS})
+				return PROPERTY_ICONS[type];
+			},
+		}
 	};
 </script>
 

app/imports/ui/components/tree/TreeNodeList.vue

@@ -3,7 +3,6 @@
 		:value="children"
 		class="drag-area layout column"
 		@change="change"
-		@start="start"
 		:group="group"
 		:animation="200"
 		ghost-class="ghost"
@@ -68,9 +67,6 @@
 					}
 				}
 			},
-			start(){
-				console.log({start: arguments})
-			}
 		},
 	};
 </script>

app/imports/ui/library/LibraryNodeEditDialog.vue

@@ -0,0 +1,70 @@
+<template lang="html">
+	<dialog-base v-show="step == 1" class="step-1" key="left">
+		<template slot="toolbar">
+			<div>Add {{propertyName}}</div>
+			<v-btn icon flat @click="remove">
+				<v-icon>delete</v-icon>
+			</v-btn>
+		</template>
+		<component
+			v-if="type"
+			:is="type"
+			class="library-node-form"
+			:model="model"
+			@change="change"
+			@push="push"
+			@pull="pull"
+		/>
+		<div
+			slot="actions"
+			class="layout row justify-end"
+		>
+			<v-btn
+				flat
+				:disabled="!valid"
+				@click="$store.dispatch('popDialogStack')"
+			>Done</v-btn>
+		</div>
+	</dialog-base>
+</template>
+
+<script>
+import librarySchemas from '/imports/api/library/librarySchemas.js';
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import propertyFormIndex from '/imports/ui/forms/components/propertyFormIndex.js';
+
+let todo = () => console.log('not implemented');
+let libraryNodeSet = libraryNodePull = libraryNodePush = libraryNodeRemove = todo;
+
+export default {
+  components: {
+		...propertyFormIndex,
+    DialogBase,
+  },
+	props: {
+		_id: String,
+	},
+	meteor: {
+		model(){
+			return LibrarNodes.findOne(this._id);
+		},
+	},
+	methods: {
+		change({path, value, ack}){
+      libraryNodeSet({_id: this._id, path, value}, e => ack(e));
+		},
+    push({path, value, ack}){
+			libraryNodePush({_id: this._id, path}, e => ack(e));
+    },
+    pull({path, ack}){
+			libraryNodePull({_id: this._id, path}, e => ack(e));
+    },
+		remove(){
+			libraryNodeRemove({_id: this._id});
+		},
+	}
+};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/pages/Library.vue

@@ -1,12 +1,17 @@
 <template lang="html">
 	<toolbar-layout>
 		<template slot="toolbar">
-			<v-btn icon to="/library">
+			<v-btn icon flat to="/library" active-class="">
 				<v-icon>arrow_back</v-icon>
 			</v-btn>
 			{{library && library.name || 'Library'}}
 			<v-spacer/>
-			<v-switch v-model="organize" label="Sort" style="flex-grow: 0; height: 32px;"/>
+			<v-btn-toggle>
+				<v-btn v-model="organize">
+					<v-icon class="mr-1">reorder</v-icon>
+					Organize
+				</v-btn>
+			</v-btn-toggle>
 		</template>
 		<v-card class="ma-4">
 			<library-contents-container

app/imports/ui/properties/PropertySelector.vue

@@ -5,7 +5,7 @@
 				<v-flex v-for="property in properties" :key="property.name" xs4>
 					<v-card hover @click="$emit('select', property)">
 						<div class="layout row align-center justify-center" style="min-height: 70px;">
-							<v-icon x-large>{{ property.icon }}</v-icon>
+							<v-icon x-large>{{ icon(property.type) }}</v-icon>
 						</div>
 						<h3 class="subtitle pb-3" style="text-align: center;">
 							{{ property.name }}
@@ -18,28 +18,34 @@
 </template>
 
 <script>
+import PROPERTY_ICONS from '/imports/constants/PROPERTY_ICONS.js';
 export default {
 	data(){return {
 		properties: [
-			{name: 'Action', icon: 'offline-bolt', type: 'action'},
-			{name: 'Attribute', icon: 'star-rate', type: 'attribute'},
+			{name: 'Action', icon: 'offline_bolt', type: 'action'},
+			{name: 'Attribute', icon: 'donut_small', type: 'attribute'},
 			{name: 'Buff', icon: 'star', type: 'buff'},
 			{name: 'Class Level', icon: 'school', type: 'classLevel'},
 			{name: 'Damage Multiplier', icon: 'layers', type: 'damageMultiplier'},
-			{name: 'Effect', icon: 'show-chart', type: 'effect'},
+			{name: 'Effect', icon: 'show_chart', type: 'effect'},
 			{name: 'Experience', icon: 'add', type: 'experience'},
 			{name: 'Feature', icon: 'subject', type: 'feature'},
 			{name: 'Folder', icon: 'folder', type: 'folder'},
 			{name: 'Note', icon: 'note', type: 'note'},
-			{name: 'Proficiency', icon: 'radio-button-checked', type: 'proficiency'},
-			{name: 'Roll', icon: 'dice', type: 'roll'},
-			{name: 'Skill', icon: 'check-box', type: 'skill'},
+			{name: 'Proficiency', icon: 'radio_button_checked', type: 'proficiency'},
+			{name: 'Roll', icon: 'flare', type: 'roll'},
+			{name: 'Skill', icon: 'check_box', type: 'skill'},
 			{name: 'Spell List', icon: 'list', type: 'spellList'},
 			{name: 'Spell', icon: 'whatshot', type: 'spell'},
 			{name: 'Container', icon: 'work', type: 'container'},
 			{name: 'Item', icon: 'category', type: 'item'},
 		],
-	}}
+	}},
+	methods: {
+		icon(type){
+			return PROPERTY_ICONS[type];
+		},
+	}
 }
 </script>