Conditioned field validation (#418)

* wip: validation condition input

* form custom validation condition

* Default message on form condition validation

* field validation condition test

* fix linting

* update tests,  add pass test

* Polish UI

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/components/CustomFieldValidation.vue

@@ -0,0 +1,87 @@
+<template>
+  <collapse
+    v-model="show"
+    class="p-2 w-full"
+  >
+    <template #title>
+      <h3 class="font-semibold block text-lg">
+        Validation
+      </h3>
+      <p class="text-gray-400 text-xs mb-3">
+        Add some custom validation (save form before testing)
+      </p>
+    </template>
+    <div class="py-2">
+      <p class="font-semibold text-sm text-gray-700">
+        Conditions for this field to be accepted
+      </p>
+      <condition-editor
+        ref="filter-editor"
+        v-model="validation.conditions"
+        class="mt-1 border-t border rounded-md mb-3"
+        :form="form"
+      />
+      <text-input
+        name="error_message"
+        class=""
+        :form="field.validation"
+        label="Error message when validation fails"
+      />
+    </div>
+  </collapse>
+</template>
+
+<script>
+import ConditionEditor from "./form-logic-components/ConditionEditor.client.vue"
+import { default as _has } from "lodash/has"
+export default {
+    name: 'FormValidation',
+    components: {ConditionEditor},
+    props: {
+        field: {
+            type: Object,
+            required: false
+        },
+        form: {
+            type: Object,
+            required: false
+        }
+    },
+    data() {
+        return {
+            show: false,
+            validation: this.field.validation?.error_conditions || {
+                conditions: null,
+                actions: [],
+            },
+            error_message: this.field.validation?.error_message || ''
+        }
+    },
+
+    watch: {
+        logic: {
+            handler() {
+                this.field.validation.error_conditions = this.validation
+            },
+            deep: true,
+        },
+        "field.id": {
+            handler() {
+                // On field change, reset validation
+                this.validation = this.field.validation.error_conditions || {
+                    conditions: null,
+                    actions: [],
+                }
+            },
+        },
+    },
+    mounted() {
+        if (!_has(this.field, "validation")) {
+            this.field.validation = {
+                error_conditions: this.validation,
+                error_message: this.error_message }
+        }
+    },
+    methods:{}
+}
+</script>

client/components/open/forms/fields/components/FieldOptions.vue

@@ -566,6 +566,12 @@
       :form="form"
       :field="field"
     />
+
+    <custom-field-validation 
+      class="py-2 px-4 border-b"
+      :form="form"
+      :field="field"
+    />
   </div>
 </template>
 
@@ -574,12 +580,13 @@ import timezones from '~/data/timezones.json'
 import countryCodes from '~/data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
 import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
+import CustomFieldValidation from '../../components/CustomFieldValidation.vue'
 import { format } from 'date-fns'
 import { default as _has } from 'lodash/has'
 
 export default {
   name: 'FieldOptions',
-  components: { CountryFlag, FormBlockLogicEditor },
+  components: { CountryFlag, FormBlockLogicEditor, CustomFieldValidation },
   props: {
     field: {
       type: Object,