Merge branch '1208-introduce-a-keyboard-shortcut-to-create-a-new-row-grid-view' into 'develop'

Resolve "Introduce a keyboard shortcut to create a new row grid view"

Closes #1217, #1329, and #1208

See merge request bramw/baserow!1097

changelog.md

@@ -12,6 +12,10 @@ For example:
 ### New Features
 * Add various help icons to explain RBAC in the UI [#1318](https://gitlab.com/bramw/baserow/-/issues/1318)
 
+* Pressing shift + enter in a selected cell of the grid view creates a new row. [#1208](https://gitlab.com/bramw/baserow/-/issues/1208)
+* Pressing enter on a selected cell should select the cell below. [#1329](https://gitlab.com/bramw/baserow/-/issues/1329)
+* Select the primary field in the grid view after creating a new row. [#1217](https://gitlab.com/bramw/baserow/-/issues/1217)
+
 ### Bug Fixes
 * Fixed encoding issue where you couldn't import xml files with non-ascii characters [#1360](https://gitlab.com/bramw/baserow/-/issues/1360)
 

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

@@ -38,6 +38,7 @@
       @cell-mouseover="multiSelectHold"
       @cell-mouseup-left="multiSelectStop"
       @add-row="addRow()"
+      @add-row-after="addRowAfter($event)"
       @update="updateValue"
       @paste="multiplePasteFromCell"
       @edit="editValue"
@@ -93,6 +94,7 @@
       @row-hover="setRowHover($event.row, $event.value)"
       @row-context="showRowContext($event.event, $event.row)"
       @add-row="addRow()"
+      @add-row-after="addRowAfter($event)"
       @update="updateValue"
       @paste="multiplePasteFromCell"
       @edit="editValue"
@@ -152,7 +154,7 @@
             )
           "
         >
-          <a @click=";[addRow(selectedRow), $refs.rowContext.hide()]">
+          <a @click="addRowAboveSelectedRow($event, selectedRow)">
             <i class="context__menu-icon fas fa-fw fa-arrow-up"></i>
             {{ $t('gridView.insertRowAbove') }}
           </a>
@@ -167,7 +169,7 @@
             )
           "
         >
-          <a @click=";[addRowAfter(selectedRow), $refs.rowContext.hide()]">
+          <a @click="addRowBelowSelectedRow($event, selectedRow)">
             <i class="context__menu-icon fas fa-fw fa-arrow-down"></i>
             {{ $t('gridView.insertRowBelow') }}
           </a>
@@ -182,11 +184,7 @@
             )
           "
         >
-          <a
-            @click="
-              ;[addRowAfter(selectedRow, selectedRow), $refs.rowContext.hide()]
-            "
-          >
+          <a @click="duplicateSelectedRow($event, selectedRow)">
             <i class="context__menu-icon fas fa-fw fa-clone"></i>
             {{ $t('gridView.duplicateRow') }}
           </a>
@@ -446,6 +444,21 @@ export default {
     )
   },
   methods: {
+    duplicateSelectedRow(event, selectedRow) {
+      event.preventFieldCellUnselect = true
+      this.addRowAfter(selectedRow, selectedRow)
+      this.$refs.rowContext.hide()
+    },
+    addRowAboveSelectedRow(event, selectedRow) {
+      event.preventFieldCellUnselect = true
+      this.addRow(selectedRow)
+      this.$refs.rowContext.hide()
+    },
+    addRowBelowSelectedRow(event, selectedRow) {
+      event.preventFieldCellUnselect = true
+      this.addRowAfter(selectedRow)
+      this.$refs.rowContext.hide()
+    },
     /**
      * When a field is deleted we need to check if that field was related to any
      * filters or sortings. If that is the case then the view needs to be refreshed so
@@ -601,6 +614,7 @@ export default {
             fields: this.fields,
             values,
             before,
+            selectPrimaryCell: true,
           }
         )
       } catch (error) {
@@ -810,6 +824,7 @@ export default {
           getScrollTop = () =>
             this.$store.getters[this.storePrefix + 'view/grid/getScrollTop']
         }
+
         this.$store.dispatch(
           this.storePrefix + 'view/grid/removeRowSelectedBy',
           {

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

@@ -6,7 +6,7 @@
   <div
     :key="
       'row-field-cell-' +
-      props.row.id.toString() +
+      props.row._.persistentId +
       '-' +
       props.field.id.toString()
     "
@@ -68,6 +68,7 @@
       @selectNext="$options.methods.selectNext(listeners, props, 'next')"
       @selectAbove="$options.methods.selectNext(listeners, props, 'above')"
       @selectBelow="$options.methods.selectNext(listeners, props, 'below')"
+      @add-row-after="$options.methods.addRowAfter(listeners, props)"
       @add-keep-alive="parent.addKeepAlive(props.field.id)"
       @remove-keep-alive="parent.removeKeepAlive(props.field.id)"
     />
@@ -202,6 +203,14 @@ export default {
         })
       }
     },
+    /**
+     * Emits an event that creates a row directly after this row.
+     */
+    addRowAfter(listeners, props) {
+      if (listeners['add-row-after']) {
+        listeners['add-row-after'](props.row)
+      }
+    },
   },
 }
 </script>

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

@@ -84,7 +84,7 @@
       -->
       <GridViewCell
         v-for="field in fieldsToRender"
-        :key="'row-field-' + row.id.toString() + '-' + field.id.toString()"
+        :key="'row-field-' + row._.persistentId + '-' + field.id.toString()"
         :group-id="groupId"
         :field="field"
         :row="row"
@@ -107,6 +107,7 @@
         @cell-mousedown-left="$emit('cell-mousedown-left', { row, field })"
         @cell-mouseover="$emit('cell-mouseover', { row, field })"
         @cell-mouseup-left="$emit('cell-mouseup-left', { row, field })"
+        @add-row-after="$emit('add-row-after', $event)"
       ></GridViewCell>
     </div>
   </RecursiveWrapper>

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

@@ -6,7 +6,7 @@
         :class="{ hover: addHover }"
         @mouseover="setHover(true)"
         @mouseleave="setHover(false)"
-        @click="$emit('add-row')"
+        @click="addRow"
       >
         <i v-if="includeRowDetails" class="fas fa-plus"></i>
       </a>
@@ -57,6 +57,10 @@ export default {
     setHover(value) {
       this.$store.dispatch(this.storePrefix + 'view/grid/setAddRowHover', value)
     },
+    addRow(event) {
+      event.preventFieldCellUnselect = true
+      this.$emit('add-row')
+    },
   },
 }
 </script>

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

@@ -7,7 +7,7 @@
   >
     <GridViewRow
       v-for="(row, index) in rows"
-      :key="`row-${row.id}`"
+      :key="`row-${row._.persistentId}`"
       :view="view"
       :group-id="groupId"
       :row="row"

web-frontend/modules/database/mixins/gridField.js

@@ -129,9 +129,12 @@ export default {
           } else if (key === 'Tab') {
             event.preventDefault()
             this.$emit(shiftKey ? 'selectPrevious' : 'selectNext')
-          } else if (key === 'Enter' && shiftKey) {
+          } else if (key === 'Enter' && shiftKey && !this.readOnly) {
             event.preventDefault()
+            event.preventFieldCellUnselect = true
+            this.$emit('add-row-after')
             this.$emit('selectBelow')
+            return
           }
         }
 

web-frontend/modules/database/mixins/gridFieldInput.js

@@ -80,8 +80,10 @@ export default {
             this.isValid() &&
             this.canSaveByPressingEnter(event)
           ) {
-            // While editing we want to save the changes.
+            // While editing we want to save the changes and select the cell below
+            // to improve the spreadsheet like experience.
             this.save()
+            this.$emit('selectBelow')
           } else if (!this.editing) {
             // If only selected we will start the editing mode.
             this.edit(null, event)

web-frontend/modules/database/store/view/grid.js

@@ -21,6 +21,7 @@ import { prepareRowForRequest } from '@baserow/modules/database/utils/row'
 export function populateRow(row, metadata = {}) {
   row._ = {
     metadata,
+    persistentId: uuid(),
     loading: false,
     hover: false,
     selectedBy: [],
@@ -1307,7 +1308,14 @@ export const actions = {
    */
   async createNewRow(
     { commit, getters, dispatch },
-    { view, table, fields, values = {}, before = null }
+    {
+      view,
+      table,
+      fields,
+      values = {},
+      before = null,
+      selectPrimaryCell = false,
+    }
   ) {
     // Fill values with empty values of field if they are not provided
     fields.forEach((field) => {
@@ -1350,6 +1358,14 @@ export const actions = {
     commit('INSERT_NEW_ROW_IN_BUFFER_AT_INDEX', { row, index })
     dispatch('visibleByScrollTop')
 
+    const primaryField = fields.find((f) => f.primary)
+    if (selectPrimaryCell && primaryField) {
+      await dispatch('setSelectedCell', {
+        rowId: row.id,
+        fieldId: primaryField.id,
+      })
+    }
+
     try {
       const { data } = await RowService(this.$client).create(
         table.id,
@@ -1362,8 +1378,8 @@ export const actions = {
         order: data.order,
         values: data,
       })
-      dispatch('onRowChange', { view, row, fields })
-      dispatch('fetchAllFieldAggregationData', {
+      await dispatch('onRowChange', { view, row, fields })
+      await dispatch('fetchAllFieldAggregationData', {
         view,
       })
     } catch (error) {