SSDM-7569 NEW openBIS UI - General Template/Infrastructure for Forms -...

SSDM-7569 NEW openBIS UI - General Template/Infrastructure for Forms - Visualisation/Creation/Edit - object type form with property type choice and field preview

openbis_ng_ui/src/components/types/objectType/ObjectType.jsx

@@ -39,41 +39,58 @@ class ObjectType extends React.Component {
   }
 
   componentDidMount(){
-    let id = new dto.EntityTypePermId(this.props.objectId)
+    Promise.all([
+      this.loadObjectType(this.props.objectId),
+      this.loadPropertyTypes()
+    ]).then(([objectType, propertyTypes]) => {
+      this.setState(() => ({
+        loaded: true,
+        objectType: objectType,
+        propertyTypes: propertyTypes
+      }))
+    })
+  }
+
+  loadObjectType(objectTypeId){
+    let id = new dto.EntityTypePermId(objectTypeId)
     let fo = new dto.SampleTypeFetchOptions()
     fo.withPropertyAssignments().withPropertyType()
     fo.withPropertyAssignments().sortBy().code()
 
-    facade.getSampleTypes([id], fo).then(map => {
-      let objectType = map[this.props.objectId]
+    return facade.getSampleTypes([id], fo).then(map => {
+      let objectType = map[objectTypeId]
       if(objectType){
-        this.setState(() => {
-          return {
-            loaded: true,
-            object: {
-              code: objectType.code,
-              properties: objectType.propertyAssignments.map(assignment => ({
-                permId: assignment.permId,
-                code: assignment.propertyType.code,
-                label: assignment.propertyType.label,
-                description: assignment.propertyType.description,
-                dataType: assignment.propertyType.dataType,
-                ordinal: assignment.ordinal,
-                mandatory: assignment.mandatory,
-                selected: false,
-                errors: {}
-              }))
-            }
-          }
-        })
+        return {
+          code: objectType.code,
+          properties: objectType.propertyAssignments.map(assignment => ({
+            permId: assignment.permId,
+            propertyType: assignment.propertyType,
+            ordinal: assignment.ordinal,
+            mandatory: assignment.mandatory,
+            selected: false,
+            errors: {}
+          }))
+        }
+      }else{
+        return null
       }
     })
   }
 
-  handleChange(index, key, value){
+  loadPropertyTypes(){
+    let criteria = new dto.PropertyTypeSearchCriteria()
+    let fo = new dto.PropertyTypeFetchOptions()
+    fo.withVocabulary().withTerms()
+
+    return facade.searchPropertyTypes(criteria, fo).then(result => {
+      return result.objects
+    })
+  }
+
+  handleChange(ordinal, key, value){
     this.setState((prevState) => {
-      let newProperties = prevState.object.properties.map((property, i) => {
-        if(i === index){
+      let newProperties = prevState.objectType.properties.map((property) => {
+        if(property.ordinal === ordinal){
           return {
             ...property,
             [key]: value
@@ -84,8 +101,8 @@ class ObjectType extends React.Component {
       })
       return {
         ...prevState,
-        object: {
-          ...prevState.object,
+        objectType: {
+          ...prevState.objectType,
           properties: newProperties
         }
       }
@@ -98,7 +115,7 @@ class ObjectType extends React.Component {
 
   handleRemove(){
     this.setState((prevState) => {
-      let newProperties = prevState.object.properties.reduce((array, property) => {
+      let newProperties = prevState.objectType.properties.reduce((array, property) => {
         if(!property.selected){
           array.push(property)
         }
@@ -107,8 +124,8 @@ class ObjectType extends React.Component {
 
       return {
         ...prevState,
-        object: {
-          ...prevState.object,
+        objectType: {
+          ...prevState.objectType,
           properties: newProperties
         }
       }
@@ -117,39 +134,44 @@ class ObjectType extends React.Component {
 
   handleAdd(){
     this.setState((prevState) => {
-      let newProperties = prevState.object.properties.map(property => ({
-        ...property,
-        selected: false
-      }))
+      let newOrdinal = 0
+      let newProperties = prevState.objectType.properties.map(property => {
+        if(newOrdinal <= property.ordinal){
+          newOrdinal = property.ordinal + 1
+        }
+        return {
+          ...property,
+          selected: false
+        }
+      })
       newProperties.push({
-        code: 'PROPERTY_' + prevState.object.properties.length,
-        label: '',
-        description: '',
-        dataType: '',
+        permId: null,
+        propertyType: null,
         mandatory: false,
         selected: true,
+        ordinal: newOrdinal,
         errors: {}
       })
 
       return {
         ...prevState,
-        object: {
-          ...prevState.object,
+        objectType: {
+          ...prevState.objectType,
           properties: newProperties
         }
       }
     })
   }
 
-  handleSelect(propertyCode){
+  handleSelect(ordinal){
     this.setState((prevState) => ({
       ...prevState,
-      object: {
-        ...prevState.object,
-        properties: prevState.object.properties.map(property => {
+      objectType: {
+        ...prevState.objectType,
+        properties: prevState.objectType.properties.map(property => {
           return {
             ...property,
-            selected: property.code === propertyCode ? !property.selected : false
+            selected: property.ordinal === ordinal ? !property.selected : false
           }
         })
       }
@@ -157,7 +179,7 @@ class ObjectType extends React.Component {
   }
 
   handleReorder(oldPropertyIndex, newPropertyIndex){
-    let oldProperties = this.state.object.properties
+    let oldProperties = this.state.objectType.properties
     let newProperties = oldProperties.map(property => {
       if(property.selected){
         return {
@@ -177,8 +199,8 @@ class ObjectType extends React.Component {
 
     this.setState((prevState) => ({
       ...prevState,
-      object: {
-        ...prevState.object,
+      objectType: {
+        ...prevState.objectType,
         properties: newProperties
       }
     }))
@@ -187,20 +209,11 @@ class ObjectType extends React.Component {
   validate(){
     let valid = true
 
-    let newProperties = this.state.object.properties.map(property => {
+    let newProperties = this.state.objectType.properties.map(property => {
       let errors = {}
 
-      if(!_.trim(property.code)){
-        errors['code'] = 'Cannot be empty'
-      }
-      if(!_.trim(property.label)){
-        errors['label'] = 'Cannot be empty'
-      }
-      if(!_.trim(property.description)){
-        errors['description'] = 'Cannot be empty'
-      }
-      if(!_.trim(property.dataType)){
-        errors['dataType'] = 'Cannot be empty'
+      if(!_.trim(property.type)){
+        errors['propertyType'] = 'Cannot be empty'
       }
 
       if(_.size(errors) > 0){
@@ -216,8 +229,8 @@ class ObjectType extends React.Component {
     this.setState((prevState) => ({
       ...prevState,
       validated: true,
-      object: {
-        ...prevState.object,
+      objectType: {
+        ...prevState.objectType,
         properties: newProperties
       }
     }))
@@ -246,7 +259,8 @@ class ObjectType extends React.Component {
       <div className={classes.container}>
         <div className={classes.form}>
           <ObjectTypeForm
-            object={this.state.object}
+            objectType={this.state.objectType}
+            propertyTypes={this.state.propertyTypes}
             onSelect={this.handleSelect}
             onReorder={this.handleReorder}
             onChange={this.handleChange}

openbis_ng_ui/src/components/types/objectType/ObjectTypeForm.jsx

@@ -13,7 +13,8 @@ class ObjectTypeForm extends React.Component {
   render() {
     logger.log(logger.DEBUG, 'ObjectTypeForm.render')
 
-    let { code, properties } = this.props.object
+    let { objectType, propertyTypes } = this.props
+    let { code, properties } = objectType
 
     return (
       <div>
@@ -23,7 +24,8 @@ class ObjectTypeForm extends React.Component {
         <form>
           {properties && properties.length > 0 &&
             <ObjectTypeTable
-              properties={properties}
+              objectType={objectType}
+              propertyTypes={propertyTypes}
               onSelect={this.props.onSelect}
               onReorder={this.props.onReorder}
               onChange={this.props.onChange}

openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyPreview.jsx

+import _ from 'lodash'
+import React from 'react'
+import FormControl from '@material-ui/core/FormControl'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import FormHelperText from '@material-ui/core/FormHelperText'
+import TextField from '@material-ui/core/TextField'
+import Select from '@material-ui/core/Select'
+import MenuItem from '@material-ui/core/MenuItem'
+import Checkbox from '@material-ui/core/Checkbox'
+import {withStyles} from '@material-ui/core/styles'
+import logger from '../../../common/logger.js'
+
+const styles = () => ({
+})
+
+class ObjectTypePropertyPreview extends React.Component {
+
+  constructor(props){
+    super(props)
+    this.state = {
+      values: {
+        vocabulary: '',
+      }
+    }
+  }
+
+  handleChange(name){
+    return (event) => {
+      this.setState((prevState) => ({
+        ...prevState,
+        values: {
+          ...prevState.values,
+          [name]: _.has(event.target, 'checked') ? event.target.checked : event.target.value
+        }
+      }))
+    }
+  }
+
+  render(){
+    logger.log(logger.DEBUG, 'ObjectTypePropertyPreview.render')
+
+    const {propertyType} = this.props
+
+    switch(propertyType.dataType){
+      case 'BOOLEAN':
+        return this.renderBoolean()
+      case 'VARCHAR':
+        return this.renderVarchar()
+      case 'MULTILINE_VARCHAR':
+        return this.renderMultilineVarchar()
+      case 'INTEGER':
+      case 'REAL':
+        return this.renderNumber()
+      case 'CONTROLLEDVOCABULARY':
+        return this.renderVocabulary()
+      default:
+        return this.renderUnsupported()
+    }
+  }
+
+  renderBoolean(){
+    return (
+      <FormControl>
+        <FormControlLabel
+          control={<Checkbox />}
+          label={this.getLabel()}
+        />
+        <FormHelperText>{this.getDescription()}</FormHelperText>
+      </FormControl>
+    )
+  }
+
+  renderVarchar(){
+    return (
+      <TextField
+        label={this.getLabel()}
+        helperText={this.getDescription()}
+        variant="filled"
+      />
+    )
+  }
+
+  renderMultilineVarchar(){
+    return (
+      <TextField
+        label={this.getLabel()}
+        helperText={this.getDescription()}
+        multiline={true}
+        variant="filled"
+      />
+    )
+  }
+
+  renderNumber(){
+    return (
+      <TextField
+        label={this.getLabel()}
+        helperText={this.getDescription()}
+        type="number"
+        variant="filled"
+      />
+    )
+  }
+
+  renderVocabulary(){
+    return (
+      <FormControl>
+        <FormControlLabel
+          control={
+            <Select value={this.getValue('vocabulary')} onChange={this.handleChange('vocabulary')}>
+              <MenuItem value=""></MenuItem>
+              {this.getTerms().map(term => (
+                <MenuItem key={term.code} value={term.code}>{term.label || term.code}</MenuItem>
+              ))}
+            </Select>
+          }
+          label={this.getLabel()}
+          labelPlacement="top"
+        />
+        <FormHelperText>{this.getDescription()}</FormHelperText>
+      </FormControl>
+    )
+  }
+
+  renderUnsupported(){
+    return (<div>unsupported</div>)
+  }
+
+  getValue(field){
+    return this.state.values[field]
+  }
+
+  getLabel(){
+    let mandatory = this.props.property.mandatory
+    let label = this.props.propertyType.label
+    return mandatory ? label + '*' : label
+  }
+
+  getDescription(){
+    return this.props.propertyType.description
+  }
+
+  getTerms(){
+    return this.props.propertyType.vocabulary.terms
+  }
+
+}
+
+export default _.flow(
+  withStyles(styles)
+)(ObjectTypePropertyPreview)

openbis_ng_ui/src/components/types/objectType/ObjectTypeTableRow.jsx → openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyRow.jsx

@@ -8,10 +8,10 @@ import TableRow from '@material-ui/core/TableRow'
 import FormControl from '@material-ui/core/FormControl'
 import FormHelperText from '@material-ui/core/FormHelperText'
 import Select from '@material-ui/core/Select'
-import TextField from '@material-ui/core/TextField'
 import Checkbox from '@material-ui/core/Checkbox'
 import DragHandleIcon from '@material-ui/icons/DragHandle'
 import RootRef from '@material-ui/core/RootRef'
+import ObjectTypePropertyPreview from './ObjectTypePropertyPreview.jsx'
 import {withStyles} from '@material-ui/core/styles'
 import logger from '../../../common/logger.js'
 
@@ -72,6 +72,9 @@ class ObjectTypeTableRow extends React.Component {
     super(props)
     this.handleRef = React.createRef()
     this.rowRef = React.createRef()
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChangePropertyType = this.handleChangePropertyType.bind(this)
+    this.handleChangeMandatory = this.handleChangeMandatory.bind(this)
   }
 
   componentDidMount(){
@@ -80,80 +83,100 @@ class ObjectTypeTableRow extends React.Component {
     this.props.connectDropTarget(this.rowRef.current)
   }
 
-  handleSelect(property){
-    return () => {
-      this.props.onSelect(property)
-    }
+  handleSelect(){
+    this.props.onSelect(this.props.property.ordinal)
   }
 
-  handleChange(index, key){
-    return event => {
-      let value = _.has(event.target, 'checked') ? event.target.checked : event.target.value
-      this.props.onChange(index, key, value)
-    }
+  handleChangePropertyType(event){
+    event.stopPropagation()
+    let propertyType = _.find(this.props.propertyTypes, propertyType => {
+      return propertyType.code === event.target.value
+    })
+    this.props.onChange(this.props.property.ordinal, 'propertyType', propertyType)
+  }
+
+  handleChangeMandatory(event){
+    event.stopPropagation()
+    this.props.onChange(this.props.property.ordinal, 'mandatory', event.target.checked)
   }
 
   render(){
-    logger.log(logger.DEBUG, 'ObjectTypeTableRow.render')
+    logger.log(logger.DEBUG, 'ObjectTypePropertyRow.render')
 
-    const {classes, property, index} = this.props
+    const {classes, property} = this.props
 
     return (
       <RootRef rootRef={this.rowRef}>
-        <TableRow key={property.code} classes={{ root: classes.row, selected: classes.selected }} selected={property.selected} onClick={this.handleSelect(property.code)}>
+        <TableRow
+          classes={{ root: classes.row, selected: classes.selected }}
+          selected={property.selected}
+          onClick={this.handleSelect}
+        >
           <RootRef rootRef={this.handleRef}>
             <TableCell classes={{ root: classes.drag }}>
               <DragHandleIcon />
             </TableCell>
           </RootRef>
           <TableCell>
-            <TextField
-              value={property.code}
-              error={property.errors['code'] ? true : false}
-              helperText={property.errors['code']}
-              onChange={this.handleChange(index, 'code')}
-            />
-          </TableCell>
-          <TableCell>
-            <TextField
-              value={property.label}
-              error={property.errors['label'] ? true : false}
-              helperText={property.errors['label']}
-              onChange={this.handleChange(index, 'label')}
-            />
+            {this.renderPreview()}
           </TableCell>
           <TableCell>
-            <TextField
-              value={property.description}
-              error={property.errors['description'] ? true : false}
-              helperText={property.errors['description']}
-              onChange={this.handleChange(index, 'description')}
-            />
+            {this.renderPropertyType()}
           </TableCell>
           <TableCell>
-            <FormControl error={property.errors['dataType'] ? true : false}>
-              <Select
-                value={property.dataType ? property.dataType : ''}
-                onChange={this.handleChange(index, 'dataType')}
-              >
-                <MenuItem value=""></MenuItem>
-                <MenuItem value={'VARCHAR'}>VARCHAR</MenuItem>
-                <MenuItem value={'INTEGER'}>INTEGER</MenuItem>
-                <MenuItem value={'REAL'}>REAL</MenuItem>
-                <MenuItem value={'BOOLEAN'}>BOOLEAN</MenuItem>
-              </Select>
-              { property.errors['dataType'] &&
-                <FormHelperText>{property.errors['dataType']}</FormHelperText>
-              }
-            </FormControl>
-          </TableCell>
-          <TableCell>
-            <Checkbox checked={property.mandatory} value='mandatory' onChange={this.handleChange(index, 'mandatory')} />
+            {this.renderMandatory()}
           </TableCell>
         </TableRow>
       </RootRef>
     )
   }
+
+  renderPreview(){
+    const {property, propertyTypes} = this.props
+
+    const propertyType = _.find(propertyTypes, propertyType => {
+      return propertyType.code === property.propertyType.code
+    })
+
+    return (
+      <ObjectTypePropertyPreview property={property} propertyType={propertyType} />
+    )
+  }
+
+  renderPropertyType(){
+    const {property, propertyTypes} = this.props
+
+    return (
+      <FormControl error={property.errors['propertyType'] ? true : false}>
+        <Select
+          value={property.propertyType ? property.propertyType.code : ''}
+          onClick={event => {event.stopPropagation()}}
+          onChange={this.handleChangePropertyType}
+        >
+          <MenuItem value=""></MenuItem>
+          {propertyTypes && propertyTypes.map(propertyType => (
+            <MenuItem key={propertyType.code} value={propertyType.code}>{propertyType.code}</MenuItem>
+          ))}
+        </Select>
+        {property.errors['type'] &&
+        <FormHelperText>{property.errors['type']}</FormHelperText>
+        }
+      </FormControl>
+    )
+  }
+
+  renderMandatory(){
+    const {property} = this.props
+
+    return (
+      <Checkbox
+        checked={property.mandatory}
+        value='mandatory'
+        onClick={event => {event.stopPropagation()}}
+        onChange={this.handleChangeMandatory}
+      />
+    )
+  }
 }
 
 export default _.flow(

openbis_ng_ui/src/components/types/objectType/ObjectTypeTable.jsx

@@ -5,11 +5,10 @@ import TableBody from '@material-ui/core/TableBody'
 import TableHead from '@material-ui/core/TableHead'
 import TableCell from '@material-ui/core/TableCell'
 import TableRow from '@material-ui/core/TableRow'
-import ObjectTypeTableRow from './ObjectTypeTableRow.jsx'
+import ObjectTypePropertyRow from './ObjectTypePropertyRow.jsx'
 import {withStyles} from '@material-ui/core/styles'
 import logger from '../../../common/logger.js'
 
-
 const styles = () => ({
   table: {
     width: '100%'
@@ -18,29 +17,34 @@ const styles = () => ({
 
 class ObjectTypeTable extends React.Component {
 
+  constructor(props){
+    super(props)
+    this.state = {}
+  }
+
   render() {
     logger.log(logger.DEBUG, 'ObjectTypeTable.render')
 
-    const { classes, properties } = this.props
+    const { classes, objectType, propertyTypes } = this.props
+    const { properties } = objectType
 
     return (
       <Table className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell></TableCell>
-            <TableCell>Code*</TableCell>
-            <TableCell>Label*</TableCell>
-            <TableCell>Description*</TableCell>
-            <TableCell>Data Type*</TableCell>
+            <TableCell>Preview</TableCell>
+            <TableCell>Property Type*</TableCell>
             <TableCell>Mandatory</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {properties.map((property, index) => (
-            <React.Fragment key={property.code}>
-              <ObjectTypeTableRow
+            <React.Fragment key={property.ordinal}>
+              <ObjectTypePropertyRow
                 index={index}
                 property={property}
+                propertyTypes={propertyTypes}
                 onChange={this.props.onChange}
                 onSelect={this.props.onSelect}
                 onReorder={this.props.onReorder}

openbis_ng_ui/src/services/openbis/dto.js

@@ -13,7 +13,10 @@ const CLASS_FULL_NAMES = [
   'as/dto/dataset/search/DataSetTypeSearchCriteria',
   'as/dto/dataset/fetchoptions/DataSetTypeFetchOptions',
   'as/dto/material/search/MaterialTypeSearchCriteria',
-  'as/dto/material/fetchoptions/MaterialTypeFetchOptions'
+  'as/dto/material/fetchoptions/MaterialTypeFetchOptions',
+  'as/dto/property/PropertyType',
+  'as/dto/property/search/PropertyTypeSearchCriteria',
+  'as/dto/property/fetchoptions/PropertyTypeFetchOptions'
 ]
 
 class Dto {

openbis_ng_ui/src/services/openbis/facade.js

@@ -32,6 +32,10 @@ export class Facade {
     return this.v3.logout()
   }
 
+  searchPropertyTypes(criteria, fo) {
+    return this.v3.searchPropertyTypes(criteria, fo)
+  }
+
   searchPersons(criteria, fo) {
     return this.v3.searchPersons(criteria, fo)
   }