Added List block

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

@@ -18,16 +18,8 @@
   margin-bottom: 1em;
 }
 
-.detailed-link-container .detailed-link-button:not(.solid) {
+.detailed-link-container .detailed-link-button {
   display: inline-block;
-  border: 1px solid #32536B;
-  color: #32536B;
-  box-sizing: border-box;
-  border-radius: 30px;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 18px;
-  padding: 1em 2em;
 }
 
 .detailed-link-container .detailed-link-placeholder {

src/components/manage/Blocks/DiscodataComponents/List/Edit.jsx

@@ -3,16 +3,15 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import _uniqueId from 'lodash/uniqueId';
 import View from './View';
-import { settings } from '~/config';
-import { isArray, isObject } from 'lodash';
+import { isArray } from 'lodash';
 
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { SidebarPortal } from '@plone/volto/components';
 
-import { makeSelectSchema } from '../schema';
+import { makeListSchema } from '../schema';
 
 const getSchema = (props) => {
-  return makeSelectSchema(props);
+  return makeListSchema(props);
 };
 
 const Edit = (props) => {
@@ -80,18 +79,20 @@ const Edit = (props) => {
   }, []);
 
   useEffect(() => {
-    updateDiscodataValues(mounted);
-    /* eslint-disable-next-line */
-  }, [props.discodata_query.search, props.discodata_resources.data]);
-
-  useEffect(() => {
-    const schema = getSchema({ ...props, discodataValues });
+    const schema = getSchema({
+      ...props,
+      discodataValues: updateDiscodataValues(mounted),
+    });
     setState({
       ...state,
       schema,
     });
     /* eslint-disable-next-line */
-  }, [discodataValues, props.data.isLink]);
+  }, [
+    JSON.stringify(props.discodata_query.search),
+    JSON.stringify(props.discodata_resources.data),
+    JSON.stringify(props.data),
+  ]);
 
   return (
     <div>

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

@@ -2,67 +2,66 @@
 import React, { useEffect, useState } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { isArray } from 'lodash';
-import { Dropdown } from 'semantic-ui-react';
+import { isArray, isDate } from 'lodash';
+import { Link } from 'react-router-dom';
 import { setQueryParam } from 'volto-datablocks/actions';
-
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import moment from 'moment';
 import cx from 'classnames';
+import './style.css';
 
 const components = {
-  select: (
-    options,
+  list: (
+    key,
+    link,
     queryParameters,
+    collection = [],
     search,
     setQueryParam,
-    placeholder,
+    limit,
     className,
     mode,
   ) => {
-    let activeValue = '';
-    if (queryParameters[0]?.queryParameterToSet) {
-      activeValue = search[queryParameters[0].queryParameterToSet];
-    }
     return (
-      <div className={cx(className, mode === 'edit' ? 'pa-1' : '')}>
-        <Dropdown
-          selection
-          onChange={(event, data) => {
-            const queryParametersToSet = {};
-            queryParameters.forEach((queryParam) => {
-              queryParametersToSet[
-                queryParam.queryParameterToSet
-              ] = data.options.filter((opt) => {
-                return opt.value === data.value;
-              })[0]?.[queryParam.selectorOptionKey];
-            });
-            setQueryParam({
-              queryParam: {
-                ...(queryParametersToSet || {}),
-              },
-            });
-          }}
-          placeholder={placeholder}
-          options={options}
-          value={activeValue}
-        />
+      <div className="discodata-list">
+        {collection.slice(0, limit || collection.length).map((item) => (
+          <Link
+            key={`item-${item[key]}`}
+            className={cx('', className)}
+            as="a"
+            to={link}
+            onClick={() => {
+              const queries = {};
+              queryParameters.forEach((queryParameter) => {
+                queries[queryParameter.queryParameterToSet] =
+                  item[queryParameter.selectorOptionKey];
+              });
+              setQueryParam({
+                queryParam: { ...queries },
+              });
+            }}
+          >
+            {item[key]}
+          </Link>
+        ))}
       </div>
     );
   },
 };
 
 const View = ({ content, ...props }) => {
+  const [packages, setPackages] = useState([]);
   const [discodataValues, setDiscodataValues] = useState([]);
   const [mounted, setMounted] = useState(false);
   const { data } = props;
   const { resources = [], subResources = [] } = data;
-  const { placeholder = 'Select', className = '' } = data;
-  const { key = '', value = '', text = '', queryParametersToSet = [] } = data;
-
-  const options = discodataValues.map((discodata, index) => ({
-    key: discodata[key] || index,
-    value: discodata[value] || index,
-    text: discodata[text] || index,
-  }));
+  const { className = '' } = data;
+  const {
+    key = '',
+    link = '/',
+    queryParametersToSet = [],
+    limit = null,
+  } = data;
 
   const updateDiscodataValues = (mounted) => {
     if (props.discodata_resources && props.search && mounted) {
@@ -106,8 +105,35 @@ const View = ({ content, ...props }) => {
     }
   };
 
+  const updatePackages = (mounted) => {
+    if (props.discodata_resources && props.search && mounted) {
+      let newDiscodataValues = [];
+      const selectedSubResources = subResources.map((subResource) => {
+        const keyValue = subResource.package?.split('@') || [null, null];
+        return {
+          package: keyValue[0],
+          query: keyValue[1],
+        };
+      });
+      selectedSubResources.forEach((subResource) => {
+        const discodataPackage = resources.filter(
+          (resource) => resource.package === subResource.package,
+        )[0];
+        if (props.search[discodataPackage.queryParameter]) {
+          newDiscodataValues.push(
+            props.discodata_resources[discodataPackage.package]?.[
+              props.search[discodataPackage.queryParameter]
+            ]?.[subResource.query],
+          );
+        }
+      });
+      setPackages(newDiscodataValues);
+    }
+  };
+
   useEffect(() => {
     setMounted(true);
+    updatePackages(true);
     if (props.mode !== 'edit') {
       updateDiscodataValues(true);
     } else {
@@ -117,26 +143,31 @@ const View = ({ content, ...props }) => {
   }, []);
 
   useEffect(() => {
+    updatePackages(mounted);
     if (props.mode !== 'edit') {
       updateDiscodataValues(mounted);
     } else {
       setDiscodataValues(props.discodataValues);
     }
     /* eslint-disable-next-line */
-  }, [props.search, props.discodata_resources])
+  }, [props.search, props.discodata_resources, props.discodataValues])
 
 
   return (
     <>
-      {components.select(
-        options,
-        queryParametersToSet,
-        props.search,
-        props.setQueryParam,
-        placeholder,
-        className,
-        props.mode,
-      )}
+      {components['list']
+        ? components['list'](
+            key,
+            link,
+            queryParametersToSet,
+            discodataValues,
+            props.search,
+            props.setQueryParam,
+            limit,
+            className,
+            props.mode,
+          )
+        : ''}
     </>
   );
 };

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

@@ -0,0 +1,4 @@
+.discodata-list a {
+  display: inline-block;
+  margin: 0.3em;
+}

src/components/manage/Blocks/DiscodataComponents/schema.jsx

@@ -70,7 +70,7 @@ export const getQueryParametersSchema = (props) => {
   };
 };
 
-export const getQueryParametersToSetSchema = (props) => {
+export const getQueryParametersToSetSchema = (props, keys = null) => {
   return {
     title: 'Query parameter',
     fieldsets: [
@@ -84,11 +84,13 @@ export const getQueryParametersToSetSchema = (props) => {
       selectorOptionKey: {
         title: 'Selector option key',
         type: 'array',
-        choices: [
-          ['key', 'Key'],
-          ['value', 'Value'],
-          ['text', 'Text'],
-        ],
+        choices: !keys
+          ? [
+              ['key', 'Key'],
+              ['value', 'Value'],
+              ['text', 'Text'],
+            ]
+          : keys,
       },
       queryParameterToSet: {
         title: 'Query parameter to set',
@@ -419,55 +421,33 @@ export const makeListSchema = (props) => {
     isObject(discodataValues[0])
       ? makeChoices(Object.keys(discodataValues[0]))
       : [];
-  const schemaTitle = 'Text';
+  const schemaTitle = 'List';
   const schemaFieldsets = [
-    {
-      id: 'additional',
-      title: 'Additional',
-      fields: ['queryParameters'],
-    },
     {
       id: 'settings',
       title: 'Settings',
-      fields: [
-        'key',
-        'value',
-        'text',
-        'queryParametersToSet',
-        'placeholder',
-        'className',
-      ],
+      fields: ['key', 'link', 'queryParametersToSet', 'limit', 'className'],
     },
   ];
   const schemaProperties = {
-    queryParameters: {
-      title: 'Query parameters',
-      widget: 'query_param_list',
-      schema: getQueryParametersSchema(props),
-    },
     key: {
-      title: 'Selector key',
+      title: 'Key',
       type: 'array',
       choices: discodataKeys || [],
     },
-    value: {
-      title: 'Selector value',
-      type: 'array',
-      choices: discodataKeys || [],
-    },
-    text: {
-      title: 'Selector text',
-      type: 'array',
-      choices: discodataKeys || [],
+    link: {
+      title: 'Page',
+      widget: 'object_by_path',
     },
     queryParametersToSet: {
       title: 'Query parameters',
       widget: 'object_list',
-      schema: getQueryParametersToSetSchema(props),
+      schema: getQueryParametersToSetSchema(props, discodataKeys),
     },
-    placeholder: {
-      title: 'Placeholder',
-      widget: 'text',
+    limit: {
+      title: 'Limit',
+      type: 'number',
+      minimum: '0',
     },
     className: {
       title: 'Class name',

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

@@ -403,9 +403,9 @@ const renderComponents = {
       },
     ];
     return (
-      <div className="eprtrSelection">
+      <div className="custom-selector big red">
         <Header as="h1">Industrial pollution in</Header>
-        <div className="selector-container display-flex flex-flow-column">
+        <div className="selector-container display-flex flex-flow-row">
           {items && (
             <Dropdown
               selection

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

@@ -471,7 +471,7 @@ a.small h1 {
 .custom-selector.big .ui.selection.dropdown > .dropdown.icon {
   font-size: 30px !important;
   line-height: 39px;
-  padding: 10px 0;
+  margin-right: 1em;
 }
 
 .custom-selector.big .ui.selection.dropdown > .default.text,
@@ -480,7 +480,6 @@ a.small h1 {
   font-weight: bold;
   font-size: 30px;
   line-height: 39px;
-  padding: 10px;
 }
 
 .custom-selector.red h1.ui.header,

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

@@ -271,7 +271,7 @@ class View extends Component {
               : null
           }
         />
-        {RenderedView ? (
+        {RenderedView && RenderedView !== -1 ? (
           <RenderedView
             content={this.props.content}
             location={this.props.location}