Fixed reactivity when a new field is created

changelog.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Fixed Airtable import bug where the import would fail if a row is empty.
+* Fixed the reactivity of the row values of newly created fields in some cases.
 
 ## Released (2022-03-03 1.9.1)
 

premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStack.vue

@@ -492,6 +492,12 @@ export default {
         if (index >= 0) {
           // If the row already exists in the buffer, then only update the position.
           this.buffer[index].position = position
+
+          // If the row object has changed, it needs to be updated in the buffer in
+          // order to maintain reactivity.
+          if (this.buffer[index].row !== row) {
+            this.buffer[index].row = row
+          }
         } else {
           // If the row does not yet exists in the buffer, then we can find the first
           // empty slot and place it there.

premium/web-frontend/modules/baserow_premium/store/view/kanban.js

@@ -134,6 +134,22 @@ export const mutations = {
       state.stacks[currentStackId].results.splice(currentIndex, 1)[0]
     )
   },
+  ADD_FIELD_TO_ALL_ROWS(state, { field, value }) {
+    const name = `field_${field.id}`
+    Object.keys(state.stacks).forEach((stack) => {
+      // We have to replace all the rows by using the map function to make it
+      // reactive and update immediately. If we don't do this, the value in the
+      // field components of the grid and modal don't always have the correct value
+      // binding.
+      state.stacks[stack].results = state.stacks[stack].results.map((row) => {
+        if (row !== null && !Object.prototype.hasOwnProperty.call(row, name)) {
+          row[`field_${field.id}`] = value
+          return { ...row }
+        }
+        return row
+      })
+    })
+  },
 }
 
 export const actions = {
@@ -933,6 +949,13 @@ export const actions = {
 
     return deferredFieldUpdate ? doFieldUpdate : doFieldUpdate()
   },
+  /**
+   * Adds a field with a provided value to the rows in the store. This will for
+   * example be called when a new field has been created.
+   */
+  addField({ commit }, { field, value = null }) {
+    commit('ADD_FIELD_TO_ALL_ROWS', { field, value })
+  },
 }
 
 export const getters = {

premium/web-frontend/modules/baserow_premium/viewTypes.js

@@ -166,6 +166,12 @@ export class KanbanViewType extends PremiumViewType {
     fieldType,
     storePrefix = ''
   ) {
+    const value = fieldType.getEmptyValue(field)
+    await dispatch(
+      storePrefix + 'view/kanban/addField',
+      { field, value },
+      { root: true }
+    )
     await dispatch(
       storePrefix + 'view/kanban/setFieldOptionsOfField',
       {

web-frontend/modules/database/components/row/RowEditModal.vue

@@ -117,6 +117,10 @@ export default {
         this.$store.dispatch('rowModal/doesNotExist')
       } else if (row !== undefined && !this.rowExists) {
         this.$store.dispatch('rowModal/doesExist', { row })
+      } else if (row !== undefined) {
+        // If the row already exists and it has changed, we need to replace it,
+        // otherwise we might loose reactivity.
+        this.$store.dispatch('rowModal/replace', { row })
       }
     },
   },

web-frontend/modules/database/store/rowModal.js

@@ -49,6 +49,9 @@ export const actions = {
     commit('SET_EXISTS', true)
     commit('REPLACE_ROW', row)
   },
+  replace({ commit }, { row }) {
+    commit('REPLACE_ROW', row)
+  },
   updated({ commit, getters }, { values }) {
     if (values.id === getters.id && !getters.exists) {
       commit('UPDATE_ROW', values)

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

@@ -203,13 +203,16 @@ export default ({ service, customPopulateRow }) => {
     },
     ADD_FIELD_TO_ALL_ROWS(state, { field, value }) {
       const name = `field_${field.id}`
-      state.rows.forEach((row) => {
+      // We have to replace all the rows by using the map function to make it
+      // reactive and update immediately. If we don't do this, the value in the
+      // field components of the grid and modal don't always have the correct value
+      // binding.
+      state.rows = state.rows.map((row) => {
         if (row !== null && !Object.prototype.hasOwnProperty.call(row, name)) {
-          // We have to use the Vue.set function here to make it reactive immediately.
-          // If we don't do this the value in the field components of the view and modal
-          // don't have the correct value and will act strange.
-          Vue.set(row, name, value)
+          row[`field_${field.id}`] = value
+          return { ...row }
         }
+        return row
       })
     },
     START_ROW_DRAG(state, { index }) {

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

@@ -340,13 +340,15 @@ export const mutations = {
   },
   ADD_FIELD_TO_ROWS_IN_BUFFER(state, { field, value }) {
     const name = `field_${field.id}`
-    state.rows.forEach((row) => {
+    // We have to replace all the rows by using the map function to make it
+    // reactive and update immediately. If we don't do this, the value in the
+    // field components of the grid and modal don't always have the correct value
+    // binding.
+    state.rows = state.rows.map((row) => {
       if (!Object.prototype.hasOwnProperty.call(row, name)) {
-        // We have to use the Vue.set function here to make it reactive immediately.
-        // If we don't do this the value in the field components of the grid and modal
-        // don't have the correct value and will act strange.
-        Vue.set(row, name, value)
+        row[`field_${field.id}`] = value
       }
+      return { ...row }
     })
   },
   DECREASE_ORDERS_IN_BUFFER_LOWER_THAN(state, existingOrder) {
@@ -1132,10 +1134,10 @@ export const actions = {
       return output.join('\n')
     }
   },
-  /* 
-    This function is called if a user attempts to access rows that are 
+  /*
+    This function is called if a user attempts to access rows that are
     no longer in the row buffer and need to be fetched from the backend.
-    A user can select some or all fields in a row, and only those fields 
+    A user can select some or all fields in a row, and only those fields
     will be returned.
   */
   async getMultiSelectedRows({ getters, rootGetters }, fields) {