mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Merge branch 'application-mgt-new' into 'application-mgt-new'
Create filter payload in AppsTable component See merge request entgra/carbon-device-mgt!165
This commit is contained in:
Dharmakeerthi Lasantha
commit
1f175bc1c4
@ -11,7 +11,7 @@
|
||||
"uri": "/publisher-ui-request-handler/invoke",
|
||||
"publisher": "/application-mgt-publisher/v1.0",
|
||||
"store": "/application-mgt-store/v1.0",
|
||||
"admin" : ""
|
||||
"deviceMgt" : "/device-mgt/v1.0"
|
||||
},
|
||||
"loginUri": "/publisher-ui-request-handler/login",
|
||||
"platform": "publisher"
|
||||
|
||||
@ -66,15 +66,30 @@ class AppsTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
pagination: {
|
||||
total: 100
|
||||
},
|
||||
apps: []
|
||||
pagination: {},
|
||||
apps: [],
|
||||
filters: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetch();
|
||||
const {filters} =this.props;
|
||||
this.setState({
|
||||
filters
|
||||
});
|
||||
this.fetch(filters);
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
const {filters} =this.props;
|
||||
if (prevProps.filters !== this.props.filters) {
|
||||
console.log("d",this.props.filters);
|
||||
this.setState({
|
||||
filters
|
||||
});
|
||||
this.fetch(filters);
|
||||
}
|
||||
}
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
@ -84,7 +99,7 @@ class AppsTable extends React.Component {
|
||||
this.setState({
|
||||
pagination: pager,
|
||||
});
|
||||
this.fetch({
|
||||
this.fetch(this.state.filters,{
|
||||
results: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
sortField: sorter.field,
|
||||
@ -93,7 +108,7 @@ class AppsTable extends React.Component {
|
||||
});
|
||||
};
|
||||
|
||||
fetch = (params = {}) => {
|
||||
fetch = (filters,params = {}) => {
|
||||
this.setState({loading: true});
|
||||
|
||||
if(!params.hasOwnProperty("page")){
|
||||
@ -102,8 +117,10 @@ class AppsTable extends React.Component {
|
||||
|
||||
const data = {
|
||||
offset: 10 * (params.page - 1),
|
||||
limit: 10
|
||||
limit: 10,
|
||||
...filters
|
||||
};
|
||||
console.log("f", data);
|
||||
|
||||
axios.post(
|
||||
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
|
||||
@ -111,15 +128,16 @@ class AppsTable extends React.Component {
|
||||
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
const data = res.data.data;
|
||||
let apps = [];
|
||||
|
||||
if (res.data.data.hasOwnProperty("applications")) {
|
||||
apps = res.data.data.applications;
|
||||
apps = data.applications;
|
||||
}
|
||||
const pagination = {...this.state.pagination};
|
||||
// Read total count from server
|
||||
// pagination.total = data.totalCount;
|
||||
pagination.total = 200;
|
||||
pagination.total = data.pagination.count;
|
||||
this.setState({
|
||||
loading: false,
|
||||
apps: apps,
|
||||
|
||||
@ -1,74 +1,277 @@
|
||||
import React from "react";
|
||||
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd";
|
||||
import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button, Form, message} from "antd";
|
||||
import axios from "axios";
|
||||
import config from "../../../../public/conf/config.json";
|
||||
|
||||
const {Option} = Select;
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
class Filters extends React.Component {
|
||||
|
||||
class FiltersForm extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
categories: [],
|
||||
tags: [],
|
||||
deviceTypes: []
|
||||
};
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
this.props.form.validateFields((err, values) => {
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
if (value === undefined) {
|
||||
delete values[key];
|
||||
}
|
||||
}
|
||||
|
||||
this.props.setFilters(values);
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getCategories();
|
||||
this.getTags();
|
||||
this.getDeviceTypes();
|
||||
}
|
||||
|
||||
getCategories = () => {
|
||||
axios.get(
|
||||
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories",
|
||||
{
|
||||
headers: {'X-Platform': config.serverConfig.platform}
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
let categories = JSON.parse(res.data.data);
|
||||
this.setState({
|
||||
categories: categories,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.response.status === 401) {
|
||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
|
||||
} else {
|
||||
message.warning('Something went wrong');
|
||||
|
||||
}
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
getTags = () => {
|
||||
axios.get(
|
||||
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags",
|
||||
{
|
||||
headers: {'X-Platform': config.serverConfig.platform}
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
let tags = JSON.parse(res.data.data);
|
||||
this.setState({
|
||||
tags: tags,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.response.status === 401) {
|
||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
|
||||
} else {
|
||||
message.warning('Something went wrong');
|
||||
|
||||
}
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
getDeviceTypes = () => {
|
||||
axios.get(
|
||||
config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types",
|
||||
{
|
||||
headers: {'X-Platform': config.serverConfig.platform}
|
||||
}).then(res => {
|
||||
if (res.status === 200) {
|
||||
const deviceTypes = JSON.parse(res.data.data);
|
||||
this.setState({
|
||||
deviceTypes,
|
||||
loading: false,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.response.status === 401) {
|
||||
window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
|
||||
} else {
|
||||
message.warning('Something went wrong');
|
||||
|
||||
}
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const {categories, tags, deviceTypes} = this.state;
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
|
||||
return (
|
||||
|
||||
<Card>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Title level={4}>Filter</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider/>
|
||||
<Form labelAlign="left" layout="horizontal"
|
||||
hideRequiredMark
|
||||
onSubmit={this.handleSubmit}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Title level={4}>Filter</Title>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item style={{
|
||||
float: "right",
|
||||
marginBottom: 0,
|
||||
marginTop: -5
|
||||
}}>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider/>
|
||||
|
||||
<Text strong={true}>Category</Text>
|
||||
<br/><br/>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{width: '100%'}}
|
||||
placeholder="All Categories"
|
||||
>
|
||||
<Option key={1}>IoT</Option>
|
||||
<Option key={2}>EMM</Option>
|
||||
</Select>
|
||||
<Divider/>
|
||||
{/*<Text strong={true}>Category</Text>*/}
|
||||
{/*<br/><br/>*/}
|
||||
<Form.Item label="Categories">
|
||||
{getFieldDecorator('categories', {
|
||||
rules: [{
|
||||
required: false,
|
||||
message: 'Please select categories'
|
||||
}],
|
||||
})(
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{width: '100%'}}
|
||||
placeholder="Select a Category"
|
||||
onChange={this.handleCategoryChange}
|
||||
>
|
||||
{
|
||||
categories.map(category => {
|
||||
return (
|
||||
<Option
|
||||
key={category.categoryName}>
|
||||
{category.categoryName}
|
||||
</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
{/*<Select*/}
|
||||
{/*mode="multiple"*/}
|
||||
{/*style={{width: '100%'}}*/}
|
||||
{/*placeholder="All Categories"*/}
|
||||
{/*>*/}
|
||||
{/*<Option key={1}>IoT</Option>*/}
|
||||
{/*<Option key={2}>EMM</Option>*/}
|
||||
{/*</Select>*/}
|
||||
<Divider/>
|
||||
|
||||
<Text strong={true}>Platform</Text>
|
||||
<br/><br/>
|
||||
<Checkbox>Android</Checkbox><br/>
|
||||
<Checkbox>iOS</Checkbox><br/>
|
||||
<Checkbox>Windows</Checkbox><br/>
|
||||
<Checkbox>Default</Checkbox><br/>
|
||||
<Divider/>
|
||||
<Form.Item label="Device Types">
|
||||
{getFieldDecorator('deviceTypes', {
|
||||
rules: [{
|
||||
required: false,
|
||||
message: 'Please select device types'
|
||||
}],
|
||||
})(
|
||||
<Select
|
||||
style={{width: '100%'}}
|
||||
placeholder="Select device types"
|
||||
>
|
||||
{
|
||||
deviceTypes.map(deviceType => {
|
||||
return (
|
||||
<Option
|
||||
key={deviceType.name}>
|
||||
{deviceType.name}
|
||||
</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Text strong={true}>Tags</Text>
|
||||
<br/><br/>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{width: '100%'}}
|
||||
placeholder="All Tags"
|
||||
>
|
||||
<Option key={1}>test tag</Option>
|
||||
</Select>
|
||||
{/*<Text strong={true}>Tags</Text>*/}
|
||||
<Form.Item label="Tags">
|
||||
{getFieldDecorator('tags', {
|
||||
rules: [{
|
||||
required: false,
|
||||
message: 'Please select tags'
|
||||
}],
|
||||
})(
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{width: '100%'}}
|
||||
placeholder="Select tags"
|
||||
>
|
||||
{
|
||||
tags.map(tag => {
|
||||
return (
|
||||
<Option
|
||||
key={tag.tagName}>
|
||||
{tag.tagName}
|
||||
</Option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Divider/>
|
||||
<Text strong={true}>Type</Text>
|
||||
<br/><br/>
|
||||
<Checkbox>Enterprise</Checkbox><br/>
|
||||
<Checkbox>Public</Checkbox><br/>
|
||||
<Checkbox>Web APP</Checkbox><br/>
|
||||
<Checkbox>Web Clip</Checkbox><br/>
|
||||
<Divider/>
|
||||
<Divider/>
|
||||
<Form.Item label="App Type">
|
||||
{getFieldDecorator('appType', {})(
|
||||
<Select
|
||||
style={{width: '100%'}}
|
||||
placeholder="Select app type"
|
||||
>
|
||||
<Option value="ENTERPRISE">Enterprise</Option>
|
||||
<Option value="PUBLIC">Public</Option>
|
||||
<Option value="WEB_CLIP">Web APP</Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Divider/>
|
||||
|
||||
<Text strong={true}>Subscription</Text>
|
||||
<br/><br/>
|
||||
<Checkbox>Free</Checkbox><br/>
|
||||
<Checkbox>Paid</Checkbox><br/>
|
||||
<Divider/>
|
||||
<Form.Item label="Subscription Type">
|
||||
{getFieldDecorator('subscriptionType', {})(
|
||||
<Checkbox.Group style={{width: '100%'}}>
|
||||
<Checkbox value="FREE">Free</Checkbox><br/>
|
||||
<Checkbox value="PAID">Paid</Checkbox><br/>
|
||||
</Checkbox.Group>,
|
||||
)}
|
||||
</Form.Item>
|
||||
<Divider/>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const Filters = Form.create({name: 'filter-apps'})(FiltersForm);
|
||||
|
||||
|
||||
export default Filters;
|
||||
@ -20,11 +20,12 @@ class ListApps extends React.Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
isDrawerVisible: false,
|
||||
selectedApp: null
|
||||
selectedApp: null,
|
||||
filters: {}
|
||||
}
|
||||
}
|
||||
|
||||
//handler to show app drawer
|
||||
//handler to show app drawer
|
||||
showDrawer = (app) => {
|
||||
this.setState({
|
||||
isDrawerVisible: true,
|
||||
@ -39,12 +40,18 @@ class ListApps extends React.Component {
|
||||
})
|
||||
};
|
||||
|
||||
setFilters = (filters) => {
|
||||
this.setState({
|
||||
filters
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {isDrawerVisible} = this.state;
|
||||
const {isDrawerVisible, filters} = this.state;
|
||||
return (
|
||||
<Row gutter={28}>
|
||||
<Col md={6}>
|
||||
<Filters/>
|
||||
<Filters setFilters={this.setFilters}/>
|
||||
</Col>
|
||||
<Col md={18}>
|
||||
<Card>
|
||||
@ -61,8 +68,9 @@ class ListApps extends React.Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider dashed={true}/>
|
||||
<AppsTable showDrawer={this.showDrawer} />
|
||||
<AppDetailsDrawer visible={isDrawerVisible} onClose={this.closeDrawer} app={this.state.selectedApp}/>
|
||||
<AppsTable filters={filters} showDrawer={this.showDrawer}/>
|
||||
<AppDetailsDrawer visible={isDrawerVisible} onClose={this.closeDrawer}
|
||||
app={this.state.selectedApp}/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user