diff --git a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationGroupByForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationGroupByForm.vue index b33aee0df..2eacd906c 100644 --- a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationGroupByForm.vue +++ b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationGroupByForm.vue @@ -6,6 +6,7 @@ <Dropdown :value="aggregationGroupBy" :show-search="true" + :error="v$.aggregationGroupBy?.$error || false" fixed-items @change="groupByChangedByUser($event)" > @@ -22,6 +23,15 @@ </template> <script> +import { useVuelidate } from '@vuelidate/core' + +const includesIfSet = (array) => (value) => { + if (value === null || value === undefined) { + return true + } + return array.includes(value) +} + export default { name: 'AggregationGroupByForm', props: { @@ -34,6 +44,9 @@ export default { required: true, }, }, + setup() { + return { v$: useVuelidate() } + }, data() { return { aggregationGroupBy: 'none', @@ -70,6 +83,22 @@ export default { immediate: true, }, }, + mounted() { + this.v$.$touch() + }, + validations() { + const self = this + return { + aggregationGroupBy: { + isValidGroupBy: (value) => { + const validGroupByValues = self.groupByOptions.map( + (item) => item.value + ) + return includesIfSet(validGroupByValues)(value) + }, + }, + } + }, methods: { groupByChangedByUser(value) { this.aggregationGroupBy = value diff --git a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue index 2010e33f7..a75936175 100644 --- a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue +++ b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/AggregationSeriesForm.vue @@ -33,7 +33,6 @@ <Dropdown v-model="values.field_id" :error="fieldHasErrors('field_id')" - :disabled="fieldsAvailableForSelection.length === 0" @change="v$.values.field_id.$touch" > <DropdownItem @@ -188,7 +187,10 @@ export default { const field = this.tableFields.find( (field) => field.id === this.values.field_id ) - if (field && !aggType.fieldIsCompatible(field)) { + if ( + (field && !aggType.fieldIsCompatible(field)) || + this.fieldHasErrors('field_id') + ) { this.values.field_id = null } this.v$.values.aggregation_type.$touch() diff --git a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue index a9a60ce21..5b9600159 100644 --- a/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue +++ b/enterprise/web-frontend/modules/baserow_enterprise/dashboard/components/data_source/GroupedAggregateRowsDataSourceForm.vue @@ -220,7 +220,12 @@ export default { }, allowedSortReferences() { const seriesSortReferences = this.values.aggregation_series - .filter((item) => item.field_id && item.aggregation_type) + .filter( + (item) => + item.field_id && + item.aggregation_type && + this.getTableFieldById(item.field_id) + ) .map((item) => { const field = this.getTableFieldById(item.field_id) return { @@ -232,19 +237,25 @@ export default { )})`, } }) - const groupBySortReferences = this.values.aggregation_group_bys.map( - (item) => { + const groupBySortReferences = this.values.aggregation_group_bys.reduce( + (acc, item) => { const field = item.field_id === null ? this.primaryTableField : this.getTableFieldById(item.field_id) - return { - sort_on: 'GROUP_BY', - reference: `field_${field.id}`, - field, - name: field.name, + + if (field !== undefined) { + acc.push({ + sort_on: 'GROUP_BY', + reference: `field_${field.id}`, + field, + name: field.name, + }) } - } + + return acc + }, + [] ) return seriesSortReferences.concat(groupBySortReferences) },