Jayasanka
5 years ago
parent
4ad87b4e6d
commit
f66ad9ddd9
@ -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;
|
||||||
Loading…
Reference in new issue