Added conditions to action resources

app/imports/client/ui/properties/forms/ActionConditionForm.vue

@@ -0,0 +1,36 @@
+<template lang="html">
+  <v-row dense>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <computed-field
+        label="Condition"
+        hint="This must be true for the action to be taken"
+        :model="model.condition"
+        :error-messages="errors.condition"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['condition', ...path], value, ack})"
+      />
+    </v-col>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <text-field
+        label="Condition error text"
+        :value="model.conditionNote"
+        :error-messages="errors.conditionNote"
+        @change="(value, ack) => $emit('change', {path: ['conditionNote'], value, ack})"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="js">
+import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  mixins: [propertyFormMixin],
+}
+</script>

app/imports/client/ui/properties/forms/ActionConditionsListForm.vue

@@ -0,0 +1,41 @@
+<template lang="html">
+  <div class="mt-4">
+    <v-slide-x-transition group>
+      <div
+        v-for="(condition, i) in model"
+        :key="condition._id || i"
+      >
+        <div class="layout align-center">
+          <div style="flex-grow: 1;">
+            <action-condition-form
+              :model="condition"
+              @change="({path, value, ack}) => change([i, ...path], value, ack)"
+            />
+          </div>
+          <v-btn
+            outlined
+            icon
+            large
+            class="ma-3"
+            style="margin-bottom: 30px !important;"
+            @click="$emit('pull', {path: [i]})"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </div>
+      </div>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script lang="js">
+import ActionConditionForm from '/imports/client/ui/properties/forms/ActionConditionForm.vue';
+import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  components: {
+    ActionConditionForm,
+  },
+  mixins: [propertyFormMixin],
+}
+</script>

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

@@ -1,5 +1,17 @@
 <template lang="html">
   <div class="resources-form">
+    <div
+      v-if="model.conditions && model.conditions.length"
+      class="subheading"
+    >
+      Conditions
+    </div>
+    <action-conditions-list-form
+      :model="model.conditions"
+      @change="({path, value, ack}) => $emit('change', {path: ['conditions', ...path], value, ack})"
+      @push="({path, value, ack}) => $emit('push', {path: ['conditions', ...path], value, ack})"
+      @pull="({path, ack}) => $emit('pull', {path: ['conditions', ...path], ack})"
+    />
     <div
       v-if="model.attributesConsumed && model.attributesConsumed.length"
       class="subheading"
@@ -43,6 +55,9 @@
         </v-btn>
       </template>
       <v-list>
+        <v-list-item @click="addCondition">
+          <v-list-item-title>Add Condition</v-list-item-title>
+        </v-list-item>
         <v-list-item @click="addAttributesConsumed">
           <v-list-item-title>Add Resource</v-list-item-title>
         </v-list-item>
@@ -56,11 +71,13 @@
 
 <script lang="js">
 import AttributesConsumedListForm from '/imports/client/ui/properties/forms/AttributesConsumedListForm.vue';
+import ActionConditionsListForm from '/imports/client/ui/properties/forms/ActionConditionsListForm.vue';
 import ItemsConsumedListForm from '/imports/client/ui/properties/forms/ItemsConsumedListForm.vue';
 import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
   components: {
+    ActionConditionsListForm,
     AttributesConsumedListForm,
     ItemsConsumedListForm,
   },
@@ -102,6 +119,14 @@ export default {
         ack: this.acknowledgeAddResult,
       });
     },
+    addCondition() {
+      this.addResourceLoading = true;
+      this.$emit('push', {
+        path: ['conditions'],
+        value: { _id: Random.id() },
+        ack: this.acknowledgeAddResult,
+      });
+    },
   },
 }
 </script>