community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add filtering option to devicemgt react app

Browse Source
This commit is contained in:
Jayasanka Weerasinghe 2020-01-09 15:39:59 +05:30
parent 8fcb753568
commit 6aa0461c70
7 changed files with 107 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js vendored
View File

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

22
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Roles/RolesTable.js vendored
View File

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

32
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Users/UsersTable.js vendored
View File

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

41
components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Utils/Filter/Filter.js vendored Normal file
View File

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

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

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

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

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

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

@ -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}}>