From 6c14dbf8fa1cf3de46a1bf99dbb7e7490ca8ca6e Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 17 May 2018 17:57:45 +0200 Subject: [PATCH] Prepare for dynamic filters --- .../admin/src/components/FilterOptions/Add.js | 12 ++ .../src/components/FilterOptions/Loadable.js | 8 ++ .../src/components/FilterOptions/Remove.js | 12 ++ .../src/components/FilterOptions/index.js | 106 +++++++++++------- .../src/components/FilterOptionsCTA/index.js | 14 +++ .../components/FiltersPickWrapper/index.js | 84 ++++++-------- .../admin/src/containers/ListPage/index.js | 3 +- .../admin/src/containers/ListPage/reducer.js | 1 + .../admin/src/translations/en.json | 9 ++ .../admin/src/translations/fr.json | 9 ++ 10 files changed, 165 insertions(+), 93 deletions(-) create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Add.js create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Loadable.js create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Remove.js create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Add.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Add.js new file mode 100644 index 0000000000..692a86813e --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Add.js @@ -0,0 +1,12 @@ +import FilterOptionsCTA from 'components/FilterOptionsCTA'; + +const Add = FilterOptionsCTA.extend` + &:after { + content: '\f067'; + font-family: FontAwesome; + font-size: 9px; + color: #007EFF; + } +`; + +export default Add; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Loadable.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Loadable.js new file mode 100644 index 0000000000..caed2adc89 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Loadable.js @@ -0,0 +1,8 @@ +import Loadable from 'react-loadable'; + +import LoadingIndicator from 'components/LoadingIndicator'; + +export default Loadable({ + loader: () => import('./index'), + loading: LoadingIndicator, +}); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Remove.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Remove.js new file mode 100644 index 0000000000..f516206f71 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Remove.js @@ -0,0 +1,12 @@ +import FilterOptionsCTA from 'components/FilterOptionsCTA'; + +const Remove = FilterOptionsCTA.extend` + &:after { + content: '\f068'; + font-family: FontAwesome; + font-size: 9px; + color: #007EFF; + } +`; + +export default Remove; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js index c7ab565eba..92fda0238d 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js @@ -5,59 +5,85 @@ */ import React from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; +// import PropTypes from 'prop-types'; -import Button from 'components/CustomButton'; import InputSelect from 'components/InputSelect'; import InputText from 'components/InputText'; +import Add from './Add'; import Div from './Div'; +import Remove from './Remove'; -function FilterOptions({ onSubmit }) { +const FILTER_TYPES = [ + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.equals', + value: '=', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.not_equals', + value: '_ne', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.lower', + value: '_lt', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.lower_equal', + value: '_lte', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.greater', + value: '_gt', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.greater_equal', + value: '_gte', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.contains', + value: '_contains', + }, + { + id: 'content-manager.components.FilterOptions.FILTER_TYPES.containss', + value: '_containss', + }, +]; + +function FilterOptions() { return ( -
-
- {}} - name="" - value="" - selectOptions={[]} - style={{ minHeight: '30px', minWidth: '170px', maxWidth: '200px' }} - /> +
+ + {}} + name="" + value="" + selectOptions={[]} + style={{ minHeight: '30px', minWidth: '170px', maxWidth: '200px' }} + /> - {}} - name="" - value="" - selectOptions={[]} - style={{ minHeight: '30px', minWidth: '130px', maxWidth: '160px', marginLeft: '10px', marginRight: '10px' }} - /> + {}} + name="" + value="" + selectOptions={FILTER_TYPES} + style={{ minHeight: '30px', minWidth: '130px', maxWidth: '160px', marginLeft: '10px', marginRight: '10px' }} + /> - {}} - name="" - value="" - selectOptions={[]} - style={{ height: '30px', width: '200px', marginRight: '10px' }} - /> + {}} + name="" + value="ezez" + selectOptions={[]} + style={{ height: '30px', width: '200px', marginRight: '10px' }} + /> - -
- + +
); } -FilterOptions.defaultProps = { - onSubmit: (e) => { - e.preventDefault(); - }, -}; +FilterOptions.defaultProps = {}; -FilterOptions.propTypes = { - onSubmit: PropTypes.func, -}; +FilterOptions.propTypes = {}; export default FilterOptions; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js new file mode 100644 index 0000000000..70434b1397 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptionsCTA/index.js @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +const FilterOptionsCTA = styled.button` + display: flex; + justify-content: center; + height: 20px; + width: 20px; + margin: 14px 10px 0px 0px; + border-radius: 50%; + border: 2px solid #E3E9F3; + cursor: pointer; +`; + +export default FilterOptionsCTA; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js index 8987f51be1..f562e6ddb6 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js @@ -7,6 +7,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; +import FilterOptions from 'components/FilterOptions/Loadable'; + // You can find these components in either // ./node_modules/strapi-helper-plugin/lib/src // or strapi/packages/strapi-helper-plugin/lib/src @@ -21,12 +23,16 @@ const spanStyle = { fontWeight: '500', }; -function FiltersPickWrapper({ actions, modelName, show }) { - const title = () => ( +const FILTER = { model: '', filter: '', value: '', attrType: 'string' }; + +class FiltersPickWrapper extends React.PureComponent { + state = { filters: this.props.appliedFilters.concat(FILTER) }; + + renderTitle = () => ( {message => ( - {modelName} -  + {this.props.modelName} -  {message} @@ -35,64 +41,38 @@ function FiltersPickWrapper({ actions, modelName, show }) { ); - return ( - -
-
- - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto deleniti - dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit rerum - sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum impedit - in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic id ipsam - mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur vero - voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero - molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor - ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore - totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto - deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit - rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum - impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic - id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur - vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero - molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor - ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore - totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto - deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit - rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum - impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic - id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur - vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero - molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor - ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore - totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto - deleniti dolor doloribus enim hic illo iste non, numquam quas quod repellat reprehenderit - rerum sunt, totam vel vero voluptates! Adipisci commodi distinctio eos esse, est harum - impedit in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic - id ipsam mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur - vero voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero - molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor - ducimus in, - laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore - totam. -
-
- - ); + render() { + const { actions, show } = this.props; + return ( + +
+
+ +
+ {this.state.filters.map((filter, key) => )} +
+
+
+ + ); + } } FiltersPickWrapper.defaultProps = { actions: [], + appliedFilters: [], modelName: '', }; FiltersPickWrapper.propTypes = { actions: PropTypes.array, + appliedFilters: PropTypes.array, modelName: PropTypes.string, show: PropTypes.bool.isRequired, }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js index d14683b00a..01301bc16b 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js @@ -231,7 +231,7 @@ export class ListPage extends React.Component { }; render() { - const { listPage, listPage: { params, showFilter } } = this.props; + const { listPage, listPage: { appliedFilters, params, showFilter } } = this.props; const pluginHeaderActions = [ { label: 'content-manager.containers.List.addAnEntry', @@ -252,6 +252,7 @@ export class ListPage extends React.Component { return (
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js index 2c0b4c51d9..b9bbdfb134 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js @@ -17,6 +17,7 @@ import { const initialState = fromJS({ count: 0, + appliedFilters: List([]), params: Map({ _limit: 10, _page: 1, diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/en.json b/packages/strapi-plugin-content-manager/admin/src/translations/en.json index d6b8b6eb46..a79482f6fc 100755 --- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json @@ -20,6 +20,15 @@ "components.FiltersPickWrapper.PluginHeader.description": "Set the conditions to apply to filter the entries", "components.FiltersPickWrapper.PluginHeader.title.filter": "Filters", + "components.FilterOptions.FILTER_TYPES.equals": "is", + "components.FilterOptions.FILTER_TYPES.not_equals": "is not", + "components.FilterOptions.FILTER_TYPES.lower": "lower than", + "components.FilterOptions.FILTER_TYPES.lower_equal": "lower than or equal to", + "components.FilterOptions.FILTER_TYPES.greater": "greater than", + "components.FilterOptions.FILTER_TYPES.greater_equal": "greater than or equal to", + "components.FilterOptions.FILTER_TYPES.contains": "contains", + "components.FilterOptions.FILTER_TYPES.containss": "containss", + "EditRelations.title": "Relational data", "emptyAttributes.title": "There are no fields yet", diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json index 9a258bec44..6373fe798b 100755 --- a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json @@ -21,6 +21,15 @@ "components.FiltersPickWrapper.PluginHeader.description": "Définissez les conditions des filtres à appliquer", "components.FiltersPickWrapper.PluginHeader.title.filter": "Filtres", + "components.FilterOptions.FILTER_TYPES.equals": "est", + "components.FilterOptions.FILTER_TYPES.not_equals": "n'est pas", + "components.FilterOptions.FILTER_TYPES.lower": "inférieur à", + "components.FilterOptions.FILTER_TYPES.lower_equal": "inférieur ou égal à", + "components.FilterOptions.FILTER_TYPES.greater": "supérieur à", + "components.FilterOptions.FILTER_TYPES.greater_equal": "supérieur ou égal à", + "components.FilterOptions.FILTER_TYPES.contains": "contient", + "components.FilterOptions.FILTER_TYPES.containss": "contientt", + "EditRelations.title": "Données associées", "emptyAttributes.title": "Il n'y a pas encore de champs",