From 1bfb48c6723f4fa115c1ba98ffed86f58765d08f Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 23 Jul 2019 11:28:26 +0200
Subject: [PATCH] Added forms for Class level, damage multiplier, experience,
 folder, note, proficiency

---
 .../api/creature/properties/ClassLevels.js    |  12 +-
 .../creature/properties/DamageMultipliers.js  |   5 +-
 .../api/creature/properties/Experiences.js    |   8 +-
 .../api/creature/properties/Folders.js        |   5 -
 .../api/creature/properties/Proficiencies.js  |  10 +-
 .../ui/components/global/DatePicker.vue       |  52 +++++++
 .../ui/components/global/SmartInputMixin.js   |   2 +-
 .../ui/components/global/globalIndex.js       |   2 +
 .../creature/properties/PropertySelector.vue  |   3 +-
 app/imports/ui/forms/ClassLevelForm.vue       |  66 +++++++++
 app/imports/ui/forms/DamageMultiplierForm.vue | 133 ++++++++++++++++++
 app/imports/ui/forms/ExperienceForm.vue       |  74 ++++++++++
 app/imports/ui/forms/FolderForm.vue           |  33 +++++
 app/imports/ui/forms/NoteForm.vue             |  37 +++++
 app/imports/ui/forms/ProficiencyForm.vue      | 115 +++++++++++++++
 .../ui/forms/components/propertyFormIndex.js  |  12 ++
 app/package-lock.json                         |  67 +++++++++
 app/package.json                              |   1 +
 18 files changed, 604 insertions(+), 33 deletions(-)
 create mode 100644 app/imports/ui/components/global/DatePicker.vue
 create mode 100644 app/imports/ui/forms/ClassLevelForm.vue
 create mode 100644 app/imports/ui/forms/DamageMultiplierForm.vue
 create mode 100644 app/imports/ui/forms/ExperienceForm.vue
 create mode 100644 app/imports/ui/forms/FolderForm.vue
 create mode 100644 app/imports/ui/forms/NoteForm.vue
 create mode 100644 app/imports/ui/forms/ProficiencyForm.vue

diff --git a/app/imports/api/creature/properties/ClassLevels.js b/app/imports/api/creature/properties/ClassLevels.js
index 34265a21..3b622a32 100644
--- a/app/imports/api/creature/properties/ClassLevels.js
+++ b/app/imports/api/creature/properties/ClassLevels.js
@@ -18,10 +18,6 @@ let ClassLevelSchema = schema({
 		type: String,
 		optional: true,
 	},
-	enabled: {
-    type: Boolean,
-    defaultValue: true,
-  },
 	// The name of this class level's variable
 	variableName: {
     type: String,
@@ -31,17 +27,11 @@ let ClassLevelSchema = schema({
 	baseClass: {
 		type: String,
 		regEx: VARIABLE_NAME_REGEX,
-	},
-	// The name of the class level that needs to preceed this class level
-	// So a totemWarrior level 5 must be preceded by a totemWarrior level 4
-	// If it's not set, any level below with the same baseClass is matched
-	previousClassLevel: {
-		type: String,
-		regEx: VARIABLE_NAME_REGEX,
 		optional: true,
 	},
 	level: {
     type: SimpleSchema.Integer,
+		defaultValue: 1,
   },
 });
 
diff --git a/app/imports/api/creature/properties/DamageMultipliers.js b/app/imports/api/creature/properties/DamageMultipliers.js
index 24f5283e..75da5661 100644
--- a/app/imports/api/creature/properties/DamageMultipliers.js
+++ b/app/imports/api/creature/properties/DamageMultipliers.js
@@ -27,12 +27,13 @@ let DamageMultiplierSchema = schema({
   damageType: {
     type: String,
 		allowedValues: DAMAGE_TYPES,
+    defaultValue: 'bludgeoning',
   },
 	// The value of the damage multiplier
 	value: {
     type: Number,
-		defaultValue: 1,
-		allowedValues: [0, 0.5, 1, 2],
+		defaultValue: 0.5,
+		allowedValues: [0, 0.5, 2],
   },
 });
 
diff --git a/app/imports/api/creature/properties/Experiences.js b/app/imports/api/creature/properties/Experiences.js
index 57748eef..71fa32bc 100644
--- a/app/imports/api/creature/properties/Experiences.js
+++ b/app/imports/api/creature/properties/Experiences.js
@@ -15,7 +15,7 @@ import updateSchemaMixin from '/imports/api/creature/mixins/updateSchemaMixin.js
 let Experiences = new Mongo.Collection("experience");
 
 let ExperienceSchema = schema({
-	name: {
+	title: {
 		type: String,
 		optional: true,
 	},
@@ -33,11 +33,9 @@ let ExperienceSchema = schema({
 	date: {
 		type: Date,
 		autoValue: function() {
-			// If the date isn't set, set it to now on insert
-			if (this.isInsert && !this.isSet) {
+			// If the date isn't set, set it to now
+			if (!this.isSet) {
 				return new Date();
-			} else if (this.isUpsert && !this.isSet) {
-				return {$setOnInsert: new Date()};
 			}
 		},
 	},
diff --git a/app/imports/api/creature/properties/Folders.js b/app/imports/api/creature/properties/Folders.js
index 5eace789..c5b61cca 100644
--- a/app/imports/api/creature/properties/Folders.js
+++ b/app/imports/api/creature/properties/Folders.js
@@ -17,11 +17,6 @@ let Folders = new Mongo.Collection('folders');
 let FolderSchema = schema({
   name: {
     type: String,
-    optional: true,
-  },
-  enabled: {
-    type: Boolean,
-    defaultValue: true,
   },
 });
 
diff --git a/app/imports/api/creature/properties/Proficiencies.js b/app/imports/api/creature/properties/Proficiencies.js
index 25c5bff2..9bcd7939 100644
--- a/app/imports/api/creature/properties/Proficiencies.js
+++ b/app/imports/api/creature/properties/Proficiencies.js
@@ -14,21 +14,17 @@ import updateSchemaMixin from '/imports/api/creature/mixins/updateSchemaMixin.js
 let Proficiencies = new Mongo.Collection("proficiencies");
 
 let ProficiencySchema = schema({
-	name: {
+	// The variableName of the skill to apply this to
+	skill: {
 		type: String,
 		optional: true,
 	},
 	// A number representing how proficient the character is
 	value: {
 		type: Number,
-		allowedValues: [0, 0.5, 1, 2],
+		allowedValues: [0.5, 1, 2],
 		defaultValue: 1,
 	},
-	// The variableName of the skill to apply this to
-	skill: {
-		type: String,
-		optional: true,
-	},
 });
 
 Proficiencies.attachSchema(ProficiencySchema);
diff --git a/app/imports/ui/components/global/DatePicker.vue b/app/imports/ui/components/global/DatePicker.vue
new file mode 100644
index 00000000..42c77778
--- /dev/null
+++ b/app/imports/ui/components/global/DatePicker.vue
@@ -0,0 +1,52 @@
+<template lang="html">
+	<v-menu
+    v-model="menu"
+    :close-on-content-click="false"
+    lazy
+    transition="scale-transition"
+    full-width
+    min-width="290px"
+  >
+    <template v-slot:activator="{ on }">
+      <v-text-field
+        :value="formattedSafeValue"
+        v-bind="$attrs"
+        prepend-icon="event"
+        readonly
+        v-on="on"
+				:loading="loading"
+        :error-messages="errors"
+				@focus="focused = true"
+				@blur="focused = false"
+				box
+      ></v-text-field>
+    </template>
+    <v-date-picker :value="formattedSafeValue" @input="dateInput"></v-date-picker>
+  </v-menu>
+</template>
+
+<script>
+import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+import { format } from 'date-fns';
+
+export default {
+	mixins: [SmartInput],
+	data(){return {
+		menu: false,
+	};},
+	methods: {
+		dateInput(e){
+			this.menu = false;
+			this.input(e);
+		},
+	},
+	computed: {
+		formattedSafeValue(){
+			return format(this.safeValue, 'YYYY-MM-DD')
+		},
+	},
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index 5e643881..9fbb21fd 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -20,7 +20,7 @@ export default {
     inputValue: this.value,
   };},
   props: {
-    value: [String, Number],
+    value: [String, Number, Date],
     debounceTime: {
       type: Number,
       default: 750,
diff --git a/app/imports/ui/components/global/globalIndex.js b/app/imports/ui/components/global/globalIndex.js
index 50123997..8560470d 100644
--- a/app/imports/ui/components/global/globalIndex.js
+++ b/app/imports/ui/components/global/globalIndex.js
@@ -1,9 +1,11 @@
 import Vue from "vue";
 // Global components
+import DatePicker from '/imports/ui/components/global/DatePicker.vue';
 import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
 
+Vue.component("date-picker", DatePicker);
 Vue.component("text-field", TextField);
 Vue.component("text-area", TextArea);
 Vue.component("smart-select", SmartSelect);
diff --git a/app/imports/ui/creature/properties/PropertySelector.vue b/app/imports/ui/creature/properties/PropertySelector.vue
index 22c56a8a..91c317ef 100644
--- a/app/imports/ui/creature/properties/PropertySelector.vue
+++ b/app/imports/ui/creature/properties/PropertySelector.vue
@@ -25,8 +25,7 @@ export default {
 			{name: 'Action', icon: 'offline-bolt', type: 'action'},
 			{name: 'Attribute', icon: 'star-rate', type: 'attribute'},
 			{name: 'Buff', icon: 'star', type: 'buff'},
-			{name: 'Class', icon: 'school', type: 'class'},
-			{name: 'Class Level', icon: 'plus-one', type: 'classLevel'},
+			{name: 'Class Level', icon: 'school', type: 'classLevel'},
 			{name: 'Damage Multiplier', icon: 'layers', type: 'damageMultiplier'},
 			{name: 'Effect', icon: 'show-chart', type: 'effect'},
 			{name: 'Experience', icon: 'add', type: 'experience'},
diff --git a/app/imports/ui/forms/ClassLevelForm.vue b/app/imports/ui/forms/ClassLevelForm.vue
new file mode 100644
index 00000000..25e55e18
--- /dev/null
+++ b/app/imports/ui/forms/ClassLevelForm.vue
@@ -0,0 +1,66 @@
+<template lang="html">
+  <div class="class-form">
+		<div class="layout column align-center">
+			<text-field
+				label="Level"
+				type="number"
+				class="base-value-field text-xs-center large-format no-flex"
+				:value="model.level"
+				@change="(value, ack) => $emit('change', {path: ['level'], value, ack})"
+				:error-messages="errors.level"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+		<div class="layout row wrap">
+			<text-field
+				label="Name"
+				:value="model.name"
+				@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+				:error-messages="errors.name"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="Variable name"
+				:value="model.variableName"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+				hint="Use this name in formulae to reference this class"
+				:error-messages="errors.variableName"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="Base Class Variable name"
+				:value="model.baseClass"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['baseClass'], value, ack})"
+				hint="This is the name of the class this class level belongs to"
+				:error-messages="errors.baseClass"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+  </div>
+</template>
+
+<script>
+	import FormSection from '/imports/ui/forms/components/FormSection.vue';
+
+	export default {
+		components: {
+			FormSection,
+		},
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/forms/DamageMultiplierForm.vue b/app/imports/ui/forms/DamageMultiplierForm.vue
new file mode 100644
index 00000000..afad6a71
--- /dev/null
+++ b/app/imports/ui/forms/DamageMultiplierForm.vue
@@ -0,0 +1,133 @@
+<template lang="html">
+  <div class="attribute-form">
+		<text-field
+			label="Name"
+			:value="model.name"
+			@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+			:error-messages="errors.name"
+			:debounce-time="debounceTime"
+		/>
+		<div class="layout row wrap">
+			<smart-select
+				label="Damage Type"
+				style="flex-basis: 300px;"
+				:items="damageTypes"
+				:value="model.damageType"
+				:error-messages="errors.damageType"
+				:menu-props="{auto: true, lazy: true}"
+				@change="(value, ack) => $emit('change', {path: ['damageType'], value, ack})"
+				:debounce-time="debounceTime"
+			/>
+			<smart-select
+				label="Value"
+				style="flex-basis: 300px;"
+				:items="values"
+				:value="model.value"
+				:error-messages="errors.value"
+				:menu-props="{auto: true, lazy: true}"
+				@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+
+  </div>
+</template>
+
+<script>
+	import FormSection from '/imports/ui/forms/components/FormSection.vue';
+	import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
+
+	export default {
+		components: {
+			FormSection,
+		},
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+		data(){return {
+			damageTypes: [
+			  {
+					value: "bludgeoning",
+					text: "Bludgeoning",
+				}, {
+					value: "piercing",
+					text: "Piercing",
+				}, {
+					value: "slashing",
+					text: "Slashing",
+				}, {
+					value: "magicalBludgeoning",
+					text: "Magical Bludgeoning",
+				}, {
+					value: "magicalPiercing",
+					text: "Magical Piercing",
+				}, {
+					value: "magicalSlashing",
+					text: "Magical Slashing",
+				}, {
+					value: "acid",
+					text: "Acid",
+				}, {
+					value: "cold",
+					text: "Cold",
+				}, {
+					value: "fire",
+					text: "Fire",
+				}, {
+					value: "force",
+					text: "Force",
+				}, {
+					value: "lightning",
+					text: "Lightning",
+				}, {
+					value: "necrotic",
+					text: "Necrotic",
+				}, {
+					value: "poison",
+					text: "Poison",
+				}, {
+					value: "psychic",
+					text: "Psychic",
+				}, {
+					value: "radiant",
+					text: "Radiant",
+				}, {
+					value: "thunder",
+					text: "Thunder",
+				},
+			],
+			values: [
+			  {
+					value: 0,
+					text: "Immunity",
+				}, {
+					value: 0.5,
+					text: "Resistance",
+				}, {
+					value: 2,
+					text: "Vulnerability",
+				},
+			],
+		};},
+	};
+</script>
+
+<style lang="css" scoped>
+	.no-flex {
+		flex: initial;
+	}
+	.layout.row.wrap {
+		margin-right: -8px;
+	}
+	.layout.row.wrap > *{
+		margin-right: 8px;
+	}
+</style>
diff --git a/app/imports/ui/forms/ExperienceForm.vue b/app/imports/ui/forms/ExperienceForm.vue
new file mode 100644
index 00000000..4730809b
--- /dev/null
+++ b/app/imports/ui/forms/ExperienceForm.vue
@@ -0,0 +1,74 @@
+<template lang="html">
+  <div class="class-form">
+		<div class="layout column align-center">
+			<text-field
+				label="XP"
+				type="number"
+				class="base-value-field text-xs-center large-format no-flex"
+				:value="model.value"
+				@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+				:error-messages="errors.value"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+		<div class="layout row wrap">
+			<text-field
+				label="Title"
+				style="flex-basis: 300px;"
+				:value="model.title"
+				@change="(value, ack) => $emit('change', {path: ['title'], value, ack})"
+				:error-messages="errors.title"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="In-World date"
+				:value="model.worldDate"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['worldDate'], value, ack})"
+				hint="The date in-game that the experience occured"
+				:error-messages="errors.worldDate"
+				:debounce-time="debounceTime"
+			/>
+			<date-picker
+				label="Real date"
+				:value="model.date"
+				style="flex-basis: 300px;"
+				@change="(value, ack) => $emit('change', {path: ['date'], value, ack})"
+				hint="Real life date"
+				:error-messages="errors.date"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+		<text-area
+			label="Description"
+			:value="model.description"
+			:error-messages="errors.description"
+			@change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+			:debounce-time="debounceTime"
+		/>
+  </div>
+</template>
+
+<script>
+	import FormSection from '/imports/ui/forms/components/FormSection.vue';
+
+	export default {
+		components: {
+			FormSection,
+		},
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/forms/FolderForm.vue b/app/imports/ui/forms/FolderForm.vue
new file mode 100644
index 00000000..4a461917
--- /dev/null
+++ b/app/imports/ui/forms/FolderForm.vue
@@ -0,0 +1,33 @@
+<template lang="html">
+  <div class="folder-form">
+		<div class="layout row wrap">
+			<text-field
+				label="Name"
+				style="flex-basis: 300px;"
+				:value="model.name"
+				@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+				:error-messages="errors.name"
+				:debounce-time="debounceTime"
+			/>
+		</div>
+  </div>
+</template>
+
+<script>
+	export default {
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/forms/NoteForm.vue b/app/imports/ui/forms/NoteForm.vue
new file mode 100644
index 00000000..6d939c3d
--- /dev/null
+++ b/app/imports/ui/forms/NoteForm.vue
@@ -0,0 +1,37 @@
+<template lang="html">
+  <div class="feature-form">
+  	<text-field
+			label="Name"
+			:value="model.name"
+			@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+			:error-messages="errors.name"
+			:debounce-time="debounceTime"
+		/>
+		<text-area
+			label="Description"
+			:value="model.description"
+			:error-messages="errors.description"
+			@change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
+			:debounce-time="debounceTime"
+		/>
+  </div>
+</template>
+
+<script>
+	export default {
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/forms/ProficiencyForm.vue b/app/imports/ui/forms/ProficiencyForm.vue
new file mode 100644
index 00000000..d04dc3fd
--- /dev/null
+++ b/app/imports/ui/forms/ProficiencyForm.vue
@@ -0,0 +1,115 @@
+<template lang="html">
+	<div class="layout row wrap justify-start proficiency-form">
+		<text-field
+			label="Skill"
+			class="mr-2"
+			append-icon="arrow_drop_down"
+			item-text="name"
+			item-value="skill"
+			:menu-props="{transition: 'slide-y-transition', lazy: true}"
+			:value="model.skill"
+			:items="undefined"
+			@change="(value, ack) => $emit('change', {path: ['skill'], value, ack})"
+		/>
+		<smart-select
+			label="Proficiency"
+			append-icon="arrow_drop_down"
+			class="mr-2 ml-3"
+			:menu-props="{transition: 'slide-y-transition', lazy: true}"
+			:items="values"
+			:value="model.value"
+			@change="(value, ack) => $emit('change', {path: ['value'], value, ack})"
+		>
+			<v-icon
+				class="icon"
+				slot="prepend"
+				:class="iconClass"
+			>{{displayedIcon}}</v-icon>
+		</smart-select>
+	</div>
+</template>
+
+<script>
+	const ICON_SPIN_DURATION = 300;
+	export default {
+		props: {
+			model: {
+				type: Object,
+				default: () => ({}),
+			},
+			stats: {
+				type: Array,
+			},
+		},
+		data(){ return {
+			displayedIcon: 'radio_button_unchecked',
+			iconClass: '',
+			values: [
+				{value: 1, text: 'Proficient'},
+				{value: 0.5, text: 'Half proficiency bonus'},
+				{value: 2, text: 'Double proficiency bonuys'},
+			],
+		}},
+		methods: {
+			proficiencyIcon(value){
+				if (value == 0.5){
+					return 'brightness_2';
+				} else if (value == 1) {
+					return 'brightness_1'
+				} else if (value == 2){
+					return 'album'
+				} else {
+					return 'radio_button_unchecked';
+				}
+			},
+		},
+		watch: {
+			'model.value': {
+				immediate: true,
+				handler(newValue, oldValue, e){
+					let newIcon = this.proficiencyIcon(newValue);
+					if (!oldValue){
+						// Skip animation
+						this.displayedIcon = newIcon;
+					} else {
+						this.iconClass="leaving";
+						setTimeout(() => {
+							this.displayedIcon = newIcon;
+							this.iconClass="arriving";
+							requestAnimationFrame(() => {
+								this.iconClass="";
+							});
+						}, ICON_SPIN_DURATION / 2);
+					}
+				},
+			},
+		}
+	};
+</script>
+
+<style lang="css" scoped>
+	.theme--light .icon {
+		color: black;
+	}
+	.icon {
+		min-width: 30px;
+		transition: transform 0.15s linear, opacity 0.15s ease;
+		transform-origin: 18px center;
+		margin-left: -12px;
+	}
+	.icon.leaving {
+		transform: translateY(-24px);
+		opacity: 0;
+	}
+	.icon.arriving {
+		transform: translateY(24px);
+		opacity: 0;
+		transition: none;
+	}
+	.hidden {
+		visibility: hidden;
+	}
+	.proficiency-form > div {
+		flex-basis: 220px;
+	}
+</style>
diff --git a/app/imports/ui/forms/components/propertyFormIndex.js b/app/imports/ui/forms/components/propertyFormIndex.js
index 102049ee..57a1ab3b 100644
--- a/app/imports/ui/forms/components/propertyFormIndex.js
+++ b/app/imports/ui/forms/components/propertyFormIndex.js
@@ -1,13 +1,25 @@
 import ActionForm from '/imports/ui/forms/ActionForm.vue';
 import AttributeForm from '/imports/ui/forms/AttributeForm.vue';
 import BuffForm from '/imports/ui/forms/BuffForm.vue';
+import ClassLevelForm from '/imports/ui/forms/ClassLevelForm.vue';
+import DamageMultiplierForm from '/imports/ui/forms/DamageMultiplierForm.vue';
 import EffectForm from '/imports/ui/forms/EffectForm.vue';
+import ExperienceForm from '/imports/ui/forms/ExperienceForm.vue';
 import FeatureForm from '/imports/ui/forms/FeatureForm.vue';
+import FolderForm from '/imports/ui/forms/FolderForm.vue';
+import NoteForm from '/imports/ui/forms/NoteForm.vue';
+import ProficiencyForm from '/imports/ui/forms/ProficiencyForm.vue';
 
 export default {
   action: ActionForm,
   attribute: AttributeForm,
   buff: BuffForm,
+  classLevel: ClassLevelForm,
+  damageMultiplier: DamageMultiplierForm,
+  experience:ExperienceForm,
   effect: EffectForm,
   feature: FeatureForm,
+  folder: FolderForm,
+  note: NoteForm,
+  proficiency: ProficiencyForm,
 };
diff --git a/app/package-lock.json b/app/package-lock.json
index 6d417661..5fd34733 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -185,6 +185,11 @@
       "resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
       "integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg=="
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -1225,6 +1230,37 @@
           "requires": {
             "inherits": "~2.0.1",
             "readable-stream": "^2.0.2"
+          },
+          "dependencies": {
+            "readable-stream": {
+              "version": "2.3.6",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+              "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+              "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+              },
+              "dependencies": {
+                "inherits": {
+                  "version": "2.0.4",
+                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+                  "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+                }
+              }
+            },
+            "string_decoder": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            }
           }
         },
         "stream-http": {
@@ -1237,6 +1273,37 @@
             "readable-stream": "^2.3.3",
             "to-arraybuffer": "^1.0.0",
             "xtend": "^4.0.0"
+          },
+          "dependencies": {
+            "readable-stream": {
+              "version": "2.3.6",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+              "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+              "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+              },
+              "dependencies": {
+                "inherits": {
+                  "version": "2.0.4",
+                  "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+                  "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+                }
+              }
+            },
+            "string_decoder": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            }
           }
         },
         "string_decoder": {
diff --git a/app/package.json b/app/package.json
index 702389a9..92e7aa0d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,6 +18,7 @@
     "bcrypt": "^3.0.6",
     "core-js": "^2.6.9",
     "css-box-shadow": "^1.0.0-3",
+    "date-fns": "^1.30.1",
     "fibers": "^2.0.2",
     "lodash": "^4.17.15",
     "marked": "^0.6.3",