Fix form group error and other regressions

2025-04-03 04:35:31 +00:00 · 2024-07-05 16:02:05 +00:00 · 2024-07-05 16:02:05 +00:00 · 7ec592c196
commit 7ec592c196
parent d61ad81a91
16 changed files with 114 additions and 146 deletions
--- a/web-frontend/modules/builder/components/domain/CustomDomainForm.vue
+++ b/web-frontend/modules/builder/components/domain/CustomDomainForm.vue
@ -4,30 +4,26 @@
      small-label
      required
      :label="$t('customDomainForm.domainNameLabel')"
-      :error="fieldHasErrors('domain_name') || serverErrors.domain_name"
+      :error="
+        fieldHasErrors('domain_name') || Boolean(serverErrors.domain_name)
+      "
    >
      <FormInput
        v-model="values.domain_name"
        size="large"
-        :error="fieldHasErrors('domain_name') || serverErrors.domain_name"
        @input="serverErrors.domain_name = null"
        @blur="$v.values.domain_name.$touch()"
      />

      <template #error>
-        <span
-          v-if="$v.values.domain_name.$dirty && !$v.values.domain_name.required"
-          >{{ $t('error.requiredField') }}</span
-        >
-
-        <span
-          v-if="
-            $v.values.domain_name.$dirty && !$v.values.domain_name.maxLength
-          "
-        >
-          {{ $t('error.maxLength', { max: 255 }) }}
-        </span>
-
+        <template v-if="$v.values.domain_name.$dirty">
+          <span v-if="!$v.values.domain_name.required">
+            {{ $t('error.requiredField') }}
+          </span>
+          <span v-if="!$v.values.domain_name.maxLength">
+            {{ $t('error.maxLength', { max: 255 }) }}
+          </span>
+        </template>
        <div v-if="serverErrors.domain_name">
          <span v-if="serverErrors.domain_name.code === 'invalid'">
            {{ $t('domainForm.invalidDomain') }}
--- a/web-frontend/modules/builder/components/domain/SubDomainForm.vue
+++ b/web-frontend/modules/builder/components/domain/SubDomainForm.vue
@ -4,17 +4,14 @@
      :label="$t('subDomainForm.domainNameLabel')"
      small-label
      required
-      :error="fieldHasErrors('domain_name')"
+      :error-message="errorMessage"
    >
      <FormInput
        v-model="domainPrefix"
-        size="large"
-        :error="fieldHasErrors('domain_name')"
        @input="serverErrors.domain_name = null"
      >
        <template #suffix> .{{ domain }} </template>
      </FormInput>
-      <template #error> {{ errorMessage }} </template>
    </FormGroup>
  </form>
 </template>
@ -48,7 +45,7 @@ export default {
        : this.serverErrors.domain_name &&
          this.serverErrors.domain_name.code === 'unique'
        ? this.$t('domainForm.notUniqueDomain')
-        : false
+        : ''
    },
  },
  watch: {
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
@ -29,6 +29,7 @@
      <FormGroup
        v-else
        horizontal
+        small-label
        :label="$t('tagsFieldForm.fieldColorsLabel')"
      >
        <ColorInput
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
@ -22,22 +22,17 @@
      class="margin-bottom-2"
      small-label
      required
-      :label="$t('columnElementForm.columnAmountTitle')"
-      :error="hasError"
+      :label="$t('columnElementForm.columnGapTitle')"
+      :error-message="errorMessage"
    >
      <FormInput
        v-model="values.column_gap"
        size="large"
        :label="$t('columnElementForm.columnGapTitle')"
        :placeholder="$t('columnElementForm.columnGapPlaceholder')"
-        :error="hasError"
        type="number"
        @blur="$v.values.column_gap.$touch()"
      />
-
-      <template #error>
-        {{ errorMessage }}
-      </template>
    </FormGroup>

    <FormGroup
@ -94,9 +89,6 @@ export default {
        ? this.$t('error.maxValueField', { max: 2000 })
        : ''
    },
-    hasError() {
-      return this.errorMessage !== ''
-    },
  },
  methods: {
    emitChange(newValues) {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
@ -39,6 +39,17 @@
      :label="$t('iframeElementForm.heightLabel')"
      small-label
      required
+      :error-message="
+        $v.values.height.$dirty && !$v.values.height.required
+          ? $t('error.requiredField')
+          : !$v.values.height.integer
+          ? $t('error.integerField')
+          : !$v.values.height.minValue
+          ? $t('error.minValueField', { min: 1 })
+          : !$v.values.height.maxValue
+          ? $t('error.maxValueField', { max: 2000 })
+          : ''
+      "
    >
      <FormInput
        v-model="values.height"
@ -46,17 +57,6 @@
        type="number"
        :placeholder="$t('iframeElementForm.heightPlaceholder')"
        :to-value="(value) => parseInt(value)"
-        :error="
-          $v.values.height.$dirty && !$v.values.height.required
-            ? $t('error.requiredField')
-            : !$v.values.height.integer
-            ? $t('error.integerField')
-            : !$v.values.height.minValue
-            ? $t('error.minValueField', { min: 1 })
-            : !$v.values.height.maxValue
-            ? $t('error.maxValueField', { max: 2000 })
-            : false
-        "
      ></FormInput>
    </FormGroup>
  </form>
--- a/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
@ -63,6 +63,17 @@
      small-label
      required
      class="margin-bottom-2"
+      :error-message="
+        $v.values.rows.$dirty && !$v.values.rows.required
+          ? $t('error.requiredField')
+          : !$v.values.rows.integer
+          ? $t('error.integerField')
+          : !$v.values.rows.minValue
+          ? $t('error.minValueField', { min: 1 })
+          : !$v.values.rows.maxValue
+          ? $t('error.maxValueField', { max: 100 })
+          : ''
+      "
    >
      <FormInput
        v-model="values.rows"
@ -71,17 +82,6 @@
        :label="$t('inputTextElementForm.rowsTitle')"
        :placeholder="$t('inputTextElementForm.rowsPlaceholder')"
        :to-value="(value) => parseInt(value)"
-        :error="
-          $v.values.rows.$dirty && !$v.values.rows.required
-            ? $t('error.requiredField')
-            : !$v.values.rows.integer
-            ? $t('error.integerField')
-            : !$v.values.rows.minValue
-            ? $t('error.minValueField', { min: 1 })
-            : !$v.values.rows.maxValue
-            ? $t('error.maxValueField', { max: 100 })
-            : false
-        "
      ></FormInput>
    </FormGroup>

--- a/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
@ -21,7 +21,7 @@
      small-label
      required
      class="margin-bottom-2"
-      :error="
+      :error-message="
        $v.values.items_per_page.$dirty && !$v.values.items_per_page.required
          ? $t('error.requiredField')
          : !$v.values.items_per_page.integer
@ -30,7 +30,7 @@
          ? $t('error.minValueField', { min: 1 })
          : !$v.values.items_per_page.maxValue
          ? $t('error.maxValueField', { max: maxItemPerPage })
-          : false
+          : ''
      "
    >
      <FormInput
@ -39,17 +39,6 @@
        :placeholder="$t('repeatElementForm.itemsPerPagePlaceholder')"
        :to-value="(value) => parseInt(value)"
        class="margin-bottom-2"
-        :error="
-          $v.values.items_per_page.$dirty && !$v.values.items_per_page.required
-            ? $t('error.requiredField')
-            : !$v.values.items_per_page.integer
-            ? $t('error.integerField')
-            : !$v.values.items_per_page.minValue
-            ? $t('error.minValueField', { min: 1 })
-            : !$v.values.items_per_page.maxValue
-            ? $t('error.maxValueField', { max: maxItemPerPage })
-            : false
-        "
        type="number"
        @blur="$v.values.items_per_page.$touch()"
      ></FormInput>
@ -82,7 +71,7 @@
    </FormGroup>
    <FormGroup
      v-if="values.orientation === 'horizontal'"
-      :error="getItemsPerRowError"
+      :error-message="itemsPerRowError"
      :label="$t('repeatElementForm.itemsPerRowLabel')"
      small-label
      required
@ -97,7 +86,6 @@
          <FormInput
            :ref="`itemsPerRow-${deviceType.getType()}`"
            v-model="values.items_per_row[deviceType.getType()]"
-            :error="$v.values.items_per_row[deviceType.getType()].$error"
            remove-number-input-controls
            type="number"
            @input="handlePerRowInput($event, deviceType.getType())"
@ -151,7 +139,7 @@ export default {
    deviceTypes() {
      return Object.values(this.$registry.getOrderedList('device'))
    },
-    getItemsPerRowError() {
+    itemsPerRowError() {
      for (const device of this.deviceTypes) {
        const validation = this.$v.values.items_per_row[device.getType()]
        if (validation.$dirty) {
--- a/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
@ -23,21 +23,16 @@
      small-label
      :label="$t('tableElementForm.itemsPerPage')"
      required
-      :error="itemsPerPageHasError"
+      :error-message="errorMessageItemsPerPage"
    >
      <FormInput
        v-model="values.items_per_page"
        size="large"
        :placeholder="$t('tableElementForm.itemsPerPagePlaceholder')"
        :to-value="(value) => parseInt(value)"
-        :error="itemsPerPageHasError"
        type="number"
        @blur="$v.values.items_per_page.$touch()"
      />
-
-      <template #error>
-        {{ errorMessageItemsPerPage }}
-      </template>
    </FormGroup>

    <CustomStyle
@ -54,12 +49,7 @@
      class="margin-bottom-2"
    />

-    <FormGroup
-      class="margin-bottom-2"
-      small-label
-      :label="$t('tableElementForm.fields')"
-      required
-    >
+    <FormSection class="margin-bottom-2" :title="$t('tableElementForm.fields')">
      <template v-if="values.data_source_id">
        <ButtonText
          type="primary"
@ -112,26 +102,27 @@
              </div>
            </template>
            <template #default>
-              <FormGroup small-label horizontal required label="Name">
+              <FormGroup
+                small-label
+                horizontal
+                required
+                :label="$t('tableElementForm.name')"
+                :error-message="
+                  !$v.values.fields.$each[index].name.required
+                    ? $t('error.requiredField')
+                    : !$v.values.fields.$each[index].name.maxLength
+                    ? $t('error.maxLength', { max: 255 })
+                    : ''
+                "
+              >
                <FormInput
                  v-model="field.name"
                  class="table-element-form__field-label"
-                  :error="
-                    !$v.values.fields.$each[index].name.required
-                      ? $t('error.requiredField')
-                      : !$v.values.fields.$each[index].name.maxLength
-                      ? $t('error.maxLength', { max: 255 })
-                      : false
-                  "
                >
-                  <template v-if="values.fields.length > 1" #after-input>
-                    <ButtonIcon
-                      icon="iconoir-bin"
-                      @click="removeField(field)"
-                    />
-                    />
-                  </template>
                </FormInput>
+                <template v-if="values.fields.length > 1" #after-input>
+                  <ButtonIcon icon="iconoir-bin" @click="removeField(field)" />
+                </template>
              </FormGroup>

              <FormGroup
@ -176,7 +167,7 @@
        </ButtonText>
      </template>
      <p v-else>{{ $t('tableElementForm.selectSourceFirst') }}</p>
-    </FormGroup>
+    </FormSection>
    <FormGroup :label="$t('tableElementForm.orientation')" small-label required>
      <DeviceSelector
        :device-type-selected="deviceTypeSelected"
@ -274,10 +265,7 @@ export default {
        ? this.$t('error.minValueField', { min: 1 })
        : !this.$v.values.items_per_page.maxValue
        ? this.$t('error.maxValueField', { max: this.maxItemPerPage })
-        : false
-    },
-    itemsPerPageHasError() {
-      return this.errorMessageItemsPerPage !== false
+        : ''
    },
  },
  watch: {
--- a/web-frontend/modules/builder/components/page/settings/PageSettingsNameFormElement.vue
+++ b/web-frontend/modules/builder/components/page/settings/PageSettingsNameFormElement.vue
@ -10,7 +10,6 @@
      ref="input"
      size="large"
      :value="value"
-      :error="hasErrors"
      :disabled="disabled"
      @input="$emit('input', $event)"
      @blur="$emit('blur')"
--- a/web-frontend/modules/builder/components/page/settings/PageSettingsPathFormElement.vue
+++ b/web-frontend/modules/builder/components/page/settings/PageSettingsPathFormElement.vue
@ -9,7 +9,6 @@
    <FormInput
      size="large"
      :value="value"
-      :error="hasErrors"
      :disabled="disabled"
      @input="$emit('input', $event)"
      @blur="$emit('blur')"
--- a/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
+++ b/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
@ -24,22 +24,26 @@
          small-label
          required
          class="margin-bottom-1"
+          :error-message="
+            $v.values.image_max_width.$dirty &&
+            !$v.values.image_max_width.integer
+              ? $t('error.integerField')
+              : !$v.values.image_max_width.minValue
+              ? $t('error.minValueField', { min: 0 })
+              : !$v.values.image_max_width.maxValue
+              ? $t('error.maxValueField', { max: 100 })
+              : !$v.values.image_max_width.required
+              ? $t('error.requiredField')
+              : ''
+          "
        >
          <FormInput
            v-model="values.image_max_width"
            small
            type="number"
+            :min="0"
+            :max="100"
            remove-number-input-controls
-            :error-message="
-              $v.values.image_max_width.$dirty &&
-              !$v.values.image_max_width.integer
-                ? $t('error.integerField')
-                : !$v.values.image_max_width.minValue
-                ? $t('error.minValueField', { min: 0 })
-                : !$v.values.image_max_width.maxValue
-                ? $t('error.maxValueField', { max: 100 })
-                : false
-            "
            :placeholder="$t('imageThemeConfigBlock.maxWidthPlaceholder')"
            :to-value="(value) => (value ? parseInt(value) : null)"
          >
@ -61,22 +65,22 @@
          required
          :label="$t('imageThemeConfigBlock.maxHeightLabel')"
          class="margin-bottom-1"
+          :error-message="
+            $v.values.image_max_height.$dirty &&
+            !$v.values.image_max_height.integer
+              ? $t('error.integerField')
+              : !$v.values.image_max_height.minValue
+              ? $t('error.minValueField', { min: 5 })
+              : !$v.values.image_max_height.maxValue
+              ? $t('error.maxValueField', { max: 3000 })
+              : ''
+          "
        >
          <FormInput
            v-model="imageMaxHeight"
            small
            type="number"
            remove-number-input-controls
-            :error-message="
-              $v.values.image_max_height.$dirty &&
-              !$v.values.image_max_height.integer
-                ? $t('error.integerField')
-                : !$v.values.image_max_height.minValue
-                ? $t('error.minValueField', { min: 5 })
-                : !$v.values.image_max_height.maxValue
-                ? $t('error.maxValueField', { max: 3000 })
-                : false
-            "
            :placeholder="$t('imageThemeConfigBlock.maxHeightPlaceholder')"
            :to-value="(value) => (value ? parseInt(value) : null)"
          >
@ -139,7 +143,7 @@ import ThemeConfigBlockSection from '@baserow/modules/builder/components/theme/T
 import ResetButton from '@baserow/modules/builder/components/theme/ResetButton'
 import HorizontalAlignmentsSelector from '@baserow/modules/builder/components/HorizontalAlignmentsSelector'
 import { IMAGE_SOURCE_TYPES } from '@baserow/modules/builder/enums'
-import { integer, maxValue, minValue } from 'vuelidate/lib/validators'
+import { integer, maxValue, minValue, required } from 'vuelidate/lib/validators'

 export default {
  name: 'ImageThemeConfigBlock',
@ -240,6 +244,7 @@ export default {
  validations: {
    values: {
      image_max_width: {
+        required,
        integer,
        minValue: minValue(0),
        maxValue: maxValue(100),
--- a/web-frontend/modules/builder/components/userSource/CreateUserSourceForm.vue
+++ b/web-frontend/modules/builder/components/userSource/CreateUserSourceForm.vue
@ -2,7 +2,7 @@
  <form @submit.prevent="submit">
    <FormGroup
      :label="$t('createUserSourceForm.userSourceType')"
-      :error="getError('type')"
+      :error-message="getError('type')"
      required
      small-label
      class="margin-bottom-2"
@ -23,7 +23,7 @@
    </FormGroup>
    <FormGroup
      :label="$t('createUserSourceForm.userSourceIntegration')"
-      :error="getError('integration_id')"
+      :error-message="getError('integration_id')"
      required
      small-label
      class="margin-bottom-2"
@ -37,16 +37,12 @@
    </FormGroup>

    <FormGroup
-      :error="getError('name')"
+      :error-message="getError('name')"
      :label="$t('createUserSourceForm.userSourceName')"
      required
      small-label
    >
-      <FormInput
-        v-model="$v.values.name.$model"
-        size="large"
-        :error="getError('name')"
-      />
+      <FormInput v-model="$v.values.name.$model" size="large" />
    </FormGroup>

    <input type="submit" hidden />
@ -107,7 +103,7 @@ export default {
  methods: {
    getError(fieldName) {
      if (!this.$v.values[fieldName].$dirty) {
-        return false
+        return ''
      }
      const fieldState = this.$v.values[fieldName]
      if (!fieldState.required) {
@ -116,7 +112,7 @@ export default {
      if (fieldName === 'name' && !fieldState.maxLength) {
        return this.$t('error.maxLength', { max: 255 })
      }
-      return false
+      return ''
    },
  },
  validations: {
--- a/web-frontend/modules/builder/components/userSource/UpdateUserSourceForm.vue
+++ b/web-frontend/modules/builder/components/userSource/UpdateUserSourceForm.vue
@ -5,19 +5,18 @@
        :label="$t('updateUserSourceForm.nameFieldLabel')"
        required
        small-label
-        :error="getError('name')"
+        :error-message="getError('name')"
      >
        <FormInput
          v-model="$v.values.name.$model"
          size="large"
          class="update-user-source-form__name-input"
          :placeholder="$t('updateUserSourceForm.nameFieldPlaceholder')"
-          :error="getError('name')"
        />
      </FormGroup>
      <FormGroup
        :label="$t('updateUserSourceForm.integrationFieldLabel')"
-        :error="getError('integration_id')"
+        :error-message="getError('integration_id')"
        required
        small-label
      >
@ -183,7 +182,7 @@ export default {
    },
    getError(fieldName) {
      if (!this.$v.values[fieldName].$dirty) {
-        return false
+        return ''
      }
      const fieldState = this.$v.values[fieldName]
      if (!fieldState.required) {
@ -192,7 +191,7 @@ export default {
      if (fieldName === 'name' && !fieldState.maxLength) {
        return this.$t('error.maxLength', { max: 255 })
      }
-      return false
+      return ''
    },
  },
  validations: {
--- a/web-frontend/modules/builder/locales/en.json
+++ b/web-frontend/modules/builder/locales/en.json
@ -479,6 +479,7 @@
    "fieldValuePlaceholder": "Enter value...",
    "itemsPerPage": "Items per page",
    "fieldDefaultName": "Column",
+    "name": "Name",
    "fieldType": "Type",
    "itemsPerPagePlaceholder": "Enter value...",
    "selectSourceFirst": "Choose a list data source to begin configuring your fields.",
--- a/web-frontend/modules/core/assets/scss/components/builder/elements/forms/table_element_form.scss
+++ b/web-frontend/modules/core/assets/scss/components/builder/elements/forms/table_element_form.scss
@ -55,6 +55,10 @@
  .control__elements--small {
    margin-bottom: 0;
  }
+
+  .control--horizontal.control--after-input .control__wrapper {
+    flex-basis: 100%;
+  }
 }

 .table-element-form__field-label .form-input__input-wrapper {
--- a/web-frontend/modules/core/components/integrations/IntegrationEditForm.vue
+++ b/web-frontend/modules/core/components/integrations/IntegrationEditForm.vue
@ -1,18 +1,21 @@
 <template>
  <form ref="form" @submit.prevent="submit">
-    <FormGroup required class="margin-bottom-2">
+    <FormGroup
+      required
+      class="margin-bottom-2"
+      :error-message="
+        $v.values.name.$dirty && !$v.values.name.required
+          ? $t('error.requiredField')
+          : !$v.values.name.maxLength
+          ? $t('error.maxLength', { max: 255 })
+          : ''
+      "
+    >
      <FormInput
        v-model="values.name"
        required
        :label="$t('integrationEditForm.name')"
        :placeholder="$t('integrationEditForm.namePlaceholder')"
-        :error="
-          $v.values.name.$dirty && !$v.values.name.required
-            ? $t('error.requiredField')
-            : !$v.values.name.maxLength
-            ? $t('error.maxLength', { max: 255 })
-            : false
-        "
        @blur="$v.values.name.$touch()"
      />
    </FormGroup>