Fix validation problems in dashboard

enterprise/web-frontend/modules/baserow_enterprise/components/admin/forms/SamlSettingsForm.vue

@@ -178,6 +178,9 @@ const alphanumericDotDashUnderscore = helpers.regex(/^[a-zA-Z0-9._-]*$/)
 export default {
   name: 'SamlSettingsForm',
   mixins: [authProviderForm],
+  setup() {
+    return { v$: useVuelidate({ $lazy: true }) }
+  },
   data() {
     return {
       allowedValues: [
@@ -197,9 +200,6 @@ export default {
       },
     }
   },
-  setup() {
-    return { v$: useVuelidate({ $lazy: true }) }
-  },
   computed: {
     allSamlProviders() {
       return this.authProviders.saml || []

enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue

@@ -12,7 +12,7 @@
         <Dropdown
           v-model="values.aggregation_type"
           :error="fieldHasErrors('aggregation_type')"
-          @change="v$.values.aggregation_type.$touch()"
+          @change="v$.values.aggregation_type.$touch"
         >
           <DropdownItem
             v-for="viewAggregation in viewAggregationTypes"
@@ -34,7 +34,7 @@
           v-model="values.field_id"
           :error="fieldHasErrors('field_id')"
           :disabled="compatibleFields.length === 0"
-          @change="v$.values.field_id.$touch()"
+          @change="v$.values.field_id.$touch"
         >
           <DropdownItem
             v-for="field in compatibleFields"
@@ -70,9 +70,6 @@ const includes = (array) => (value) => {
 export default {
   name: 'AggregationSeriesForm',
   mixins: [form],
-  setup() {
-    return { v$: useVuelidate({ $lazy: true }) }
-  },
   props: {
     tableFields: {
       type: Array,
@@ -83,6 +80,9 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate({ $lazy: true }) }
+  },
   data() {
     return {
       allowedValues: ['field_id', 'aggregation_type'],
@@ -117,14 +117,6 @@ export default {
     },
   },
   watch: {
-    defaultValues: {
-      handler() {
-        this.reset(true)
-        this.v$.$touch(true)
-      },
-      immediate: true,
-      deep: true,
-    },
     'values.aggregation_type': {
       handler(aggregationType) {
         if (
@@ -147,16 +139,26 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    this.v$.$validate()
+  },
   validations() {
+    const self = this
     return {
       values: {
         aggregation_type: {
           required,
-          isValidAggregationType: includes(this.aggregationTypeNames),
+          isValidAggregationType: (value) => {
+            const aggregationTypeNames = self.aggregationTypeNames
+            return includes(aggregationTypeNames)(value)
+          },
         },
         field_id: {
           required,
-          isValidFieldId: includes(this.compatibleTableFieldIds),
+          isValidFieldId: (value) => {
+            const compatibleTableFieldIds = self.compatibleTableFieldIds
+            return includes(compatibleTableFieldIds)(value)
+          },
         },
       },
     }

enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue

@@ -17,7 +17,7 @@
           :show-search="true"
           fixed-items
           :error="fieldHasErrors('table_id')"
-          @change="v$.values.table_id.$touch()"
+          @change="v$.values.table_id.$touch"
         >
           <DropdownSection
             v-for="database in databases"
@@ -50,7 +50,7 @@
           :show-search="false"
           fixed-items
           :error="fieldHasErrors('view_id')"
-          @change="v$.values.view_id.$touch()"
+          @change="v$.values.view_id.$touch"
         >
           <DropdownItem
             :name="$t('groupedAggregateRowsDataSourceForm.notSelected')"
@@ -203,15 +203,14 @@ export default {
   },
   watch: {
     dataSource: {
-      handler() {
+      handler(values) {
         // Reset the form to set default values
         // again after a different widget is selected
         this.reset(true)
         // Run form validation so that
         // problems are highlighted immediately
-        this.v$.$touch(true)
+        this.v$.$validate(true)
       },
-      immediate: true,
       deep: true,
     },
     'values.table_id': {
@@ -241,11 +240,26 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    this.v$.$validate(true)
+  },
   validations() {
+    const self = this
     return {
       values: {
-        table_id: { required, isValidTableId: includesIfSet(this.tableIds) },
-        view_id: { isValidViewId: includesIfSet(this.tableViewIds) },
+        table_id: {
+          required,
+          isValidTableId: (value) => {
+            const ids = self.tableIds
+            return includesIfSet(ids)(value)
+          },
+        },
+        view_id: {
+          isValidViewId: (value) => {
+            const ids = self.tableViewIds
+            return includesIfSet(ids)(value)
+          },
+        },
       },
     }
   },

web-frontend/modules/core/mixins/form.js

@@ -23,6 +23,11 @@ export default {
     return {
       // A list of values that the form allows. If null all values are allowed.
       allowedValues: null,
+      // By setting emitValuesOnReset to false in the form's component
+      // the values changed event won't be sent right after resetting the
+      // form
+      emitValuesOnReset: true,
+      isAfterReset: true,
     }
   },
   mounted() {
@@ -202,6 +207,8 @@ export default {
      * first level of children.
      */
     async reset(deep = false) {
+      this.isAfterReset = true
+
       for (const [key, value] of Object.entries(this.getDefaultValues())) {
         this.values[key] = value
       }
@@ -235,7 +242,13 @@ export default {
       return childHandledIt
     },
     emitChange(newValues) {
-      this.$emit('values-changed', newValues)
+      if (this.emitValuesOnReset === true || this.isAfterReset === false) {
+        this.$emit('values-changed', newValues)
+      }
+
+      if (this.isAfterReset) {
+        this.isAfterReset = false
+      }
     },
   },
 }

web-frontend/modules/dashboard/components/data_source/AggregateRowsDataSourceForm.vue

@@ -289,6 +289,9 @@ export default {
       immediate: false,
     },
   },
+  mounted() {
+    this.v$.$validate()
+  },
   validations() {
     const self = this
     return {
@@ -301,10 +304,8 @@ export default {
           },
         },
         view_id: {
-          required,
           isValidViewId: (value) => {
             const ids = self.tableViewIds
-
             return includesIfSet(ids)(value)
           },
         },

web-frontend/modules/dashboard/components/widget/WidgetSettingsBaseForm.vue

@@ -17,7 +17,7 @@
           v-model="values.title"
           :placeholder="$t('widgetSettings.title')"
           :error="fieldHasErrors('title')"
-          @blur="v$.values.title.$touch"
+          @input="v$.values.title.$touch"
         ></FormInput>
         <template #error>
           {{ v$.values.title.$errors[0].$message }}
@@ -37,7 +37,7 @@
           size="small"
           :placeholder="$t('widgetSettings.description') + '...'"
           :error="fieldHasErrors('description')"
-          @blur="v$.values.description.$touch"
+          @input="v$.values.description.$touch"
         ></FormTextarea>
         <template #error>
           {{ v$.values.description.$errors[0].$message }}