Added resource forms to actions

app/imports/api/properties/Actions.js

@@ -1,5 +1,5 @@
 import SimpleSchema from 'simpl-schema';
-import ResourceSchema from '/imports/api/properties/subSchemas/ResourceSchema.js'
+import ResourcesSchema from '/imports/api/properties/subSchemas/ResourcesSchema.js'
 import ResultsSchema from '/imports/api/properties/subSchemas/ResultsSchema.js';
 
 /*
@@ -8,9 +8,7 @@ import ResultsSchema from '/imports/api/properties/subSchemas/ResultsSchema.js';
  * Any actions that are children of this action will be considered alternatives
  * to this action
  */
-let ActionSchema = new SimpleSchema({})
-.extend(ResourceSchema)
-.extend({
+let ActionSchema = new SimpleSchema({
 	name: {
 		type: String,
 		optional: true,
@@ -47,6 +45,10 @@ let ActionSchema = new SimpleSchema({})
 		type: ResultsSchema,
 		defaultValue: {},
 	},
+  resources: {
+    type: ResourcesSchema,
+    defaultValue: {},
+  },
 	// Calculation of how many times this action can be used
 	// Only set if this action tracks its own uses, rather than adjusting
 	// resources

app/imports/api/properties/subSchemas/AttributeConsumedSchema.js

@@ -0,0 +1,22 @@
+import SimpleSchema from 'simpl-schema';
+import { Random } from 'meteor/random';
+
+const AttributeConsumedSchema = new SimpleSchema({
+  _id: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+    autoValue(){
+      if (!this.isSet) return Random.id();
+    }
+  },
+  variableName: {
+    type: String,
+    optional: true,
+  },
+  quantity: {
+    type: Number,
+    defaultValue: 1,
+  },
+});
+
+export default AttributeConsumedSchema;

app/imports/api/properties/subSchemas/ItemConsumedSchema.js

@@ -0,0 +1,22 @@
+import SimpleSchema from 'simpl-schema';
+import { Random } from 'meteor/random';
+
+const ItemConsumedSchema = new SimpleSchema({
+  _id: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+    autoValue(){
+      if (!this.isSet) return Random.id();
+    }
+  },
+  tag: {
+    type: String,
+    optional: true,
+  },
+  quantity: {
+    type: Number,
+    defaultValue: 1,
+  },
+});
+
+export default ItemConsumedSchema;

app/imports/api/properties/subSchemas/ResourceSchema.js

@@ -1,34 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-
-const ResourceSchema = new SimpleSchema({
-  itemsConsumed: {
-    type: Array,
-    defaultValue: [],
-  },
-  'itemsConsumed.$': {
-    type: Object,
-  },
-  'itemsConsumed.$.tag': {
-    type: String,
-  },
-  'itemsConsumed.$.quantity': {
-    type: Number,
-    defaultValue: 1,
-  },
-  attributesConsumed: {
-    type: Array,
-    defaultValue: [],
-  },
-  'attributesConsumed.$': {
-    type: Object,
-  },
-  'attributesConsumed.$.variableName': {
-    type: String,
-  },
-  'attributesConsumed.$.quantity': {
-    type: Number,
-    defaultValue: 1,
-  },
-});
-
-export default ResourceSchema;

app/imports/api/properties/subSchemas/ResourcesSchema.js

@@ -0,0 +1,22 @@
+import SimpleSchema from 'simpl-schema';
+import ItemConsumedSchema from '/imports/api/properties/subSchemas/ItemConsumedSchema.js';
+import AttributeConsumedSchema from '/imports/api/properties/subSchemas/AttributeConsumedSchema.js';
+
+const ResourcesSchema = new SimpleSchema({
+  itemsConsumed: {
+    type: Array,
+    defaultValue: [],
+  },
+  'itemsConsumed.$': {
+    type: ItemConsumedSchema,
+  },
+  attributesConsumed: {
+    type: Array,
+    defaultValue: [],
+  },
+  'attributesConsumed.$': {
+    type: AttributeConsumedSchema,
+  },
+});
+
+export default ResourcesSchema;

app/imports/ui/properties/forms/ActionForm.vue

@@ -42,6 +42,14 @@
           @pull="({path, ack}) => $emit('pull', {path: ['results', ...path], ack})"
         />
       </form-section>
+      <form-section name="Resources">
+        <resources-form
+          :model="model.resources"
+          @change="({path, value, ack}) => $emit('change', {path: ['resources', ...path], value, ack})"
+          @push="({path, value, ack}) => $emit('push', {path: ['resources', ...path], value, ack})"
+          @pull="({path, ack}) => $emit('pull', {path: ['resources', ...path], ack})"
+        />
+      </form-section>
       <form-section name="Advanced">
         <text-field
           v-if="attackForm"
@@ -111,12 +119,14 @@
 <script>
   import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
   import ResultsForm from '/imports/ui/properties/forms/ResultsForm.vue';
+  import ResourcesForm from '/imports/ui/properties/forms/ResourcesForm.vue';
 
   export default {
     components: {
       FormSection,
       FormSections,
       ResultsForm,
+      ResourcesForm,
     },
     props: {
       stored: {

app/imports/ui/properties/forms/AttributeConsumedForm.vue

@@ -0,0 +1,41 @@
+<template lang="html">
+  <div class="layout row">
+    <text-field
+      label="Attribute"
+      hint="The attribute variable name that will be consumed"
+      style="flex-basis: 300px;"
+      :value="model.variableName"
+      :error-messages="errors.variableName"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
+    />
+    <text-field
+      label="Quantity"
+      hint="How much of the attribute will be consumed"
+      style="flex-basis: 300px;"
+      :value="model.quantity"
+      :error-messages="errors.quantity"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['quantity'], value, ack})"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		model: {
+			type: Object,
+			default: () => ({}),
+		},
+		errors: {
+			type: Object,
+			default: () => ({}),
+		},
+    debounceTime: {
+      type: Number,
+      default: undefined,
+    },
+	},
+}
+</script>

app/imports/ui/properties/forms/AttributesConsumedListForm.vue

@@ -0,0 +1,51 @@
+<template lang="html">
+  <div class="mt-4">
+    <v-slide-x-transition group>
+      <div
+        v-for="(attribute, i) in model"
+        :key="attribute._id || i"
+      >
+        <div class="layout row align-center">
+          <div style="flex-grow: 1;">
+            <attribute-consumed-form
+              :model="attribute"
+              @change="({path, value, ack}) => $emit('change', {path: [i, ...path], value, ack})"
+            />
+          </div>
+          <v-btn
+            outline
+            icon
+            large
+            class="ma-3"
+            @click="$emit('pull', {path: [i]})"
+          >
+            <v-icon>delete</v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script>
+	import AttributeConsumedForm from '/imports/ui/properties/forms/AttributeConsumedForm.vue';
+
+	export default {
+		components: {
+			AttributeConsumedForm,
+		},
+		props: {
+			model: {
+				type: Array,
+				default: () => ([]),
+			},
+      debounceTime: {
+        type: Number,
+        default: undefined,
+      },
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/properties/forms/ItemConsumedForm.vue

@@ -0,0 +1,41 @@
+<template lang="html">
+  <div class="layout row">
+    <text-field
+      label="Item"
+      hint="The item tag that will be consumed"
+      style="flex-basis: 300px;"
+      :value="model.tag"
+      :error-messages="errors.tag"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['tag'], value, ack})"
+    />
+    <text-field
+      label="Quantity"
+      hint="How much of the item will be consumed"
+      style="flex-basis: 300px;"
+      :value="model.quantity"
+      :error-messages="errors.quantity"
+      :debounce-time="debounceTime"
+      @change="(value, ack) => $emit('change', {path: ['quantity'], value, ack})"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		model: {
+			type: Object,
+			default: () => ({}),
+		},
+		errors: {
+			type: Object,
+			default: () => ({}),
+		},
+    debounceTime: {
+      type: Number,
+      default: undefined,
+    },
+	},
+}
+</script>

app/imports/ui/properties/forms/ItemsConsumedListForm.vue

@@ -0,0 +1,48 @@
+<template lang="html">
+  <div class="mt-4">
+    <v-slide-x-transition group>
+      <div
+        v-for="(item, i) in model"
+        :key="item._id || i"
+      >
+        <div class="layout row align-center">
+          <div style="flex-grow: 1;">
+            <item-consumed-form
+              :model="item"
+              @change="({path, value, ack}) => $emit('change', {path: [i, ...path], value, ack})"
+            />
+          </div>
+          <v-btn
+            outline
+            icon
+            large
+            class="ma-3"
+            @click="$emit('pull', {path: [i]})"
+          >
+            <v-icon>delete</v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script>
+	import ItemConsumedForm from '/imports/ui/properties/forms/ItemConsumedForm.vue';
+
+	export default {
+		components: {
+			ItemConsumedForm,
+		},
+		props: {
+			model: {
+				type: Array,
+				default: () => ([]),
+			},
+      debounceTime: {
+        type: Number,
+        default: undefined,
+      },
+		},
+	}
+</script>

app/imports/ui/properties/forms/ResourcesForm.vue

@@ -0,0 +1,110 @@
+<template lang="html">
+  <div class="resources-form">
+    <div
+      v-if="model.attributesConsumed.length"
+      class="subheading"
+    >
+      Attributes
+    </div>
+    <attributes-consumed-list-form
+      :model="model.attributesConsumed"
+      @change="({path, value, ack}) => $emit('change', {path: ['attributesConsumed', ...path], value, ack})"
+      @push="({path, value, ack}) => $emit('push', {path: ['attributesConsumed', ...path], value, ack})"
+      @pull="({path, ack}) => $emit('pull', {path: ['attributesConsumed', ...path], ack})"
+    />
+    <items-consumed-list-form
+      :model="model.itemsConsumed"
+      @change="({path, value, ack}) => $emit('change', {path: ['itemsConsumed', ...path], value, ack})"
+      @push="({path, value, ack}) => $emit('push', {path: ['itemsConsumed', ...path], value, ack})"
+      @pull="({path, ack}) => $emit('pull', {path: ['itemsConsumed', ...path], ack})"
+    />
+    <div class="layout row justify-center">
+      <v-menu
+        origin="center center"
+        transition="scale-transition"
+        nudge-top="50%"
+        nudge-left="50%"
+      >
+        <template #activator="{ on }">
+          <v-btn
+            :loading="addResourceLoading"
+            :disabled="addResourceLoading"
+            icon
+            large
+            outline
+            v-on="on"
+          >
+            <v-icon>add</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-tile @click="addAttributesConsumed">
+            <v-list-tile-title>Add Resource</v-list-tile-title>
+          </v-list-tile>
+          <v-list-tile @click="addItemsConsumed">
+            <v-list-tile-title>Add Ammo</v-list-tile-title>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
+    </div>
+  </div>
+</template>
+
+<script>
+  import AttributesConsumedListForm from '/imports/ui/properties/forms/AttributesConsumedListForm.vue';
+  import ItemsConsumedListForm from '/imports/ui/properties/forms/ItemsConsumedListForm.vue';
+  import ResourcesSchema from '/imports/api/properties/subSchemas/ResourcesSchema.js';
+  import ItemConsumedSchema from '/imports/api/properties/subSchemas/ItemConsumedSchema.js';
+  import AttributeConsumedSchema from '/imports/api/properties/subSchemas/AttributeConsumedSchema.js';
+
+  export default {
+    components: {
+      AttributesConsumedListForm,
+      ItemsConsumedListForm,
+    },
+    props: {
+      model: {
+        type: Object,
+        default: () => (ResourcesSchema.clean({})),
+      },
+      parentTarget: {
+        type: String,
+        default: undefined,
+      },
+      buffsStored: {
+        type: Boolean,
+      },
+      debounceTime: {
+        type: Number,
+        default: undefined,
+      },
+    },
+    data(){return {
+			addResourceLoading: false,
+		}},
+    methods: {
+			acknowledgeAddResult(){
+				this.addResourceLoading = false;
+			},
+      addAttributesConsumed(){
+				this.addResourceLoading = true;
+				this.$emit('push', {
+					path: ['attributesConsumed'],
+          value: AttributeConsumedSchema.clean({}),
+					ack: this.acknowledgeAddResult,
+				});
+			},
+			addItemsConsumed(){
+				this.addResourceLoading = true;
+				this.$emit('push', {
+					path: ['itemsConsumed'],
+          value: ItemConsumedSchema.clean({}),
+					ack: this.acknowledgeAddResult,
+				});
+			},
+		},
+  }
+</script>
+
+<style lang="css" scoped>
+</style>