Create filter payload in AppsTable component

merge-requests/165/head
Jayasanka 5 years ago
parent 4ad87b4e6d
commit f66ad9ddd9

@ -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/>
<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}>Platform</Text>
<br/><br/>
<Checkbox>Android</Checkbox><br/>
<Checkbox>iOS</Checkbox><br/>
<Checkbox>Windows</Checkbox><br/>
<Checkbox>Default</Checkbox><br/>
<Divider/>
<Text strong={true}>Tags</Text>
<br/><br/>
<Select
mode="multiple"
style={{width: '100%'}}
placeholder="All Tags"
>
<Option key={1}>test tag</Option>
</Select>
<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/>
<Text strong={true}>Subscription</Text>
<br/><br/>
<Checkbox>Free</Checkbox><br/>
<Checkbox>Paid</Checkbox><br/>
<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/>*/}
<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/>
<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>*/}
<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/>
<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/>
<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…
Cancel
Save