Pre-fill name field after the linked table name and always suggest an available field name

changelog/entries/unreleased/feature/1619_fill_name_field_after_the_linked_table_name.json

@@ -0,0 +1,7 @@
+{
+    "type": "feature",
+    "message": "Pre-fill name field after the linked table name",
+    "issue_number": 1619,
+    "bullet_points": [],
+    "created_at": "2023-03-14"
+}

web-frontend/modules/database/components/field/FieldForm.vue

@@ -10,6 +10,7 @@
           class="input"
           :placeholder="$t('fieldForm.name')"
           @blur="$v.values.name.$touch()"
+          @input="isPrefilledWithSuggestedFieldName = false"
         />
         <div
           v-if="$v.values.name.$dirty && !$v.values.name.required"
@@ -74,6 +75,7 @@
         :name="values.name"
         :default-values="defaultValues"
         @validate="$v.$touch"
+        @suggested-field-name="handleSuggestedFieldName($event)"
       />
     </template>
     <slot></slot>
@@ -82,7 +84,7 @@
 
 <script>
 import { required, maxLength } from 'vuelidate/lib/validators'
-
+import { getNextAvailableNameInSequence } from '@baserow/modules/core/utils/string'
 import form from '@baserow/modules/core/mixins/form'
 import { mapGetters } from 'vuex'
 import {
@@ -117,6 +119,8 @@ export default {
         name: '',
         type: this.forcedType || '',
       },
+      isPrefilledWithSuggestedFieldName: false,
+      oldValueType: null,
     }
   },
   computed: {
@@ -132,14 +136,34 @@ export default {
     ...mapGetters({
       fields: 'field/getAll',
     }),
+    isNameFieldEmptyOrPrefilled() {
+      return (
+        this.values.name === '' ||
+        this.values.name ===
+          this.getNextAvailableFieldName(
+            this.fieldTypes[this.oldValueType]?.getName()
+          ) ||
+        this.values.name ===
+          this.getNextAvailableFieldName(
+            this.fieldTypes[this.values.type]?.getName()
+          ) ||
+        this.isPrefilledWithSuggestedFieldName
+      )
+    },
   },
   watch: {
+    // if the name field is empty or prefilled by a default value
+    // we want to update the name field with the name of the field type
+    // when the field type is changed.
     'values.type'(newValueType, oldValueType) {
-      if (
+      this.oldValueType = oldValueType
-        this.values.name === '' ||
+      if (this.isNameFieldEmptyOrPrefilled) {
-        this.values.name === this.fieldTypes[oldValueType]?.getName()
+        const availableFieldName = this.getNextAvailableFieldName(
-      )
+          this.fieldTypes[newValueType]?.getName()
-        this.values.name = this.fieldTypes[newValueType]?.getName()
+        )
+        this.values.name = availableFieldName
+      }
+      this.isPrefilledWithSuggestedFieldName = false
     },
   },
   validations() {
@@ -172,6 +196,17 @@ export default {
     showFieldTypesDropdown(target) {
       this.$refs.fieldTypesDropdown.show(target)
     },
+    handleSuggestedFieldName(event) {
+      if (this.isNameFieldEmptyOrPrefilled) {
+        this.isPrefilledWithSuggestedFieldName = true
+        const availableFieldName = this.getNextAvailableFieldName(event)
+        this.values.name = availableFieldName
+      }
+    },
+    getNextAvailableFieldName(baseName) {
+      const excludeNames = this.fields.map((f) => f.name)
+      return getNextAvailableNameInSequence(baseName, excludeNames)
+    },
   },
 }
 </script>

web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue

@@ -55,6 +55,7 @@ export default {
       initialLinkRowTableId: null,
     }
   },
+
   computed: {
     tables() {
       const applications = this.$store.getters['application/getAll']
@@ -107,6 +108,14 @@ export default {
       )
     },
   },
+  watch: {
+    'values.link_row_table_id'(newValueType) {
+      const table = this.tablesWhereFieldsCanBeCreated.find(
+        (table) => table.id === newValueType
+      )
+      this.$emit('suggested-field-name', table.name)
+    },
+  },
   mounted() {
     this.initialLinkRowTable = this.values.link_row_table_id
     this.values.has_related_field =