GridController.js

import _ from 'lodash'
import autoBind from 'auto-bind'
import FileSaver from 'file-saver'
import { stringify } from 'csv-stringify'
import GridFilterOptions from '@src/js/components/common/grid/GridFilterOptions.js'
import GridExportOptions from '@src/js/components/common/grid/GridExportOptions.js'
import GridPagingOptions from '@src/js/components/common/grid/GridPagingOptions.js'
import GridSortingOptions from '@src/js/components/common/grid/GridSortingOptions.js'
import compare from '@src/js/common/compare.js'

const LOCAL_GRID_RELOAD_PERIOD = 200
const REMOTE_GRID_RELOAD_PERIOD = 500

export default class GridController {
  constructor() {
    autoBind(this)
    this.cache = {}
  }

  init(context) {
    const props = context.getProps()

    let filterMode = GridFilterOptions.GLOBAL_FILTER
    if (props.filterModes) {
      filterMode = this._getEnumValue(filterMode, props.filterModes)
      if (!filterMode) {
        filterMode = props.filterModes.length > 0 ? props.filterModes[0] : null
      }
    }

    let sortings = []

    if (props.sortings) {
      props.sortings.forEach(sorting => {
        sortings.push({
          columnName: sorting.columnName,
          sortDirection: sorting.sortDirection
            ? sorting.sortDirection
            : GridSortingOptions.ASC
        })
      })
    } else if (props.sort) {
      sortings.push({
        columnName: props.sort,
        sortDirection: props.sortDirection
          ? props.sortDirection
          : GridSortingOptions.ASC
      })
    }

    context.initState({
      loaded: false,
      loading: false,
      filterMode: filterMode,
      filters: {},
      globalFilter: {
        operator: GridFilterOptions.OPERATOR_AND,
        text: null
      },
      page: 0,
      pageSize: 10,
      columnsVisibility: {},
      columnsSorting: [],
      allColumns: [],
      local: null,
      rows: [],
      filteredRows: [],
      sortedRows: [],
      allRows: [],
      selectedRow: null,
      multiselectedRows: {},
      heights: {},
      sortings: sortings,
      totalCount: 0,
      exportState: {
        loading: false,
        warnings: null,
        error: null,
        fileName: null,
        filePath: null
      },
      exportOptions: {
        columns: GridExportOptions.VISIBLE_COLUMNS,
        rows: GridExportOptions.CURRENT_PAGE,
        values: GridExportOptions.RICH_TEXT,
        includeDependencies: true
      }
    })
    this.context = context
  }

  async load() {
    try {
      const props = this.context.getProps()

      if ((props.rows && props.loadRows) || (!props.rows && !props.loadRows)) {
        throw new Error(
          'Incorrect grid configuration. Please set "rows" or "loadRows" property.'
        )
      }

      if (
        (props.columns && props.loadColumns) ||
        (!props.columns && !props.loadColumns)
      ) {
        throw new Error(
          'Incorrect grid configuration. Please set "columns" or "loadColumns" property.'
        )
      }

      await this.context.setState(() => ({
        loading: true
      }))

      const state = this.context.getState()
      const newState = {
        ...state,
        heights: {},
        loading: false,
        loaded: true
      }

      let settings = null

      if (!state.loaded) {
        settings = await this._loadSettings()
        _.merge(newState, settings)
      }

      let result = {}

      if (props.rows) {
        result.rows = props.rows
        result.totalCount = props.rows.length
        result.local = true
      } else if (props.loadRows) {
        const columns = {}

        newState.allColumns.forEach(column => {
          columns[column.name] = column
        })

        const loadedResult = await props.loadRows({
          columns: columns,
          filterMode: newState.filterMode,
          filters: newState.filters,
          globalFilter: newState.globalFilter,
          page: newState.page,
          pageSize: newState.pageSize,
          sortings: newState.sortings
        })

        if (_.isArray(loadedResult)) {
          result.rows = loadedResult
          result.totalCount = loadedResult.length
          result.local = true
        } else {
          result.rows = loadedResult.rows
          result.totalCount = loadedResult.totalCount
          result.local = false
        }
      }

      newState.local = result.local

      if (result.local) {
        const { newAllColumns, newColumnsVisibility, newColumnsSorting } =
          await this._loadColumns(
            result.rows,
            newState.columnsVisibility,
            newState.columnsSorting
          )

        newState.allColumns = newAllColumns
        newState.columnsVisibility = newColumnsVisibility
        newState.columnsSorting = newColumnsSorting

        newState.allRows = result.rows
        newState.filteredRows = this._filterRows(
          newState.allRows,
          newState.allColumns,
          newState.columnsVisibility,
          newState.filterMode,
          newState.filters,
          newState.globalFilter
        )
        newState.sortedRows = this._sortRows(
          newState.filteredRows,
          newState.allColumns,
          newState.sortings
        )
        newState.totalCount = newState.filteredRows.length

        const pageCount = Math.max(
          Math.ceil(newState.totalCount / newState.pageSize),
          1
        )

        newState.page = Math.min(newState.page, pageCount - 1)
        newState.rows = this._pageRows(