Update

src/components/manage/Blocks/List/View.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import cx from 'classnames';
+import qs from 'querystring';
+import { setQueryParam } from '@eeacms/volto-datablocks/actions';
+import './style.css';
+
+const getLength = (length = 0, limit = 0) => {
+  if (!length) return 0;
+  return limit < length ? limit : length;
+};
+
+const View = (props) => {
+  const { data = {} } = props;
+  const provider_data = props.provider_data || {};
+  const columns = getLength(
+    provider_data[Object.keys(provider_data)?.[0]]?.length,
+    data.limit,
+  );
+
+  return (
+    <>
+      {props.mode === 'edit' ? <p>Connected list</p> : ''}
+      <div className="connected-list">
+        {Array(Math.max(0, columns))
+          .fill()
+          .map((_, column) => {
+            const queries = {};
+            data.queries.forEach((query) => {
+              queries[query.paramToSet] = provider_data[query.param][column];
+            });
+
+            return (
+              <Link
+                key={`connected-list-${column}`}
+                to={`${data.url || '/'}?${qs.stringify(queries)}`}
+                className={cx(data.className)}
+                style={{
+                  display: 'inline-block',
+                  margin: '5px',
+                }}
+                onClick={() => {
+                  props.setQueryParam({
+                    queryParam: { ...queries },
+                  });
+                }}
+              >
+                {provider_data[data.value][column]}
+              </Link>
+            );
+          })}
+      </div>
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state) => ({
+      query: state.router.location.search,
+      search: state.discodata_query.search,
+    }),
+    { setQueryParam },
+  ),
+)(View);

src/components/manage/Blocks/List/index.js

@@ -0,0 +1,17 @@
+import ListView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      list: {
+        view: ListView,
+        getSchema: getSchema,
+        title: 'List',
+      },
+    },
+  };
+  return config;
+};

src/components/manage/Blocks/List/schema.js

@@ -0,0 +1,76 @@
+const getQuerySchema = (data) => {
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'Query',
+    fieldsets: [
+      { id: 'default', title: 'Default', fields: ['param', 'paramToSet'] },
+    ],
+    properties: {
+      param: {
+        title: 'Param',
+        type: 'array',
+        choices,
+      },
+      paramToSet: {
+        title: 'Param to set',
+        widget: 'textarea',
+      },
+    },
+    required: [],
+  };
+};
+
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'List',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['url', 'value', 'limit', 'className'],
+      },
+      {
+        id: 'advanced',
+        title: 'Advanced',
+        fields: ['queries'],
+      },
+    ],
+
+    properties: {
+      url: {
+        title: 'Url',
+        widget: 'object_by_path',
+      },
+      value: {
+        title: 'Value',
+        type: 'array',
+        choices,
+      },
+      limit: {
+        title: 'Limit',
+        type: 'number',
+        minimum: '0',
+        onBlur: () => null,
+        onClick: () => null,
+      },
+      className: {
+        title: 'Class',
+        widget: 'textarea',
+      },
+      queries: {
+        title: 'Queries',
+        widget: 'object_list',
+        schema: getQuerySchema(data),
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

src/components/manage/Blocks/List/style.css

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

src/components/manage/Blocks/Select/View.jsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { Dropdown } from 'semantic-ui-react';
+import cx from 'classnames';
+import { setQueryParam } from '@eeacms/volto-datablocks/actions';
+import './style.css';
+
+const items = [
+  {
+    title: 'Item 1',
+    parentId: null,
+  },
+  {
+    title: 'Item 2',
+    parentId: null,
+    items: [
+      {
+        title: 'Item 2.1',
+        parentId: 'Item 2',
+      },
+      {
+        title: 'Item 2.2',
+        parentId: 'Item 2',
+      },
+      {
+        title: 'Item 2.3',
+        parentId: 'Item 2',
+      },
+    ],
+  },
+  {
+    title: 'Item 3',
+    parentId: null,
+  },
+  {
+    title: 'Item 4',
+    parentId: null,
+    items: [
+      {
+        title: 'Item 4.1',
+        parentId: 'Item 4',
+        items: [
+          {
+            title: 'Item 4.1.1',
+            parentId: 'Item 4.1',
+          },
+        ],
+      },
+      {
+        title: 'Item 4.2',
+        parentId: 'Item 4',
+      },
+      {
+        title: 'Item 4.3',
+        parentId: 'Item 4',
+      },
+    ],
+  },
+];
+
+const activeItems = ['Item 4', 'Item 4.1', 'Item 4.1.1', 'Item 2'];
+
+const getVisibility = (activeItems, item) => {
+  return activeItems.indexOf(item.parentId) !== -1;
+};
+
+let collapsing = {
+  title: 'Item 4',
+  parentId: null,
+  items: [
+    {
+      title: 'Item 4.1',
+      parentId: 'Item 4',
+      items: [
+        {
+          title: 'Item 4.1.1',
+          parentId: 'Item 4.1',
+        },
+      ],
+    },
+    {
+      title: 'Item 4.2',
+      parentId: 'Item 4',
+    },
+    {
+      title: 'Item 4.3',
+      parentId: 'Item 4',
+    },
+  ],
+};
+
+// let test = ['Item 4', 'Item 4.1', 'Item 4.1.1', 'Item 4.2', 'Item 4.3'];
+
+const getIds = (item) => {
+  if (!item.items) return [item.title];
+  let children = [];
+  item.items.forEach((child) => {
+    children = [...children, ...getIds(child)];
+  });
+  return [item.title, ...children];
+};
+
+const collapsingItems = getIds(collapsing);
+
+collapsingItems.forEach((item) => {
+  const index = activeItems.indexOf(item);
+  if (index !== -1) {
+    activeItems.splice(index, 1);
+  }
+});
+console.log('HERE', activeItems);
+// activeItems.splice(activeItems.indexOf(collapsing.title), 1);
+
+const View = (props) => {
+  const [value, setValue] = React.useState(null);
+  const { data = {} } = props;
+  const provider_data = props.provider_data || {};
+  const columns = provider_data[Object.keys(provider_data)?.[0]]?.length || 0;
+
+  const options = Array(Math.max(0, columns))
+    .fill()
+    .map((_, column) => ({
+      key: provider_data[data.value][column],
+      value: provider_data[data.value][column],
+      text: provider_data[data.text][column],
+    }));
+
+  React.useEffect(() => {
+    if (!value && options.length) {
+      const cachedValue = data.queries.filter(
+        (query) => query.param === data.value,
+      )?.[0]?.paramToSet;
+      onChange(props.search[cachedValue] || options[0]?.value);
+    }
+    /* eslint-disable-next-line */
+  }, [provider_data]);
+
+  const onChange = (value) => {
+    let index;
+    const queries = {};
+    for (let i = 0; i < options.length; i++) {
+      if (options[i].value === value) {
+        index = i;
+        break;
+      }
+    }
+    data.queries.forEach((query) => {
+      queries[query.paramToSet] = provider_data[query.param][index];
+    });
+    setValue(value);
+    props.setQueryParam({
+      queryParam: {
+        ...queries,
+      },
+    });
+  };
+
+  return (
+    <>
+      {props.mode === 'edit' ? <p>Connected select</p> : ''}
+      <div className={cx('connected-select', data.className)}>
+        <Dropdown
+          selection
+          onChange={(_, data) => {
+            onChange(data.value);
+          }}
+          placeholder={data.placeholder}
+          options={options}
+          value={value}
+        />
+      </div>
+    </>
+  );
+};
+
+export default compose(
+  connect(
+    (state) => ({
+      query: state.router.location.search,
+      search: state.discodata_query.search,
+    }),
+    { setQueryParam },
+  ),
+)(View);

src/components/manage/Blocks/Select/index.js

@@ -0,0 +1,17 @@
+import SelectView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      select: {
+        view: SelectView,
+        getSchema: getSchema,
+        title: 'Select',
+      },
+    },
+  };
+  return config;
+};