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>
<Row> <Form labelAlign="left" layout="horizontal"
<Col span={6}> hideRequiredMark
<Title level={4}>Filter</Title> onSubmit={this.handleSubmit}>
</Col> <Row>
</Row> <Col span={12}>
<Divider/> <Title level={4}>Filter</Title>
</Col>
<Text strong={true}>Category</Text> <Col span={12}>
<br/><br/> <Form.Item style={{
<Select float: "right",
mode="multiple" marginBottom: 0,
style={{width: '100%'}} marginTop: -5
placeholder="All Categories" }}>
> <Button
<Option key={1}>IoT</Option> size="small"
<Option key={2}>EMM</Option> type="primary"
</Select> htmlType="submit">
<Divider/> Submit
</Button>
<Text strong={true}>Platform</Text> </Form.Item>
<br/><br/> </Col>
<Checkbox>Android</Checkbox><br/> </Row>
<Checkbox>iOS</Checkbox><br/> <Divider/>
<Checkbox>Windows</Checkbox><br/>
<Checkbox>Default</Checkbox><br/> {/*<Text strong={true}>Category</Text>*/}
<Divider/> {/*<br/><br/>*/}
<Form.Item label="Categories">
<Text strong={true}>Tags</Text> {getFieldDecorator('categories', {
<br/><br/> rules: [{
<Select required: false,
mode="multiple" message: 'Please select categories'
style={{width: '100%'}} }],
placeholder="All Tags" })(
> <Select
<Option key={1}>test tag</Option> mode="multiple"
</Select> style={{width: '100%'}}
placeholder="Select a Category"
<Divider/> onChange={this.handleCategoryChange}
<Text strong={true}>Type</Text> >
<br/><br/> {
<Checkbox>Enterprise</Checkbox><br/> categories.map(category => {
<Checkbox>Public</Checkbox><br/> return (
<Checkbox>Web APP</Checkbox><br/> <Option
<Checkbox>Web Clip</Checkbox><br/> key={category.categoryName}>
<Divider/> {category.categoryName}
</Option>
<Text strong={true}>Subscription</Text> )
<br/><br/> })
<Checkbox>Free</Checkbox><br/> }
<Checkbox>Paid</Checkbox><br/> </Select>
<Divider/> )}
</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> </Card>
); );
} }
} }
const Filters = Form.create({name: 'filter-apps'})(FiltersForm);
export default Filters; export default Filters;

@ -20,11 +20,12 @@ class ListApps extends React.Component {
super(props); super(props);
this.state = { this.state = {
isDrawerVisible: false, isDrawerVisible: false,
selectedApp: null selectedApp: null,
filters: {}
} }
} }
//handler to show app drawer //handler to show app drawer
showDrawer = (app) => { showDrawer = (app) => {
this.setState({ this.setState({
isDrawerVisible: true, isDrawerVisible: true,
@ -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