dtable-statistic 4.2.2 → 4.3.0

package/es/components/dialog/statistic-record-dialog/index.js

@@ -1,9 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import intl from 'react-intl-universal';
 import { Modal, ModalBody } from 'reactstrap';
@@ -14,207 +8,221 @@ import { searchRows } from '../../../utils';
 import { getSqlString } from '../../../utils/sql-utils';
 import { CommonEventTypes } from '../../../constants';
 import './index.css';
-var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(StatisticRecordDialog, _React$Component);
-  var _super = _createSuper(StatisticRecordDialog);
-  function StatisticRecordDialog(props) {
-    var _this;
-    _classCallCheck(this, StatisticRecordDialog);
-    _this = _super.call(this, props);
-    _this.init = function () {
-      var chartRecordsParams = _this.props.chartRecordsParams;
+class StatisticRecordDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.init = () => {
+      const {
+        chartRecordsParams
+      } = this.props;
       if (!chartRecordsParams) return;
-      var _ref = chartRecordsParams || {},
-        statisticRecord = _ref.statisticRecord,
-        chart = _ref.chart,
-        isColumn = _ref.isColumn,
-        isCurrentView = _ref.isCurrentView,
-        isRow = _ref.isRow;
-      var records = statisticRecord.rows;
-      var getTableById = _this.props.getTableById;
-      var table_id = chart.table_id,
-        view_id = chart.view_id;
-      _this.table = getTableById(table_id);
-      _this.view = Views.getViewById(_this.table.views, view_id);
-      _this.isArchiveView = Views.isArchiveView(_this.view);
-      _this.unShowColumnKeyList = _this.getUnShowColumnKeyList(_this.view);
-      _this.renderedColumns = _this.getRenderedColumns(_this.table);
-      if (_this.isArchiveView || !records) {
-        var sqlString = getSqlString(chart, statisticRecord, {
-          isColumn: isColumn,
-          isCurrentView: isCurrentView,
-          isRow: isRow,
-          getTableById: getTableById
+      const {
+        statisticRecord,
+        chart,
+        isColumn,
+        isCurrentView,
+        isRow
+      } = chartRecordsParams || {};
+      const {
+        rows: records
+      } = statisticRecord;
+      const {
+        getTableById
+      } = this.props;
+      const {
+        table_id,
+        view_id
+      } = chart;
+      this.table = getTableById(table_id);
+      this.view = Views.getViewById(this.table.views, view_id);
+      this.isArchiveView = Views.isArchiveView(this.view);
+      this.unShowColumnKeyList = this.getUnShowColumnKeyList(this.view);
+      this.renderedColumns = this.getRenderedColumns(this.table);
+      if (this.isArchiveView || !records) {
+        const sqlString = getSqlString(chart, statisticRecord, {
+          isColumn,
+          isCurrentView,
+          isRow,
+          getTableById
         });
-        dtableDbAPI.sqlQuery(sqlString).then(function (res) {
-          var rows = res.data.results;
-          _this.processDrilledRows(rows);
+        dtableDbAPI.sqlQuery(sqlString).then(res => {
+          const {
+            results: rows
+          } = res.data;
+          this.processDrilledRows(rows);
         });
         return;
       }
-      _this.processDrilledRows(records);
+      this.processDrilledRows(records);
     };
-    _this.processDrilledRows = function (drilledRows) {
-      var statisticRecord = _this.props.chartRecordsParams.statisticRecord;
-      var name = statisticRecord.name;
-      var searchedRowsIds = _this.getSearchedRows(drilledRows);
-      var idRowMap = {};
-      drilledRows.forEach(function (row) {
+    this.processDrilledRows = drilledRows => {
+      const {
+        statisticRecord
+      } = this.props.chartRecordsParams;
+      const {
+        name
+      } = statisticRecord;
+      const searchedRowsIds = this.getSearchedRows(drilledRows);
+      let idRowMap = {};
+      drilledRows.forEach(row => {
         idRowMap[row._id] = row;
       });
-      _this.initComputedProperties(drilledRows);
-      _this.setState({
+      this.initComputedProperties(drilledRows);
+      this.setState({
         loading: false,
         title: name,
         rows: drilledRows,
-        idRowMap: idRowMap,
-        searchedRowsIds: searchedRowsIds
+        idRowMap,
+        searchedRowsIds
       });
     };
-    _this.initComputedProperties = function (drilledRows) {
-      if (_this.isArchiveView) {
-        var formulaColumns = Views.getFormulaColumnsContainLinks(_this.table);
+    this.initComputedProperties = drilledRows => {
+      if (this.isArchiveView) {
+        const formulaColumns = Views.getFormulaColumnsContainLinks(this.table);
         if (formulaColumns.length === 0) return {};
-        var _formulaRows = {};
-        drilledRows.forEach(function (row) {
-          var rowId = row._id;
-          _formulaRows[rowId] = {};
-          formulaColumns.forEach(function (column) {
-            return _formulaRows[rowId][column.key] = row[column.key];
-          });
+        let formulaRows = {};
+        drilledRows.forEach(row => {
+          const rowId = row._id;
+          formulaRows[rowId] = {};
+          formulaColumns.forEach(column => formulaRows[rowId][column.key] = row[column.key]);
         });
-        _this.formulaRows = _formulaRows;
+        this.formulaRows = formulaRows;
         return;
       }
-      var _this$getTableViewFor = _this.getTableViewFormulaRows(),
-        formulaRows = _this$getTableViewFor.formulaRows;
-      _this.formulaRows = formulaRows;
+      const {
+        formulaRows
+      } = this.getTableViewFormulaRows();
+      this.formulaRows = formulaRows;
     };
-    _this.onSearch = function (searchVal) {
-      var rows = _this.state.rows;
-      var searchedRowsIds = _this.getSearchedRows(rows, searchVal);
-      _this.setState({
-        searchedRowsIds: searchedRowsIds,
-        searchVal: searchVal
+    this.onSearch = searchVal => {
+      const {
+        rows
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows, searchVal);
+      this.setState({
+        searchedRowsIds,
+        searchVal
       });
     };
-    _this.clearTimer = function () {
-      if (_this.timer) {
-        clearTimeout(_this.timer);
-        _this.timer = null;
+    this.clearTimer = () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
       }
     };
-    _this.clearSearch = function () {
-      var rows = _this.state.rows;
-      var searchedRowsIds = _this.getSearchedRows(rows);
-      _this.setState({
-        searchedRowsIds: searchedRowsIds,
+    this.clearSearch = () => {
+      const {
+        rows
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows);
+      this.setState({
+        searchedRowsIds,
         searchVal: ''
       });
     };
-    _this.getSearchedRows = function (rows, searchVal) {
+    this.getSearchedRows = (rows, searchVal) => {
       if (!Array.isArray(rows) || rows.length === 0) return [];
       if (searchVal) {
-        return searchRows(rows, Views.getColumns(_this.view, _this.table), searchVal, function (row) {
+        return searchRows(rows, Views.getColumns(this.view, this.table), searchVal, row => {
           return row;
-        }).map(function (row) {
-          return row._id;
-        });
+        }).map(row => row._id);
       }
-      return rows.map(function (row) {
-        return row._id;
-      });
+      return rows.map(row => row._id);
     };
-    _this.getRowsByIds = function (rowsIds) {
+    this.getRowsByIds = rowsIds => {
       if (!Array.isArray(rowsIds) || rowsIds.length === 0) {
         return [];
       }
-      var idRowMap = _this.state.idRowMap;
-      return rowsIds.map(function (rowId) {
-        return idRowMap[rowId];
-      }).filter(Boolean);
+      const {
+        idRowMap
+      } = this.state;
+      return rowsIds.map(rowId => idRowMap[rowId]).filter(Boolean);
     };
-    _this.toggle = function () {
-      if (_this.valueChanged) {
-        _this.props.eventBus.dispatch(CommonEventTypes.REFRESH_CHARTS);
+    this.toggle = () => {
+      if (this.valueChanged) {
+        this.props.eventBus.dispatch(CommonEventTypes.REFRESH_CHARTS);
       }
-      _this.props.toggleStatisticRecordsDialog();
+      this.props.toggleStatisticRecordsDialog();
     };
-    _this.expandRowUpdated = function (_ref2) {
-      var table_id = _ref2.table_id,
-        updatedRow = _ref2.updatedRow;
+    this.expandRowUpdated = _ref => {
+      let {
+        table_id,
+        updatedRow
+      } = _ref;
       // none-matched
-      if (table_id !== _this.table._id) return;
-      var _this$state = _this.state,
-        rows = _this$state.rows,
-        searchedRowsIds = _this$state.searchedRowsIds,
-        idRowMap = _this$state.idRowMap,
-        searchVal = _this$state.searchVal;
-      var updatedSearchedRowsIds = searchedRowsIds;
-      var updatedRows = _toConsumableArray(rows);
-      var updatedIdRowMap = idRowMap;
-      rows.forEach(function (row, index) {
-        var rowId = row._id;
+      if (table_id !== this.table._id) return;
+      const {
+        rows,
+        searchedRowsIds,
+        idRowMap,
+        searchVal
+      } = this.state;
+      let updatedSearchedRowsIds = searchedRowsIds;
+      let updatedRows = [...rows];
+      let updatedIdRowMap = idRowMap;
+      rows.forEach((row, index) => {
+        const rowId = row._id;
         if (rowId === updatedRow._id) {
           updatedRows[index] = updatedRow;
           updatedIdRowMap[rowId] = updatedRow;
         }
       });
       if (searchedRowsIds.length > 0) {
-        var searchedRows = _this.getRowsByIds(searchedRowsIds);
-        updatedSearchedRowsIds = _this.getSearchedRows(searchedRows, searchVal);
+        const searchedRows = this.getRowsByIds(searchedRowsIds);
+        updatedSearchedRowsIds = this.getSearchedRows(searchedRows, searchVal);
       }
-      _this.valueChanged = true;
-      _this.setState({
+      this.valueChanged = true;
+      this.setState({
         rows: updatedRows,
         idRowMap: updatedIdRowMap,
         searchedRowsIds: updatedSearchedRowsIds
       });
     };
-    _this.expandRowDeleted = function (_ref3) {
-      var table_id = _ref3.table_id,
-        row_id = _ref3.row_id;
+    this.expandRowDeleted = _ref2 => {
+      let {
+        table_id,
+        row_id
+      } = _ref2;
       // none-matched
-      if (table_id !== _this.table._id) return;
-      var _this$state2 = _this.state,
-        rows = _this$state2.rows,
-        searchedRowsIds = _this$state2.searchedRowsIds,
-        idRowMap = _this$state2.idRowMap;
-      var updatedSearchedRowsIds = searchedRowsIds;
-      var updatedIdRowMap = idRowMap;
-      var updatedRows = rows.filter(function (row) {
-        return row._id !== row_id;
-      });
+      if (table_id !== this.table._id) return;
+      const {
+        rows,
+        searchedRowsIds,
+        idRowMap
+      } = this.state;
+      let updatedSearchedRowsIds = searchedRowsIds;
+      let updatedIdRowMap = idRowMap;
+      const updatedRows = rows.filter(row => row._id !== row_id);
       delete updatedIdRowMap[row_id];
       if (searchedRowsIds.length > 0) {
-        updatedSearchedRowsIds = searchedRowsIds.filter(function (rowId) {
-          return rowId !== row_id;
-        });
+        updatedSearchedRowsIds = searchedRowsIds.filter(rowId => rowId !== row_id);
       }
-      _this.valueChanged = true;
-      _this.setState({
+      this.valueChanged = true;
+      this.setState({
         rows: updatedRows,
         idRowMap: updatedIdRowMap,
         searchedRowsIds: updatedSearchedRowsIds
       });
     };
-    _this.getUnShowColumnKeyList = function (view) {
-      var firstColumnKey = '0000';
-      var _view$hidden_columns = view.hidden_columns,
-        hidden_columns = _view$hidden_columns === void 0 ? [] : _view$hidden_columns;
-      return [firstColumnKey].concat(_toConsumableArray(hidden_columns));
+    this.getUnShowColumnKeyList = view => {
+      const firstColumnKey = '0000';
+      const {
+        hidden_columns = []
+      } = view;
+      return [firstColumnKey, ...hidden_columns];
     };
-    _this.getRenderedColumns = function (table) {
-      var columns = table.columns;
-      return columns.filter(function (column) {
-        return !_this.unShowColumnKeyList.includes(column.key);
-      });
+    this.getRenderedColumns = table => {
+      const {
+        columns
+      } = table;
+      return columns.filter(column => !this.unShowColumnKeyList.includes(column.key));
     };
-    _this.getTableViewFormulaRows = function () {
-      var _assertThisInitialize = _assertThisInitialized(_this),
-        table = _assertThisInitialize.table,
-        view = _assertThisInitialize.view;
-      var value = _this.props.getValue();
+    this.getTableViewFormulaRows = () => {
+      const {
+        table,
+        view
+      } = this;
+      const value = this.props.getValue();
       if (view.formula_rows && Object.keys(view.formula_rows).length > 0) {
         return {
           formulaRows: view.formula_rows
@@ -222,30 +230,32 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       }
       Views.cacheFormulaResults(table.rows, {
         targetViewId: view._id,
-        table: table,
-        value: value
+        table,
+        value
       });
       return {
         formulaRows: view.formula_rows
       };
     };
-    _this.renderRowsCards = function () {
-      var searchedRowsIds = _this.state.searchedRowsIds;
-      var searchedRows = _this.getRowsByIds(searchedRowsIds);
+    this.renderRowsCards = () => {
+      const {
+        searchedRowsIds
+      } = this.state;
+      const searchedRows = this.getRowsByIds(searchedRowsIds);
       if (searchedRows.length === 0) return null;
       if (!window.app || !window.app.renderRowsCards) return null;
       return window.app.renderRowsCards({
-        table: _this.table,
-        renderedColumns: _this.renderedColumns,
-        unShowColumnKeyList: _this.unShowColumnKeyList,
+        table: this.table,
+        renderedColumns: this.renderedColumns,
+        unShowColumnKeyList: this.unShowColumnKeyList,
         isShowRowCardHeader: true,
-        formulaRows: _this.formulaRows,
-        columns: _this.renderedColumns,
+        formulaRows: this.formulaRows,
+        columns: this.renderedColumns,
         rows: searchedRows,
         rowCardType: 'statistic'
       });
     };
-    _this.state = {
+    this.state = {
       loading: true,
       title: '',
       rows: [],
@@ -253,79 +263,71 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       searchVal: '',
       searchedRowsIds: []
     };
-    _this.table = null;
-    _this.view = null;
-    _this.isArchiveView = false;
-    _this.valueChanged = false;
-    _this.renderedColumns = [];
-    _this.formulaRows = null;
-    _this.unShowColumnKeyList = null;
-    return _this;
+    this.table = null;
+    this.view = null;
+    this.isArchiveView = false;
+    this.valueChanged = false;
+    this.renderedColumns = [];
+    this.formulaRows = null;
+    this.unShowColumnKeyList = null;
   }
-  _createClass(StatisticRecordDialog, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.unsubscribeExpandRowUpdated = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_UPDATED, this.expandRowUpdated);
-      this.unsubscribeExpandRowDeleted = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_DELETED, this.expandRowDeleted);
-      this.init();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unsubscribeExpandRowUpdated();
-      this.unsubscribeExpandRowDeleted();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state3 = this.state,
-        loading = _this$state3.loading,
-        title = _this$state3.title;
-      return /*#__PURE__*/React.createElement(Modal, {
-        isOpen: true,
-        autoFocus: false,
-        toggle: this.toggle,
-        className: "statistic-records-dialog",
-        zIndex: 1048
-      }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "search-header"
-      }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "close",
-        "aria-label": "Close",
-        onClick: this.toggle
-      }, /*#__PURE__*/React.createElement("span", {
-        "aria-hidden": "true"
-      }, "\xD7"))), /*#__PURE__*/React.createElement("div", {
-        className: "search-input-container"
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "header-search-icon dtable-font dtable-icon-search"
-      }), /*#__PURE__*/React.createElement(DtableSearchInput, {
-        autoFocus: true,
-        isClearable: true,
-        className: "search-tables-input",
-        placeholder: intl.get('Search_records'),
-        onChange: this.onSearch,
-        clearValue: this.clearSearch,
-        components: {
-          ClearIndicator: function ClearIndicator(props) {
-            return /*#__PURE__*/React.createElement("span", {
-              className: "clear-search-text",
-              onClick: props.clearValue,
-              title: intl.get('Clear_search_text'),
-              "aria-label": intl.get('Clear_search_text')
-            }, /*#__PURE__*/React.createElement("i", {
-              className: "dtable-font dtable-icon-x-"
-            }));
-          }
+  componentDidMount() {
+    this.unsubscribeExpandRowUpdated = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_UPDATED, this.expandRowUpdated);
+    this.unsubscribeExpandRowDeleted = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_DELETED, this.expandRowDeleted);
+    this.init();
+  }
+  componentWillUnmount() {
+    this.unsubscribeExpandRowUpdated();
+    this.unsubscribeExpandRowDeleted();
+  }
+  render() {
+    const {
+      loading,
+      title
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: true,
+      autoFocus: false,
+      toggle: this.toggle,
+      className: "statistic-records-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "search-header"
+    }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "close",
+      "aria-label": "Close",
+      onClick: this.toggle
+    }, /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xD7"))), /*#__PURE__*/React.createElement("div", {
+      className: "search-input-container"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "header-search-icon dtable-font dtable-icon-search"
+    }), /*#__PURE__*/React.createElement(DtableSearchInput, {
+      autoFocus: true,
+      isClearable: true,
+      className: "search-tables-input",
+      placeholder: intl.get('Search_records'),
+      onChange: this.onSearch,
+      clearValue: this.clearSearch,
+      components: {
+        ClearIndicator: props => {
+          return /*#__PURE__*/React.createElement("span", {
+            className: "clear-search-text",
+            onClick: props.clearValue,
+            title: intl.get('Clear_search_text'),
+            "aria-label": intl.get('Clear_search_text')
+          }, /*#__PURE__*/React.createElement("i", {
+            className: "dtable-font dtable-icon-x-"
+          }));
         }
-      })), /*#__PURE__*/React.createElement(ModalBody, {
-        className: "statistic-records-container"
-      }, loading ? /*#__PURE__*/React.createElement("div", {
-        className: "d-flex py-8"
-      }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderRowsCards())));
-    }
-  }]);
-  return StatisticRecordDialog;
-}(React.Component);
+      }
+    })), /*#__PURE__*/React.createElement(ModalBody, {
+      className: "statistic-records-container"
+    }, loading ? /*#__PURE__*/React.createElement("div", {
+      className: "d-flex py-8"
+    }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderRowsCards())));
+  }
+}
 export default StatisticRecordDialog;