@eeacms/volto-bise-policy 1.2.10 → 1.2.11

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/smart/View.jsx

@@ -0,0 +1,272 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import qs from 'querystring';
+import { Icon } from '@plone/volto/components';
+import { Table, Pagination, Search } from 'semantic-ui-react';
+import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components';
+
+import upSVG from '@eeacms/volto-datablocks/icons/up-arrow.svg';
+import downSVG from '@eeacms/volto-datablocks/icons/down-arrow.svg';
+import upDownSVG from '@eeacms/volto-datablocks/icons/up-down-arrow.svg';
+
+import './style.less';
+
+const getSortedTableData = (tableData, sortBy) => {
+  const property = sortBy[0];
+  const ASC = sortBy[1];
+
+  return tableData.sort((a, b) => {
+    const a_value = a[property];
+    const b_value = b[property];
+    if (a_value < b_value) return ASC ? -1 : 1;
+    if (a_value > b_value) return ASC ? 1 : -1;
+    return 0;
+  });
+};
+
+const getFilteredTableData = (tableData) => {
+  return tableData;
+};
+
+const View = (props) => {
+  const {
+    data = {},
+    getAlignmentOfColumn,
+    getNameOfColumn,
+    getTitleOfColumn,
+    loadingProviderData,
+    placeholder,
+    provider_data_length,
+    provider_data,
+    row_size,
+    show_header,
+  } = props;
+  const selectedColumns = data.columns || [];
+  const timeoutRef = React.useRef();
+  const search = React.useRef();
+  const [mounted, setMounted] = React.useState(false);
+  const [tableData, setTableData] = React.useState([]);
+  const [filteredTableData, setFilteredTableData] = React.useState([]);
+  const [sortBy, setSortBy] = React.useState([]);
+  const [activePage, setActivePage] = React.useState(1);
+  const [value, setValue] = React.useState(props.query.searchTerm || '');
+  const { loading, results } = props.search;
+
+  const items =
+    results.length || (!loading && value.length) ? results : filteredTableData;
+
+  const handleSearchChange = React.useCallback(
+    (e, data, time = 1000) => {
+      clearTimeout(timeoutRef.current);
+      props.dispatch({ type: 'TABLE_START_SEARCH', query: data.value });
+      timeoutRef.current = setTimeout(() => {
+        props.history.push({
+          search:
+            '?' +
+            qs.stringify({
+              ...props.query,
+              searchTerm: data.value,
+            }),
+        });
+        if (data.value.length === 0) {
+          props.dispatch({ type: 'TABLE_CLEAN_QUERY' });
+          return;
+        }
+        const re = new RegExp(_.escapeRegExp(data.value), 'i');
+        const isMatch = (result) => {
+          for (let colDef of selectedColumns) {
+            if (re.test(result[colDef.column])) {
+              return true;
+            }
+          }
+          return false;
+        };
+        props.dispatch({
+          type: 'TABLE_FINISH_SEARCH',
+          results: _.filter(filteredTableData, isMatch),
+          payload: { activePage: data.activePage, row_size },
+        });
+      }, time);
+    },
+    /* eslint-disable-next-line */
+    [filteredTableData, selectedColumns],
+  );
+
+  React.useEffect(() => {
+    const newTableData = [];
+    if (provider_data_length) {
+      const keys = Object.keys(provider_data);
+      Array(provider_data_length)
+        .fill()
+        .forEach((_, i) => {
+          const obj = {};
+          keys.forEach((key) => {
+            obj[key] = provider_data[key][i];
+          });
+          newTableData.push(obj);
+        });
+    }
+    setTableData(newTableData);
+    /* eslint-disable-next-line */
+  }, [provider_data]);
+
+  React.useEffect(() => {
+    const newFilteredTableData = [
+      ...getSortedTableData(getFilteredTableData(tableData), sortBy),
+    ];
+    setFilteredTableData(newFilteredTableData);
+    /* eslint-disable-next-line */
+  }, [tableData, sortBy]);
+
+  React.useEffect(() => {
+    if (mounted) {
+      handleSearchChange({}, { value, activePage });
+    } else {
+      setMounted(true);
+    }
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(filteredTableData)]);
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+      props.dispatch({ type: 'TABLE_CLEAN_QUERY' });
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <div className="smart-table">
+      <Search
+        ref={search}
+        loading={loadingProviderData || loading}
+        onResultSelect={() => {}}
+        showNoResults={false}
+        onSearchChange={(e, data) => {
+          handleSearchChange(e, { ...data, activePage: 1 });
+          setValue(data.value);
+          if (activePage > 1) {
+            setActivePage(1);
+          }
+        }}
+        results={[]}
+        value={value}
+        resultRenderer={() => {
+          return '';
+        }}
+      />
+      {data.searchDescription ? (
+        <p className="search-description">{data.searchDescription}</p>
+      ) : (
+        ''
+      )}
+      <Table
+        textAlign="left"
+        striped={data.striped}
+        className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+      >
+        {show_header ? (
+          <Table.Header>
+            <Table.Row>
+              {selectedColumns.map((colDef, j) => (
+                <Table.HeaderCell
+                  key={getNameOfColumn(colDef)}
+                  className={getAlignmentOfColumn(colDef, j)}
+                >
+                  <button
+                    className="sortable-th"
+                    title="Sort by"
+                    onClick={() => {
+                      if (sortBy[0] === colDef.column) {
+                        setSortBy([colDef.column, !sortBy[1]]);
+                      } else {
+                        setSortBy([colDef.column, true]);
+                      }
+                    }}
+                    style={{ display: 'flex' }}
+                  >
+                    <span>{getTitleOfColumn(colDef)}</span>
+                    {sortBy[0] === colDef.column ? (
+                      <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
+                    ) : (
+                      <Icon name={upDownSVG} size="1rem" color="grey" />
+                    )}
+                  </button>
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
+        ) : null}
+        <Table.Body>
+          {Array(
+            Math.max(
+              0,
+              Math.min(row_size, items.length - (activePage - 1) * row_size),
+            ),
+          )
+            .fill()
+            .map((_, i) => {
+              const row_index = i + (activePage - 1) * row_size;
+              return (
+                <Table.Row key={row_index}>
+                  {selectedColumns.map((colDef, j) => (
+                    <Table.Cell
+                      key={`${row_index}-${getNameOfColumn(colDef)}`}
+                      textAlign={getAlignmentOfColumn(colDef, j)}
+                    >
+                      <RenderComponent
+                        {...props}
+                        tableData={items}
+                        colDef={colDef}
+                        row={row_index}
+                      />
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              );
+            })}
+          {!items.length ? (
+            <Table.Row>
+              <Table.Cell textAlign="center" colSpan="100%">
+                {placeholder}
+              </Table.Cell>
+            </Table.Row>
+          ) : (
+            ''
+          )}
+        </Table.Body>
+        {Math.ceil(items.length / row_size) > 1 ? (
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell
+                colSpan={selectedColumns.length}
+                style={{ textAlign: 'center' }}
+              >
+                <Pagination
+                  activePage={activePage}
+                  totalPages={Math.ceil(items.length / row_size)}
+                  onPageChange={(_, data) => {
+                    setActivePage(data.activePage);
+                    handleSearchChange(
+                      {},
+                      { value, activePage: data.activePage },
+                    );
+                  }}
+                />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        ) : (
+          ''
+        )}
+      </Table>
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  search: state.table_search || {},
+  query: qs.parse(state.router.location?.search?.replace('?', '')) || {},
+}))(View);

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/smart/index.js

@@ -0,0 +1,4 @@
+import SmartView from './View';
+import smartSchema from './schema';
+
+export { SmartView, smartSchema };

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/smart/schema.js

@@ -0,0 +1,17 @@
+export default () => ({
+  title: 'Smart datatable',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['searchDescription'],
+    },
+  ],
+  properties: {
+    searchDescription: {
+      title: 'Search description',
+      widget: 'textarea',
+    },
+  },
+  required: [],
+});

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/smart/style.less

@@ -0,0 +1,77 @@
+.smart-table {
+  .ui.search .ui.icon.input {
+    width: 100%;
+
+    > input {
+      padding-left: 1rem;
+    }
+  }
+
+  .search-description {
+    padding: 0 1rem;
+    margin-top: 0.5rem;
+  }
+
+  .sortable-th {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+
+    > * {
+      font-size: 1rem;
+      line-height: 1rem;
+    }
+  }
+
+  table {
+    overflow: hidden;
+    border: 1px solid #e8e8e8 !important;
+    background: #fff !important;
+    border-collapse: separate !important;
+    border-radius: 12px !important;
+
+    thead > tr > th::after {
+      display: none;
+    }
+
+    thead,
+    td {
+      background-color: #fff;
+    }
+
+    th {
+      font-weight: bold !important;
+
+      &:after {
+        padding: 0;
+        border: none;
+      }
+    }
+
+    th,
+    td {
+      border-bottom: 1px solid #e8e8e8 !important;
+    }
+
+    tbody {
+      td {
+        height: 46px;
+      }
+
+      tr:last-child {
+        td {
+          border-bottom: none !important;
+        }
+      }
+    }
+
+    tfoot {
+      tr th {
+        border-bottom: none !important;
+      }
+    }
+  }
+}

package/src/customizations/volto/components/theme/View/View.jsx

@@ -0,0 +1,299 @@
+/**
+ * View container.
+ * @module components/theme/View/View
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Redirect } from 'react-router-dom';
+import { Portal } from 'react-portal';
+import { injectIntl } from 'react-intl';
+import qs from 'query-string';
+
+import {
+  ContentMetadataTags,
+  Comments,
+  Tags,
+  Toolbar,
+} from '@plone/volto/components';
+import { listActions, getContent } from '@plone/volto/actions';
+import {
+  BodyClass,
+  getBaseUrl,
+  flattenToAppURL,
+  getLayoutFieldname,
+  hasApiExpander,
+} from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+/**
+ * View container class.
+ * @class View
+ * @extends Component
+ */
+class View extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    listActions: PropTypes.func.isRequired,
+    /**
+     * Action to get the content
+     */
+    getContent: PropTypes.func.isRequired,
+    /**
+     * Pathname of the object
+     */
+    pathname: PropTypes.string.isRequired,
+    location: PropTypes.shape({
+      search: PropTypes.string,
+      pathname: PropTypes.string,
+    }).isRequired,
+    /**
+     * Version id of the object
+     */
+    versionId: PropTypes.string,
+    /**
+     * Content of the object
+     */
+    content: PropTypes.shape({
+      /**
+       * Layout of the object
+       */
+      layout: PropTypes.string,
+      /**
+       * Allow discussion of the object
+       */
+      allow_discussion: PropTypes.bool,
+      /**
+       * Title of the object
+       */
+      title: PropTypes.string,
+      /**
+       * Description of the object
+       */
+      description: PropTypes.string,
+      /**
+       * Type of the object
+       */
+      '@type': PropTypes.string,
+      /**
+       * Subjects of the object
+       */
+      subjects: PropTypes.arrayOf(PropTypes.string),
+      is_folderish: PropTypes.bool,
+    }),
+    error: PropTypes.shape({
+      /**
+       * Error type
+       */
+      status: PropTypes.number,
+    }),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    content: null,
+    versionId: null,
+    error: null,
+  };
+
+  state = {
+    hasObjectButtons: null,
+    isClient: false,
+  };
+
+  componentDidMount() {
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    this.props.getContent(
+      getBaseUrl(this.props.pathname),
+      this.props.versionId,
+    );
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      this.props.getContent(
+        getBaseUrl(nextProps.pathname),
+        this.props.versionId,
+      );
+    }
+
+    if (nextProps.actions.object_buttons) {
+      const objectButtons = nextProps.actions.object_buttons;
+      this.setState({
+        hasObjectButtons: !!objectButtons.length,
+      });
+    }
+  }
+
+  /**
+   * Default fallback view
+   * @method getViewDefault
+   * @returns {string} Markup for component.
+   */
+  getViewDefault = () => config.views.defaultView;
+
+  /**
+   * Get view by content type
+   * @method getViewByType
+   * @returns {string} Markup for component.
+   */
+  getViewByType = () =>
+    config.views.contentTypesViews[this.props.content['@type']] || null;
+
+  /**
+   * Get view by content layout property
+   * @method getViewByLayout
+   * @returns {string} Markup for component.
+   */
+  getViewByLayout = () =>
+    config.views.layoutViews[
+      this.props.content[getLayoutFieldname(this.props.content)]
+    ] || null;
+
+  /**
+   * Cleans the component displayName (specially for connected components)
+   * which have the Connect(componentDisplayName)
+   * @method cleanViewName
+   * @param  {string} dirtyDisplayName The displayName
+   * @returns {string} Clean displayName (no Connect(...)).
+   */
+  cleanViewName = (dirtyDisplayName) =>
+    dirtyDisplayName
+      .replace('Connect(', '')
+      .replace('injectIntl(', '')
+      .replace(')', '')
+      .replace('connect(', '')
+      .toLowerCase();
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { views } = config;
+    if ([301, 302].includes(this.props.error?.code)) {
+      const redirect = flattenToAppURL(this.props.error.url)
+        .split('?')[0]
+        .replace('/++api++', '');
+      return <Redirect to={`${redirect}${this.props.location.search}`} />;
+    } else if (this.props.error && !this.props.connectionRefused) {
+      let FoundView;
+      if (this.props.error.status === undefined) {
+        // For some reason, while development and if CORS is in place and the
+        // requested resource is 404, it returns undefined as status, then the
+        // next statement will fail
+        FoundView = views.errorViews.corsError;
+      } else {
+        FoundView = views.errorViews[this.props.error.status.toString()];
+      }
+      if (!FoundView) {
+        FoundView = views.errorViews['404']; // default to 404
+      }
+      return (
+        <div id="view">
+          <FoundView {...this.props} />
+        </div>
+      );
+    }
+    if (!this.props.content) {
+      return <span />;
+    }
+    const RenderedView =
+      this.getViewByLayout() || this.getViewByType() || this.getViewDefault();
+
+    return (
+      <div id="view">
+        <ContentMetadataTags content={this.props.content} />
+        {/* Body class if displayName in component is set */}
+        <BodyClass
+          className={
+            RenderedView.displayName
+              ? `view-${this.cleanViewName(RenderedView.displayName)}`
+              : null
+          }
+        />
+        <RenderedView
+          key={this.props.content['@id']}
+          content={this.props.content}
+          location={this.props.location}
+          token={this.props.token}
+          history={this.props.history}
+        />
+        {config.settings.showTags &&
+          this.props.content.subjects &&
+          this.props.content.subjects.length > 0 && (
+            <Tags tags={this.props.content.subjects} />
+          )}
+        {/* Add opt-in social sharing if required, disabled by default */}
+        {/* In the future this might be parameterized from the app config */}
+        {/* <SocialSharing
+          url={typeof window === 'undefined' ? '' : window.location.href}
+          title={this.props.content.title}
+          description={this.props.content.description || ''}
+        /> */}
+        {this.props.content.allow_discussion && (
+          <Comments pathname={this.props.pathname} />
+        )}
+        {this.state.isClient && (
+          <Portal node={document.getElementById('toolbar')}>
+            <Toolbar pathname={this.props.pathname} inner={<span />} />
+          </Portal>
+        )}
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      token: state.userSession.token,
+      content: state.content.data,
+      error: state.content.get.error,
+      apiError: state.apierror.error,
+      connectionRefused: state.apierror.connectionRefused,
+      pathname: props.location.pathname,
+      versionId:
+        qs.parse(props.location.search) &&
+        qs.parse(props.location.search).version,
+    }),
+    {
+      listActions,
+      getContent,
+    },
+  ),
+)(View);

package/src/index.js

@@ -4,6 +4,7 @@ import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-bise-policy/comp
 
 import installBlocks from './components/manage/Blocks';
 import installStyles from './styles-config';
+import installDataTable from './customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable';
 
 import biseLogo from '@eeacms/volto-bise-policy/../theme/assets/images/Header/bise-logo.svg';
 import biseWhiteLogo from '@eeacms/volto-bise-policy/../theme/assets/images/Header/bise-logo-white.svg';
@@ -186,7 +187,7 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.hero_image_left.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
   }
 
-  config = [installBlocks, installStyles].reduce(
+  config = [installBlocks, installStyles, installDataTable].reduce(
     (acc, apply) => apply(acc),
     config,
   );