diff --git a/ui-admin/src/js/common/messages.js b/ui-admin/src/js/common/messages.js
index 5cdcb16583f13115831eb7e131268ebf4c1ee7e5..70a65a54357be1ebd6dc652735f4e343efebe6b9 100644
--- a/ui-admin/src/js/common/messages.js
+++ b/ui-admin/src/js/common/messages.js
@@ -104,6 +104,7 @@ const keys = {
FILTERS: 'FILTERS',
FIRST_NAME: 'FIRST_NAME',
FIRST_PAGE: 'FIRST_PAGE',
+ FOLDER_NAME: 'FOLDER_NAME',
FOLDER_UPLOAD: 'FOLDER_UPLOAD',
FORM_PREVIEW: 'FORM_PREVIEW',
FREEZES: 'FREEZES',
@@ -132,6 +133,7 @@ const keys = {
INFO: 'INFO',
INHERITED_FROM: 'INHERITED_FROM',
INITIAL_VALUE: 'INITIAL_VALUE',
+ INPUT: 'INPUT',
INTERNAL: 'INTERNAL',
INVALID: 'INVALID',
IS_NEW_ENTITY: 'IS_NEW_ENTITY',
@@ -418,6 +420,7 @@ const messages_en = {
[keys.FILTERS]: 'Filters',
[keys.FIRST_NAME]: 'First Name',
[keys.FIRST_PAGE]: 'First Page',
+ [keys.FOLDER_NAME]: 'Folder name',
[keys.FOLDER_UPLOAD]: 'Folder upload',
[keys.FORM_PREVIEW]: 'Form Preview',
[keys.FREEZES]: 'Freezes',
@@ -446,6 +449,7 @@ const messages_en = {
[keys.INFO]: 'Info',
[keys.INHERITED_FROM]: 'Inherited From',
[keys.INITIAL_VALUE]: 'Initial Value',
+ [keys.INPUT]: 'Input',
[keys.INTERNAL]: 'Internal',
[keys.INVALID]: 'Invalid',
[keys.IS_NEW_ENTITY]: 'Is New Entity',
diff --git a/ui-admin/src/js/components/common/dialog/InputDialog.jsx b/ui-admin/src/js/components/common/dialog/InputDialog.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..77ea497f9affac86387f948790a29587d135b03c
--- /dev/null
+++ b/ui-admin/src/js/components/common/dialog/InputDialog.jsx
@@ -0,0 +1,140 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Button from '@src/js/components/common/form/Button.jsx'
+import Dialog from '@src/js/components/common/dialog/Dialog.jsx'
+import messages from '@src/js/common/messages.js'
+import logger from '@src/js/common/logger.js'
+import { DialogContentText } from '@material-ui/core'
+import TextField from '@material-ui/core/TextField'
+import autoBind from 'auto-bind'
+
+const styles = theme => ({
+ button: {
+ marginLeft: theme.spacing(1)
+ }
+})
+
+class InputDialog extends React.Component {
+ constructor(props) {
+ super(props)
+ autoBind(this)
+
+ this.state = {
+ inputValue: ''
+ }
+
+ this.handleClose = this.handleClose.bind(this)
+ }
+
+ handleClose() {
+ const { onCancel } = this.props
+ if (onCancel) {
+ onCancel()
+ }
+ }
+
+ updateInputValue(event) {
+ const value = event.target.value
+ this.setState({
+ inputValue: value
+ })
+ }
+
+ handleConfirmClick() {
+ const { onConfirm } = this.props
+ const { inputValue } = this.state
+ onConfirm(inputValue)
+ this.clearInput()
+ }
+
+ handleCancelClick() {
+ const { onCancel } = this.props
+ onCancel()
+ this.clearInput()
+ }
+
+ clearInput() {
+ this.setState({
+ inputValue: ''
+ })
+ }
+
+ renderButtons() {
+ const { classes } = this.props
+ return (
+ <div>
+ <Button
+ name='confirm'
+ label={messages.get(messages.CONFIRM)}
+ type={this.getButtonType()}
+ styles={{ root: classes.button }}
+ onClick={this.handleConfirmClick}
+ />
+ <Button
+ name='cancel'
+ label={messages.get(messages.CANCEL)}
+ styles={{ root: classes.button }}
+ onClick={this.handleCancelClick}
+ />
+ </div>
+ )
+ }
+
+ getMessageType() {
+ const type = this.getType()
+
+ if (type === 'warning') {
+ return 'warning'
+ } else if (type === 'info') {
+ return 'info'
+ } else {
+ throw new Error('Unsupported type: ' + type)
+ }
+ }
+
+ getButtonType() {
+ const type = this.getType()
+
+ if (type === 'warning') {
+ return 'risky'
+ } else if (type === 'info') {
+ return null
+ } else {
+ throw new Error('Unsupported type: ' + type)
+ }
+ }
+
+ getType() {
+ return this.props.type || 'warning'
+ }
+
+ render() {
+ logger.log(logger.DEBUG, 'ConfirmationDialog.render')
+
+ const { open, title, inputLabel, inputType, content } = this.props
+ const { inputValue } = this.state
+
+ return (
+ <Dialog
+ open={open}
+ onClose={this.handleClose}
+ title={title || messages.get(messages.INPUT)}
+ content={[<DialogContentText key='dialog-content'>{content}</DialogContentText>,
+ <TextField
+ key='dialog-text'
+ autoFocus
+ margin='dense'
+ label={inputLabel}
+ type={inputType || 'text'}
+ fullWidth
+ variant='standard'
+ value={inputValue}
+ onChange={this.updateInputValue}
+ />]}
+ actions={this.renderButtons()}
+ />
+ )
+ }
+}
+
+export default withStyles(styles)(InputDialog)
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowserController.js b/ui-admin/src/js/components/database/data-browser/DataBrowserController.js
index e09042a3a92221bf0ac15b6f0920f3ef0da7fe0a..7072b2feb8054d479d32682bdaeb5819e0197872 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowserController.js
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowserController.js
@@ -22,6 +22,9 @@ export default class DataBrowserController extends ComponentController {
constructor() {
super()
autoBind(this)
+
+ this.owner = 'demo-sample'
+ this.source = ''
}
async login() {
@@ -38,7 +41,7 @@ export default class DataBrowserController extends ComponentController {
async listFiles() {
return new Promise((resolve, reject) => {
- this.component.datastoreServer.list('demo-sample', '', 'true', (data) => {
+ this.component.datastoreServer.list(this.owner, this.source, true, (data) => {
if (!data.error) {
const results = data.result[1]
const files = results.map(result => result[1])
@@ -57,8 +60,8 @@ export default class DataBrowserController extends ComponentController {
return await files.map(file => ({ id: file.name, ...file }))
}
- handleNewFolderClick(event) {
- console.log(event.target)
+ createNewFolder(name) {
+ // this.component.datastoreServer.create(this.owner, this.source, true, )
}
handleUploadClick(event) {
diff --git a/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
index d28e289c9b4dbf2b758921ab5e16383f2b01f433..1f3103448a1c78c37124e5da70ae1d6efc6ba3ac 100644
--- a/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
@@ -33,6 +33,7 @@ import IconButton from '@material-ui/core/IconButton'
import { debounce } from '@material-ui/core'
import Container from '@src/js/components/common/form/Container.jsx'
import Popover from '@material-ui/core/Popover'
+import InputDialog from '@src/js/components/common/dialog/InputDialog.jsx'
const color = 'secondary'
const iconButtonSize = 'medium'
@@ -72,27 +73,50 @@ class LeftToolbar extends React.Component {
this.state = {
width: 0,
- hiddenButtonsPopup: null
+ hiddenButtonsPopup: null,
+ newFolderDialogOpen: false
}
this.controller = this.props.controller
- this.onResize = debounce(this.onResize, 1);
+ this.onResize = debounce(this.onResize, 1)
+ }
+
+ handleNewFolderCreate(event) {
+ this.closeNewFolderDialog()
+ console.log(event)
+ }
+
+ openNewFolderDialog() {
+ this.setState({ newFolderDialogOpen: true })
+ }
+
+ closeNewFolderDialog() {
+ this.setState({ newFolderDialogOpen: false })
}
renderNoSelectionContextToolbar() {
const { classes, buttonSize } = this.props
- return (
+ return ([
<Button
+ key='new-folder'
classes={{ root: classes.button }}
color={color}
size={buttonSize}
variant='outlined'
startIcon={<CreateNewFolderIcon />}
- onClick={this.controller.handleNewFolderClick}
+ onClick={this.openNewFolderDialog}
>
{messages.get(messages.NEW_FOLDER)}
- </Button>
- )
+ </Button>,
+ <InputDialog
+ key='new-folder-dialog'
+ open={this.state.newFolderDialogOpen}
+ title={messages.get(messages.NEW_FOLDER)}
+ inputLabel={messages.get(messages.FOLDER_NAME)}
+ onCancel={this.closeNewFolderDialog}
+ onConfirm={this.handleNewFolderCreate}
+ />
+ ])
}
renderSelectionContextToolbar() {
@@ -114,7 +138,6 @@ class LeftToolbar extends React.Component {
size={buttonSize}
variant='outlined'
startIcon={<DownloadIcon />}
- onClick={this.controller.handleNewFolderClick}
>
{messages.get(messages.DOWNLOAD)}
</Button>,
@@ -125,7 +148,6 @@ class LeftToolbar extends React.Component {
size={buttonSize}
variant='text'
startIcon={<DeleteIcon />}
- onClick={this.controller.handleNewFolderClick}
>
{messages.get(messages.DELETE)}
</Button>,
@@ -136,7 +158,6 @@ class LeftToolbar extends React.Component {
size={buttonSize}
variant='text'
startIcon={<RenameIcon />}
- onClick={this.controller.handleNewFolderClick}
>
{messages.get(messages.RENAME)}
</Button>,
@@ -147,7 +168,6 @@ class LeftToolbar extends React.Component {
size={buttonSize}
variant='text'
startIcon={<CopyIcon />}
- onClick={this.controller.handleNewFolderClick}
>
{messages.get(messages.COPY)}
</Button>,
@@ -158,7 +178,6 @@ class LeftToolbar extends React.Component {
size={buttonSize}
variant='text'
startIcon={<MoveIcon />}
- onClick={this.controller.handleNewFolderClick}
>
{messages.get(messages.MOVE)}
</Button>