install addons, fix edit

src/components/theme/View/TabsView.jsx

@@ -0,0 +1,171 @@
+/**
+ * Document view component.
+ * @module components/theme/View/DefaultView
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from '@plone/volto/helpers';
+import { compose } from 'redux';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { map } from 'lodash';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { blocks } from '~/config';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+});
+
+class DefaultView extends Component {
+  constructor(props) {
+    super(props);
+    // this.renderTabs = this.renderTabs.bind(this);
+    this.state = {
+      tabs: null,
+    };
+  }
+
+  static defaultProps = {
+    parent: null,
+  };
+  static propTypes = {
+    tabs: PropTypes.array,
+    content: PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string,
+      text: PropTypes.shape({
+        data: PropTypes.string,
+      }),
+    }).isRequired,
+    localNavigation: PropTypes.any,
+  };
+
+  // componentWillReceiveProps(nextProps) {
+  //   console.log('herere', nextProps.parent, this.props.parent);
+  //   if (nextProps.parent && nextProps.parent.id !== this.props.parent?.id) {
+
+  //     const pathArr = nextProps.location.pathname.split('/');
+  //     pathArr.length = 4;
+  //     const path = pathArr.join('/');
+  //     const tabsItems = nextProps.parent.items.map(i => {
+  //       return {
+  //         url: `${path}/${i.id}`,
+  //         title: i.title,
+  //         '@type': i['@type'],
+  //       };
+  //     });
+  //     this.props.setFolderTabs(tabsItems);
+  //   }
+  // }
+
+  computeFolderTabs = siblings => {
+    const tabsItems = siblings.items.map(i => {
+      return {
+        url: flattenToAppURL(i.url),
+        title: i.name,
+      };
+    });
+    return tabsItems;
+  };
+
+  render() {
+    const content = this.props.content;
+    const intl = this.props.intl;
+    const blocksFieldname = getBlocksFieldname(content);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
+    const tabs = this.computeFolderTabs(content['@components'].siblings);
+
+    // const currentUrl = this.props.content?.['@id'];
+    // const shouldRenderRoutes =
+    //   typeof currentUrl !== 'undefined' &&
+    //   samePath(currentUrl, this.props.pathname)
+    //     ? true
+    //     : false;
+    //
+    // if (shouldRenderRoutes === false)
+    //   return (
+    //     <div className="lds-default">
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //       <div />
+    //     </div>
+    //   );
+
+    return (
+      hasBlocksData(content) && (
+        <div id="page-document" className="ui wrapper">
+          {tabs && tabs.length ? (
+            <nav className="tabs">
+              {tabs.map(tab => (
+                <Link
+                  key={`localtab-${tab.url}`}
+                  className={`tabs__item${(tab.url ===
+                    this.props.location.pathname &&
+                    ' tabs__item_active') ||
+                    ''}`}
+                  to={tab.url}
+                  title={tab.title}
+                >
+                  {tab.title}
+                </Link>
+              ))}
+            </nav>
+          ) : (
+            ''
+          )}
+          <Helmet title={content.title} />
+          {map(content[blocksLayoutFieldname].items, block => {
+            const Block =
+              blocks.blocksConfig[
+                (content[blocksFieldname]?.[block]?.['@type'])
+              ]?.['view'] || null;
+            return Block !== null ? (
+              <Block
+                key={`block-${block}`}
+                blockID={block}
+                properties={content}
+                data={content[blocksFieldname][block]}
+              />
+            ) : (
+              <div key={`blocktype-${block}`}>
+                {intl.formatMessage(messages.unknownBlock, {
+                  block: content[blocksFieldname]?.[block]?.['@type'],
+                })}
+              </div>
+            );
+          })}
+        </div>
+      )
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect((state, props) => ({
+    pathname: props.location.pathname,
+    content:
+      state.prefetch?.[state.router.location.pathname] || state.content.data,
+  })),
+)(DefaultView);

src/config.js

@@ -3,29 +3,30 @@ import * as voltoConfig from '@plone/volto/config';
 import {
   applyConfig as addonsConfig,
   installFolderListing,
-  // installCustomAddonGroup,
   installTableau,
 } from 'volto-addons/config';
 import { applyConfig as ckeditorConfig } from 'volto-ckeditor/config';
 import { applyConfig as dataBlocksConfig } from 'volto-datablocks/config';
 import { applyConfig as blocksConfig } from 'volto-blocks/config';
 import { applyConfig as mosaicConfig } from 'volto-mosaic/config';
-// import { applyConfig as plotlyConfig } from 'volto-plotlycharts/config';
+import { applyConfig as plotlyConfig } from 'volto-plotlycharts/config';
 // import { applyConfig as installEPRTRFrontend } from './localconfig';
 import { applyConfig as installSidebar } from 'volto-sidebar/config';
 
+// import { applyConfig as installEPRTRFrontend } from './localconfig';
+import installEPRTR from './localconfig';
+
 const config = [
-  // installCustomAddonGroup,
   addonsConfig,
-  // installSidebar,
-  // installFolderListing,
-  // installTableau,
-  // plotlyConfig,
+  installSidebar,
+  installFolderListing,
+  installTableau,
+  plotlyConfig,
   // ckeditorConfig,
   // mosaicConfig,
-  // blocksConfig,
-  // dataBlocksConfig,
-  // installEPRTRFrontend,
+  blocksConfig,
+  dataBlocksConfig,
+  installEPRTR,
 ].reduce((acc, apply) => apply(acc), voltoConfig);
 
 // config.settings.contentExpand=[breadcrumbs,actions,workflow]

src/customizations/volto/components/manage/BlockChooser/BlockChooser.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { filter, map, groupBy } from 'lodash';
+import { Accordion, Button } from 'semantic-ui-react';
+import { injectIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import AnimateHeight from 'react-animate-height';
+import { blocks } from '~/config';
+
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+
+const BlockChooser = ({ currentBlock, onMutateBlock, intl }) => {
+  const mostUsedBlocks = filter(blocks.blocksConfig, item => item.mostUsed);
+  const groupedBlocks = groupBy(blocks.blocksConfig, item => item.group);
+  const blocksAvailable = { mostUsed: mostUsedBlocks, ...groupedBlocks };
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  function handleClick(e, titleProps) {
+    const { index } = titleProps;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    setActiveIndex(newIndex);
+  }
+
+  return (
+    <div className="blocks-chooser">
+      <Accordion fluid styled className="form">
+        {map(blocks.groupBlocksOrder, (groupName, index) => (
+          <React.Fragment key={groupName.id}>
+            <Accordion.Title
+              active={activeIndex === index}
+              index={index}
+              onClick={handleClick}
+            >
+              {intl.formatMessage({
+                id: groupName.id,
+                defaultMessage: groupName.title,
+              })}
+              <div className="accordion-tools">
+                {activeIndex === 0 ? (
+                  <Icon name={upSVG} size="20px" />
+                ) : (
+                  <Icon name={downSVG} size="20px" />
+                )}
+              </div>
+            </Accordion.Title>
+            <Accordion.Content
+              className={groupName.id}
+              active={activeIndex === index}
+            >
+              <AnimateHeight
+                animateOpacity
+                duration={500}
+                height={activeIndex === index ? 'auto' : 0}
+              >
+                {map(
+                  filter(
+                    blocksAvailable[groupName.id],
+                    block => !block.restricted,
+                  ),
+                  block => (
+                    <Button.Group key={block.id}>
+                      <Button
+                        icon
+                        basic
+                        className={block.id}
+                        onClick={() =>
+                          onMutateBlock(currentBlock, { '@type': block.id })
+                        }
+                      >
+                        <Icon name={block.icon} size="36px" />
+                        {intl.formatMessage({
+                          id: block.id,
+                          defaultMessage: block.title,
+                        })}
+                      </Button>
+                    </Button.Group>
+                  ),
+                )}
+              </AnimateHeight>
+            </Accordion.Content>
+          </React.Fragment>
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+BlockChooser.propTypes = {
+  currentBlock: PropTypes.string.isRequired,
+  onMutateBlock: PropTypes.func.isRequired,
+};
+
+export default injectIntl(BlockChooser);