Added simple feature UI components and insertion dialog

app/imports/ui/character/CharacterSheet.vue

@@ -15,6 +15,9 @@
       >
         <v-tab>
           Stats
+        </v-tab>
+        <v-tab>
+          Features
         </v-tab>
 				<v-tab>
           Tree
@@ -25,6 +28,9 @@
 			<v-tabs-items v-model="tab">
 	      <v-tab-item>
 	        <stats-tab :char-id="character._id"/>
+	      </v-tab-item>
+				<v-tab-item>
+	        <features-tab :char-id="character._id"/>
 	      </v-tab-item>
 				<v-tab-item>
 					<character-tree-view :char-id="character._id"/>
@@ -43,6 +49,7 @@
 	import { mapMutations } from "vuex";
 	import { theme } from '/imports/ui/theme.js';
 	import StatsTab from '/imports/ui/character/StatsTab.vue';
+	import FeaturesTab from '/imports/ui/character/FeaturesTab.vue';
 	import CharacterTreeView from '/imports/ui/character/CharacterTreeView.vue';
 	import { recomputeCreature } from '/imports/api/creature/creatureComputation.js'
 
@@ -53,6 +60,7 @@
 		},
 		components: {
 			StatsTab,
+			FeaturesTab,
 			CharacterTreeView,
 		},
 		data(){return {

app/imports/ui/character/FeaturesTab.vue

@@ -0,0 +1,73 @@
+<template lang="html">
+	<div class="features">
+		<column-layout>
+			<div v-for="feature in features" :key="feature._id">
+				<feature-card
+				v-bind="feature"
+				:data-id="feature._id"
+				/>
+			</div>
+		</column-layout>
+
+		<v-btn fixed fab bottom right
+			color="primary"
+			@click="insertFeature"
+			data-id="insert-feature-fab"
+		>
+			<v-icon>add</v-icon>
+		</v-btn>
+	</div>
+</template>
+
+<script>
+	import Creatures from '/imports/api/creature/Creatures.js';
+	import Features from '/imports/api/creature/properties/Features.js';
+	import { insertFeature } from '/imports/api/creature/properties/Features.js';
+	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
+	import FeatureCard from '/imports/ui/components/FeatureCard.vue';
+	import { evaluateComputation, evaluateString } from '/imports/ui/utility/evaluate.js';
+
+	export default {
+		props: {
+			charId: String,
+		},
+		components: {
+			ColumnLayout,
+			FeatureCard,
+		},
+		meteor: {
+			features(){
+				let char = Creatures.findOne(this.charId, {fields: {variables: 1}});
+				if (!char) return [];
+				let vars = char.variables;
+				return Features.find({
+					charId: this.charId,
+				}, {
+					sort: {order: 1},
+				}).map(f => {
+					f.uses = evaluateComputation(f.uses, vars);
+					f.description = evaluateString(f.description, vars);
+					return f;
+				});
+			},
+		},
+		methods: {
+			insertFeature(){
+				const charId = this.charId;
+				this.$store.commit('pushDialogStack', {
+					component: 'feature-creation-dialog',
+					elementId: 'insert-feature-fab',
+					callback(feature){
+						if (!feature) return;
+						feature.charId = charId;
+						let featureId = insertFeature.call({feature});
+						return featureId
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="css" scoped>
+</style>