react-morning 0.0.1-security → 1.0.9

package/src/components/FormGrid.jsx

@@ -0,0 +1,269 @@
+import _get from 'lodash/get';
+import _isFunction from 'lodash/isFunction';
+import _isString from 'lodash/isString';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {defaultPageSizes} from '../constants';
+import {
+  Columns,
+  Operations,
+  PageSizes,
+} from '../types';
+import {stopPropagationWrapper} from '../utils';
+
+import Grid from './Grid';
+
+const FormGrid = (props) => {
+  const getSortQuery = (key, sort) => {
+    const {
+      forms: {
+        sort: currentSort,
+      }
+    } = props;
+
+    const sortKey = _isString(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 = ({key, sort}) => {
+    if (_isFunction(sort)) {
+      return sort();
+    }
+
+    const {getForms} = props;
+
+    getForms(1, {
+      sort: getSortQuery(key, sort),
+    });
+  };
+
+  const TitleCell = ({access, form, onAction}) => (
+    <span
+      style={{cursor: 'pointer'}}
+      onClick={stopPropagationWrapper(() => {
+        if (access.submission.create) {
+          onAction(form, 'view');
+        }
+      })}
+    >
+      <h5>{form.title}</h5>
+    </span>
+  );
+
+  const Icon = ({icon}) => (
+    <span>
+      <i className={`fa fa-${icon}`} />&nbsp;
+    </span>
+  );
+
+  const OperationButton = ({
+    action,
+    onAction,
+    form,
+    buttonType,
+    icon,
+    title
+  }) => (
+    <span
+      className={`btn btn-${buttonType} btn-sm form-btn`}
+      onClick={stopPropagationWrapper(() => onAction(form, action))}
+    >
+      {
+        icon
+          ? <Icon icon={icon} />
+          : null
+      }
+      {title}
+    </span>
+  );
+
+  const Cell = ({row: form, column}) => {
+    const {
+      formAccess,
+      onAction,
+      operations = [],
+    } = props;
+
+    const access = formAccess(form);
+
+    if (column.key === 'title') {
+      return <TitleCell access={access} form={form} onAction={onAction} />;
+    }
+    else if (column.key === 'operations') {
+      return (
+        <div>
+          {
+            operations.map(({
+              action,
+              buttonType = 'primary',
+              icon = '',
+              permissionsResolver = () => true,
+              title = '',
+            }) =>
+              permissionsResolver(form)
+                ? <OperationButton
+                    key={action}
+                    action={action}
+                    buttonType={buttonType}
+                    icon={icon}
+                    title={title}
+                    form={form}
+                    onAction={onAction}
+                  >
+                  </OperationButton>
+                : null
+            )
+          }
+        </div>
+      );
+    }
+
+    return (
+      <span>
+        {
+          _isFunction(column.value)
+            ? column.value(form)
+            : _get(form, column.key, '')
+        }
+      </span>
+    );
+  };
+
+  const {
+    columns,
+    forms: {
+      forms,
+      limit,
+      pagination: {
+        page,
+        numPages,
+        total,
+      },
+      sort,
+    },
+    getForms,
+    onAction,
+    onPageSizeChanged,
+    pageSizes,
+  } = props;
+
+  const skip = (page - 1) * limit;
+  const last = Math.min(skip + limit, total);
+
+  return (
+    <Grid
+      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={sort}
+      total={total}
+    />
+  );
+};
+
+FormGrid.defaultProps = {
+  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: defaultPageSizes,
+};
+
+FormGrid.propTypes = {
+  columns: Columns,
+  formAccess: PropTypes.func,
+  forms: PropTypes.object.isRequired,
+  getForms: PropTypes.func,
+  onAction: PropTypes.func,
+  onPageSizeChanged: PropTypes.func,
+  operations: Operations,
+  pageSizes: PageSizes,
+};
+
+export default FormGrid;

package/src/components/Grid.jsx

@@ -0,0 +1,278 @@
+import _get from 'lodash/get';
+import _isObject from 'lodash/isObject';
+import _isString from 'lodash/isString';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {defaultPageSizes} from '../constants';
+import {AllItemsPerPage, PageSizes} from '../types';
+
+import Pagination from './Pagination';
+
+function normalizePageSize(pageSize) {
+  if (_isObject(pageSize)) {
+    return pageSize;
+  }
+
+  if (pageSize === AllItemsPerPage) {
+    return {
+      label: 'All',
+      value: 999999,
+    };
+  }
+
+  return {
+    label: pageSize,
+    value: pageSize,
+  };
+}
+
+const renderPagination = ({
+  pages,
+  onPage,
+}) => pages && onPage;
+
+const renderPageSizeSelector = ({
+  pageSize,
+  pageSizes,
+  onPageSizeChanged,
+}) => pageSize && pageSizes && pageSizes.length && onPageSizeChanged;
+
+const renderItemCounter = ({
+  firstItem,
+  lastItem,
+  total,
+}) => firstItem && lastItem && total;
+
+const renderFooter = (props) => renderPagination(props) || renderItemCounter(props);
+
+function Grid(props) {
+  const {
+    Cell,
+    activePage,
+    columns,
+    emptyText,
+    firstItem,
+    items,
+    lastItem,
+    onAction,
+    onPage,
+    onPageSizeChanged,
+    onSort,
+    pageNeighbours,
+    pageSize,
+    pageSizes,
+    pages,
+    sortOrder,
+    total,
+  } = props;
+  const normalizedPageSizes = pageSizes.map(normalizePageSize);
+
+  const getColumn = (column) => {
+    const {
+      key,
+      sort = false,
+      title = '',
+      width,
+    } = column;
+    const className = `col col-md-${width}`;
+
+    const columnProps = {
+      key,
+      className,
+    };
+
+    if (!title) {
+      return (
+        <div {...columnProps} />
+      );
+    }
+
+    if (!sort) {
+      return (
+        <div {...columnProps}>
+          <strong>{title}</strong>
+        </div>
+      );
+    }
+
+    const sortKey = _isString(sort) ? sort : key;
+    const ascSort = sortKey;
+    const descSort = `-${sortKey}`;
+
+    let sortClass = '';
+    if (sortOrder === ascSort) {
+      sortClass = 'glyphicon glyphicon-triangle-top fa fa-caret-up';
+    }
+    else if (sortOrder === descSort) {
+      sortClass = 'glyphicon glyphicon-triangle-bottom fa fa-caret-down';
+    }
+
+    return (
+      <div {...columnProps}>
+        <span
+          style={{cursor: 'pointer'}}
+          onClick={() => onSort(column)}
+        >
+          <strong>{title} <span className={sortClass}/></strong>
+        </span>
+      </div>
+    );
+  };
+
+  const getItem = (item) => (
+    <li className="list-group-item" key={item._id}>
+      <div className="row" onClick={() => onAction(item, 'row')}>
+        {
+          columns.map((column) => (
+            <div key={column.key} className={`col col-md-${column.width}`}>
+              <Cell row={item} column={column} />
+            </div>
+          ))
+        }
+      </div>
+    </li>
+  );
+
+  const PageSizeSelector = () => (
+    <div className="col-auto">
+      <div className="row align-items-center">
+        <div className="col-auto">
+          <select
+            className="form-control"
+            value={pageSize}
+            onChange={(event) => onPageSizeChanged(event.target.value)}
+          >
+            {
+              normalizedPageSizes.map(({
+                label,
+                value,
+              }) => (
+                <option key={value} value={value}>{label}</option>
+              ))
+            }
+          </select>
+        </div>
+        <span className="col-auto">
+          items per page
+        </span>
+      </div>
+    </div>
+  );
+
+  const FooterPagination = () => (
+    <div className="col-auto">
+      <div className="row align-items-center">
+        <div className="col-auto">
+          <Pagination
+            pages={pages}
+            activePage={activePage}
+            pageNeighbours={pageNeighbours}
+            prev="Previous"
+            next="Next"
+            onSelect={onPage}
+          />
+        </div>
+        {
+          renderPageSizeSelector(props)
+            ? <PageSizeSelector></PageSizeSelector>
+            : null
+        }
+      </div>
+    </div>
+  );
+
+  const ItemCounter = () => (
+    <div className="col-auto ml-auto">
+      <span className="item-counter pull-right">
+        <span className="page-num">{ firstItem } - { lastItem }</span> / { total } total
+      </span>
+    </div>
+  );
+
+  const Footer = () => (
+    <li className="list-group-item">
+      <div className="row align-items-center">
+        {
+          renderPagination(props)
+            ? <FooterPagination></FooterPagination>
+            : null
+        }
+        {
+          renderItemCounter(props)
+            ? <ItemCounter></ItemCounter>
+            : null
+        }
+      </div>
+    </li>
+  );
+
+  return (
+    <div>
+      {
+        items.length
+          ? (
+            <ul className="list-group list-group-striped">
+              <li className="list-group-item list-group-header hidden-xs hidden-md">
+                <div className="row">
+                  {columns.map(getColumn)}
+                </div>
+              </li>
+              {items.map(getItem)}
+              {
+                renderFooter(props)
+                  ? <Footer></Footer>
+                  : null
+              }
+            </ul>
+          )
+          : <div>{emptyText}</div>
+      }
+    </div>
+  );
+}
+
+Grid.propTypes = {
+  Cell: PropTypes.func,
+  activePage: PropTypes.number,
+  columns: PropTypes.array.isRequired,
+  emptyText: PropTypes.string,
+  firstItem: PropTypes.number,
+  items: PropTypes.array.isRequired,
+  lastItem: PropTypes.number,
+  onAction: PropTypes.func,
+  onPage: PropTypes.func,
+  onPageSizeChanged: PropTypes.func,
+  onSort: PropTypes.func,
+  pageNeighbours: PropTypes.number,
+  pageSize: PropTypes.number,
+  pageSizes: PageSizes,
+  pages: PropTypes.number,
+  sortOrder: PropTypes.string,
+  total: PropTypes.number,
+};
+
+Grid.defaultProps = {
+  Cell: ({
+    column,
+    row,
+  }) => (
+    <span>{_get(row, column.key, '')}</span>
+  ),
+  activePage: 1,
+  emptyText: 'No data found',
+  firstItem: 0,
+  lastItem: 0,
+  onAction: () => {},
+  onPage: () => {},
+  onPageSizeChanged: () => {},
+  onSort: () => {},
+  pageNeighbours: 1,
+  pageSize: 0,
+  pageSizes: defaultPageSizes,
+  pages: 0,
+  sortOrder: '',
+  total: 0,
+};
+
+export default Grid;

package/src/components/Pagination.jsx

@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const LEFT_PAGE = 'LEFT';
+const RIGHT_PAGE = 'RIGHT';
+
+function range(from, to, step = 1) {
+  let i = from;
+  const range = [];
+
+  while (i <= to) {
+    range.push(i);
+    i += step;
+  }
+
+  return range;
+}
+
+function getPageNumbers({
+  currentPage,
+  pageNeighbours,
+  totalPages,
+}) {
+  const totalNumbers = (pageNeighbours * 2) + 3;
+  const totalBlocks = totalNumbers + 2;
+
+  if (totalPages > totalBlocks) {
+    const calculatedStartPage = Math.max(2, currentPage - pageNeighbours);
+    const calculatedEndPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
+    const startPage = (calculatedStartPage === 3) ? 2 : calculatedStartPage;
+    const endPage = (calculatedEndPage === (totalPages - 2)) ? (totalPages - 1) : calculatedEndPage;
+
+    let pages = range(startPage, endPage);
+
+    const hasLeftSpill = startPage > 2;
+    const hasRightSpill = (totalPages - endPage) > 1;
+    const spillOffset = totalNumbers - (pages.length + 1);
+    let extraPages;
+
+    if (hasLeftSpill && !hasRightSpill) {
+      extraPages = range(startPage - spillOffset, startPage - 1);
+      pages = [LEFT_PAGE, ...extraPages, ...pages];
+    }
+    else if (!hasLeftSpill && hasRightSpill) {
+      extraPages = range(endPage + 1, endPage + spillOffset);
+      pages = [...pages, ...extraPages, RIGHT_PAGE];
+    }
+    else {
+      pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
+    }
+
+    return [1, ...pages, totalPages];
+  }
+
+  return range(1, totalPages);
+}
+
+function Pagination({
+  activePage,
+  pageNeighbours,
+  pages,
+  prev,
+  next,
+  onSelect,
+}) {
+  const pageNumbers = getPageNumbers({
+    currentPage: activePage,
+    pageNeighbours,
+    totalPages: pages,
+  });
+
+  return (
+    <nav aria-label="Page navigation">
+      <ul className="pagination">
+        <li className={`page-item ${(activePage === 1) ? 'disabled' : ''}`}>
+          <button
+            className="page-link"
+            onClick={() => {
+              if (activePage !== 1) {
+                onSelect(activePage - 1);
+              }
+            }}
+          >
+            {prev}
+          </button>
+        </li>
+
+        {
+          pageNumbers.map((page) => {
+            const className = (page === activePage) ? 'active' : '';
+
+            if ([LEFT_PAGE, RIGHT_PAGE].includes(page)) {
+              return (
+                <li className="page-item disabled">
+                  <span className="page-link">
+                    <span aria-hidden="true">...</span>
+                  </span>
+                </li>
+              );
+            }
+
+            return (
+              <li className={`page-item ${className}`} key={page}>
+                <button
+                  className="page-link"
+                  onClick={() => onSelect(page)}
+                >
+                  {page}
+                </button>
+              </li>
+            );
+          })
+        }
+
+        <li className={`page-item ${(activePage === pages) ? 'disabled' : ''}`}>
+          <button
+            className="page-link"
+            onClick={() => {
+              if (activePage !== pages) {
+                onSelect(activePage + 1);
+              }
+            }}
+          >
+            {next}
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+Pagination.propTypes = {
+  activePage: PropTypes.number,
+  pageNeighbours: PropTypes.number,
+  pages: PropTypes.number.isRequired,
+  prev: PropTypes.string,
+  next: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+};
+
+Pagination.defaultProps = {
+  activePage: 1,
+  pageNeighbours: 1,
+  prev: 'Previous',
+  next: 'Next',
+};
+
+export default Pagination;