Replaced effects in-line editing with edit dialogs

Closes #41

rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.css

@@ -0,0 +1,3 @@
+.effectsEditList .effect {
+	background: white;
+}

rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.html

@@ -1,11 +1,19 @@
 <!--needs to be given charId, parentId and parentCollection-->
 <template name="effectsEditList">
-	{{#if effects.count}}
-		<div id="effects">
+	{{#if effects.length}}
+		<div class="effectsEditList">
 			<div class="paper-font-title">Effects</div>
-			{{#each effects}}
-				{{>effectEdit}}
-			{{/each}}
+			<table class="wideTable" style="width: 100%;">
+				{{#each effects}}
+					<tr class="effect" data-id={{_id}}>
+						{{>effectView}}
+						<td>
+							<paper-icon-button class="edit-effect" icon="create">
+							</paper-icon-button>
+						</td>
+					</tr>
+				{{/each}}
+			</table>
 		</div>
 	{{/if}}
 	<paper-button id="addEffectButton" class="red-button"  raised>Add Effect</paper-button>

rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.js

@@ -8,17 +8,17 @@ Template.effectsEditList.helpers({
 		if (this.parentGroup){
 			selector["parent.group"] = this.parentGroup;
 		}
-		var cursor = Effects.find(selector);
-		return cursor;
+		var effects = Effects.find(selector).fetch();
+		return _.sortBy(effects, effect => statOrder[effect.stat] || 999);
 	}
 });
 
 Template.effectsEditList.events({
-	"tap #addEffectButton": function(){
+	"tap #addEffectButton": function(event, instance){
 		if (!_.isBoolean(this.enabled)) {
 			this.enabled = true;
 		}
-		Effects.insert({
+		const effectId = Effects.insert({
 			name: this.name,
 			charId: this.charId,
 			parent: {
@@ -29,5 +29,18 @@ Template.effectsEditList.events({
 			operation: "add",
 			enabled: this.enabled,
 		});
+		pushDialogStack({
+			template: "effectEdit",
+			data: {id: effectId},
+			element: event.currentTarget,
+			returnElement: instance.find(`tr.effect[data-id='${effectId}']`),
+		});
+	},
+	"tap .edit-effect": function(event, template){
+		pushDialogStack({
+			template: "effectEdit",
+			data: {id: this._id},
+			element: event.currentTarget.parentElement.parentElement,
+		});
 	},
 });