Created PageFooter component

Component that handles the entries limit number and the page navigation

packages/strapi-admin/admin/src/translations/en.json

@@ -72,6 +72,8 @@
   "components.OverlayBlocker.title": "Waiting for restart...",
   "components.OverlayBlocker.description": "You're using a feature that needs the server to restart. Please wait until the server is up.",
 
+  "components.PageFooter.select": "entries per page",
+
   "components.ProductionBlocker.header": "This plugin is only available in development.",
   "components.ProductionBlocker.description": "For safety we have to disable this plugin in other environments.",
 

packages/strapi-admin/admin/src/translations/fr.json

@@ -73,6 +73,8 @@
 
   "components.ErrorBoundary.title": "Une erreur est survenue...",
 
+  "components.PageFooter.select": "entrées par page",
+
   "components.ProductionBlocker.header": "Ce plugin est disponible uniquement en développement.",
   "components.ProductionBlocker.description": "Pour des raisons de sécurité il est désactivé dans les autres environnements.",
 

packages/strapi-helper-plugin/lib/src/components/PageFooter/index.js

@@ -0,0 +1,47 @@
+/**
+ *
+ * PageFooter
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { get } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+
+import InputSelect from 'components/InputSelect';
+
+import styles from './styles.scss';
+
+function PageFooter(props) {
+  return (
+    <div className={cn('row', styles.pageFooter)}>
+      <div className="col-md-6 col-lg-6">
+        <form className="form-inline">
+          <div className={styles.pageFooterSelectWrapper}>
+            <select
+              className={`form-control ${styles.select}`}
+              name="params.limit"
+              onChange={props.onChangeParams}
+              value={get(props, ['params', 'limit'], 10)}
+            >
+              {[10, 20, 50, 100].map((value, key) => <option value={value} key={value}>{value}</option>)}
+            </select>
+          </div>
+          <label className={styles.pageFooterLabel} htmlFor="params.name">
+            <FormattedMessage id="components.PageFooter.select" />
+          </label>
+        </form>
+      </div>
+      <div className="col-md-6 col-lg-6">
+      </div>
+    </div>
+  );
+}
+
+PageFooter.defaultProps = {};
+
+PageFooter.propTypes = {};
+
+export default PageFooter;

packages/strapi-helper-plugin/lib/src/components/PageFooter/styles.scss

@@ -0,0 +1,35 @@
+.pageFooter {
+  margin-top: 2.5rem;
+  > div {
+    padding: 0;
+  }
+}
+
+.pageFooterLabel {
+  margin-left: 1rem;
+  padding-top: 3px;
+  color: #787E8F;
+  font-size: 13px;
+  font-style: italic;
+}
+
+.pageFooterSelectWrapper {
+  display: flex;
+
+  > select {
+    width: 75px !important;
+    padding-top: 0rem;
+    padding-left: 1rem;
+    padding-right: 3rem;
+    background-position: right -1px center;
+    background-repeat: no-repeat;
+    background-image: url('../../assets/images/background_input.svg');
+    border: 1px solid #E3E9F3;
+    border-radius: 0.25rem;
+    line-height: 29px;
+    font-size: 1.3rem;
+    font-family: 'Lato' !important;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+  }
+}

packages/strapi-plugin-upload/admin/src/components/Li/styles.scss

@@ -1,4 +1,4 @@
-.liWrapper {
+  .liWrapper {
   height: 54px;
   background-color: #fff;
   padding-top: 5px;
@@ -39,7 +39,10 @@
     min-width: 100px;
   }
   > div:nth-child(7) {
-    min-width: 114px;
+    min-width: 147px;
+  }
+  > div:last-child {
+    min-width: 116px;
   }
 }
 

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -17,6 +17,7 @@ import { bindActionCreators, compose } from 'redux';
 import ContainerFluid from 'components/ContainerFluid';
 import InputSearch from 'components/InputSearch';
 // import InputSelect from 'components/InputSelect';
+import PageFooter from 'components/PageFooter';
 import PluginHeader from 'components/PluginHeader';
 
 // Plugin's component
@@ -30,6 +31,7 @@ import injectSaga from 'utils/injectSaga';
 
 // Actions
 import {
+  changeParams,
   deleteData,
   getData,
   onDrop,
@@ -62,6 +64,19 @@ export class HomePage extends React.Component {
     }
   }
 
+  handleChangeParams = (e) => {
+    const { history, params } = this.props;
+    const search = e.target.nanme === 'params.limit' ?
+      `page=${params.page}&limit=${e.target.value}&sort=${params.sort}`
+      : `page=${e.target.value}&limit=${params.limit}&sort=${params.sort}`
+    this.props.history.push({
+      pathname: history.pathname,
+      search,
+    });
+
+    this.props.changeParams(e);
+  }
+
   renderInputSearch = () =>
     <InputSearch
       autoFocus
@@ -106,6 +121,12 @@ export class HomePage extends React.Component {
         <List
           data={this.props.uploadedFiles}
         />
+        <div className="col-md-12">
+          <PageFooter
+            onChangeParams={this.handleChangeParams}
+            params={this.props.params}
+          />
+        </div>
       </ContainerFluid>
     );
   }
@@ -115,16 +136,27 @@ HomePage.childContextTypes = {
   deleteData: PropTypes.func.isRequired,
 };
 
-HomePage.defaultProps = {
-  uploadedFiles: [{}],
-};
-
 HomePage.contextTypes = {
+  params: PropTypes.shape({
+    limit: PropTypes.number,
+    page: PropTypes.number,
+    sort: PropTypes.string,
+  }),
   router: PropTypes.object,
   uploadedFiles: PropTypes.arrayOf(PropTypes.object),
 };
 
+HomePage.defaultProps = {
+  params: {
+    limit: 10,
+    page: 1,
+    sort: 'updatedAt',
+  },
+  uploadedFiles: [{}],
+};
+
 HomePage.propTypes = {
+  changeParams: PropTypes.func.isRequired,
   getData: PropTypes.func.isRequired,
   onDrop: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
@@ -134,6 +166,7 @@ HomePage.propTypes = {
 function mapDispatchToProps(dispatch) {
   return bindActionCreators(
     {
+      changeParams,
       deleteData,
       getData,
       onDrop,

packages/strapi-plugin-upload/admin/src/containers/HomePage/reducer.js

@@ -30,7 +30,7 @@ const initialState = fromJS({
 function homePageReducer(state = initialState, action) {
   switch (action.type) {
     case CHANGE_PARAMS:
-      return state.updateIn(actions.keys, () => action.value);
+      return state.updateIn(action.keys, () => action.value);
     case DELETE_SUCCESS:
       return state.update('deleteSuccess', (v) => v = !v);
     case DROP_SUCCESS: