From b89135a82196c907ba0282961f3573bb0337f5a5 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 10 Sep 2020 22:27:20 +0300 Subject: [PATCH] Added List block --- .../manage/Blocks/DetailedLink/style.css | 10 +- .../Blocks/DiscodataComponents/List/Edit.jsx | 23 +-- .../Blocks/DiscodataComponents/List/View.jsx | 131 +++++++++++------- .../Blocks/DiscodataComponents/List/style.css | 4 + .../Blocks/DiscodataComponents/schema.jsx | 58 +++----- .../Blocks/DiscodataComponentsBlock/View.jsx | 4 +- .../Blocks/DiscodataComponentsBlock/style.css | 3 +- .../volto/components/theme/View/View.jsx | 2 +- src/localconfig.js | 12 ++ theme/site/globals/site.overrides | 4 +- 10 files changed, 135 insertions(+), 116 deletions(-) create mode 100644 src/components/manage/Blocks/DiscodataComponents/List/style.css diff --git a/src/components/manage/Blocks/DetailedLink/style.css b/src/components/manage/Blocks/DetailedLink/style.css index b40aa952..1d26290e 100644 --- a/src/components/manage/Blocks/DetailedLink/style.css +++ b/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 { diff --git a/src/components/manage/Blocks/DiscodataComponents/List/Edit.jsx b/src/components/manage/Blocks/DiscodataComponents/List/Edit.jsx index 16481ae3..2c390f91 100644 --- a/src/components/manage/Blocks/DiscodataComponents/List/Edit.jsx +++ b/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 (
diff --git a/src/components/manage/Blocks/DiscodataComponents/List/View.jsx b/src/components/manage/Blocks/DiscodataComponents/List/View.jsx index 7397f9e9..e8c1e52c 100644 --- a/src/components/manage/Blocks/DiscodataComponents/List/View.jsx +++ b/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 ( -
- { - 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} - /> +
+ {collection.slice(0, limit || collection.length).map((item) => ( + { + const queries = {}; + queryParameters.forEach((queryParameter) => { + queries[queryParameter.queryParameterToSet] = + item[queryParameter.selectorOptionKey]; + }); + setQueryParam({ + queryParam: { ...queries }, + }); + }} + > + {item[key]} + + ))}
); }, }; 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, + ) + : ''} ); }; diff --git a/src/components/manage/Blocks/DiscodataComponents/List/style.css b/src/components/manage/Blocks/DiscodataComponents/List/style.css new file mode 100644 index 00000000..16f7b3e9 --- /dev/null +++ b/src/components/manage/Blocks/DiscodataComponents/List/style.css @@ -0,0 +1,4 @@ +.discodata-list a { + display: inline-block; + margin: 0.3em; +} \ No newline at end of file diff --git a/src/components/manage/Blocks/DiscodataComponents/schema.jsx b/src/components/manage/Blocks/DiscodataComponents/schema.jsx index ebe52b4d..ff42b914 100644 --- a/src/components/manage/Blocks/DiscodataComponents/schema.jsx +++ b/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', diff --git a/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx b/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx index 40088df9..fcd95549 100644 --- a/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx +++ b/src/components/manage/Blocks/DiscodataComponentsBlock/View.jsx @@ -403,9 +403,9 @@ const renderComponents = { }, ]; return ( -
+
Industrial pollution in
-
+
{items && ( .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, diff --git a/src/customizations/volto/components/theme/View/View.jsx b/src/customizations/volto/components/theme/View/View.jsx index 42a087b4..31fb4db9 100644 --- a/src/customizations/volto/components/theme/View/View.jsx +++ b/src/customizations/volto/components/theme/View/View.jsx @@ -271,7 +271,7 @@ class View extends Component { : null } /> - {RenderedView ? ( + {RenderedView && RenderedView !== -1 ? (