@aot-technologies/formio-react/lib/components/FormGrid.js

React renderer for formsflow form.io forms.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
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 FormGrid = props => {
  const {
    columns = [{
      key: 'title',
      sort: true,
      title: 'Form',
      width: 8
    }, {
      key: 'operations',
      title: 'Operations',
      width: 4
    }],
    formAccess = () => ({
      form: {
        create: true,
        view: true,
        edit: true,
        delete: true
      },
      submission: {
        create: true,
        view: true,
        edit: true,
        delete: true
      }
    }),
    getForms = () => {},
    onPageSizeChanged = () => {},
    operations = [{
      action: 'view',
      buttonType: 'primary',
      icon: 'pencil',
      permissionsResolver() {
        return true;
      },
      title: 'Enter Data'
    }, {
      action: 'submission',
      buttonType: 'warning',
      icon: 'list-alt',
      permissionsResolver() {
        return true;
      },
      title: 'View Data'
    }, {
      action: 'edit',
      buttonType: 'secondary',
      icon: 'edit',
      permissionsResolver() {
        return true;
      },
      title: 'Edit Form'
    }, {
      action: 'delete',
      buttonType: 'danger',
      icon: 'trash',
      permissionsResolver() {
        return true;
      }
    }],
    pageSizes = _constants.defaultPageSizes,
    forms: {
      forms,
      limit,
      pagination: {
        page,
        numPages,
        total
      },
      sort: currentSort
    },
    onAction
  } = 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();
    }
    const {
      getForms
    } = props;
    getForms(1, {
      sort: getSortQuery(key, sort)
    });
  };
  const TitleCell = _ref2 => {
    let {
      access,
      form,
      onAction
    } = _ref2;
    return /*#__PURE__*/_react.default.createElement("span", {
      style: {
        cursor: 'pointer'
      },
      onClick: (0, _utils.stopPropagationWrapper)(() => {
        if (access.submission.create) {
          onAction(form, 'view');
        }
      })
    }, /*#__PURE__*/_react.default.createElement("h5", null, form.title));
  };
  const Icon = _ref3 => {
    let {
      icon
    } = _ref3;
    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
      className: `fa fa-${icon}`
    }), "\xA0");
  };
  const OperationButton = _ref4 => {
    let {
      action,
      onAction,
      form,
      buttonType,
      icon,
      title
    } = _ref4;
    return /*#__PURE__*/_react.default.createElement("span", {
      className: `btn btn-${buttonType} btn-sm form-btn`,
      onClick: (0, _utils.stopPropagationWrapper)(() => onAction(form, action))
    }, icon ? /*#__PURE__*/_react.default.createElement(Icon, {
      icon: icon
    }) : null, title);
  };
  const Cell = _ref5 => {
    let {
      row: form,
      column
    } = _ref5;
    const access = formAccess(form);
    if (column.key === 'title') {
      return /*#__PURE__*/_react.default.createElement(TitleCell, {
        access: access,
        form: form,
        onAction: onAction
      });
    } else if (column.key === 'operations') {
      return /*#__PURE__*/_react.default.createElement("div", null, operations.map(_ref6 => {
        let {
          action,
          buttonType = 'primary',
          icon = '',
          permissionsResolver = () => true,
          title = ''
        } = _ref6;
        return permissionsResolver(form) ? /*#__PURE__*/_react.default.createElement(OperationButton, {
          key: action,
          action: action,
          buttonType: buttonType,
          icon: icon,
          title: title,
          form: form,
          onAction: onAction
        }) : null;
      }));
    }
    return /*#__PURE__*/_react.default.createElement("span", null, (0, _isFunction2.default)(column.value) ? column.value(form) : (0, _get2.default)(form, column.key, ''));
  };
  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 forms found",
    firstItem: skip + 1,
    items: forms,
    lastItem: last,
    onAction: onAction,
    onPage: getForms,
    onPageSizeChanged: onPageSizeChanged,
    onSort: onSort,
    pageSize: limit,
    pageSizes: pageSizes,
    pages: numPages,
    sortOrder: currentSort,
    total: total
  });
};
FormGrid.propTypes = {
  columns: _types.Columns,
  formAccess: _propTypes.default.func,
  forms: _propTypes.default.object.isRequired,
  getForms: _propTypes.default.func,
  onAction: _propTypes.default.func,
  onPageSizeChanged: _propTypes.default.func,
  operations: _types.Operations,
  pageSizes: _types.PageSizes
};
var _default = exports.default = FormGrid;