Merge branch 'application-mgt-new' of https://gitlab.com/entgra/carbon-device-mgt into application-mgt-new

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css

@@ -21,3 +21,7 @@
 .steps-action {
     margin-top: 24px;
 }
+
+.ant-input-affix-wrapper .ant-input{
+    min-height: 0;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js

@@ -5,8 +5,6 @@ const { Header, Content, Footer } = Layout;
 
 import styles from './Dashboard.less';
 import Logo from "../../../public/images/logo.svg";
-import Login from "../Login";
-import {renderRoutes} from "react-router-config";
 import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
 
@@ -23,7 +21,9 @@ class Dashboard extends React.Component {
         return (
             <Layout className="layout">
                 <Header>
-                    <div style={{backgroundImage: "url(" + { Logo} + ")"}} className={styles.logo}/>
+                    <div className={styles.logo}>
+                        <img src={Logo}/>
+                    </div>
                     <Menu
                         theme="light"
                         mode="horizontal"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.less

@@ -1,7 +1,15 @@
 .logo {
   width: 120px;
   height: 31px;
-  background: rgba(0,0,0,.2);
+  margin: 16px 0 16px 20px;
-  margin: 16px 24px 16px 0;
   float: left;
+
+  img{
+    height: 35px;
+  }
+}
+
+
+input{
+  min-height: 0;
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js

@@ -1,6 +1,9 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
+import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
+import Step1 from "./Step1"
+import Step2 from "./Step2"
+import Step3 from "./Step3"
 
 const Paragraph = Typography;
 
@@ -23,13 +26,13 @@ const Step = Steps.Step;
 
 const steps = [{
     title: 'First',
-    content: 'First-content',
+    content: Step1
 }, {
     title: 'Second',
-    content: 'Second-content',
+    content: Step2,
 }, {
     title: 'Last',
-    content: 'Last-content',
+    content: Step3,
 }];
 
 
@@ -54,7 +57,8 @@ class AddNewApp extends React.Component {
 
 
     render() {
-        const { current } = this.state;
+        const {current} = this.state;
+        const Content = steps[current].content;
         return (
             <div>
                 <PageHeader
@@ -70,33 +74,38 @@ class AddNewApp extends React.Component {
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <Card>
+                    <Row>
-                        <div>
+                        <Col span={16} offset={4}>
-                            <Steps current={current}>
+                            <Card>
-                                {steps.map(item => <Step key={item.title} title={item.title}/>)}
+                                <div>
-                            </Steps>
+                                    <Steps current={current}>
-                            <div className="steps-content">{steps[current].content}</div>
+                                        {steps.map(item => <Step key={item.title} title={item.title}/>)}
-                            <div className="steps-action">
+                                    </Steps>
-                                {
+                                    <Content/>
-                                    current < steps.length - 1
+                                    <div className="steps-action">
-                                    && <Button type="primary" onClick={() => this.next()}>Next</Button>
+                                        {
-                                }
+                                            current < steps.length - 1
-                                {
+                                            && <Button type="primary" onClick={() => this.next()}>Next</Button>
-                                    current === steps.length - 1
+                                        }
-                                    && <Button type="primary"
+                                        {
-                                               onClick={() => message.success('Processing complete!')}>Done</Button>
+                                            current === steps.length - 1
-                                }
+                                            && <Button type="primary"
-                                {
+                                                       onClick={() => message.success('Processing complete!')}>Done</Button>
-                                    current > 0
+                                        }
-                                    && (
+                                        {
-                                        <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
+                                            current > 0
-                                            Previous
+                                            && (
-                                        </Button>
+                                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
-                                    )
+                                                    Previous
-                                }
+                                                </Button>
-                            </div>
+                                            )
-                        </div>
+                                        }
-                    </Card>
+                                    </div>
+                                </div>
+                            </Card>
+                        </Col>
+                    </Row>
+
                 </div>
 
             </div>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js

@@ -0,0 +1,153 @@
+import React from "react";
+import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
+import styles from './Style.less';
+
+const { Option } = Select;
+const { TextArea } = Input;
+const InputGroup = Input.Group;
+
+const formItemLayout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+
+class EditableTagGroup extends React.Component {
+    state = {
+        tags: [],
+        inputVisible: false,
+        inputValue: '',
+    };
+
+    handleClose = (removedTag) => {
+        const tags = this.state.tags.filter(tag => tag !== removedTag);
+        console.log(tags);
+        this.setState({ tags });
+    }
+
+    showInput = () => {
+        this.setState({ inputVisible: true }, () => this.input.focus());
+    }
+
+    handleInputChange = (e) => {
+        this.setState({ inputValue: e.target.value });
+    }
+
+    handleInputConfirm = () => {
+        const { inputValue } = this.state;
+        let { tags } = this.state;
+        if (inputValue && tags.indexOf(inputValue) === -1) {
+            tags = [...tags, inputValue];
+        }
+        console.log(tags);
+        this.setState({
+            tags,
+            inputVisible: false,
+            inputValue: '',
+        });
+    }
+
+    saveInputRef = input => this.input = input
+
+    render() {
+        const { tags, inputVisible, inputValue } = this.state;
+        return (
+            <div>
+                {tags.map((tag, index) => {
+                    const isLongTag = tag.length > 20;
+                    const tagElem = (
+                        <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
+                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+                        </Tag>
+                    );
+                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
+                })}
+                {inputVisible && (
+                    <Input
+                        ref={this.saveInputRef}
+                        type="text"
+                        size="small"
+                        style={{ width: 78 }}
+                        value={inputValue}
+                        onChange={this.handleInputChange}
+                        onBlur={this.handleInputConfirm}
+                        onPressEnter={this.handleInputConfirm}
+                    />
+                )}
+                {!inputVisible && (
+                    <Tag
+                        onClick={this.showInput}
+                        style={{ background: '#fff', borderStyle: 'dashed' }}
+                    >
+                        <Icon type="plus" /> New Tag
+                    </Tag>
+                )}
+            </div>
+        );
+    }
+}
+
+class Step1 extends React.Component {
+    render() {
+        console.log("hhhoohh");
+        return (
+            <div>
+                <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+
+                    <Form.Item {...formItemLayout} label="Platform">
+                            <Select placeholder="ex: android">
+                                <Option value="Android">Android</Option>
+                                <Option value="iOS">iOS</Option>
+                            </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Type">
+                            <Select value="Enterprise">
+                                <Option value="Enterprise" selected>Enterprise</Option>
+                            </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Name">
+                        <Input placeholder="App Name" />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Description">
+                        <TextArea placeholder="Enter the description" rows={4} />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Category">
+                        <Select placeholder="Select a category">
+                            <Option value="travel">Travel</Option>
+                            <Option value="entertainment">Entertainment</Option>
+                        </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Tags">
+                        <EditableTagGroup/>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Price">
+                        <Input prefix="$" placeholder="00.00" />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Share with all tenents?">
+                        <Checkbox > </Checkbox>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Meta Daa">
+                        <InputGroup>
+                            <Row gutter={8}>
+                                <Col span={5}>
+                                    <Input placeholder="Key" />
+                                </Col>
+                                <Col span={10}>
+                                    <Input placeholder="value" />
+                                </Col>
+                                <Col span={4}>
+                                    <Button type="dashed" shape="circle" icon="plus" />
+                                </Col>
+                            </Row>
+                        </InputGroup>
+                    </Form.Item>
+                </Form>
+            </div>
+        );
+    }
+}
+
+export default Step1;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+class Step2 extends React.Component {
+    render() {
+        console.log("hhhoohh");
+        return (
+            <p>tttoooeeee</p>
+        );
+    }
+}
+
+export default Step2;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+class Step3 extends React.Component {
+    render() {
+        console.log("hhhoohh");
+        return (
+            <p>tttoooeeee</p>
+        );
+    }
+}
+
+export default Step3;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Style.less

@@ -0,0 +1,4 @@
+.stepForm {
+  max-width: 500px;
+  margin: 40px auto 0;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js

@@ -1,9 +1,10 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd";
+import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon, Row, Col} from "antd";
 import Highlighter from 'react-highlight-words';
 
 const Paragraph = Typography;
+const Search = Input.Search;
 
 const routes = [
     {
@@ -189,7 +190,18 @@ class Apps extends React.Component {
                     breadcrumb={{routes}}
                 />
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+
                     <Card>
+                        <Row style={{padding:10}}>
+                            <Col span={6} offset={18}>
+                                <Search
+                                    placeholder="search"
+                                    onSearch={value => console.log(value)}
+                                    style={{ width: 200}}
+                                />
+                                <Button style={{margin:5}}>Advanced Search</Button>
+                            </Col>
+                        </Row>
                         <Table columns={columns} dataSource={data}/>
                     </Card>
                 </div>