Create filter payload in AppsTable component

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/public/conf/config.json

@@ -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"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js

@@ -66,15 +66,30 @@ class AppsTable extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            pagination: {
+            pagination: {},
-                total: 100
+            apps: [],
-            },
+            filters: {}
-            apps: []
         };
     }
 
     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,

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js

@@ -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>
+                <Form labelAlign="left" layout="horizontal"
+                      hideRequiredMark
+                      onSubmit={this.handleSubmit}>
                     <Row>
-                    <Col span={6}>
+                        <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>
+                    {/*<Text strong={true}>Category</Text>*/}
-                <br/><br/>
+                    {/*<br/><br/>*/}
+                    <Form.Item label="Categories">
+                        {getFieldDecorator('categories', {
+                            rules: [{
+                                required: false,
+                                message: 'Please select categories'
+                            }],
+                        })(
                             <Select
                                 mode="multiple"
                                 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>
+                        )}
+                    </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>
+                    <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
                                 mode="multiple"
                                 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>
+                        )}
+                    </Form.Item>
 
                     <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/>
 
-                <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/>
+                </Form>
             </Card>
         );
     }
 }
 
 
+const Filters = Form.create({name: 'filter-apps'})(FiltersForm);
+
+
 export default Filters;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js

@@ -20,7 +20,8 @@ class ListApps extends React.Component {
         super(props);
         this.state = {
             isDrawerVisible: false,
-            selectedApp: null
+            selectedApp: null,
+            filters: {}
         }
     }
 
@@ -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} />
+                        <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>
                 </Col>
             </Row>