@ -17,12 +17,28 @@
* /
* /
import React from "react" ;
import React from "react" ;
import { Modal , Button , Icon , notification , Spin , Tooltip , Upload , Input , Switch , Form , Divider , Row , Col } from 'antd' ;
import {
Modal ,
Button ,
Icon ,
notification ,
Spin ,
Tooltip ,
Upload ,
Input ,
Switch ,
Form ,
Divider ,
Row ,
Col ,
Select
} from 'antd' ;
import axios from "axios" ;
import axios from "axios" ;
import { withConfigContext } from "../../../../context/ConfigContext" ;
import { withConfigContext } from "../../../../context/ConfigContext" ;
const { TextArea } = Input ;
const { TextArea } = Input ;
const InputGroup = Input . Group ;
const InputGroup = Input . Group ;
const { Option } = Select ;
const formItemLayout = {
const formItemLayout = {
labelCol : {
labelCol : {
@ -33,6 +49,15 @@ const formItemLayout = {
} ,
} ,
} ;
} ;
function getBase64 ( file ) {
return new Promise ( ( resolve , reject ) => {
const reader = new FileReader ( ) ;
reader . readAsDataURL ( file ) ;
reader . onload = ( ) => resolve ( reader . result ) ;
reader . onerror = error => reject ( error ) ;
} ) ;
}
class EditReleaseModal extends React . Component {
class EditReleaseModal extends React . Component {
constructor ( props ) {
constructor ( props ) {
@ -51,6 +76,8 @@ class EditReleaseModal extends React.Component {
specificElements : { }
specificElements : { }
}
}
} ;
} ;
this . lowerOsVersion = null ;
this . upperOsVersion = null ;
}
}
componentDidMount = ( ) => {
componentDidMount = ( ) => {
@ -117,15 +144,16 @@ class EditReleaseModal extends React.Component {
showModal = ( ) => {
showModal = ( ) => {
const config = this . props . context ;
const { app , release } = this . props ;
const { app , release } = this . props ;
const { formConfig } = this . state ;
const { formConfig } = this . state ;
const { specificElements } = formConfig ;
const { specificElements } = formConfig ;
let metaData = [ ] ;
let metaData = [ ] ;
try {
try {
metaData = JSON . parse ( release . metaData ) ;
metaData = JSON . parse ( release . metaData ) ;
} catch ( e ) {
} catch ( e ) {
}
}
this . props . form . setFields ( {
this . props . form . setFields ( {
@ -143,14 +171,19 @@ class EditReleaseModal extends React.Component {
}
}
} ) ;
} ) ;
// if (specificElements.hasOwnProperty("packageName")) {
if ( ( config . deviceTypes . mobileTypes . includes ( this . props . deviceType ) ) ) {
// this.props.form.setFields({
const osVersions = release . supportedOsVersions . split ( "-" ) ;
// packageName: {
this . lowerOsVersion = osVersions [ 0 ] ;
// value: app.packageName
this . upperOsVersion = osVersions [ 1 ] ;
// }
this . props . form . setFields ( {
// });
lowerOsVersion : {
// }
value : osVersions [ 0 ]
} ,
upperOsVersion : {
value : osVersions [ 1 ]
}
} ) ;
}
if ( specificElements . hasOwnProperty ( "version" ) ) {
if ( specificElements . hasOwnProperty ( "version" ) ) {
this . props . form . setFields ( {
this . props . form . setFields ( {
version : {
version : {
@ -232,9 +265,12 @@ class EditReleaseModal extends React.Component {
isSharedWithAllTenants ,
isSharedWithAllTenants ,
metaData : JSON . stringify ( this . state . metaData ) ,
metaData : JSON . stringify ( this . state . metaData ) ,
releaseType : releaseType ,
releaseType : releaseType ,
supportedOsVersions : "4-30"
} ;
} ;
if ( ( config . deviceTypes . mobileTypes . includes ( this . props . deviceType ) ) ) {
release . supportedOsVersions = ` ${ this . lowerOsVersion } - ${ this . upperOsVersion } ` ;
}
if ( specificElements . hasOwnProperty ( "binaryFile" ) && binaryFiles . length === 1 ) {
if ( specificElements . hasOwnProperty ( "binaryFile" ) && binaryFiles . length === 1 ) {
data . append ( 'binaryFile' , binaryFiles [ 0 ] . originFileObj ) ;
data . append ( 'binaryFile' , binaryFiles [ 0 ] . originFileObj ) ;
}
}
@ -322,10 +358,50 @@ class EditReleaseModal extends React.Component {
} )
} )
} ;
} ;
handlePreviewCancel = ( ) => this . setState ( { previewVisible : false } ) ;
handlePreview = async file => {
if ( ! file . url && ! file . preview ) {
file . preview = await getBase64 ( file . originFileObj ) ;
}
this . setState ( {
previewImage : file . url || file . preview ,
previewVisible : true ,
} ) ;
} ;
handleLowerOsVersionChange = ( lowerOsVersion ) => {
this . lowerOsVersion = lowerOsVersion ;
} ;
handleUpperOsVersionChange = ( upperOsVersion ) => {
this . upperOsVersion = upperOsVersion ;
} ;
render ( ) {
render ( ) {
const { formConfig , icons , screenshots , loading , binaryFiles , metaData } = this . state ;
const {
formConfig ,
icons ,
screenshots ,
loading ,
binaryFiles ,
metaData ,
previewImage ,
previewVisible ,
binaryFileHelperText ,
iconHelperText ,
screenshotHelperText
} = this . state ;
const { getFieldDecorator } = this . props . form ;
const { getFieldDecorator } = this . props . form ;
const { isAppUpdatable } = this . props ;
const { isAppUpdatable , supportedOsVersions , deviceType } = this . props ;
const config = this . props . context ;
const uploadButton = (
< div >
< Icon type = "plus" / >
< div className = "ant-upload-text" > Select < / d i v >
< / d i v >
) ;
return (
return (
< div >
< div >
@ -340,8 +416,8 @@ class EditReleaseModal extends React.Component {
title = "Edit release"
title = "Edit release"
visible = { this . state . visible }
visible = { this . state . visible }
footer = { null }
footer = { null }
onCancel= { this . handleCancel }
width= { 580 }
>
onCancel = { this . handleCancel } >
< div >
< div >
< Spin tip = "Uploading..." spinning = { loading } >
< Spin tip = "Uploading..." spinning = { loading } >
< Form labelAlign = "left" layout = "horizontal"
< Form labelAlign = "left" layout = "horizontal"
@ -370,19 +446,6 @@ class EditReleaseModal extends React.Component {
< / F o r m . I t e m >
< / F o r m . I t e m >
) }
) }
{ /*{formConfig.specificElements.hasOwnProperty("packageName") && (*/ }
{ /* <Form.Item {...formItemLayout} label="Package Name">*/ }
{ /* {getFieldDecorator('packageName', {*/ }
{ /* rules: [{*/ }
{ /* required: true,*/ }
{ /* message: 'Please input the package name'*/ }
{ /* }],*/ }
{ /* })(*/ }
{ /* <Input placeholder="Package Name"/>*/ }
{ /* )}*/ }
{ /* </Form.Item>*/ }
{ /*)}*/ }
{ formConfig . specificElements . hasOwnProperty ( "url" ) && (
{ formConfig . specificElements . hasOwnProperty ( "url" ) && (
< Form . Item { ... formItemLayout } label = "URL" >
< Form . Item { ... formItemLayout } label = "URL" >
{ getFieldDecorator ( 'url' , {
{ getFieldDecorator ( 'url' , {
@ -418,19 +481,15 @@ class EditReleaseModal extends React.Component {
} ) (
} ) (
< Upload
< Upload
name = "logo"
name = "logo"
listType = "picture-card"
onChange = { this . handleIconChange }
onChange = { this . handleIconChange }
beforeUpload = { ( ) => false }
beforeUpload = { ( ) => false }
>
onPreview = { this . handlePreview } >
{ icons . length !== 1 && (
{ icons . length === 1 ? null : uploadButton }
< Button >
< Icon type = "upload" / > Change
< / B u t t o n >
) }
< / U p l o a d > ,
< / U p l o a d > ,
) }
) }
< / F o r m . I t e m >
< / F o r m . I t e m >
< Form . Item { ... formItemLayout } label = "Screenshots" >
< Form . Item { ... formItemLayout } label = "Screenshots" >
{ getFieldDecorator ( 'screenshots' , {
{ getFieldDecorator ( 'screenshots' , {
valuePropName : 'icon' ,
valuePropName : 'icon' ,
@ -440,15 +499,11 @@ class EditReleaseModal extends React.Component {
} ) (
} ) (
< Upload
< Upload
name = "screenshots"
name = "screenshots"
listType = "picture-card"
onChange = { this . handleScreenshotChange }
onChange = { this . handleScreenshotChange }
beforeUpload = { ( ) => false }
beforeUpload = { ( ) => false }
multiple
onPreview = { this . handlePreview } >
>
{ screenshots . length >= 3 ? null : uploadButton }
{ screenshots . length < 3 && (
< Button >
< Icon type = "upload" / > Click to upload
< / B u t t o n >
) }
< / U p l o a d > ,
< / U p l o a d > ,
) }
) }
< / F o r m . I t e m >
< / F o r m . I t e m >
@ -475,7 +530,65 @@ class EditReleaseModal extends React.Component {
rows = { 5 } / >
rows = { 5 } / >
) }
) }
< / F o r m . I t e m >
< / F o r m . I t e m >
{ ( config . deviceTypes . mobileTypes . includes ( deviceType ) ) && (
< Form . Item { ... formItemLayout } label = "Supported OS Versions" >
{ getFieldDecorator ( 'supportedOS' ) (
< div >
< InputGroup >
< Row gutter = { 8 } >
< Col span = { 11 } >
< Form . Item >
{ getFieldDecorator ( 'lowerOsVersion' , {
rules : [ {
required : true ,
message : 'Please select Value'
} ] ,
} ) (
< Select
placeholder = "Lower version"
style = { { width : "100%" } }
onChange = { this . handleLowerOsVersionChange } >
{ supportedOsVersions . map ( version => (
< Option key = { version . versionName }
value = { version . versionName } >
{ version . versionName }
< / O p t i o n >
) ) }
< / S e l e c t >
) }
< / F o r m . I t e m >
< / C o l >
< Col span = { 2 } >
< p > - < / p >
< / C o l >
< Col span = { 11 } >
< Form . Item >
{ getFieldDecorator ( 'upperOsVersion' , {
rules : [ {
required : true ,
message : 'Please select Value'
} ] ,
} ) (
< Select style = { { width : "100%" } }
placeholder = "Upper version"
onChange = { this . handleUpperOsVersionChange } >
{ supportedOsVersions . map ( version => (
< Option key = { version . versionName }
value = { version . versionName } >
{ version . versionName }
< / O p t i o n >
) ) }
< / S e l e c t >
) }
< / F o r m . I t e m >
< / C o l >
< / R o w >
< / I n p u t G r o u p >
< / d i v >
) }
< / F o r m . I t e m >
) }
< Form . Item { ... formItemLayout } label = "Price" >
< Form . Item { ... formItemLayout } label = "Price" >
{ getFieldDecorator ( 'price' , {
{ getFieldDecorator ( 'price' , {
rules : [ {
rules : [ {
@ -575,6 +688,9 @@ class EditReleaseModal extends React.Component {
< / F o r m >
< / F o r m >
< / S p i n >
< / S p i n >
< / d i v >
< / d i v >
< Modal visible = { previewVisible } footer = { null } onCancel = { this . handlePreviewCancel } >
< img alt = "Preview Image" style = { { width : '100%' } } src = { previewImage } / >
< / M o d a l >
< / M o d a l >
< / M o d a l >
< / d i v >
< / d i v >
) ;
) ;