Front-end search logic

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

@@ -5,23 +5,65 @@
 */
 
 import React from 'react';
+import { upperFirst } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 
+import Logo from 'assets/images/icon_filter.png';
 import styles from './styles.scss';
 
+const WAIT = 100;
+
 class Search extends React.Component {
   state = { value: '' };
 
+  timer = null;
+
   handleChange = ({ target }) => {
+    clearTimeout(this.timer);
     this.setState({ value: target.value });
+    this.timer = setTimeout(this.triggerChange, WAIT);
+  }
+
+  // TODO check if we send the request only when the user is done typing
+  triggerChange = () => {
+    console.log('End typing');
+
+    // this.props......
   }
 
   render() {
+    const { model } = this.props;
+
     return (
       <div className={styles.search}>
-        <input type="text" onChange={this.handleChange} value={this.state.value} />
+        <div>
+          <FormattedMessage id="content-manager.components.Search.placeholder">
+            {(message) => (
+              <input
+                onChange={this.handleChange}
+                placeholder={message}
+                type="text"
+                value={this.state.value}
+              />
+            )}
+          </FormattedMessage>
+        </div>
+        <div className={styles.searchLabel}>
+          <img src={Logo} alt="filter_logo" />
+          {upperFirst(model)}
+        </div>
       </div>
     );
   }
 }
 
+Search.defaultProps = {
+  model: '',
+};
+
+Search.propTypes = {
+  model: PropTypes.string,
+};
+
 export default Search;

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

@@ -4,6 +4,7 @@
   top: 0;
   height: 6rem;
   min-width: 44rem;
+  padding-right: 30px;
   line-height: 6rem;
   z-index: 999;
   background-color: #FFFFFF;
@@ -18,7 +19,36 @@
     font-weight: bolder;
   }
   input {
-    width: 60%;
+    width: 100%;
     outline: 0;
   }
+  > div:first-child {
+    flex: 2;
+  }
+}
+
+
+.searchLabel {
+  position: relative;
+  height: 22px;
+  margin: auto;
+  margin-left: 30px;
+  padding-right: 10px;
+  padding-left: 27px;
+  background: rgba(0,126,255,0.08);
+  border: 1px solid rgba(0,126,255,0.24);
+  border-radius: 2px;
+  line-height: 22px;
+  color: #007EFF;
+  font-size: 13px;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  > img {
+    position: absolute;
+    top: 1px;
+    margin: auto;
+    bottom: 0;
+    left: 10px;
+    height: 7px;
+  }
 }

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

@@ -343,7 +343,9 @@ export class ListPage extends React.Component {
     return (
       <div>
         <div className={cn('container-fluid', styles.containerFluid)}>
-          <Search />
+          <Search
+            model={this.getCurrentModelName()}
+          />
           <PluginHeader
             actions={pluginHeaderActions}
             description={{

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

@@ -33,6 +33,8 @@
   "components.FilterOptions.FILTER_TYPES._contains": "contains",
   "components.FilterOptions.FILTER_TYPES._containss": "contains (case sensitive)",
 
+  "components.Search.placeholder": "Search for an entry...",
+
   "components.TableDelete.entries.plural": "{number} entries selected",
   "components.TableDelete.entries.singular": "{number} entry selected",
   "components.TableDelete.delete": "Delete all",

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

@@ -25,6 +25,8 @@
   "components.FiltersPickWrapper.PluginHeader.title.filter": "Filtres",
   "components.FiltersPickWrapper.hide": "Fermer",
 
+  "components.Search.placeholder": "Rechercher une entrée...",
+
   "components.TableDelete.entries.plural": "{number} entrées sélectionnées",
   "components.TableDelete.entries.singular": "{number} entrée sélectionnée",
   "components.TableDelete.delete": "Tout supprimer",