jsreport-studio/src/components/Modals/RenameModal.js

jsreport templates editor and designer

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actions, selectors } from '../../redux/entities'
import api from '../../helpers/api.js'
import { entitySets } from '../../lib/configuration.js'

class RenameModal extends Component {
  static propTypes = {
    close: PropTypes.func.isRequired,
    options: PropTypes.object.isRequired
  }

  constructor (props) {
    super(props)

    this.nameRef = React.createRef()

    this.state = {
      error: null
    }
  }

  componentDidMount () {
    setTimeout(() => this.nameRef.current.focus(), 0)
  }

  handleKeyPress (e) {
    if (e.key === 'Enter') {
      this.rename()
    }
  }

  async rename () {
    if (!this.nameRef.current.value) {
      return
    }

    const newName = this.nameRef.current.value
    const nameAttribute = entitySets[this.props.entity.__entitySet].nameAttribute

    try {
      await api.post('/studio/validate-entity-name', {
        data: {
          _id: this.props.entity._id,
          name: newName,
          entitySet: this.props.entity.__entitySet,
          folderShortid: this.props.entity.folder != null ? this.props.entity.folder.shortid : null
        }
      })
    } catch (e) {
      this.setState({
        error: e.message
      })

      return
    }

    this.setState({
      error: null
    })

    this.props.close()

    this.props.update({
      _id: this.props.entity._id,
      [nameAttribute]: newName
    })
    this.props.save(this.props.entity._id)
  }

  render () {
    const { error } = this.state
    const { entity } = this.props
    const nameAttribute = entitySets[entity.__entitySet].nameAttribute

    return <div>
      <div className='form-group'>
        <label>rename entity</label>
        <input
          ref={this.nameRef}
          type='text'
          defaultValue={entity[nameAttribute]}
          onKeyPress={(e) => this.handleKeyPress(e)}
        />
      </div>
      <div className='form-group'>
        <span style={{ color: 'red', display: error ? 'block' : 'none' }}>{error}</span>
      </div>
      <div className='button-bar'>
        <button className='button confirmation' onClick={() => this.rename()}>Ok</button>
        <button className='button confirmation' onClick={() => this.props.close()}>Cancel</button>
      </div>
    </div>
  }
}

export default connect(
  (state, props) => ({ entity: selectors.getById(state, props.options._id) }),
  { ...actions }
)(RenameModal)