Add filtering option to devicemgt react app

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js

@@ -25,9 +25,21 @@ import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../context/ConfigContext";
 import GroupActions from "./GroupActions";
 import AddGroup from "./AddGroup";
+import Filter from "../Utils/Filter/Filter";
 
 const {Text} = Typography;
 
+const searchFields = [
+    {
+        name: 'name',
+        placeholder: 'Name'
+    },
+    {
+        name: 'owner',
+        placeholder: 'Owner'
+    }
+];
+
 let config = null;
 let apiUrl;
 
@@ -94,7 +106,7 @@ class GroupsTable extends React.Component {
     }
 
     //fetch data from api
-    fetchGroups = (params = {}) => {
+    fetchGroups = (params = {}, filters = {}) => {
         const config = this.props.context;
         this.setState({loading: true});
 
@@ -104,6 +116,7 @@ class GroupsTable extends React.Component {
         const extraParams = {
             offset: 10 * (currentPage - 1), //calculate the offset
             limit: 10,
+            ...filters
         };
 
         const encodedExtraParams = Object.keys(extraParams)
@@ -167,7 +180,10 @@ class GroupsTable extends React.Component {
                 <div style={{background: '#f0f2f5'}}>
                     <AddGroup fetchGroups={this.fetchGroups} style={{marginBottom:"10px"}}/>
                 </div>
-                <div>
+                <div style={{textAlign: 'right'}}>
+                    <Filter fields={searchFields} callback={this.fetchGroups}/>
+                </div>
+                <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
                     <Table
                         columns={this.columns}
                         rowKey={record => (record.id)}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js

@@ -31,11 +31,15 @@ import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../context/ConfigContext";
 import AddRole from "./AddRole";
 import RoleAction from "./RoleAction";
+import Filter from "../Utils/Filter/Filter";
+
+const searchFields = [
+    {
+        name: 'filter',
+        placeholder: 'Name'
+    }
+];
 
-const getTimeAgo = (time) => {
-    const timeAgo = new TimeAgo('en-US');
-    return timeAgo.format(time);
-};
 
 class RolesTable extends React.Component {
     constructor(props) {
@@ -108,7 +112,7 @@ class RolesTable extends React.Component {
     };
 
     //fetch data from api
-    fetchUsers = (params = {}) => {
+    fetchUsers = (params = {}, filters={}) => {
         // const config = this.props.context;
         this.setState({loading: true});
 
@@ -118,6 +122,7 @@ class RolesTable extends React.Component {
         const extraParams = {
             offset: 10 * (currentPage - 1), //calculate the offset
             limit: 10,
+            ...filters
         };
 
         const encodedExtraParams = Object.keys(extraParams)
@@ -125,7 +130,7 @@ class RolesTable extends React.Component {
 
         let apiUrl = window.location.origin + this.config.serverConfig.invoker.uri +
             this.config.serverConfig.invoker.deviceMgt +
-            "/roles";
+            "/roles?" + encodedExtraParams;
 
         //send request to the invokerss
         axios.get(apiUrl).then(res => {
@@ -208,7 +213,10 @@ class RolesTable extends React.Component {
                 <div style={{background: '#f0f2f5'}}>
                     <AddRole fetchUsers={this.fetchUsers}/>
                 </div>
-                <div>
+                <div style={{textAlign: 'right'}}>
+                    <Filter fields={searchFields} callback={this.fetchUsers}/>
+                </div>
+                <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
                     <Table
                         columns={columns}
                         rowKey={record => (record)}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js

@@ -26,12 +26,32 @@ import {withConfigContext} from "../../context/ConfigContext";
 import UsersDevices from "./UsersDevices";
 import AddUser from "./AddUser";
 import UserActions from "./UserActions";
-const ButtonGroup = Button.Group
+import Filter from "../Utils/Filter/Filter";
+const ButtonGroup = Button.Group;
 const {Text} = Typography;
 
 let config = null;
 let apiUrl;
 
+const searchFields = [
+    {
+        name: 'username',
+        placeholder: 'Username'
+    },
+    {
+        name: 'firstName',
+        placeholder: 'First Name'
+    },
+    {
+        name: 'lastName',
+        placeholder: 'Last Name'
+    },
+    {
+        name: 'emailAddress',
+        placeholder: 'Email Address'
+    },
+];
+
 class UsersTable extends React.Component {
     constructor(props) {
         super(props);
@@ -62,7 +82,7 @@ class UsersTable extends React.Component {
     }
 
     //fetch data from api
-    fetchUsers = (params = {}) => {
+    fetchUsers = (params = {}, filters = {}) => {
         const config = this.props.context;
         this.setState({loading: true});
 
@@ -72,6 +92,7 @@ class UsersTable extends React.Component {
         const extraParams = {
             offset: 10 * (currentPage - 1), //calculate the offset
             limit: 10,
+            ...filters
         };
 
         const encodedExtraParams = Object.keys(extraParams)
@@ -79,7 +100,7 @@ class UsersTable extends React.Component {
 
         apiUrl = window.location.origin + config.serverConfig.invoker.uri +
             config.serverConfig.invoker.deviceMgt +
-            "/users?" + encodedExtraParams;
+            "/users/search?" + encodedExtraParams;
 
         //send request to the invokerss
         axios.get(apiUrl).then(res => {
@@ -242,7 +263,10 @@ class UsersTable extends React.Component {
                 <div style={{background: '#f0f2f5'}}>
                     <AddUser fetchUsers={this.fetchUsers}/>
                 </div>
-                <div>
+                <div style={{textAlign: 'right'}}>
+                    <Filter fields={searchFields} callback={this.fetchUsers}/>
+                </div>
+                <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
                     <Table
                         columns={columns}
                         rowKey={record => (record.username)}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Utils/Filter/Filter.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+import {Form, Icon, Input, Button} from 'antd';
+
+const hasErrors = (fieldsError) => {
+    return Object.keys(fieldsError).some(field => fieldsError[field]);
+};
+
+class HorizontalLoginForm extends React.Component {
+    handleSubmit = e => {
+        e.preventDefault();
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                Object.keys(values).forEach(key => values[key] === undefined && delete values[key]);
+                this.props.callback({},values);
+            }
+        });
+    };
+
+    render() {
+        const {getFieldDecorator} = this.props.form;
+
+
+        return (
+            <Form layout="inline" onSubmit={this.handleSubmit}>
+                {this.props.fields.map((field) => (
+                    <Form.Item key={field.name}>
+                        {getFieldDecorator(field.name)(
+                            <Input placeholder={field.placeholder}/>,
+                        )}
+                    </Form.Item>
+                ))}
+                <Form.Item>
+                    <Button htmlType='submit' shape="circle" icon="search" />
+                </Form.Item>
+            </Form>
+        );
+    }
+}
+
+export default Form.create({name: 'horizontal_login'})(HorizontalLoginForm);

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Groups/Groups.js

@@ -25,7 +25,6 @@ import {
 } from "antd";
 import {Link} from "react-router-dom";
 import GroupsTable from "../../../components/Groups/GroupsTable";
-import AddGroup from "../../../components/Groups/AddGroup";
 
 const {Paragraph} = Typography;
 
@@ -51,12 +50,9 @@ class Groups extends React.Component {
                         <h3>Groups</h3>
                         <Paragraph>All device groups.</Paragraph>
                     </div>
-                    <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
-                        <GroupsTable/>
-                    </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-
+                    <GroupsTable/>
                 </div>
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Roles/Roles.js

@@ -50,12 +50,9 @@ class Roles extends React.Component {
                         <h3>Roles</h3>
                         <Paragraph>All user roles</Paragraph>
                     </div>
-                    <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
-                        <RolesTable/>
-                    </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-
+                    <RolesTable/>
                 </div>
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Users/Users.js

@@ -50,9 +50,7 @@ class Users extends React.Component {
                         <h3>Users</h3>
                         <Paragraph>All users for device management.</Paragraph>
                     </div>
-                    <div style={{backgroundColor:"#ffffff", borderRadius: 5}}>
-                        <UsersTable/>
-                    </div>
+                    <UsersTable/>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>