@eeacms/volto-n2k 0.1.1

package/src/components/manage/Blocks/List/style.less

@@ -0,0 +1,12 @@
+.connected-list {
+  .column {
+    .label {
+      margin-bottom: 0;
+      font-weight: bold;
+    }
+
+    .value {
+      margin-bottom: 1rem;
+    }
+  }
+}

package/src/components/manage/Blocks/NavigationAnchors/Edit.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import getSchema from './schema';
+import './styles.less';
+
+import View from './View';
+
+const Edit = (props) => {
+  const { selected = false } = props;
+  const schema = getSchema();
+
+  return (
+    <React.Fragment>
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </React.Fragment>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/NavigationAnchors/View.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { Menu, Container, Sticky } from 'semantic-ui-react';
+import qs from 'querystring';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+import { withHashLink } from 'volto-slate/hooks';
+import { StickyContext } from '~/components';
+import './styles.less';
+
+const formatLink = (str, obj) => {
+  let newStr = str;
+  if (!str || typeof str !== 'string') return str;
+  Object.keys(obj || {}).forEach((key) => {
+    newStr = newStr.replace(new RegExp(`\\$${key}`, 'g'), obj[key]);
+  });
+  return newStr;
+};
+
+const View = (props) => {
+  const [activeHash, setActiveHash] = useState();
+  const [offsetHeight, setOffsetHeight] = useState(0);
+  const { stickyRef } = useContext(StickyContext);
+  const anchorsRef = useRef();
+  const { data = {}, screen = {} } = props;
+  const links = data.links || [];
+  const sticky = data.sticky ?? true;
+
+  const params = {
+    ...props.match.params,
+    ...(props.route_parameters || {}),
+    ...qs.parse(props.location.search.replace('?', '')),
+  };
+
+  const hashList = links
+    .map((link) => link.hash?.[0]?.['id'])
+    .filter((hash) => hash);
+
+  const onScroll = () => {
+    const top = document.documentElement.scrollTop;
+    const offsetHeight = anchorsRef.current?.offsetHeight + 10;
+    let activeHash,
+      maxTop = 0;
+    hashList.forEach((hash) => {
+      const hashTop = document.getElementById(hash)?.offsetTop;
+      if (top >= hashTop - offsetHeight && top >= maxTop) {
+        maxTop = top;
+        activeHash = hash;
+      }
+    });
+    setActiveHash(activeHash);
+    setOffsetHeight(offsetHeight - 11);
+  };
+
+  useEffect(() => {
+    onScroll();
+    document.addEventListener('scroll', onScroll);
+    return () => {
+      document.removeEventListener('scroll', onScroll);
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <Sticky
+      active={sticky && screen.page?.width > 765}
+      context={stickyRef}
+      className={cx('sticky-navigation-anchors', {
+        'full-width': sticky,
+        'is-sticky': sticky,
+      })}
+    >
+      <div
+        className={cx('navigation-anchors', data.className)}
+        ref={anchorsRef}
+      >
+        <Container>
+          <Menu
+            stackable
+            style={{ justifyContent: data.align || 'flex-start' }}
+          >
+            {links?.map((link, index) => {
+              const href = formatLink(link.href, params);
+              const hash = link.hash?.[0] || {};
+
+              return (
+                <Menu.Item
+                  key={`anchor-${link.title}-${index}`}
+                  active={
+                    (hash.id && activeHash && hash.id === activeHash) ||
+                    (!hash.id &&
+                      !link.isHash &&
+                      props.location.pathname === href.replace(/\/$/, ''))
+                  }
+                >
+                  {link.isHash ? (
+                    <a
+                      href={`#${hash.id}`}
+                      title={link.title}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        if (link.target === '_self') return;
+                        props.setHashLink(hash.id, { ...hash, offsetHeight });
+                      }}
+                      target={link.target || '_self'}
+                    >
+                      {link.title}
+                    </a>
+                  ) : (
+                    <UniversalLink
+                      href={href || '#'}
+                      openLinkInNewTab={link.target === '_blank'}
+                      title={link.title}
+                    >
+                      {link.title}
+                    </UniversalLink>
+                  )}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        </Container>
+      </div>
+    </Sticky>
+  );
+};
+
+export default connect((state) => ({
+  screen: state.screen,
+  route_parameters: state.route_parameters || {},
+}))(withHashLink(withRouter(View)));

package/src/components/manage/Blocks/NavigationAnchors/index.js

@@ -0,0 +1,23 @@
+import NavigationAnchorsEdit from './Edit';
+import NavigationAnchorsView from './View';
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export default (config) => {
+  config.blocks.blocksConfig.navigation_anchors = {
+    id: 'navigation_anchors',
+    title: 'Navigation anchors',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: NavigationAnchorsEdit,
+    view: NavigationAnchorsView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/NavigationAnchors/schema.js

@@ -0,0 +1,76 @@
+const linksSchema = () => ({
+  title: 'Link',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'href', 'hash', 'target', 'isHash'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+    },
+    href: {
+      title: 'URL',
+      widget: 'textarea',
+    },
+    hash: {
+      title: 'Hash',
+      widget: 'blocks_browser',
+      multiple: false,
+      selectedItemAttrs: [],
+    },
+    target: {
+      title: 'Target',
+      choices: [
+        ['_blank', 'External'],
+        ['_self', 'internal'],
+      ],
+      defaultValue: '_self',
+    },
+    isHash: {
+      title: 'Hash link',
+      type: 'boolean',
+      default: true,
+    },
+  },
+  required: [],
+});
+
+export default () => ({
+  title: 'Navigation anchors',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['sticky', 'className', 'align', 'links'],
+    },
+  ],
+  properties: {
+    sticky: {
+      title: 'Sticky',
+      type: 'boolean',
+      default: true,
+    },
+    className: {
+      title: 'Class',
+      widget: 'textarea',
+    },
+    align: {
+      title: 'Align',
+      choices: [
+        ['flex-start', 'Left'],
+        ['flex-end', 'Right'],
+        ['center', 'Center'],
+      ],
+      defaultValue: 'flex-start',
+    },
+    links: {
+      title: 'Links',
+      schema: linksSchema(),
+      widget: 'object_list',
+    },
+  },
+  required: [],
+});

package/src/components/manage/Blocks/NavigationAnchors/styles.less

@@ -0,0 +1,104 @@
+div#view .ui.container > .sticky-navigation-anchors {
+  &.is-sticky {
+    margin-bottom: 0;
+  }
+
+  &:not(.is-sticky):first-child {
+    margin-top: 1rem;
+  }
+
+  margin-bottom: 1rem;
+
+  .ui.menu {
+    margin-bottom: 0;
+  }
+}
+
+.sticky-navigation-anchors {
+  &.is-sticky {
+    .navigation-anchors {
+      background-color: #fff;
+      -webkit-box-shadow: 0px 0px 10px -5px #000000;
+      box-shadow: 0px 0px 10px -5px #000000;
+    }
+  }
+}
+
+.navigation-anchors {
+  padding: 1rem 0;
+
+  .ui.container > .ui.menu {
+    border: 0;
+    box-shadow: none;
+    overflow-x: auto;
+
+    .item {
+      padding: 1rem;
+      background: none;
+      color: #000;
+      font-family: 'Raleway', sans-serif;
+      font-weight: normal;
+
+      p,
+      a {
+        position: relative;
+        color: #000;
+        font-size: 16px;
+        font-weight: normal;
+
+        &:hover {
+          opacity: 0.9;
+        }
+
+        &[target='_blank']::after {
+          position: absolute;
+          right: -6px;
+          width: 16px;
+          height: 16px;
+          background-image: url('./assets/external.png');
+          background-repeat: no-repeat;
+          background-size: contain;
+          content: '';
+          line-height: 16px;
+          transform: translateX(16px);
+        }
+      }
+
+      &.active {
+        p,
+        a {
+          color: #04a87d;
+        }
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  &.natura-2000 {
+    .ui.container > .ui.menu {
+      .item {
+        &.active {
+          p,
+          a {
+            color: #3b7f02;
+            font-weight: bold;
+          }
+        }
+
+        &:hover {
+          p,
+          a {
+            color: #3b7f02;
+          }
+        }
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/SimpleDataTable/index.js

@@ -0,0 +1,16 @@
+import { ColoredTableView, coloredTableSchema } from './templates/colored';
+
+export default (config) => {
+  config.blocks.blocksConfig.simpleDataConnectedTable = {
+    ...config.blocks.blocksConfig.simpleDataConnectedTable,
+    templates: {
+      ...config.blocks.blocksConfig.simpleDataConnectedTable.templates,
+      colored_table_v2: {
+        title: 'Colored table v2',
+        view: ColoredTableView,
+        schema: coloredTableSchema,
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/SimpleDataTable/templates/colored/View.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Table, Menu } from 'semantic-ui-react';
+import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components';
+import cx from 'classnames';
+
+import leftSVG from '@plone/volto/icons/left-key.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+
+import './style.less';
+
+const View = (props) => {
+  const {
+    data = {},
+    getAlignmentOfColumn,
+    getNameOfColumn,
+    getTitleOfColumn,
+    has_pagination,
+    pagination = {},
+    placeholder,
+    row_size,
+    selectedColumns,
+    show_header,
+    tableData,
+    updatePagination = () => {},
+  } = props;
+
+  const { td_color = [] } = data;
+
+  const getColorOfField = (field, index) => {
+    return td_color?.filter(
+      (td) => td.label === tableData[field.column][index],
+    )[0]?.color;
+  };
+
+  return (
+    <div className="colored-table-v2">
+      {row_size ? (
+        <Table
+          textAlign="left"
+          striped={data.striped}
+          className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+        >
+          {show_header ? (
+            <Table.Header>
+              <Table.Row>
+                {td_color && td_color.length > 0 && <Table.HeaderCell />}
+                {selectedColumns.map((colDef, j) => (
+                  <Table.HeaderCell
+                    key={getNameOfColumn(colDef)}
+                    className={getAlignmentOfColumn(colDef, j)}
+                  >
+                    {getTitleOfColumn(colDef)}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : null}
+          <Table.Body>
+            {Array(Math.max(0, row_size))
+              .fill()
+              .map((_, i) => (
+                <Table.Row key={i}>
+                  {selectedColumns.map((colDef, j) => {
+                    const color = getColorOfField(colDef, i);
+                    return (
+                      <Table.Cell
+                        className={cx({ colored: !!color })}
+                        key={`${i}-${getNameOfColumn(colDef)}`}
+                        textAlign={getAlignmentOfColumn(colDef, j)}
+                        style={color ? { color } : {}}
+                      >
+                        {color ? (
+                          <span
+                            style={{ backgroundColor: color }}
+                            className="bullet"
+                          />
+                        ) : (
+                          ''
+                        )}
+                        <RenderComponent
+                          tableData={tableData}
+                          colDef={colDef}
+                          row={i}
+                          {...props}
+                        />
+                      </Table.Cell>
+                    );
+                  })}
+                </Table.Row>
+              ))}
+          </Table.Body>
+          {has_pagination ? (
+            <Table.Footer>
+              <Table.Row>
+                <Table.HeaderCell
+                  colSpan={selectedColumns.length}
+                  style={{ textAlign: 'center' }}
+                >
+                  <Menu pagination>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={props.isPending || pagination.activePage === 1}
+                      onClick={() => {
+                        if (pagination.activePage > 1) {
+                          updatePagination({
+                            activePage: pagination.activePage - 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={leftSVG} size="24px" />
+                    </Menu.Item>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={
+                        props.isPending ||
+                        pagination.activePage === pagination.lastPage
+                      }
+                      onClick={() => {
+                        if (row_size === pagination.itemsPerPage) {
+                          updatePagination({
+                            activePage: pagination.activePage + 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={rightSVG} size="24px" />
+                    </Menu.Item>
+                  </Menu>
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Footer>
+          ) : null}
+        </Table>
+      ) : (
+        // TODO: find a better solution to keep headers
+        <Table
+          textAlign="left"
+          striped={data.striped}
+          className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+        >
+          {show_header ? (
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell />
+                {data?.columns?.map((header) => (
+                  <Table.HeaderCell
+                    key={header.column}
+                    className={header.textAlign || 'left'}
+                  >
+                    <p>{header.title}</p>
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : null}
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell className="colored-cell">
+                <span />
+              </Table.Cell>
+              <Table.Cell colSpan={data?.columns?.length || 1}>
+                <p>{placeholder}</p>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SimpleDataTable/templates/colored/index.js

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

package/src/components/manage/Blocks/SimpleDataTable/templates/colored/schema.js

@@ -0,0 +1,56 @@
+import config from '@plone/volto/registry';
+
+const colorSchema = (props) => {
+  return {
+    title: 'Color',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['label', 'color'],
+      },
+    ],
+
+    properties: {
+      label: {
+        title: 'Label',
+        type: 'string',
+      },
+      color: {
+        title: 'Color',
+        widget: 'simple_color',
+        available_colors:
+          config.blocks.blocksConfig.simpleDataConnectedTable.available_colors,
+      },
+    },
+
+    required: [],
+  };
+};
+
+const coloredTableSchema = (props) => {
+  return {
+    title: 'Colored datatable v2',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['td_color'],
+      },
+    ],
+
+    properties: {
+      td_color: {
+        title: 'Table rows color',
+        widget: 'objectlist',
+        schema: colorSchema(props),
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default coloredTableSchema;

package/src/components/manage/Blocks/SimpleDataTable/templates/colored/style.less

@@ -0,0 +1,54 @@
+.simple-data-table {
+  .colored-table-v2 {
+    table {
+      overflow: hidden;
+      width: auto;
+      background: #fff !important;
+      border-collapse: separate !important;
+      border-radius: 12px !important;
+
+      thead,
+      td {
+        background-color: #fff;
+      }
+
+      th {
+        font-weight: bold !important;
+
+        &:after {
+          padding: 0;
+          border: none;
+        }
+      }
+
+      th,
+      td {
+        border-bottom: 1px solid transparent !important;
+      }
+
+      td.colored {
+        display: flex;
+        align-items: center;
+        margin-left: 1rem;
+
+        .bullet {
+          display: block;
+          width: 16px;
+          height: 16px;
+          margin-right: 0.5rem;
+          border-radius: 50%;
+        }
+
+        > * {
+          line-height: 1;
+        }
+      }
+
+      tbody {
+        td {
+          height: 46px;
+        }
+      }
+    }
+  }
+}