Add actions to filterpicker

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/Div.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const Div = styled.div`
   display: flex;
+  margin-bottom: 6px;
 `;
 
 export default Div;

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js

@@ -37,7 +37,7 @@ const getInputType = (attrType) => {
   }
 };
 
-const defaultInputStyle = { height: '30px', width: '200px', marginRight: '10px' };
+const defaultInputStyle = { height: '30px', width: '200px', marginRight: '10px', paddingTop: '9px' };
 
 function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, schema, showAddButton }) {
   const selectStyle = { minHeight: '30px', minWidth: '170px', maxWidth: '200px' };

packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js

@@ -38,6 +38,28 @@ class FiltersPickWrapper extends React.PureComponent {
     }
   }
 
+  generateActions = () => ([
+    {
+      label: 'content-manager.components.FiltersPickWrapper.PluginHeader.actions.clearAll',
+      kind: 'secondary',
+      onClick: () => {
+        return new Promise(resolve => {
+          this.props.close();
+          setTimeout(() => {
+            this.props.removeAllFilters();
+            resolve();
+          }, 600);
+        });
+      },
+    },
+    {
+      label: 'content-manager.components.FiltersPickWrapper.PluginHeader.actions.apply',
+      kind: 'primary',
+      type: 'submit',
+      onClick: this.props.onSubmit,
+    },
+  ]);
+
   handleChange = ({ target }) => {
     const split = target.name.split('.');
     this.props.onChange(split[0], split[1], target.value);
@@ -57,6 +79,7 @@ class FiltersPickWrapper extends React.PureComponent {
       return new Promise(resolve => {
         setTimeout(() => {
           this.props.removeFilter(index);
+          this.props.onSubmit();
           resolve();
         }, 600);
       });
@@ -85,54 +108,56 @@ class FiltersPickWrapper extends React.PureComponent {
   );
 
   render() {
-    const { actions, appliedFilters, schema, show } = this.props;
+    const { appliedFilters, schema, show } = this.props;
 
     return (
-      <SlideDown on={show}>
+      <form onSubmit={this.handleSubmit}>
-        <Div>
+        <SlideDown on={show}>
-          <div>
+          <Div>
-            <PluginHeader
+            <div>
-              actions={actions}
+              <PluginHeader
-              description={{
+                actions={this.generateActions()}
-                id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
+                description={{
-              }}
+                  id: 'content-manager.components.FiltersPickWrapper.PluginHeader.description',
-              title={this.renderTitle()}
+                }}
-            />
+                title={this.renderTitle()}
-            <div style={{ marginTop: '-10px' }}>
+              />
-              {appliedFilters.map((filter, key) => (
+              <div style={{ marginTop: '-13px' }}>
-                <FilterOptions
+                {appliedFilters.map((filter, key) => (
-                  key={key}
+                  <FilterOptions
-                  filter={filter}
+                    key={key}
-                  index={key}
+                    filter={filter}
-                  onChange={this.handleChange}
+                    index={key}
-                  onClickAdd={this.handleClickAdd}
+                    onChange={this.handleChange}
-                  onClickRemove={this.handleClickRemove}
+                    onClickAdd={this.handleClickAdd}
-                  schema={schema}
+                    onClickRemove={this.handleClickRemove}
-                  showAddButton={this.shouldDisplayAddButton(key)}
+                    schema={schema}
-                />
+                    showAddButton={this.shouldDisplayAddButton(key)}
-              ))}
+                  />
+                ))}
+              </div>
             </div>
-          </div>
+          </Div>
-        </Div>
+        </SlideDown>
-      </SlideDown>
+      </form>
     );
   }
 }
 
 FiltersPickWrapper.defaultProps = {
-  actions: [],
   appliedFilters: [],
   modelName: '',
   schema: {},
 };
 
 FiltersPickWrapper.propTypes = {
-  actions: PropTypes.array,
   addFilter: PropTypes.func.isRequired,
   appliedFilters: PropTypes.array,
   close: PropTypes.func.isRequired,
   modelName: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  removeAllFilters: PropTypes.func.isRequired,
   removeFilter: PropTypes.func.isRequired,
   schema: PropTypes.object,
   show: PropTypes.bool.isRequired,

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js

@@ -13,8 +13,10 @@ import {
   GET_DATA_SUCCEEDED,
   ON_CHANGE,
   ON_TOGGLE_FILTERS,
+  REMOVE_ALL_FILTERS,
   REMOVE_FILTER,
   SET_PARAMS,
+  SUBMIT,
 } from './constants';
 
 export function addFilter(filter) {
@@ -78,6 +80,12 @@ export function onToggleFilters() {
   };
 }
 
+export function removeAllFilters() {
+  return {
+    type: REMOVE_ALL_FILTERS,
+  };
+}
+
 export function removeFilter(index) {
   return {
     type: REMOVE_FILTER,
@@ -91,3 +99,9 @@ export function setParams(params) {
     params,
   };
 }
+
+export function submit() {
+  return {
+    type: SUBMIT,
+  };
+}

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js

@@ -13,5 +13,7 @@ export const GET_DATA = 'ContentManager/ListPage/GET_DATA';
 export const GET_DATA_SUCCEEDED = 'ContentManager/ListPage/GET_DATA_SUCCEEDED';
 export const ON_CHANGE = 'ContentManager/ListPage/ON_CHANGE';
 export const ON_TOGGLE_FILTERS = 'ContentManager/ListPage/ON_TOGGLE_FILTERS';
+export const REMOVE_ALL_FILTERS = 'ContentManager/ListPage/REMOVE_ALL_FILTERS';
 export const REMOVE_FILTER = 'ContentManager/ListPage/REMOVE_FILTER';
 export const SET_PARAMS = 'ContentManager/ListPage/SET_PARAMS';
+export const SUBMIT = 'ContentManager/ListPage/SUBMIT';

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js

@@ -41,8 +41,10 @@ import {
   getData,
   onChange,
   onToggleFilters,
+  removeAllFilters,
   removeFilter,
   setParams,
+  submit,
 } from './actions';
 
 import reducer from './reducer';
@@ -248,6 +250,16 @@ export class ListPage extends React.Component {
     this.setState({ showWarning: false });
   };
 
+  handleSubmit = e => {
+    try {
+      e.preventDefault();
+    } catch(err) {
+      // Silent
+    } finally {
+      this.props.submit();
+    }
+  }
+
   toggleModalWarning = e => {
     if (!isUndefined(e)) {
       e.preventDefault();
@@ -267,6 +279,7 @@ export class ListPage extends React.Component {
       listPage: { appliedFilters, params, showFilter },
       onChange,
       onToggleFilters,
+      removeAllFilters,
       removeFilter,
     } = this.props;
     const pluginHeaderActions = [
@@ -294,6 +307,8 @@ export class ListPage extends React.Component {
           close={onToggleFilters}
           modelName={this.getCurrentModelName()}
           onChange={onChange}
+          onSubmit={this.handleSubmit}
+          removeAllFilters={removeAllFilters}
           removeFilter={removeFilter}
           schema={this.getCurrentSchema()}
           show={showFilter}
@@ -377,9 +392,11 @@ ListPage.propTypes = {
   models: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   onToggleFilters: PropTypes.func.isRequired,
+  removeAllFilters: PropTypes.func.isRequired,
   removeFilter: PropTypes.func.isRequired,
   schema: PropTypes.object.isRequired,
   setParams: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
 };
 
 function mapDispatchToProps(dispatch) {
@@ -391,8 +408,10 @@ function mapDispatchToProps(dispatch) {
       getData,
       onChange,
       onToggleFilters,
+      removeAllFilters,
       removeFilter,
       setParams,
+      submit,
     },
     dispatch,
   );

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js

@@ -14,13 +14,16 @@ import {
   GET_DATA_SUCCEEDED,
   ON_CHANGE,
   ON_TOGGLE_FILTERS,
+  REMOVE_ALL_FILTERS,
   REMOVE_FILTER,
   SET_PARAMS,
+  SUBMIT,
 } from './constants';
 
 const initialState = fromJS({
-  count: 0,
   appliedFilters: List([]),
+  count: 0,
+  filters: List([]),
   params: Map({
     _limit: 10,
     _page: 1,
@@ -56,10 +59,18 @@ function listPageReducer(state = initialState, action) {
       return state.updateIn(['appliedFilters', action.index, action.key], () => action.value);
     case ON_TOGGLE_FILTERS:
       return state.update('showFilter', v => !v);
+    case REMOVE_ALL_FILTERS:
+      return state
+        .update('appliedFilters', () => List([]))
+        .update('filters', () => List([]));
     case REMOVE_FILTER:
       return state.update('appliedFilters', list => list.splice(action.index, 1));
     case SET_PARAMS:
       return state.update('params', () => Map(action.params));
+    case SUBMIT:
+      return state
+        .update('filters', () => state.get('appliedFilters'))
+        .update('showFilter', () => false);
     default:
       return state;
   }

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -17,6 +17,8 @@
 
   "components.AddFilterCTA.add": "Add filter",
   "components.FilterOptions.button.apply": "Apply",
+  "components.FiltersPickWrapper.PluginHeader.actions.apply": "Apply",
+  "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Clear all",
   "components.FiltersPickWrapper.PluginHeader.description": "Set the conditions to apply to filter the entries",
   "components.FiltersPickWrapper.PluginHeader.title.filter": "Filters",
 

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -18,6 +18,8 @@
 
   "components.AddFilterCTA.add": "Ajouter un filtre",
   "components.FilterOptions.button.apply": "Appliquer",
+  "components.FiltersPickWrapper.PluginHeader.actions.apply": "Appliquer",
+  "components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Tout supprimer",
   "components.FiltersPickWrapper.PluginHeader.description": "Définissez les conditions des filtres à appliquer",
   "components.FiltersPickWrapper.PluginHeader.title.filter": "Filtres",
 

packages/strapi-plugin-content-manager/config/layout.json

@@ -8,5 +8,12 @@
         "appearance": ""
       }
     }
+  },
+  "fevzilyaguk": {
+    "attributes": {
+      "razeiugeryeizla": {
+        "appearance": ""
+      }
+    }
   }
 }