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

import Vue from 'vue'
import axios from 'axios'
import { RefreshCancelledError } from '@baserow/modules/core/errors'
import { clone } from '@baserow/modules/core/utils/object'
import { GroupTaskQueue } from '@baserow/modules/core/utils/queue'
import {
  calculateSingleRowSearchMatches,
  extractRowMetadata,
  getFilters,
  getOrderBy,
  getRowSortFunction,
  matchSearchFilters,
} from '@baserow/modules/database/utils/view'
import RowService from '@baserow/modules/database/services/row'
import {
  extractRowReadOnlyValues,
  prepareNewOldAndUpdateRequestValues,
  prepareRowForRequest,
} from '@baserow/modules/database/utils/row'
import { getDefaultSearchModeFromEnv } from '@baserow/modules/database/utils/search'

/**
 * This view store mixin can be used to efficiently keep and maintain the rows of a
 * table/view without fetching all the rows at once. It first fetches an initial set
 * of rows and creates an array in the state containing these rows and adds a `null`
 * object for every un-fetched row.
 *
 * It can correctly handle when new rows are created, updated or deleted without
 * needing every row in the state. Components that make use of this store mixin
 * just have to dispatch an action telling which rows are currently visible and the
 * store handles the rest. Rows that are un-fetched, so when they are `null`, must
 * be shown in a loading state if the user is looking at them.
 *
 * Example of how the state of rows could look:
 *
 * ```
 * rows = [
 *   { id: 1, order: '1.00000000000000000000', field_1: 'Name' },
 *   { id: 2, order: '2.00000000000000000000', field_1: 'Name' },
 *   { id: 3, order: '3.00000000000000000000', field_1: 'Name' },
 *   { id: 4, order: '4.00000000000000000000', field_1: 'Name' },
 *   null,
 *   null,
 *   null,
 *   null,
 *   { id: 9, order: '10.00000000000000000000', field_1: 'Name' },
 *   { id: 10, order: '10.00000000000000000000', field_1: 'Name' },
 *   null,
 *   null
 * ]
 * ```
 */
export default ({ service, customPopulateRow }) => {
  let lastRequestController = null
  const updateRowQueue = new GroupTaskQueue()

  const populateRow = (row, metadata = {}) => {
    if (customPopulateRow) {
      customPopulateRow(row)
    }
    if (row._ == null) {
      row._ = {
        metadata,
      }
    }
    // Matching rows for front-end only search is not yet properly
    // supported and tested in this store mixin. Only server-side search
    // implementation is finished.
    row._.matchSearch = true
    row._.fieldSearchMatches = []
    return row
  }

  /**
   * This helper function calculates the most optimal `limit` `offset` range of rows
   * that must be fetched. Based on the provided visible `startIndex` and `endIndex`
   * we know which rows must be fetched because those values are `null` in the
   * provided `rows` array. If a request must be made, we want to do so in the most
   * efficient manner, so we want to respect the ideal request size by filling up
   * the request with other rows before and after the range that must also be fetched.
   * This function checks if there are other `null` rows close to the range and if
   * so, it tries to include them in the range.
   *
   * @param rows        An array containing the rows that we have fetched already.
   * @param requestSize The ideal request when making a request to the server.
   * @param startIndex  The start index of the visible rows.
   * @param endIndex    The end index of the visible rows.
   */
  const getRangeToFetch = (rows, requestSize, startIndex, endIndex) => {
    const visibleRows = rows.slice(startIndex, endIndex + 1)

    const firstNullIndex = visibleRows.findIndex((row) => row === null)
    const lastNullIndex = visibleRows.lastIndexOf(null)

    // If all of the visible rows have been fetched, so none of them are `null`, we
    // don't have to do anything.
    if (firstNullIndex === -1) {
      return
    }

    // Figure out what the request size is. In almost all cases this is going to
    // be the configured request size, but it could be that more rows must be visible
    // and in that case we want to increase it
    const maxRequestSize = Math.max(startIndex - endIndex, requestSize)

    // The initial offset can be the first `null` found in the range.
    let offset = startIndex + firstNullIndex
    let limit = lastNullIndex - firstNullIndex + 1

    // Because we have an ideal request size and this is often higher than the
    // visible rows, we want to efficiently fetch additional rows that are close
    // to the visible range.
    while (limit < maxRequestSize) {
      const previous = rows[offset - 1]
      const next = rows[offset + limit + 1]

      // If both the previous and next item are not `null`, which means there is
      // no un-fetched row before or after the range anymore, we want to stop the for
      // loop because there is nothing to fetch.
      if (previous !== null && next !== null) {
        break
      }
      if (previous === null) {
        offset -= 1
        limit += 1
      }
      if (next === null) {
        limit += 1
      }
    }

    // The `limit` could exceed the `maxRequestSize` if it's an odd number because it
    // checks if there is an un-fetched row before and after in one loop.
    return { offset, limit: Math.min(limit, maxRequestSize) }
  }

  const state = () => ({
    // If another visible rows action has been dispatched whilst a previous action
    // is still fetching rows, the new action is temporarily delayed and its
    // parameters are stored here.
    delayedRequest: null,
    // Holds the last requested start and end index of the currently visible rows
    visibleRange: {
      startIndex: 0,
      endIndex: 0,
    },
    // The ideal number of rows to fetch when making a request.
    requestSize: 100,
    // The current view id.
    viewId: -1,
    // If true, ad hoc filtering is used instead of persistent one
    adhocFiltering: false,
    // If true, ad hoc sorting is used
    adhocSorting: false,
    // Indicates whether the store is currently fetching another batch of rows.
    fetching: false,
    // A list of all the rows in the table. The ones that haven't been fetched yet
    // are `null`.
    rows: [],
    // The row that's in dragging state and is being moved to another position.
    draggingRow: null,
    // The row that the dragging row was before when the dragging state was started.
    // This is needed to revert the position if anything goes wrong or the escape
    // key was pressed.
    draggingOriginalBefore: null,
    activeSearchTerm: '',
  })

  const mutations = {
    SET_DELAYED_REQUEST(state, delayedRequestParameters) {
      state.delayedRequest = delayedRequestParameters
    },
    SET_VISIBLE(state, { startIndex, endIndex }) {
      state.visibleRange.startIndex = startIndex
      state.visibleRange.endIndex = endIndex
    },
    SET_VIEW_ID(state, viewId) {
      state.viewId = viewId
    },
    SET_ROWS(state, rows) {
      Vue.set(state, 'rows', rows)
    },
    SET_FETCHING(state, value) {
      state.fetching = value
    },
    UPDATE_ROWS(state, { offset, rows }) {
      for (let i = 0; i < rows.length; i++) {
        const rowStoreIndex = i + offset
        const rowInStore = state.rows[rowStoreIndex]
        const row = rows[i]

        if (rowInStore === undefined || rowInStore === null) {
          // If the row doesn't yet exist in the store, we can populate the provided
          // row and set it.
          state.rows.splice(rowStoreIndex, 1, populateRow(row))
        } else {
          // If the row does exist in the store, we can extend it with the provided
          // data of the provided row so the state won't be lost.
          Object.assign(state.rows[rowStoreIndex], row)
        }
      }
    },
    INSERT_ROW_AT_INDEX(state, { index, row }) {
      state.rows.splice(index, 0, row)
    },
    DELETE_ROW_AT_INDEX(state, { index }) {
      state.rows.splice(index, 1)
    },
    MOVE_ROW(state, { oldIndex, newIndex }) {
      state.rows.splice(newIndex, 0, state.rows.splice(oldIndex, 1)[0])
    },
    UPDATE_ROW(state, { row, values }) {
      const index = state.rows.findIndex(
        (item) => item !== null && item.id === row.id
      )
      if (index !== -1) {
        Object.assign(state.rows[index], values)
      } else {
        Object.assign(row, values)
      }
    },
    UPDATE_ROW_AT_INDEX(state, { index, values }) {
      Object.assign(state.rows[index], values)
    },
    UPDATE_ROW_VALUES(state, { row, values }) {
      Object.assign(row, values)
    },
    ADD_FIELD_TO_ALL_ROWS(state, { field, value }) {
      const name = `field_${field.id}`
      // 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)) {
          row[`field_${field.id}`] = value
          return { ...row }
        }
        return row
      })
    },
    START_ROW_DRAG(state, { index }) {
      state.rows[index]._.dragging = true
      state.draggingRow = state.rows[index]
      state.draggingOriginalBefore = state.rows[index + 1] || null
    },
    STOP_ROW_DRAG(state, { index }) {
      state.rows[index]._.dragging = false
      state.draggingRow = null
      state.draggingOriginalBefore = null
    },
    SET_SEARCH(state, { activeSearchTerm }) {
      state.activeSearchTerm = activeSearchTerm
    },
    SET_ROW_SEARCH_MATCHES(state, { row, matchSearch, fieldSearchMatches }) {
      row._.fieldSearchMatches.slice(0).forEach((value) => {
        if (!fieldSearchMatches.has(value)) {
          const index = row._.fieldSearchMatches.indexOf(value)
          row._.fieldSearchMatches.splice(index, 1)
        }
      })
      fieldSearchMatches.forEach((value) => {
        if (!row._.fieldSearchMatches.includes(value)) {
          row._.fieldSearchMatches.push(value)
        }
      })
      row._.matchSearch = matchSearch
    },
    UPDATE_ROW_METADATA(state, { row, rowMetadataType, updateFunction }) {
      const currentValue = row._.metadata[rowMetadataType]
      const newValue = updateFunction(currentValue)

      if (
        !Object.prototype.hasOwnProperty.call(row._.metadata, rowMetadataType)
      ) {
        const metaDataCopy = clone(row._.metadata)
        metaDataCopy[rowMetadataType] = newValue
        Vue.set(row._, 'metadata', metaDataCopy)
      } else {
        Vue.set(row._.metadata, rowMetadataType, newValue)
      }
    },
    SET_ADHOC_FILTERING(state, adhocFiltering) {
      state.adhocFiltering = adhocFiltering
    },
    SET_ADHOC_SORTING(state, adhocSorting) {
      state.adhocSorting = adhocSorting
    },
  }

  const actions = {
    /**
     * Set the view id for the view.
     */
    setViewId({ commit }, { viewId }) {
      commit('SET_VIEW_ID', viewId)
    },
    /**
     * This action fetches the initial set of rows via the provided service. After
     * that it will fill the state with the newly fetched rows and the rest will be
     * un-fetched `null` objects.
     */
    async fetchInitialRows(
      context,
      { viewId, fields, adhocFiltering, adhocSorting, initialRowArguments = {} }
    ) {
      const { commit, getters, rootGetters } = context
      commit('SET_VIEW_ID', viewId)
      commit('SET_SEARCH', {
        activeSearchTerm: '',
      })
      commit('SET_ADHOC_FILTERING', adhocFiltering)
      commit('SET_ADHOC_SORTING', adhocSorting)
      const view = rootGetters['view/get'](viewId)
      const { data } = await service(this.$client).fetchRows({
        viewId,
        offset: 0,
        limit: getters.getRequestSize,
        search: getters.getServerSearchTerm,
        searchMode: getDefaultSearchModeFromEnv(this.$config),
        publicUrl: rootGetters['page/view/public/getIsPublic'],
        publicAuthToken: rootGetters['page/view/public/getAuthToken'],
        orderBy: getOrderBy(view, adhocSorting),
        filters: getFilters(view, adhocFiltering),
        ...initialRowArguments,
      })
      const rows = Array(data.count).fill(null)
      data.results.forEach((row, index) => {
        const metadata = extractRowMetadata(data, row.id)
        rows[index] = populateRow(row, metadata)
      })
      commit('SET_ROWS', rows)
      return data
    },
    /**
     * Should be called when the different rows are displayed to the user. This
     * could for example happen when a user scrolls. It will figure out which rows
     * have not been fetched and will make a request with the backend to replace to
     * missing ones if needed.
     */
    async fetchMissingRowsInNewRange(
      { dispatch, getters, commit, rootGetters },
      parameters
    ) {
      const { startIndex, endIndex } = parameters

      // If the store is already fetching a set of pages, we're temporarily storing
      // the parameters so that this action can be dispatched again with the latest
      // parameters.
      if (getters.getFetching) {
        commit('SET_DELAYED_REQUEST', parameters)
        return
      }

      // Check if the currently visible range isn't to same as the provided one
      // because we don't want to do anything in that case.
      const currentVisible = getters.getVisibleRange
      if (
        currentVisible.startIndex === startIndex &&
        currentVisible.endIndex === endIndex
      ) {
        return
      }

      // Update the last visible range to make sure this action isn't dispatched
      // multiple times.
      commit('SET_VISIBLE', { startIndex, endIndex })

      // Check what the ideal range is to fetch with the backend.
      const rangeToFetch = getRangeToFetch(
        getters.getRows,
        getters.getRequestSize,
        startIndex,
        endIndex
      )

      // If there is no ideal range or if the limit is 0, then there aren't any rows
      // to fetch so we can stop.
      if (rangeToFetch === undefined || rangeToFetch.limit === 0) {
        return
      }

      const view = rootGetters['view/get'](getters.getViewId)

      // We can only make one request at the same time, so we're going to set the
      // fetching state to `true` to prevent multiple requests being fired
      // simultaneously.
      commit('SET_FETCHING', true)
      lastRequestController = new AbortController()
      try {
        const { data } = await service(this.$client).fetchRows({
          viewId: getters.getViewId,
          offset: rangeToFetch.offset,
          limit: rangeToFetch.limit,
          signal: lastRequestController.signal,
          search: getters.getServerSearchTerm,
          searchMode: getDefaultSearchModeFromEnv(this.$config),
          publicUrl: rootGetters['page/view/public/getIsPublic'],
          publicAuthToken: rootGetters['page/view/public/getAuthToken'],
          orderBy: getOrderBy(view, getters.getAdhocSorting),
          filters: getFilters(view, getters.getAdhocFiltering),
        })
        commit('UPDATE_ROWS', {
          offset: rangeToFetch.offset,
          rows: data.results,
        })
      } catch (error) {
        if (axios.isCancel(error)) {
          throw new RefreshCancelledError()
        } else {
          lastRequestController = null
          throw error
        }
      } finally {
        // Check if another `fetchMissingRowsInNewRange` action has been dispatched
        // while we were fetching the rows. If so, we need to dispatch the same
        // action again with the latest parameters.
        commit('SET_FETCHING', false)
        const delayedRequestParameters = getters.getDelayedRequest
        if (delayedRequestParameters !== null) {
          commit('SET_DELAYED_REQUEST', null)
          await dispatch('fetchMissingRowsInNewRange', delayedRequestParameters)
        }
      }
    },
    /**
     * Refreshes the row buffer by clearing all of the rows in the store and
     * re-fetching the currently visible rows. This is typically done when a filter has
     * changed and we can't trust what's in the store anymore.
     */
    async refresh(
      { dispatch, commit, getters, rootGetters },
      { fields, adhocFiltering, adhocSorting, includeFieldOptions = false }
    ) {
      commit('SET_ADHOC_FILTERING', adhocFiltering)
      commit('SET_ADHOC_SORTING', adhocSorting)
      // If another refresh or fetch request is currently running, we need to cancel
      // it because the response is most likely going to be outdated and we don't
      // need it anymore.
      if (lastRequestController !== null) {
        lastRequestController.abort()
      }

      lastRequestController = new AbortController()
      const view = rootGetters['view/get'](getters.getViewId)
      try {
        // We first need to fetch the count of all rows because we need to know how
        // many rows there are in total to estimate what are new visible range it
        // going to be.
        commit('SET_FETCHING', true)
        const {
          data: { count },
        } = await service(this.$client).fetchCount({
          viewId: getters.getViewId,
          signal: lastRequestController.signal,
          search: getters.getServerSearchTerm,
          searchMode: getDefaultSearchModeFromEnv(this.$config),
          publicUrl: rootGetters['page/view/public/getIsPublic'],
          publicAuthToken: rootGetters['page/view/public/getAuthToken'],
          filters: getFilters(view, adhocFiltering),
        })

        // Create a new empty array containing un-fetched rows.
        const rows = Array(count).fill(null)
        let startIndex = 0
        let endIndex = 0

        if (count > 0) {
          // Figure out which range was previous visible and see if that still fits
          // within the new set of rows. Otherwise we're going to fall
          const currentVisible = getters.getVisibleRange
          startIndex = currentVisible.startIndex
          endIndex = currentVisible.endIndex
          const difference = count - endIndex
          if (difference < 0) {
            startIndex += difference
            startIndex = startIndex >= 0 ? startIndex : 0
            endIndex += difference
          }

          // Based on the newly calculated range we can figure out which rows we want
          // to fetch from the backend to populate our store with. These should be the
          // rows that the user is going to look at.
          const rangeToFetch = getRangeToFetch(
            rows,
            getters.getRequestSize,
            startIndex,
            endIndex
          )

          // Only fetch visible rows if there are any.
          const {
            data: { results },
          } = await service(this.$client).fetchRows({
            viewId: getters.getViewId,
            offset: rangeToFetch.offset,
            limit: rangeToFetch.limit,
            includeFieldOptions,
            signal: lastRequestController.signal,
            search: getters.getServerSearchTerm,
            searchMode: getDefaultSearchModeFromEnv(this.$config),
            publicUrl: rootGetters['page/view/public/getIsPublic'],
            publicAuthToken: rootGetters['page/view/public/getAuthToken'],
            orderBy: getOrderBy(view, adhocSorting),
            filters: getFilters(view, adhocFiltering),
          })

          results.forEach((row, index) => {
            rows[rangeToFetch.offset + index] = populateRow(row)
          })
        }

        commit('SET_ROWS', rows)
        commit('SET_VISIBLE', { startIndex, endIndex })
      } catch (error) {
        if (axios.isCancel(error)) {
          throw new RefreshCancelledError()
        } else {
          lastRequestController = null
          throw error
        }
      } finally {
        commit('SET_FETCHING', false)
      }
    },
    /**
     * 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 })
    },
    /**
     * Check if the provided row matches the provided view filters.
     */
    rowMatchesFilters(context, { view, fields, row, overrides = {} }) {
      const values = JSON.parse(JSON.stringify(row))
      Object.assign(values, overrides)

      // The value is always valid if the filters are disabled.
      return view.filters_disabled
        ? true
        : matchSearchFilters(
            this.$registry,
            view.filter_type,
            view.filters,
            view.filter_groups,
            fields,
            values
          )
    },
    /**
     * Returns the index that the provided row was supposed to have if it was in the
     * store. Because some rows haven't been fetched from the backend, we need to
     * figure out which `null` object could have been the row in the store.
     */
    findIndexOfNotExistingRow({ getters }, { view, fields, row }) {
      const sortFunction = getRowSortFunction(
        this.$registry,
        view.sortings,
        fields
      )
      const allRows = getters.getRows
      let index = allRows.findIndex((existingRow) => {
        return existingRow !== null && sortFunction(row, existingRow) < 0
      })
      let isCertain = true

      if (index === -1 && allRows[allRows.length - 1] !== null) {
        // If we don't know where to position the new row and the last row is null, we
        // can safely assume it's the last row because when finding the index we
        // only check if the new row is before an existing row.
        index = allRows.length
      } else if (index === -1) {
        // If we don't know where to position the new row we can assume near the
        // end, but we're not sure where exactly. Because of that we'll add it as
        // null to the end.
        index = allRows.length
        isCertain = false
      } else if (allRows[index - 1] === null) {
        // If the row must inserted at the beginning of a known chunk of fetched
        // rows, we can't know for sure it actually has to be inserted directly before.
        // In that case, we will insert it as null.
        isCertain = false
      }

      return { index, isCertain }
    },
    /**
     * Returns the index of a row that's in the store. This also works if the row
     * hasn't been fetched yet, it will then point to the `null` object representing
     * the row.
     */
    findIndexOfExistingRow({ dispatch, getters }, { view, fields, row }) {
      const sortFunction = getRowSortFunction(
        this.$registry,
        view.sortings,
        fields
      )
      const allRows = getters.getRows
      let index = allRows.findIndex((existingRow) => {
        return existingRow !== null && existingRow.id === row.id
      })
      let isCertain = true

      if (index === -1) {
        // If the row is not found in the index, we will have to figure out what the
        // position could be.
        index = allRows.findIndex((existingRow) => {
          return existingRow !== null && sortFunction(row, existingRow) < 0
        })
        isCertain = false

        if (index === -1 && allRows[allRows.length - 1] === null) {
          // If we don't know where to position the existing row and the last row is
          // null, we can safely assume it's the last row because when finding the
          // index we only check if the new row is before an existing row.
          index = allRows.length
        }

        if (index >= 0) {
          index -= 1
        }
      }

      return { index, isCertain }
    },
    /**
     * Used when row data needs to be directly re-fetched from the Backend and
     * the other (background) row needs to be refreshed. For example, when editing
     * row from a *different* table using ForeignRowEditModal or just RowEditModal
     * component in general.
     */
    async refreshRowFromBackend({ commit, getters, dispatch }, { table, row }) {
      const { data } = await RowService(this.$client).get(table.id, row.id)
      // Use the return value to update the desired row with latest values from the
      // backend.
      commit('UPDATE_ROW', { row, values: data })
    },
    /**
     * Creates a new row and adds it to the store if needed.
     */
    async createNewRow(
      { dispatch, commit, getters },
      { view, table, fields, values }
    ) {
      const preparedRow = prepareRowForRequest(values, fields, this.$registry)

      const { data } = await RowService(this.$client).create(
        table.id,
        preparedRow
      )
      return await dispatch('afterNewRowCreated', {
        view,
        fields,
        values: data,
      })
    },
    /**
     * When a new row is created and it doesn't yet in exist in this store, so we must
     * insert it in the right position. Based on the values of the row we can
     * calculate if the row should be added (matches filters) and at which position
     * (sortings).
     *
     * Because we only fetch the rows from the backend that are actually needed, it
     * could be that we can't figure out where the row should be inserted. In that
     * case, we add a `null` in the area that is unknown. The store
     * already has other null values for rows that are un-fetched. So the un-fetched
     * row representations that are `null` in the array will be fetched automatically
     * when the user wants to see them.
     */
    async afterNewRowCreated(
      { dispatch, getters, commit },
      { view, fields, values }
    ) {
      let row = clone(values)
      populateRow(row)

      const rowMatchesFilters = await dispatch('rowMatchesFilters', {
        view,
        fields,
        row,
      })
      await dispatch('updateSearchMatchesForRow', {
        view,
        fields,
        row,
      })
      if (!rowMatchesFilters || !row._.matchSearch) {
        return
      }

      const { index, isCertain } = await dispatch('findIndexOfNotExistingRow', {
        view,
        fields,
        row,
      })

      // If we're not completely certain about the target index of the new row, we
      // must add it as `null` to the store because then it will automatically be
      // fetched when the user looks at it.
      if (!isCertain) {
        row = null
      }

      commit('INSERT_ROW_AT_INDEX', { index, row })
    },
    /**
     * Updates a row with the prepared values and updates the store accordingly.
     * Prepared values are `newRowValues`, `oldRowValues` and `updateRequestValues` that
     * are prepared by the `prepareNewOldAndUpdateRequestValues` function.
     */
    async updatePreparedRowValues(
      { commit, dispatch },
      { table, view, row, fields, values, oldValues, updateRequestValues }
    ) {
      await dispatch('afterExistingRowUpdated', {
        view,
        fields,
        row,
        values,
      })
      // There is a chance that the row is not in the buffer, but it does exist in
      // the view. In that case, the `afterExistingRowUpdated` action has not done
      // anything. There is a possibility that the row is visible in the row edit
      // modal, but then it won't be updated, so we have to update it forcefully.
      commit('UPDATE_ROW_VALUES', {
        row,
        values: { ...values },
      })

      try {
        // Add the update actual update function to the queue so that the same row
        // will never be updated concurrency, and so that the value won't be
        // updated if the row hasn't been created yet.
        await updateRowQueue.add(async () => {
          const { data } = await RowService(this.$client).update(
            table.id,
            row.id,
            updateRequestValues
          )
          const readOnlyData = extractRowReadOnlyValues(
            data,
            fields,
            this.$registry
          )
          commit('UPDATE_ROW', { row, values: readOnlyData })
        }, row.id)
      } catch (error) {
        dispatch('afterExistingRowUpdated', {
          view,
          fields,
          row,
          values: oldValues,
        })
        commit('UPDATE_ROW_VALUES', {
          row,
          values: { ...oldValues },
        })
        throw error
      }
    },
    /**
     * Updates the value of a row and make the updates to the store accordingly.
     */
    async updateRowValue(
      { dispatch },
      { table, view, row, field, fields, value, oldValue }
    ) {
      const { newRowValues, oldRowValues, updateRequestValues } =
        prepareNewOldAndUpdateRequestValues(
          row,
          fields,
          field,
          value,
          oldValue,
          this.$registry
        )
      await dispatch('updatePreparedRowValues', {
        table,
        view,
        row,
        fields,
        values: newRowValues,
        oldValues: oldRowValues,
        updateRequestValues,
      })
    },
    /**
     * Prepares the values of multiple row fields and returns the new and old values
     * that can be used to update the store and the values that can be used to update
     * the row in the backend.
     */
    prepareMultipleRowValues(context, { row, fields, values, oldValues }) {
      let preparedValues = {}
      let preparedOldValues = {}
      let updateRequestValues = {}

      Object.entries(values).forEach(([fieldId, value]) => {
        const oldValue = oldValues[fieldId]
        const field = fields.find((f) => parseInt(f.id) === parseInt(fieldId))
        const {
          newRowValues,
          oldRowValues,
          updateRequestValues: requestValues,
        } = prepareNewOldAndUpdateRequestValues(
          row,
          fields,
          field,
          value,
          oldValue,
          this.$registry
        )
        preparedValues = { ...preparedValues, ...newRowValues }
        preparedOldValues = { ...preparedOldValues, ...oldRowValues }
        updateRequestValues = { ...updateRequestValues, ...requestValues }
      })
      return { preparedValues, preparedOldValues, updateRequestValues }
    },
    /**
     * Updates the values of multiple row fields and make the updates to the store accordingly.
     */
    async updateRowValues(
      { dispatch },
      { table, view, row, fields, values, oldValues }
    ) {
      const { preparedValues, preparedOldValues, updateRequestValues } =
        await dispatch('prepareMultipleRowValues', {
          table,
          view,
          row,
          fields,
          values,
          oldValues,
        })
      await dispatch('updatePreparedRowValues', {
        table,
        view,
        row,
        fields,
        values: preparedValues,
        oldValues: preparedOldValues,
        updateRequestValues,
      })
    },
    /**
     * When an existing row is updated, the state in the store must also be updated.
     * Because we always receive the old and new state we can calculate if the row
     * already existed in store. If it does exist, but the row was not fetched yet,
     * so in a `null` state, we can still figure out what the index was supposed to
     * be and take action on that.
     *
     * It works very similar to what happens when a row is created. If we can be
     * sure about the new position then we can update the and keep it's data. If we
     * can't be 100% sure, the row will be updated as `null`.
     */
    async afterExistingRowUpdated(
      { dispatch, commit },
      { view, fields, row, values }
    ) {
      const oldRow = clone(row)
      let newRow = Object.assign(clone(row), values)
      populateRow(oldRow)
      populateRow(newRow)

      const oldMatchesFilters = await dispatch('rowMatchesFilters', {
        view,
        fields,
        row: oldRow,
      })
      const newMatchesFilters = await dispatch('rowMatchesFilters', {
        view,
        fields,
        row: newRow,
      })
      await dispatch('updateSearchMatchesForRow', {
        view,
        fields,
        row: oldRow,
      })
      await dispatch('updateSearchMatchesForRow', {
        view,
        fields,
        row: newRow,
      })

      const oldRowMatches = oldMatchesFilters && oldRow._.matchSearch
      const newRowMatches = newMatchesFilters && newRow._.matchSearch

      if (oldRowMatches && !newRowMatches) {
        // If the old row exists in the buffer, we must update that one with the
        // values, even though it's going to be deleted, because the row object
        // could be used by the row edit modal, who needs to have the latest change
        // to it, to keep it in sync.
        const { index: oldIndex, isCertain: oldIsCertain } = await dispatch(
          'findIndexOfExistingRow',
          {
            view,
            fields,
            row: oldRow,
          }
        )
        if (oldIsCertain) {
          commit('UPDATE_ROW_AT_INDEX', { index: oldIndex, values })
        }

        // If the old row did match the filters, but after the update it does not
        // anymore, we can safely remove it from the store.
        await dispatch('afterExistingRowDeleted', {
          view,
          fields,
          row: oldRow,
        })
      } else if (!oldRowMatches && newRowMatches) {
        // If the old row didn't match filters, but the updated one does, we need to
        // add it to the store.
        await dispatch('afterNewRowCreated', {
          view,
          fields,
          values: newRow,
        })
      } else if (oldRowMatches && newRowMatches) {
        // If the old and updated row already exists in the store, we need to update it.
        const { index: oldIndex, isCertain: oldIsCertain } = await dispatch(
          'findIndexOfExistingRow',
          {
            view,
            fields,
            row: oldRow,
          }
        )
        const findNewRow = await dispatch('findIndexOfNotExistingRow', {
          view,
          fields,
          row: newRow,
        })
        let { index: newIndex } = findNewRow
        const { isCertain: newIsCertain } = findNewRow

        // When finding the new index, the old row still existed in the store. When
        // the newIndex is higher than the old index, we need to compensate for this
        // because when figuring out the new position, we expected the existing row
        // not to be there.
        if (newIndex > oldIndex) {
          newIndex -= 1
        }

        if (oldIsCertain && newIsCertain) {
          // If both the old and updated are certain, we can just update the values
          // of the row so the original row, including the state, will persist.
          commit('UPDATE_ROW_AT_INDEX', { index: oldIndex, values })

          if (oldIndex !== newIndex) {
            // If the index has changed we want to move the row. We're moving it and
            // not recreating it because we want the state to persist.
            commit('MOVE_ROW', { oldIndex, newIndex })
          }
        } else {
          // If either the old and updated row is not certain, which means it's in a
          // `null` state, there is no row to persist to we can easily recreate it
          // at the right position.
          if (!newIsCertain) {
            newRow = null
          }

          commit('DELETE_ROW_AT_INDEX', { index: oldIndex })
          commit('INSERT_ROW_AT_INDEX', { index: newIndex, row: newRow })
        }
      }
    },
    /**
     * When a new row deleted and it does exist in the store, it must be deleted
     * removed from is. Based on the provided values of the row we can figure out if
     * it was in the store and we can figure out what index it has.
     */
    async afterExistingRowDeleted({ dispatch, commit }, { view, fields, row }) {
      row = clone(row)
      populateRow(row)

      const rowMatchesFilters = await dispatch('rowMatchesFilters', {
        view,
        fields,
        row,
      })
      await dispatch('updateSearchMatchesForRow', {
        view,
        fields,
        row,
      })
      if (!rowMatchesFilters || !row._.matchSearch) {
        return
      }

      const { index } = await dispatch('findIndexOfExistingRow', {
        view,
        fields,
        row,
      })
      if (index > -1) {
        commit('DELETE_ROW_AT_INDEX', { index })
      }
    },
    /**
     * Brings the provided row in a dragging state so that it can freely moved to
     * another position.
     */
    startRowDrag({ commit, getters }, { row }) {
      const rows = getters.getRows
      const index = rows.findIndex((r) => r !== null && r.id === row.id)
      commit('START_ROW_DRAG', { index })
    },
    /**
     * This action stops the dragging state of a row, will figure out which values
     * need to updated and will make a call to the backend. If something goes wrong,
     * the row is moved back to the position.
     */
    async stopRowDrag({ dispatch, commit, getters }, { table, view, fields }) {
      const row = getters.getDraggingRow

      if (row === null) {
        return
      }

      const rows = getters.getRows
      const index = rows.findIndex((r) => r !== null && r.id === row.id)
      const before = rows[index + 1] || null
      const originalBefore = getters.getDraggingOriginalBefore

      commit('STOP_ROW_DRAG', { index })

      if (originalBefore !== before) {
        try {
          const { data } = await RowService(this.$client).move(
            table.id,
            row.id,
            before !== null ? before.id : null
          )
          commit('UPDATE_ROW', { row, values: data })
        } catch (error) {
          dispatch('cancelRowDrag', { view, fields, row, stop: false })
          throw error
        }
      }
    },
    /**
     * Cancels the current row drag action by reverting back to the original position
     * while respecting any new rows that have been moved into there in the mean time.
     */
    cancelRowDrag(
      { dispatch, getters, commit },
      { view, fields, row, stop = true }
    ) {
      if (stop) {
        const rows = getters.getRows
        const index = rows.findIndex((r) => r !== null && r.id === row.id)
        commit('STOP_ROW_DRAG', { index })
      }

      dispatch('afterExistingRowUpdated', {
        view,
        fields,
        row,
        values: row,
      })
    },
    /**
     * Moves the provided existing row to the position of the target row.
     *
     * @param row           The row object that must be moved.
     * @param targetRow     Will be placed before or after the provided row.
     */
    forceMoveRowBefore({ getters, commit }, { row, targetRow }) {
      const rows = getters.getRows
      const newIndex = rows.findIndex(
        (r) => r !== null && r.id === targetRow.id
      )

      if (newIndex > -1) {
        const oldIndex = rows.findIndex((r) => r !== null && r.id === row.id)
        commit('MOVE_ROW', { oldIndex, newIndex })
        return true
      }

      return false
    },
    /**
     * Changes the current search parameters if provided and optionally refreshes which
     * cells match the new search parameters by updating every rows row._.matchSearch and
     * row._.fieldSearchMatches attributes.
     */
    updateSearch(
      { commit, dispatch, getters, state },
      {
        fields,
        activeSearchTerm = state.activeSearchTerm,
        refreshMatchesOnClient = true,
      }
    ) {
      commit('SET_SEARCH', { activeSearchTerm })
      if (refreshMatchesOnClient) {
        getters.getRows.forEach((row) => {
          if (row !== null) {
            dispatch('updateSearchMatchesForRow', {
              row,
              fields,
              forced: true,
            })
          }
        })
      }
    },
    /**
     * Updates a single row's row._.matchSearch and row._.fieldSearchMatches based on the
     * current search parameters and row data. Overrides can be provided which can be used
     * to override a row's field values when checking if they match the search parameters.
     */
    updateSearchMatchesForRow(
      { commit, getters, rootGetters },
      { row, fields, overrides, forced = false }
    ) {
      // Avoid computing search on table loading
      if (getters.getActiveSearchTerm || forced) {
        const rowSearchMatches = calculateSingleRowSearchMatches(
          row,
          getters.getActiveSearchTerm,
          getters.isHidingRowsNotMatchingSearch,
          fields,
          this.$registry,
          getDefaultSearchModeFromEnv(this.$config),
          overrides
        )

        commit('SET_ROW_SEARCH_MATCHES', rowSearchMatches)
      }
    },
    /**
     * Updates a single row's row._.metadata based on the provided rowMetadataType and
     * updateFunction.
     */
    updateRowMetadata(
      { commit, getters },
      { rowId, rowMetadataType, updateFunction }
    ) {
      const row = getters.getRow(rowId)
      if (row) {
        commit('UPDATE_ROW_METADATA', { row, rowMetadataType, updateFunction })
      }
    },
  }

  const getters = {
    getViewId(state) {
      return state.viewId
    },
    getDelayedRequest(state) {
      return state.delayedRequest
    },
    getVisibleRange(state) {
      return state.visibleRange
    },
    getRequestSize(state) {
      return state.requestSize
    },
    getFetching(state) {
      return state.fetching
    },
    getRow: (state) => (id) => {
      return state.rows.find((row) => row.id === id)
    },
    getRows(state) {
      return state.rows
    },
    getDraggingRow(state) {
      return state.draggingRow
    },
    getDraggingOriginalBefore(state) {
      return state.draggingOriginalBefore
    },
    getActiveSearchTerm(state) {
      return state.activeSearchTerm
    },
    getServerSearchTerm(state) {
      return state.activeSearchTerm
    },
    isHidingRowsNotMatchingSearch(state) {
      return true
    },
    getAdhocFiltering(state) {
      return state.adhocFiltering
    },
    getAdhocSorting(state) {
      return state.adhocSorting
    },
  }

  return {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
  }
}