mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
changed layout of add nuw app in publisher
This commit is contained in:
Jayasanka
parent
36127ceca5
commit
f260dfdc8b
@ -14,9 +14,10 @@ import {
|
||||
Input,
|
||||
Icon,
|
||||
Select,
|
||||
Checkbox,
|
||||
Switch,
|
||||
Form,
|
||||
Upload
|
||||
Upload,
|
||||
Divider
|
||||
} from "antd";
|
||||
import Step1 from "./Step1";
|
||||
import Step2 from "./Step2";
|
||||
@ -44,7 +45,7 @@ const routes = [
|
||||
|
||||
const props = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
multiple: false,
|
||||
action: '//jsonplaceholder.typicode.com/posts/',
|
||||
onChange(info) {
|
||||
const status = info.file.status;
|
||||
@ -79,13 +80,15 @@ const InputGroup = Input.Group;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
span: 8,
|
||||
span: 4,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 16,
|
||||
span: 20,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
|
||||
class EditableTagGroup extends React.Component {
|
||||
state = {
|
||||
tags: [],
|
||||
@ -170,6 +173,12 @@ class AddNewApp extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
tags = [];
|
||||
|
||||
addTag(key, value){
|
||||
this.tags.push(<Option key={key}>{value}</Option>);
|
||||
}
|
||||
|
||||
next() {
|
||||
const current = this.state.current + 1;
|
||||
this.setState({current});
|
||||
@ -184,6 +193,8 @@ class AddNewApp extends React.Component {
|
||||
render() {
|
||||
const {current} = this.state;
|
||||
const Content = steps[current].content;
|
||||
this.addTag('1','Lorem');
|
||||
this.addTag('2','Ipsum');
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
@ -205,7 +216,8 @@ class AddNewApp extends React.Component {
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<div>
|
||||
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
|
||||
<Form labelAlign="left" layout="horizontal" className={styles.stepForm}
|
||||
hideRequiredMark>
|
||||
|
||||
<Form.Item {...formItemLayout} label="Platform">
|
||||
<Select placeholder="ex: android">
|
||||
@ -218,11 +230,11 @@ class AddNewApp extends React.Component {
|
||||
<Option value="Enterprise" selected>Enterprise</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="Name">
|
||||
<Input placeholder="App Name"/>
|
||||
<Form.Item {...formItemLayout} label="App Name">
|
||||
<Input placeholder="ex: Lorem App"/>
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="Description">
|
||||
<TextArea placeholder="Enter the description" rows={4}/>
|
||||
<TextArea placeholder="Enter the description..." rows={4}/>
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="Category">
|
||||
<Select placeholder="Select a category">
|
||||
@ -230,14 +242,21 @@ class AddNewApp extends React.Component {
|
||||
<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 {...formItemLayout} label="Is Sahred?">
|
||||
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked />
|
||||
</Form.Item>
|
||||
<Divider/>
|
||||
<Form.Item {...formItemLayout} label="Tags">
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Tags Mode"
|
||||
>
|
||||
{this.tags}
|
||||
</Select>,
|
||||
</Form.Item>
|
||||
<Form.Item {...formItemLayout} label="Meta Daa">
|
||||
<InputGroup>
|
||||
@ -257,15 +276,18 @@ class AddNewApp extends React.Component {
|
||||
</Form>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12} style={{paddingTop:40}}>
|
||||
<Col span={12} style={{paddingTop: 40, paddingLeft: 20}}>
|
||||
<p>Application</p>
|
||||
<div style={{height: 170}}>
|
||||
<Dragger {...props}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox"/>
|
||||
</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
|
||||
<p className="ant-upload-text">Click or drag file to this area to
|
||||
upload</p>
|
||||
<p className="ant-upload-hint">Support for a single or bulk upload.
|
||||
Strictly prohibit from uploading company data or other band
|
||||
files</p>
|
||||
</Dragger>
|
||||
</div>
|
||||
<Row style={{marginTop: 40}}>
|
||||
@ -288,6 +310,7 @@ class AddNewApp extends React.Component {
|
||||
</Row>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@ -6,24 +6,19 @@ class UploadScreenshots extends React.Component {
|
||||
state = {
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [{
|
||||
uid: '-1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
}],
|
||||
fileList: [],
|
||||
};
|
||||
|
||||
handleCancel = () => this.setState({ previewVisible: false })
|
||||
handleCancel = () => this.setState({ previewVisible: false });
|
||||
|
||||
handlePreview = (file) => {
|
||||
this.setState({
|
||||
previewImage: file.url || file.thumbUrl,
|
||||
previewVisible: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = ({ fileList }) => this.setState({ fileList })
|
||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
||||
|
||||
render() {
|
||||
const { previewVisible, previewImage, fileList } = this.state;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user