Fix limit picker

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

@@ -6,7 +6,9 @@
 
 import React from 'react';
 // import PropTypes from 'prop-types';
-import _ from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { map } from 'lodash';
+import styles from './styles.scss';
 
 class LimitSelect extends React.Component {
   componentWillMount() {
@@ -14,10 +16,6 @@ class LimitSelect extends React.Component {
     this.setState({ id });
   }
 
-  shouldComponentUpdate() {
-    return false;
-  }
-
   /**
    * Return the list of default values to populate the select options
    *
@@ -28,39 +26,30 @@ class LimitSelect extends React.Component {
   }
 
   render() {
-    return <div />;
+    return (
+      <form className="form-inline">
 
-    // // Generate options
+        <div className={styles.selectWrapper}>
-    // const options = this.getOptionsValues().map(optionValue => (
+          <select
-    //   <option value={optionValue} key={optionValue}>{optionValue}</option>
+            onChange={this.props.handleChange}
-    // ));
+            className={`form-control ${styles.select}`}
-    //
+            id={this.state.id}
-    // // Get id in order to link the `label` and the `select` elements
+            value={this.props.limit}
-    // const id = this.state.id;
+          >
-    //
+            {map(this.getOptionsValues(), (optionValue, key) => <option value={optionValue} key={key}>{optionValue}</option>)}
-    // return (
+          </select>
-    //   <form className="form-inline">
+        </div>
-    //     <div className="form-group">
+        <label className={styles.label} htmlFor={this.state.id}>
-    //       <label className={styles.label} htmlFor={id}>
+          <FormattedMessage id="content-manager.components.LimitSelect.itemsPerPage" />
-    //         <FormattedMessage id="content-manager.components.LimitSelect.itemsPerPage" />:
+        </label>
-    //       </label>
+      </form>
-    //       <div className={styles.selectWrapper}>
+    );
-    //         <select
-    //           onChange={this.props.onLimitChange}
-    //           className={`form-control ${styles.select}`}
-    //           id={id}
-    //         >
-    //           {options}
-    //         </select>
-    //       </div>
-    //     </div>
-    //   </form>
-    // );
   }
 }
 
 LimitSelect.propTypes = {
-  // onLimitChange: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  limit: PropTypes.number.isRequired,
 };
 
 export default LimitSelect;

packages/strapi-plugin-content-manager/admin/src/components/LimitSelect/styles.scss

@@ -1,27 +1,28 @@
 .selectWrapper {
   display: inline-block;
 
-  &:after {
-    content: "\f104";
-    position: absolute;
-    top: 10px;
-    right: 26px;
-    font-family: 'ionicons', Helvetica;
-    color: #465373;
-    font-size: 1.1rem;
-    pointer-events: none;
-  }
 }
 
 .select {
+
+  height: 3.2rem !important;
+  min-width: 5.4rem;
+  padding-top: 0rem;
+  padding-left: 1rem;
+  padding-right: 3rem;
+  background-position: right -1px center;
+  background-repeat: no-repeat;
+  background-image: url('./background_input.svg');
+  border: 1px solid #E3E9F3;
+  border-radius: 0.25rem;
+  line-height: 3.2rem;
+  font-size: 1.3rem;
+  font-family: 'Lato' !important;
+  -moz-appearance: none;
   -webkit-appearance: none;
-  background: #ffffff;
-  border-radius: 2.4rem;
-  padding-top: 0.6rem;
-  padding-right: 1.4rem;
 }
 
 .label {
   color: #465373;
-  margin-right: 1rem;
+  margin-left: 1rem;
 }

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

@@ -18,8 +18,8 @@ class TableFooter extends React.Component {
       <div className={`row ${styles.tableFooter}`}>
         <div className="col-lg-6">
           <LimitSelect
-            className="push-lg-right"
+
-            handleLimit={this.props.handleLimit}
+            handleChange={this.props.handleChangeLimit}
             limit={this.props.limit}
           />
         </div>
@@ -43,7 +43,7 @@ TableFooter.propTypes = {
     PropTypes.bool,
   ]).isRequired,
   currentPage: PropTypes.number.isRequired,
-  handleLimit: PropTypes.func.isRequired,
+  handleChangeLimit: PropTypes.func.isRequired,
   limit: PropTypes.number.isRequired,
 };
 

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

@@ -125,6 +125,14 @@ export class List extends React.Component {
     this.addRoute = `${this.props.match.path.replace(':slug', slug)}/create`;
   }
 
+  handleChangeLimit = ({ target }) => {
+    this.props.changeLimit(parseInt(target.value));
+    router.push({
+      pathname: this.props.location.pathname,
+      search: `?page=${this.props.currentPage}&limit=${target.value}&sort=${this.props.sort}`,
+    });
+  }
+  
   handleDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -234,7 +242,7 @@ export class List extends React.Component {
                 changePage={this.changePage}
                 count={this.props.count}
                 className="push-lg-right"
-                handleLimit={this.props.changeLimit}
+                handleChangeLimit={this.handleChangeLimit}
               />
             </div>
           </div>

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

@@ -33,7 +33,7 @@ const initialState = fromJS({
   loadingCount: true,
   count: false,
   currentPage: 1,
-  limit: 2,
+  limit: 10,
   sort: 'id',
 });
 

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

@@ -10,7 +10,7 @@
   "containers.Edit.returnList": "Return to list",
   "containers.List.addAnEntry": "Add New {entity}",
   "containers.List.pluginHeaderDescription": "Manage your {label}",
-  "components.LimitSelect.itemsPerPage": "Number of items per page",
+  "components.LimitSelect.itemsPerPage": "Items per page",
   "containers.List.errorFetchRecords": "Error",
   "pageNotFound": "Page not found",
 

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

@@ -10,7 +10,7 @@
   "containers.Edit.returnList": "Retourner à la liste",
   "containers.List.addAnEntry": "Ajouter {entity}",
   "containers.List.pluginHeaderDescription": "Gérér vos {label}",
-  "components.LimitSelect.itemsPerPage": "Nombre d'éléments par page",
+  "components.LimitSelect.itemsPerPage": "Éléments par page",
   "containers.List.errorFetchRecords": "Erreur",
 
   "popUpWarning.button.cancel": "Annuler",