ui search field done, started adding filter functionality

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -9,6 +9,10 @@ import classNames from "classnames";
 import PageActions from "./PageActions";
 import ErrorBoundary from "../ErrorBoundary";
 
+type State = {
+  value: string
+};
+
 type Props = {
   title?: string,
   subtitle?: string,
@@ -16,19 +20,49 @@ type Props = {
   error?: Error,
   showContentOnError?: boolean,
   children: React.Node,
+  filter: string => void,
 
   // context props
   classes: Object
 };
 
 const styles = {
-  spacing: {
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end"
+  },
+  inputField: {
+    float: "right",
     marginTop: "1.25rem",
-    textAlign: "right"
+    marginRight: "1.25rem"
+  },
+  inputHeight: {
+    height: "2.5rem"
+  },
+  button: {
+    float: "right",
+    marginTop: "1.25rem"
   }
 };
 
-class Page extends React.Component<Props> {
+class Page extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = { value: "" };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  handleSubmit(event) {
+    this.props.filter(this.state.value);
+    event.preventDefault();
+  }
+
   render() {
     const { error } = this.props;
     return (
@@ -36,12 +70,11 @@ class Page extends React.Component<Props> {
         <div className="container">
           {this.renderPageHeader()}
           <ErrorBoundary>
-            <ErrorNotification error={error}/>
+            <ErrorNotification error={error} />
             {this.renderContent()}
           </ErrorBoundary>
         </div>
       </section>
-
     );
   }
 
@@ -53,11 +86,30 @@ class Page extends React.Component<Props> {
     React.Children.forEach(children, child => {
       if (child && child.type.name === PageActions.name) {
         pageActions = (
-          <div className="column is-two-fifths">
+          <div
+            className={classNames(classes.actions, "column is-three-fifths is-mobile-action-spacing")}
+          >
+            <form className={classNames(classes.inputField, "input-field")}>
+              <div
+                className="control has-icons-left"
+                onSubmit={this.handleSubmit}
+              >
+                <input
+                  className={classNames(classes.inputHeight, "input")}
+                  type="search"
+                  placeholder="filter text"
+                  value={this.state.value}
+                  onChange={this.handleChange}
+                />
+                <span className="icon is-small is-left">
+                  <i className="fas fa-search" />
+                </span>
+              </div>
+            </form>
             <div
               className={classNames(
-                classes.spacing,
+                classes.button,
-                "is-mobile-create-button-spacing"
+                "input-button control"
               )}
             >
               {child}
@@ -68,15 +120,15 @@ class Page extends React.Component<Props> {
       }
     });
     let underline = pageActionsExists ? (
-      <hr className="header-with-actions"/>
+      <hr className="header-with-actions" />
     ) : null;
 
     return (
       <>
         <div className="columns">
           <div className="column">
-            <Title title={title}/>
+            <Title title={title} />
-            <Subtitle subtitle={subtitle}/>
+            <Subtitle subtitle={subtitle} />
           </div>
           {pageActions}
         </div>
@@ -92,7 +144,7 @@ class Page extends React.Component<Props> {
       return null;
     }
     if (loading) {
-      return <Loading/>;
+      return <Loading />;
     }
 
     let content = [];

scm-ui/src/users/containers/Users.js

@@ -39,7 +39,7 @@ type Props = {
   history: History,
 
   // dispatch functions
-  fetchUsersByPage: (link: string, page: number) => void,
+  fetchUsersByPage: (link: string, page: number, filter?: string) => void,
   fetchUsersByLink: (link: string) => void
 };
 
@@ -74,6 +74,9 @@ class Users extends React.Component<Props> {
         subtitle={t("users.subtitle")}
         loading={loading || !users}
         error={error}
+        filter={filter => {
+          this.props.fetchUsersByPage(this.props.usersLink, this.props.page, filter);
+        }}
       >
         <UserTable users={users} />
         {this.renderPaginator()}
@@ -152,8 +155,8 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchUsersByPage: (link: string, page: number) => {
+    fetchUsersByPage: (link: string, page: number, filter?: string) => {
-      dispatch(fetchUsersByPage(link, page));
+      dispatch(fetchUsersByPage(link, page, filter));
     },
     fetchUsersByLink: (link: string) => {
       dispatch(fetchUsersByLink(link));

scm-ui/src/users/modules/users.js

@@ -43,8 +43,11 @@ export function fetchUsers(link: string) {
   return fetchUsersByLink(link);
 }
 
-export function fetchUsersByPage(link: string, page: number) {
+export function fetchUsersByPage(link: string, page: number, filter?: string) {
   // backend start counting by 0
+  if(filter) {
+    return fetchUsersByLink(link + "?page=" + (page - 1) + "&q=" + decodeURIComponent(filter));
+  }
   return fetchUsersByLink(link + "?page=" + (page - 1));
 }
 

scm-ui/styles/scm.scss

@@ -49,13 +49,22 @@ hr.header-with-actions {
     display: none;
   }
 }
-.is-mobile-create-button-spacing {
+.is-mobile-action-spacing {
   @media screen and (max-width: 768px) {
-    border: 2px solid #e9f7fd;
+    display: flow-root !important;
-    padding: 1em 1em;
+
-    margin-top: 0 !important;
+    .input-field {
-    width: 100%;
+      padding: 0;
-    text-align: center !important;
+      margin: 0 0 1.25rem 0 !important;
+      width: 100%;
+    }
+    .input-button {
+      border: 2px solid #e9f7fd;
+      padding: 1em 1em;
+      margin-top: 0 !important;
+      width: 100%;
+      text-align: center !important;
+    }
   }
 }
 
@@ -102,10 +111,12 @@ $fa-font-path: "webfonts";
   &.is-primary {
     background-color: #00d1df;
   }
-  &.is-primary:hover, &.is-primary.is-hovered {
+  &.is-primary:hover,
+  &.is-primary.is-hovered {
     background-color: #00b9c6;
   }
-  &.is-primary:active, &.is-primary.is-active {
+  &.is-primary:active,
+  &.is-primary.is-active {
     background-color: #00a1ac;
   }
   &.is-primary[disabled] {
@@ -144,7 +155,7 @@ $fa-font-path: "webfonts";
         margin-right: 0;
       }
 
-      .overlay-half-column{
+      .overlay-half-column {
         position: absolute;
         height: calc(120px - 0.5rem);
         width: calc(100% - 1.5rem);