moved items to left

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

@@ -1,12 +1,30 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
+import {
+    PageHeader,
+    Typography,
+    Card,
+    Steps,
+    Button,
+    message,
+    Row,
+    Col,
+    Tag,
+    Tooltip,
+    Input,
+    Icon,
+    Select,
+    Checkbox,
+    Form,
+    Upload
+} from "antd";
 import Step1 from "./Step1"
 import Step2 from "./Step2"
 import Step3 from "./Step3"
+import styles from "./Style.less"
 
 const Paragraph = Typography;
-
+const Dragger = Upload.Dragger;
 const routes = [
     {
         path: 'index',
@@ -36,6 +54,94 @@ const steps = [{
 }];
 
 
+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 AddNewApp extends React.Component {
 
     constructor(props) {
@@ -75,33 +181,67 @@ class AddNewApp extends React.Component {
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
                     <Row>
-                        <Col span={16} offset={4}>
+                        <Col span={20} offset={2}>
                             <Card>
+                                <Row>
+                                    <Col span={12}>
                                         <div>
-                                    <Steps current={current}>
+                                            <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
-                                        {steps.map(item => <Step key={item.title} title={item.title}/>)}
+
-                                    </Steps>
+                                                <Form.Item {...formItemLayout} label="Platform">
-                                    <Content/>
+                                                    <Select placeholder="ex: android">
-                                    <div className="steps-action">
+                                                        <Option value="Android">Android</Option>
-                                        {
+                                                        <Option value="iOS">iOS</Option>
-                                            current < steps.length - 1
+                                                    </Select>
-                                            && <Button type="primary" onClick={() => this.next()}>Next</Button>
+                                                </Form.Item>
-                                        }
+                                                <Form.Item {...formItemLayout} label="Type">
-                                        {
+                                                    <Select value="Enterprise">
-                                            current === steps.length - 1
+                                                        <Option value="Enterprise" selected>Enterprise</Option>
-                                            && <Button type="primary"
+                                                    </Select>
-                                                       onClick={() => message.success('Processing complete!')}>Done</Button>
+                                                </Form.Item>
-                                        }
+                                                <Form.Item {...formItemLayout} label="Name">
-                                        {
+                                                    <Input placeholder="App Name"/>
-                                            current > 0
+                                                </Form.Item>
-                                            && (
+                                                <Form.Item {...formItemLayout} label="Description">
-                                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
+                                                    <TextArea placeholder="Enter the description" rows={4}/>
-                                                    Previous
+                                                </Form.Item>
-                                                </Button>
+                                                <Form.Item {...formItemLayout} label="Category">
-                                            )
+                                                    <Select placeholder="Select a category">
-                                        }
+                                                        <Option value="travel">Travel</Option>
-                                    </div>
+                                                        <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>
+                                    </Col>
+                                    <Col span={12}>
+
+                                    </Col>
+                                </Row>
                             </Card>
                         </Col>
                     </Row>