Improve create and edit field context

changelog/entries/unreleased/feature/1160_improve_create_and_edit_field_context.json

@@ -0,0 +1,12 @@
+{
+    "type": "feature",
+    "message": "Improve create and edit field context",
+    "issue_number": 1160,
+    "bullet_points": [
+        "Set field context menu width to 400px",
+        "Open field type dropdown when field context menu is opened",
+        "Set field name after field type when empty",
+        "Increase field context menu dropdown height"
+    ],
+    "created_at": "2023-03-03"
+}

web-frontend/modules/core/assets/scss/components/all.scss

@@ -14,6 +14,7 @@
 @import 'select';
 @import 'choose_select';
 @import 'dropdown';
+@import 'field_form_context';
 @import 'tooltip';
 @import 'markdown';
 @import 'rating';
@@ -107,7 +108,7 @@
 @import 'row_edit_modal';
 @import 'data_table';
 @import 'auth';
-@import "expand_on_overflow_list";
+@import 'expand_on_overflow_list';
 @import 'list';
 @import 'help_icon';
 @import 'group_invite_form';

web-frontend/modules/core/assets/scss/components/field_form_context.scss

@@ -0,0 +1,9 @@
+.field-form-context {
+  min-width: 400px;
+}
+
+.field-form-context__dropdown {
+  .select__items {
+    max-height: clamp(165px, 500px, calc(100vh - 220px));
+  }
+}

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

@@ -1,5 +1,9 @@
 <template>
-  <Context ref="context">
+  <Context
+    ref="context"
+    class="field-form-context"
+    @shown="$emit('shown', $event)"
+  >
     <FieldForm
       ref="form"
       :table="table"
@@ -92,6 +96,9 @@ export default {
         }
       }
     },
+    showFieldTypesDropdown(target) {
+      this.$refs.form.showFieldTypesDropdown(target)
+    },
   },
 }
 </script>

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

@@ -45,8 +45,10 @@
     <div v-if="forcedType === null" class="control">
       <div class="control__elements">
         <Dropdown
+          ref="fieldTypesDropdown"
           v-model="values.type"
           :class="{ 'dropdown--error': $v.values.type.$error }"
+          class="field-form-context__dropdown"
           @hide="$v.values.type.$touch()"
         >
           <DropdownItem
@@ -131,6 +133,15 @@ export default {
       fields: 'field/getAll',
     }),
   },
+  watch: {
+    'values.type'(newValueType, oldValueType) {
+      if (
+        this.values.name === '' ||
+        this.values.name === this.fieldTypes[oldValueType]?.getName()
+      )
+        this.values.name = this.fieldTypes[newValueType]?.getName()
+    },
+  },
   validations() {
     return {
       values: {
@@ -158,6 +169,9 @@ export default {
     getFormComponent(type) {
       return this.$registry.get('field', type).getFormComponent()
     },
+    showFieldTypesDropdown(target) {
+      this.$refs.fieldTypesDropdown.show(target)
+    },
   },
 }
 </script>

web-frontend/modules/database/components/view/grid/GridViewHead.vue

@@ -50,6 +50,7 @@
         ref="createFieldContext"
         :table="table"
         @field-created="$emit('field-created', $event)"
+        @shown="onShownCreateFieldContext"
       ></CreateFieldContext>
     </div>
   </div>
@@ -150,6 +151,9 @@ export default {
         notifyIf(error, 'view')
       }
     },
+    onShownCreateFieldContext() {
+      this.$refs.createFieldContext.showFieldTypesDropdown(this.$el)
+    },
   },
 }
 </script>