Began adding generic child lists of effects, proficiencies, etc.

app/imports/api/creature/properties/Features.js

@@ -22,12 +22,6 @@ let featureSchema = schema({
 	},
 	enabled:      {type: Boolean, defaultValue: true},
 	alwaysEnabled:{type: Boolean, defaultValue: true},
-	order: {
-		type: SimpleSchema.Integer,
-		// Indexed because we update order in bulk using the current order as a query
-		index: 1,
-		defaultValue: 0,
-	},
 	order: OrderSchema(),
 	color: ColorSchema(),
 });

app/imports/ui/components/attributes/AttributeDialog.vue

@@ -21,10 +21,10 @@
 			<div class="display-3 attribute-value" v-else>
 				{{value}}
 			</div>
-			<attribute-effect-list v-if="attribueBaseEffect" :effects="[attribueBaseEffect]"/>
+			<effect-child-list v-if="attribueBaseEffect" :effects="[attribueBaseEffect]"/>
 			<div v-if="effects && effects.length">
 				<h6 class="title">Effects</h6>
-				<attribute-effect-list :effects="effects" @click="clickedEffect"/>
+				<effect-child-list :effects="effects" @click="clickedEffect"/>
 			</div>
 		</div>
 		<div slot="edit">
@@ -35,7 +35,7 @@
 
 <script>
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
-	import AttributeEffectList from '/imports/ui/components/attributes/AttributeEffectList.vue';
+	import EffectChildList from 'app/imports/ui/components/children/effects/EffectChildList.vue';
 	import AttributeEdit from '/imports/ui/components/attributes/AttributeEdit.vue';
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
@@ -78,7 +78,7 @@
 		},
 		components: {
 			DialogBase,
-			AttributeEffectList,
+			EffectChildList,
 			AttributeEdit,
 		},
 	};

app/imports/ui/components/children/ChildLists.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+	<div v-if="effects && effects.length">
+		<h6 class="title">Effects</h6>
+		<effect-child-list
+			show-stat-name
+			:effects="effects"
+			@click="e => $emit('clickedEffect', e)"
+		/>
+	</div>
+</template>
+
+<script>
+	import EffectChildList from '/imports/ui/components/children/effects/EffectChildList.vue';
+
+	export default {
+		props: {
+			effects: Array,
+			proficiencies: Array,
+			actions: Array,
+			attacks: Array,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/children/effects/EffectChildList.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <v-list two-line v-if="this.effects && this.effects.length">
 		<effect-list-tile
+			:show-stat-name="showStatName"
 			v-for="effect in sortedEffects"
 			v-bind="effect"
 			v-on="$listeners.click ? { click(e){$emit('click', e)} } : {}"
@@ -11,33 +12,20 @@
 
 <script>
 	import EffectListTile from '/imports/ui/components/effects/EffectListTile.vue';
-	const SORT_INDEX = {
-		"base": 1,
-		"add": 2,
-		"mul": 3,
-		"min": 4,
-		"max": 5,
-		"advantage": 6,
-		"disadvantage": 7,
-		"passiveAdd": 8,
-		"fail": 9,
-		"conditional": 10,
-	};
+	import sortEffects from '/imports/ui/utility/sortEffects.js';
 
 	export default {
 		props: {
 			effects: Array,
+			showStatName: Boolean,
 		},
 		components: {
 			EffectListTile,
 		},
 		computed: {
 			sortedEffects(){
-				if (!this.effects || !this.effects.length) return [];
-				return [...this.effects].sort(
-					(a, b) => (SORT_INDEX[a.operation] || 99) - (SORT_INDEX[b.operation] || 99)
-				);
-			}
+				return sortEffects(this.effects);
+			},
 		},
 	};
 </script>

app/imports/ui/components/children/effects/EffectListTile.vue

@@ -17,7 +17,7 @@
 			</div>
 		</v-layout>
 		<v-list-tile-content>
-			<v-list-tile-title class="stat" v-if="statName">
+			<v-list-tile-title class="stat" v-if="showStatName">
 				{{statName}}
 			</v-list-tile-title>
 			<v-list-tile-title class="name" v-else>
@@ -43,6 +43,7 @@
 			name: String,
 			stat: String,
 			statName: String,
+			showStatName: Boolean,
 		},
 		methods: {
 			getEffectIcon,

app/imports/ui/components/features/FeatureDialog.vue

@@ -0,0 +1,46 @@
+<template lang="html">
+	<dialog-base>
+    <div slot="toolbar" :color="color">
+      {{name}}
+    </div>
+		<div>
+			{{description}}
+			<child-lists
+				:effects="effects"
+				:proficiencies="proficiencies"
+				:actions="actions"
+				:attacks="attacks"
+			/>
+		</div>
+		<div slot="edit">
+			<feature-edit
+				:feature="$props"
+				@change="(update, ack) => $emit('change', update, ack)"
+			/>
+		</div>
+  </dialog-base>
+</template>
+
+<script>
+export default {
+	props: {
+		charId: String,
+		name: String,
+		description: String,
+		uses: String,
+		used: Number,
+		reset: String,
+		enabled: Boolean,
+		alwaysEnabled: Boolean,
+		order: Number,
+		color: String,
+		effects: Array,
+		proficiencies: Array,
+		actions: Array,
+		attacks: Array,
+	}
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/features/FeatureDialogContainer.vue

@@ -0,0 +1,47 @@
+<template lang="html">
+  <feature-dialog
+		v-bind="feature"
+		:effects="effects"
+		v-on="{clickedEffect, change}"
+	/>
+</template>
+
+<script>
+	import FeatureDialog from '/imports/ui/components/features/FeatureDialog.vue';
+	import Features from '/imports/api/creature/properties/Features.js';
+	import { updateFeature } from '/imports/api/creature/properties/Features.js';
+	import Effects from '/imports/api/creature/properties/Effects.js';
+
+	export default {
+		components: {
+			AttributeDialog,
+		},
+		props: {
+			_id: String,
+		},
+		meteor: {
+			feature(){
+				return Features.findOne(this._id);
+			},
+			effects(){
+				if (!this.feature) return;
+				return Effects.find({
+					'parent.id': this.feature._id,
+				}, {
+					sort: {order: 1},
+				}).fetch();
+			},
+		},
+		methods: {
+			clickedEffect(e){
+				console.log({TODO: e});
+			},
+			change(update, ack){
+				updateFeature.call({_id: this._id, update}, error => ack(error));
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/skills/SkillDialog.vue

@@ -8,8 +8,8 @@
 				<skill-list-tile v-bind="$props"/>
 			</v-layout>
 			<skill-proficiency-list v-if="skillBaseProficiency" :effects="[skillBaseProficiency]"/>
-			<attribute-effect-list v-if="skillAbilityEffect" :effects="[skillAbilityEffect]"/>
-			<attribute-effect-list v-if="skillBaseEffect" :effects="[skillBaseEffect]"/>
+			<effect-child-list v-if="skillAbilityEffect" :effects="[skillAbilityEffect]"/>
+			<effect-child-list v-if="skillBaseEffect" :effects="[skillBaseEffect]"/>
 
 			<div v-if="proficiencies && proficiencies.length">
 				<h6 class="title">Proficiencies</h6>
@@ -17,7 +17,7 @@
 			</div>
 			<div v-if="effects && effects.length">
 				<h6 class="title">Effects</h6>
-				<attribute-effect-list :effects="effects" @click="clickedEffect"/>
+				<effect-child-list :effects="effects" @click="clickedEffect"/>
 			</div>
 		</div>
 		<div slot="edit">
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-	import AttributeEffectList from '/imports/ui/components/attributes/AttributeEffectList.vue';
+	import EffectChildList from 'app/imports/ui/components/children/effects/EffectChildList.vue';
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import SkillEdit from '/imports/ui/components/skills/SkillEdit.vue';
 	import SkillProficiencyList from '/imports/ui/components/skills/SkillProficiencyList.vue';
@@ -35,7 +35,7 @@
 
 	export default {
 		components: {
-			AttributeEffectList,
+			EffectChildList,
 			DialogBase,
 			SkillEdit,
 			SkillListTile,

app/imports/ui/utility/sortEffects.js

@@ -0,0 +1,21 @@
+const INDEX = {
+  "base": 1,
+  "add": 2,
+  "mul": 3,
+  "min": 4,
+  "max": 5,
+  "advantage": 6,
+  "disadvantage": 7,
+  "passiveAdd": 8,
+  "fail": 9,
+  "conditional": 10,
+};
+
+function sortEffects(effects){
+  if (!effects || !effects.length) return [];
+  return [...effects].sort(
+    (a, b) => (INDEX[a.operation] || 99) - (INDEX[b.operation] || 99)
+  );
+}
+
+export default sortEffects;