@evershop/evershop 1.0.0-beta

package/src/lib/components/grid/Pagination.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Input } from '../form/fields/Input';
+import './Pagination.scss';
+
+export default function Pagination({ total, limit, page }) {
+  const pageInput = React.useRef(null);
+  const limitInput = React.useRef(null);
+
+  React.useEffect(() => {
+    pageInput.current.value = page;
+    limitInput.current.value = limit;
+  }, []);
+
+  const onKeyPress = (e) => {
+    if (e.which !== 13) return;
+    e.preventDefault();
+    let pageNumber = parseInt(e.target.value, 10);
+    if (page < 1) pageNumber = 1;
+    if (page > Math.ceil(total / limit)) pageNumber = Math.ceil(total / limit);
+    const url = new URL(document.location);
+    url.searchParams.set('page', pageNumber);
+    window.location.href = url.href;
+  };
+
+  const onPrev = (e) => {
+    e.preventDefault();
+    const prev = page - 1;
+    if (page === 1) return;
+    const url = new URL(document.location);
+    url.searchParams.set('page', prev);
+    window.location.href = url.href;
+  };
+
+  const onNext = (e) => {
+    e.preventDefault();
+    const next = page + 1;
+    if (page * limit >= total) return;
+    const url = new URL(document.location);
+    url.searchParams.set('page', next);
+    window.location.href = url.href;
+  };
+
+  const onFirst = (e) => {
+    e.preventDefault();
+    if (page === 1) return;
+    const url = new URL(document.location);
+    url.searchParams.delete('page');
+    window.location.href = url.href;
+  };
+
+  const onLast = (e) => {
+    e.preventDefault();
+    if (page === Math.ceil(total / limit)) return;
+    const url = new URL(document.location);
+    url.searchParams.set('page', Math.ceil(total / limit));
+    window.location.href = url.href;
+  };
+
+  const onKeyPressLimit = (e) => {
+    if (e.which !== 13) return;
+    e.preventDefault();
+    const limitNumber = parseInt(e.target.value, 10);
+    if (limit < 1) return;
+    const url = new URL(document.location);
+    url.searchParams.set('limit', limitNumber);
+    window.location.href = url.href;
+  };
+
+  return (
+    <div className="pagination flex px-2">
+      <div className="flex justify-between w-full space-x-1 mt-1 mb-1">
+        <div className="flex space-x-1">
+          <div className="self-center"><span>Show</span></div>
+          <div className="limit">
+            <div className="" style={{ width: '5rem' }}>
+              <Input onKeyPress={(e) => onKeyPressLimit(e)} ref={limitInput} />
+            </div>
+          </div>
+          <div className="self-center"><span>per page</span></div>
+        </div>
+        <div className="flex space-x-1">
+          {page > 1 && (
+            <div className="prev self-center">
+              <a href="#" onClick={(e) => onPrev(e)}>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+              </a>
+            </div>
+          )}
+          <div className="first self-center"><a href="#" onClick={(e) => onFirst(e)}>1</a></div>
+          <div className="current" style={{ width: '5rem' }}>
+            <Input ref={pageInput} onKeyPress={(e) => onKeyPress(e)} />
+          </div>
+          <div className="last self-center"><a href="#" onClick={(e) => onLast(e)}>{Math.ceil(total / limit)}</a></div>
+          {(page * limit) < total && (
+            <div className="next self-center">
+              <a href="#" onClick={(e) => onNext(e)}>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          )}
+          <div className="self-center">
+            <span>
+              {total}
+              {' '}
+              records
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Pagination.propTypes = {
+  limit: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+};

package/src/lib/components/grid/Pagination.scss

@@ -0,0 +1,16 @@
+.next a,
+.prev a {
+    width: 3.5rem;
+    height: 3.5rem;
+    color: var(--border);
+    display: flex;
+    border: 1px solid var(--divider);
+    border-radius: 3px;
+    justify-content: center;
+    svg {
+        width: 55%;
+    }
+}
+.pagination input {
+    text-align: center;
+}

package/src/lib/components/grid/headers/Action.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function ActionColumnHeader({ gridOriginalUrl = undefined }) {
+  return (
+    <th className="column action-column">
+      <div className="table-header">
+        <div className="title"><span /></div>
+        {gridOriginalUrl && (
+          <div className="filter">
+            <a className="text-danger" title="Clear filter" href={gridOriginalUrl}>
+              <i className="fa fa-filter" />
+              <i className="fa fa-slash" style={{ marginLeft: '-13px' }} />
+            </a>
+          </div>
+        )}
+      </div>
+    </th>
+  );
+}
+
+ActionColumnHeader.propTypes = {
+  gridOriginalUrl: PropTypes.string
+};
+
+ActionColumnHeader.defaultProps = {
+  gridOriginalUrl: undefined
+};

package/src/lib/components/grid/headers/Basic.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Input } from '../../form/fields/Input';
+
+export default function BasicColumnHeader({ title, id, currentFilters = [] }) {
+  const filterInput = React.useRef(null);
+
+  const onKeyPress = (e) => {
+    const url = new URL(document.location);
+    if (e.key === 'Enter') {
+      if (e.target.value === '') url.searchParams.delete(id);
+      else url.searchParams.set(id, e.target.value);
+      window.location.href = url.href;
+    }
+  };
+
+  React.useEffect(() => {
+    const filter = currentFilters.find((fillter) => fillter.key === id) || { value: '' };
+    filterInput.current.value = filter.value;
+  }, []);
+
+  return (
+    <th className="column">
+      <div className="table-header id-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="filter" style={{ width: '15rem' }}>
+          <Input
+            ref={filterInput}
+            onKeyPress={(e) => onKeyPress(e)}
+            placeholder={title}
+          />
+        </div>
+      </div>
+    </th>
+  );
+}
+
+BasicColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/lib/components/grid/headers/Dropdown.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Select } from '../../form/fields/Select';
+
+export default function DropdownColumnHeader({ title, id, options = [], currentFilters = [] }) {
+  const [current, setCurrent] = React.useState('');
+
+  const onChange = (e) => {
+    const url = new URL(document.location);
+    if (e.target.value === 'all') url.searchParams.delete(id);
+    else url.searchParams.set(id, e.target.value);
+    window.location.href = url.href;
+  };
+
+  React.useEffect(() => {
+    const filter = currentFilters.find((fillter) => fillter.key === id) || { value: 'all' };
+    setCurrent(filter.value || 'all');
+  }, []);
+
+  return (
+    <th className="column">
+      <div className="table-header status-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="filter">
+          <Select
+            onChange={(e) => onChange(e)}
+            className="form-control"
+            value={current}
+            options={[{ value: 'all', text: 'All' }].concat(options)}
+          />
+        </div>
+      </div>
+    </th>
+  );
+}
+
+DropdownColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string || PropTypes.number,
+    text: PropTypes.string
+  })).isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/lib/components/grid/headers/Dummy.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function DummyColumnHeader({ title }) {
+  return (
+    <th className="column">
+      <div className="table-header id-header">
+        <div className="title"><span>{title}</span></div>
+      </div>
+    </th>
+  );
+}
+
+DummyColumnHeader.propTypes = {
+  title: PropTypes.string.isRequired
+};

package/src/lib/components/grid/headers/FromTo.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Input } from '../../form/fields/Input';
+
+export default function FromToColumnHeader({ title, id, currentFilters = [] }) {
+  const filterFrom = React.useRef(null);
+  const filterTo = React.useRef(null);
+
+  const onKeyPress = (e) => {
+    const url = new URL(document.location);
+    if (e.key === 'Enter') {
+      if (filterTo.current.value === '' && filterFrom.current.value === '') url.searchParams.delete(id);
+      else url.searchParams.set(id, `${filterFrom.current.value}-${filterTo.current.value}`);
+      window.location.href = url.href;
+    }
+  };
+
+  React.useEffect(() => {
+    const filter = currentFilters.find((f) => f.key === id) || { value: '-' };
+    filterFrom.current.value ? filter.value.split('-')[0] : '';
+    filterTo.current.value ? filter.value.split('-')[1] : '';
+  }, []);
+
+  return (
+    <th>
+      <div className="table-header price-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="flex space-x-1">
+          <div style={{ width: '6rem' }}>
+            <Input
+              type="text"
+              ref={filterFrom}
+              onKeyPress={(e) => onKeyPress(e)}
+              placeholder="From"
+              className="form-control"
+            />
+          </div>
+          <div style={{ width: '6rem' }}>
+            <Input
+              type="text"
+              ref={filterTo}
+              onKeyPress={(e) => onKeyPress(e)}
+              placeholder="To"
+              className="form-control"
+            />
+          </div>
+        </div>
+      </div>
+    </th>
+  );
+}
+
+FromToColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/lib/components/grid/headers/Status.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Select } from '../../form/fields/Select';
+
+export default function StatusColumnHeader({ title, id, currentFilter = {} }) {
+  const [current, setCurrent] = React.useState('');
+
+  const onChange = (e) => {
+    const url = new URL(document.location);
+    if (e.target.value === 'all') url.searchParams.delete(id);
+    else url.searchParams.set(id, e.target.value);
+    window.location.href = url.href;
+  };
+
+  React.useEffect(() => {
+    setCurrent(currentFilter.value || 'all');
+  }, []);
+
+  return (
+    <th className="column">
+      <div className="table-header status-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="filter">
+          <Select
+            onChange={(e) => onChange(e)}
+            className="form-control"
+            value={current}
+            options={[
+              { value: 'all', text: 'All' },
+              { value: 1, text: 'Enabled' },
+              { value: 0, text: 'Disabled' }
+            ]}
+          />
+        </div>
+      </div>
+    </th>
+  );
+}
+
+StatusColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/ActionRow.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-alert */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from '../../../util/get';
+
+export default function ActionColumnRow({ areaProps: { row } }) {
+  return (
+    <td>
+      <div><a href={get(row, 'editUrl', '#')}><i className="fas fa-edit" /></a></div>
+      <div>
+        {get(row, 'deleteUrl') && (
+          <span
+            className="text-danger link"
+            onClick={
+              () => {
+                if (window.confirm('Are you sure?')) window.location.href = get(row, 'deleteUrl');
+              }
+            }
+          >
+            <i className="fas fa-trash-alt" />
+          </span>
+        )}
+      </div>
+    </td>
+  );
+}
+
+ActionColumnRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      editUrl: PropTypes.string,
+      deleteUrl: PropTypes.string
+    })
+  }).isRequired
+};

package/src/lib/components/grid/rows/BasicRow.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function BasicRow({ id, areaProps }) {
+  return <td>{areaProps.row[id]}</td>;
+}
+
+BasicRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      id: PropTypes.string
+    })
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/DateRow.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DateTime } from 'luxon';
+import { useAppState } from '../../../context/app';
+import { get } from '../../../util/get';
+
+export default function DateRow({ id, areaProps }) {
+  const context = useAppState();
+  const date = DateTime.fromSQL(areaProps.row[id], { zone: 'UTC' });
+
+  return (
+    <td>
+      <div>
+        <span>
+          {
+            date.isValid ? date.setLocale(get(context, 'shop.language', 'en'))
+              .setZone(get(context, 'shop.timezone', 'UTC'))
+              .toFormat('LLL dd yyyy') : '--'
+          }
+        </span>
+      </div>
+    </td>
+  );
+}
+
+DateRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      id: PropTypes.string
+    })
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/PriceRow.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppState } from '../../../context/app';
+
+export default function PriceRow({ id, areaProps }) {
+  const context = useAppState();
+  return (
+    <td>
+      <div>
+        <span>{new Intl.NumberFormat(context.language, { style: 'currency', currency: context.currency }).format(areaProps.row[id])}</span>
+      </div>
+    </td>
+  );
+}
+
+PriceRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      id: PropTypes.number
+    })
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/StatusRow.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Off from '../../Off';
+import On from '../../On';
+
+export default function StatusRow({ id, areaProps }) {
+  return (
+    <td>
+      <div className="nodejscart-switch">
+        <div>
+          {parseInt(areaProps.row[id], 10) === 0 && <Off />}
+          {parseInt(areaProps.row[id], 10) === 1 && <On />}
+        </div>
+      </div>
+    </td>
+  );
+}
+
+StatusRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      id: PropTypes.number
+    })
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/ThumbnailRow.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function ThumbnailRow({ id, areaProps }) {
+  return (
+    <td>
+      <div className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center" style={{ width: '6rem', height: '6rem' }}>
+        {areaProps.row[id] && <img className="self-center" src={areaProps.row[id]} alt="" />}
+        {!areaProps.row[id] && (
+          <svg className="self-center" xmlns="http://www.w3.org/2000/svg" width="2rem" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+        )}
+      </div>
+    </td>
+  );
+}
+
+ThumbnailRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      id: PropTypes.string
+    })
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/lib/components/grid/rows/YesNoRow.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function YesNoRow({ id, areaProps }) {
+  return (
+    <td>
+      <div className="nodejscart-switch">
+        <div>
+          {parseInt(areaProps.row[id], 10) === 0 && <span>No</span>}
+          {parseInt(areaProps.row[id], 10) === 1 && <span>Yes</span>}
+        </div>
+      </div>
+    </td>
+  );
+}
+
+YesNoRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};