Add filtering option to devicemgt react app

feature/appm-store/pbac
Jayasanka Weerasinghe 5 years ago
parent 8fcb753568
commit 6aa0461c70

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

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

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

@ -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);

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

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

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

Loading…
Cancel
Save