From 6aa0461c7070c0bc2e2979cf3dc7e4be81e66d09 Mon Sep 17 00:00:00 2001 From: Jayasanka Weerasinghe Date: Thu, 9 Jan 2020 15:39:59 +0530 Subject: [PATCH] Add filtering option to devicemgt react app --- .../src/components/Groups/GroupsTable.js | 20 ++++++++- .../src/components/Roles/RolesTable.js | 24 +++++++---- .../src/components/Users/UsersTable.js | 34 ++++++++++++--- .../src/components/Utils/Filter/Filter.js | 41 +++++++++++++++++++ .../src/pages/Dashboard/Groups/Groups.js | 6 +-- .../src/pages/Dashboard/Roles/Roles.js | 5 +-- .../src/pages/Dashboard/Users/Users.js | 4 +- 7 files changed, 107 insertions(+), 27 deletions(-) create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Utils/Filter/Filter.js diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js index 22b1f3bc08..df3a4c6211 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js +++ b/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 {
-
+
+ +
+
(record.id)} diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js index 976e90eca7..4939792e11 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js +++ b/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 {
-
+
+ +
+
(record)} @@ -247,4 +255,4 @@ class RolesTable extends React.Component { } } -export default withConfigContext(RolesTable); \ No newline at end of file +export default withConfigContext(RolesTable); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js index d2bf0b0036..2400495948 100644 --- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js +++ b/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 {
-
+
+ +
+
(record.username)} @@ -293,4 +317,4 @@ class UsersTable extends React.Component { } } -export default withConfigContext(UsersTable); \ No newline at end of file +export default withConfigContext(UsersTable); diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Utils/Filter/Filter.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Utils/Filter/Filter.js new file mode 100644 index 0000000000..40b331c39a --- /dev/null +++ b/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 ( + + {this.props.fields.map((field) => ( + + {getFieldDecorator(field.name)( + , + )} + + ))} + +