@arun-s-aot/formio-react/lib/components/SubmissionGrid.js

React renderer for formsflow form.io forms.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.push.js");
var _lib = require("@arun-s-aot/formiojs/lib");
var _get2 = _interopRequireDefault(require("lodash/get"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
var _isString2 = _interopRequireDefault(require("lodash/isString"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _constants = require("../constants");
var _types = require("../types");
var _utils = require("../utils");
var _Grid = _interopRequireDefault(require("./Grid"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SubmissionGrid = props => {
  const {
    columns: propColumns = [],
    getSubmissions = () => {},
    onAction = () => {},
    onPageSizeChanged = () => {},
    operations = [{
      action: 'view',
      buttonType: 'warning',
      icon: 'list-alt',
      permissionsResolver() {
        return true;
      },
      title: 'View'
    }, {
      action: 'edit',
      buttonType: 'secondary',
      icon: 'edit',
      permissionsResolver() {
        return true;
      },
      title: 'Edit'
    }, {
      action: 'delete',
      buttonType: 'danger',
      icon: 'trash',
      permissionsResolver() {
        return true;
      }
    }],
    pageSizes = _constants.defaultPageSizes,
    submissions: {
      sort: currentSort,
      limit,
      pagination: {
        page,
        numPages,
        total
      },
      submissions
    },
    form
  } = props;
  const getSortQuery = (key, sort) => {
    const sortKey = (0, _isString2.default)(sort) ? sort : key;
    const ascSort = sortKey;
    const descSort = `-${sortKey}`;
    const noSort = '';
    if (currentSort === ascSort) {
      return descSort;
    } else if (currentSort === descSort) {
      return noSort;
    } else {
      return ascSort;
    }
  };
  const onSort = _ref => {
    let {
      key,
      sort
    } = _ref;
    if ((0, _isFunction2.default)(sort)) {
      return sort();
    }
    getSubmissions(1, {
      sort: getSortQuery(key, sort)
    });
  };
  const getColumns = form => {
    const columns = [];
    _lib.Utils.eachComponent(form.components, component => {
      if (component.input && component.tableView && component.key) {
        columns.push((0, _utils.getComponentDefaultColumn)(component));
      }
    });
    columns.push({
      key: 'operations',
      title: 'Operations'
    });
    (0, _utils.setColumnsWidth)(columns);
    return columns;
  };
  const Icon = _ref2 => {
    let {
      icon
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
      className: `fa fa-${icon}`
    }), "\xA0");
  };
  const OperationButton = _ref3 => {
    let {
      action,
      buttonType,
      icon,
      title,
      onAction,
      submission
    } = _ref3;
    return /*#__PURE__*/_react.default.createElement("span", {
      className: `btn btn-${buttonType} btn-sm form-btn`,
      onClick: (0, _utils.stopPropagationWrapper)(() => onAction(submission, action))
    }, icon ? /*#__PURE__*/_react.default.createElement(Icon, {
      icon: icon
    }) : null, title);
  };
  const Cell = _ref4 => {
    let {
      row: submission,
      column
    } = _ref4;
    if (column.key === 'operations') {
      return /*#__PURE__*/_react.default.createElement("div", null, operations.map(_ref5 => {
        let {
          action,
          buttonType = 'primary',
          icon = '',
          permissionsResolver = () => true,
          title = ''
        } = _ref5;
        return permissionsResolver(form, submission) ? /*#__PURE__*/_react.default.createElement(OperationButton, {
          key: action,
          action: action,
          buttonType: buttonType,
          icon: icon,
          title: title,
          submission: submission,
          onAction: onAction
        }) : null;
      }));
    }
    const value = (0, _isFunction2.default)(column.value) ? column.value(submission) : (0, _get2.default)(submission, column.key, '');
    return (0, _isObject2.default)(value) && value.content ? value.isHtml ? /*#__PURE__*/_react.default.createElement("div", {
      dangerouslySetInnerHTML: {
        __html: value.content
      }
    }) : /*#__PURE__*/_react.default.createElement("span", null, String(value.content)) : /*#__PURE__*/_react.default.createElement("span", null, String(value));
  };
  const columns = propColumns.length ? propColumns : getColumns(form);
  const skip = (page - 1) * limit;
  const last = Math.min(skip + limit, total);
  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
    Cell: Cell,
    activePage: page,
    columns: columns,
    emptyText: "No data found",
    firstItem: skip + 1,
    items: submissions,
    lastItem: last,
    onAction: onAction,
    onPage: getSubmissions,
    onPageSizeChanged: onPageSizeChanged,
    onSort: onSort,
    pageSize: limit,
    pageSizes: pageSizes,
    pages: numPages,
    sortOrder: currentSort,
    total: total
  });
};
SubmissionGrid.propTypes = {
  columns: _types.Columns,
  form: _propTypes.default.object.isRequired,
  getSubmissions: _propTypes.default.func,
  onAction: _propTypes.default.func,
  onPageSizeChanged: _propTypes.default.func,
  operations: _types.Operations,
  pageSizes: _types.PageSizes,
  submissions: _propTypes.default.object.isRequired
};
var _default = exports.default = SubmissionGrid;