Create filter payload in AppsTable component

feature/appm-store/pbac
Jayasanka 5 years ago
parent 4ad87b4e6d
commit f66ad9ddd9

@ -11,7 +11,7 @@
"uri": "/publisher-ui-request-handler/invoke", "uri": "/publisher-ui-request-handler/invoke",
"publisher": "/application-mgt-publisher/v1.0", "publisher": "/application-mgt-publisher/v1.0",
"store": "/application-mgt-store/v1.0", "store": "/application-mgt-store/v1.0",
"admin" : "" "deviceMgt" : "/device-mgt/v1.0"
}, },
"loginUri": "/publisher-ui-request-handler/login", "loginUri": "/publisher-ui-request-handler/login",
"platform": "publisher" "platform": "publisher"

@ -66,15 +66,30 @@ class AppsTable extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
pagination: { pagination: {},
total: 100 apps: [],
}, filters: {}
apps: []
}; };
} }
componentDidMount() { 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) => { handleTableChange = (pagination, filters, sorter) => {
@ -84,7 +99,7 @@ class AppsTable extends React.Component {
this.setState({ this.setState({
pagination: pager, pagination: pager,
}); });
this.fetch({ this.fetch(this.state.filters,{
results: pagination.pageSize, results: pagination.pageSize,
page: pagination.current, page: pagination.current,
sortField: sorter.field, sortField: sorter.field,
@ -93,7 +108,7 @@ class AppsTable extends React.Component {
}); });
}; };
fetch = (params = {}) => { fetch = (filters,params = {}) => {
this.setState({loading: true}); this.setState({loading: true});
if(!params.hasOwnProperty("page")){ if(!params.hasOwnProperty("page")){
@ -102,8 +117,10 @@ class AppsTable extends React.Component {
const data = { const data = {
offset: 10 * (params.page - 1), offset: 10 * (params.page - 1),
limit: 10 limit: 10,
...filters
}; };
console.log("f", data);
axios.post( axios.post(
config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications", 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 => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
const data = res.data.data;
let apps = []; let apps = [];
if (res.data.data.hasOwnProperty("applications")) { if (res.data.data.hasOwnProperty("applications")) {
apps = res.data.data.applications; apps = data.applications;
} }
const pagination = {...this.state.pagination}; const pagination = {...this.state.pagination};
// Read total count from server // Read total count from server
// pagination.total = data.totalCount; // pagination.total = data.totalCount;
pagination.total = 200; pagination.total = data.pagination.count;
this.setState({ this.setState({
loading: false, loading: false,
apps: apps, apps: apps,

@ -1,74 +1,277 @@
import React from "react"; 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 {Option} = Select;
const {Title, Text} = Typography; const {Title, Text} = Typography;
class Filters extends React.Component {
class FiltersForm extends React.Component {
constructor(props) { constructor(props) {
super(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() { render() {
const {categories, tags, deviceTypes} = this.state;
const {getFieldDecorator} = this.props.form;
return ( return (
<Card> <Card>
<Form labelAlign="left" layout="horizontal"
hideRequiredMark
onSubmit={this.handleSubmit}>
<Row> <Row>
<Col span={6}> <Col span={12}>
<Title level={4}>Filter</Title> <Title level={4}>Filter</Title>
</Col> </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> </Row>
<Divider/> <Divider/>
<Text strong={true}>Category</Text> {/*<Text strong={true}>Category</Text>*/}
<br/><br/> {/*<br/><br/>*/}
<Form.Item label="Categories">
{getFieldDecorator('categories', {
rules: [{
required: false,
message: 'Please select categories'
}],
})(
<Select <Select
mode="multiple" mode="multiple"
style={{width: '100%'}} style={{width: '100%'}}
placeholder="All Categories" placeholder="Select a Category"
onChange={this.handleCategoryChange}
> >
<Option key={1}>IoT</Option> {
<Option key={2}>EMM</Option> categories.map(category => {
return (
<Option
key={category.categoryName}>
{category.categoryName}
</Option>
)
})
}
</Select> </Select>
)}
</Form.Item>
{/*<Select*/}
{/*mode="multiple"*/}
{/*style={{width: '100%'}}*/}
{/*placeholder="All Categories"*/}
{/*>*/}
{/*<Option key={1}>IoT</Option>*/}
{/*<Option key={2}>EMM</Option>*/}
{/*</Select>*/}
<Divider/> <Divider/>
<Text strong={true}>Platform</Text> <Form.Item label="Device Types">
<br/><br/> {getFieldDecorator('deviceTypes', {
<Checkbox>Android</Checkbox><br/> rules: [{
<Checkbox>iOS</Checkbox><br/> required: false,
<Checkbox>Windows</Checkbox><br/> message: 'Please select device types'
<Checkbox>Default</Checkbox><br/> }],
<Divider/> })(
<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> {/*<Text strong={true}>Tags</Text>*/}
<br/><br/> <Form.Item label="Tags">
{getFieldDecorator('tags', {
rules: [{
required: false,
message: 'Please select tags'
}],
})(
<Select <Select
mode="multiple" mode="multiple"
style={{width: '100%'}} style={{width: '100%'}}
placeholder="All Tags" placeholder="Select tags"
> >
<Option key={1}>test tag</Option> {
tags.map(tag => {
return (
<Option
key={tag.tagName}>
{tag.tagName}
</Option>
)
})
}
</Select> </Select>
)}
</Form.Item>
<Divider/> <Divider/>
<Text strong={true}>Type</Text> <Form.Item label="App Type">
<br/><br/> {getFieldDecorator('appType', {})(
<Checkbox>Enterprise</Checkbox><br/> <Select
<Checkbox>Public</Checkbox><br/> style={{width: '100%'}}
<Checkbox>Web APP</Checkbox><br/> placeholder="Select app type"
<Checkbox>Web Clip</Checkbox><br/> >
<Option value="ENTERPRISE">Enterprise</Option>
<Option value="PUBLIC">Public</Option>
<Option value="WEB_CLIP">Web APP</Option>
</Select>
)}
</Form.Item>
<Divider/> <Divider/>
<Text strong={true}>Subscription</Text> <Form.Item label="Subscription Type">
<br/><br/> {getFieldDecorator('subscriptionType', {})(
<Checkbox>Free</Checkbox><br/> <Checkbox.Group style={{width: '100%'}}>
<Checkbox>Paid</Checkbox><br/> <Checkbox value="FREE">Free</Checkbox><br/>
<Checkbox value="PAID">Paid</Checkbox><br/>
</Checkbox.Group>,
)}
</Form.Item>
<Divider/> <Divider/>
</Form>
</Card> </Card>
); );
} }
} }
const Filters = Form.create({name: 'filter-apps'})(FiltersForm);
export default Filters; export default Filters;

@ -20,7 +20,8 @@ class ListApps extends React.Component {
super(props); super(props);
this.state = { this.state = {
isDrawerVisible: false, isDrawerVisible: false,
selectedApp: null selectedApp: null,
filters: {}
} }
} }
@ -39,12 +40,18 @@ class ListApps extends React.Component {
}) })
}; };
setFilters = (filters) => {
this.setState({
filters
});
};
render() { render() {
const {isDrawerVisible} = this.state; const {isDrawerVisible, filters} = this.state;
return ( return (
<Row gutter={28}> <Row gutter={28}>
<Col md={6}> <Col md={6}>
<Filters/> <Filters setFilters={this.setFilters}/>
</Col> </Col>
<Col md={18}> <Col md={18}>
<Card> <Card>
@ -61,8 +68,9 @@ class ListApps extends React.Component {
</Col> </Col>
</Row> </Row>
<Divider dashed={true}/> <Divider dashed={true}/>
<AppsTable showDrawer={this.showDrawer} /> <AppsTable filters={filters} showDrawer={this.showDrawer}/>
<AppDetailsDrawer visible={isDrawerVisible} onClose={this.closeDrawer} app={this.state.selectedApp}/> <AppDetailsDrawer visible={isDrawerVisible} onClose={this.closeDrawer}
app={this.state.selectedApp}/>
</Card> </Card>
</Col> </Col>
</Row> </Row>

Loading…
Cancel
Save