Prepare for dynamic filters

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;

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,
+});

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;

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 PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 
-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 (
-    <form onSubmit={onSubmit}>
+    <Div>
-      <Div>
+      <Remove type="button" />
-        <InputSelect
+      <InputSelect
-          onChange={() => {}}
+        onChange={() => {}}
-          name=""
+        name=""
-          value=""
+        value=""
-          selectOptions={[]}
+        selectOptions={[]}
-          style={{ minHeight: '30px', minWidth: '170px', maxWidth: '200px' }}
+        style={{ minHeight: '30px', minWidth: '170px', maxWidth: '200px' }}
-        />
+      />
 
-        <InputSelect
+      <InputSelect
-          onChange={() => {}}
+        onChange={() => {}}
-          name=""
+        name=""
-          value=""
+        value=""
-          selectOptions={[]}
+        selectOptions={FILTER_TYPES}
-          style={{ minHeight: '30px', minWidth: '130px', maxWidth: '160px', marginLeft: '10px', marginRight: '10px' }}
+        style={{ minHeight: '30px', minWidth: '130px', maxWidth: '160px', marginLeft: '10px', marginRight: '10px' }}
-        />
+      />
 
-        <InputText
+      <InputText
-          onChange={() => {}}
+        onChange={() => {}}
-          name=""
+        name=""
-          value=""
+        value="ezez"
-          selectOptions={[]}
+        selectOptions={[]}
-          style={{ height: '30px', width: '200px', marginRight: '10px' }}
+        style={{ height: '30px', width: '200px', marginRight: '10px' }}
-        />
+      />
 
-        <Button type="submit" style={{ marginTop: '.9rem' }}>
+      <Add type="button" />
-          <FormattedMessage id="content-manager.components.FilterOptions.button.apply" />
+    </Div>
-        </Button>
-      </Div>
-    </form>
   );
 }
 
-FilterOptions.defaultProps = {
+FilterOptions.defaultProps = {};
-  onSubmit: (e) => {
-    e.preventDefault();
-  },
-};
 
-FilterOptions.propTypes = {
+FilterOptions.propTypes = {};
-  onSubmit: PropTypes.func,
-};
 
 export default FilterOptions;

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;

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 FILTER = { model: '', filter: '', value: '', attrType: 'string' };
-  const title = () => (
+
+class FiltersPickWrapper extends React.PureComponent {
+  state = { filters: this.props.appliedFilters.concat(FILTER) };
+
+  renderTitle = () => (
     <FormattedMessage id="content-manager.components.FiltersPickWrapper.PluginHeader.title.filter">
       {message => (
         <span>
-          {modelName}&nbsp;-&nbsp;
+          {this.props.modelName}&nbsp;-&nbsp;
           <span style={spanStyle}>
             {message}
           </span>
@@ -35,64 +41,38 @@ function FiltersPickWrapper({ actions, modelName, show }) {
     </FormattedMessage>
   );
 
-  return (
+  render() {
-    <SlideDown on={show}>
+    const { actions, show } = this.props;
-      <Div>
+    return (
-        <div>
+      <SlideDown on={show}>
-          <PluginHeader
+        <Div>
-            actions={actions}
+          <div>
-            description={{
+            <PluginHeader
-              id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
+              actions={actions}
-            }}
+              description={{
-            title={title}
+                id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
-          />
+              }}
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto deleniti
+              title={this.renderTitle()}
-          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
+            <div style={{ marginTop: '-10px' }}>
-          in quis similique, tenetur unde, vero. Atque dignissimos eaque esse ex, fuga hic id ipsam
+              {this.state.filters.map((filter, key) => <FilterOptions key={key} filter={filter} />)}
-          mollitia, odit officia perferendis quos ratione repudiandae sed suscipit tenetur vero
+            </div>
-          voluptas voluptatibus. Asperiores blanditiis eos esse explicabo fuga illo iure libero
+          </div>
-          molestias pariatur quia quibusdam quis sequi totam vel, voluptas. Aliquam beatae dolor
+        </Div>
-          ducimus in, laborum laudantium magnam quae quasi quia, quo, quos soluta tempora tempore
+      </SlideDown>
-          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.
-        </div>
-      </Div>
-    </SlideDown>
-  );
 }
 
 FiltersPickWrapper.defaultProps = {
   actions: [],
+  appliedFilters: [],
   modelName: '',
 };
 
 FiltersPickWrapper.propTypes = {
   actions: PropTypes.array,
+  appliedFilters: PropTypes.array,
   modelName: PropTypes.string,
   show: PropTypes.bool.isRequired,
 };

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 (
       <div>
         <FiltersPickWrapper
+          appliedFilters={appliedFilters}
           modelName={this.getCurrentModelName()}
           show={showFilter}
         />

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,

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",

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",