Commit 2d755b5e authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '151-autocomplete-creators-in-datasets' into 'master'

Autocomplete Creators in datasets

Closes #151

See merge request genesys-pgr/genesys-ui!152
parents 0a00071b e9c92faf
......@@ -692,7 +692,8 @@
"phonePlaceholder": "+1 555 1231 Ext. 42",
"instAddress": "Institutional address",
"instAddressPlaceholder": "Address of institution of affiliation when the dataset was created.",
"add": "Add dataset creator"
"add": "Add dataset creator",
"autocomplete": "Creator name"
},
"location": {
"title": "Location and timing",
......
......@@ -81,7 +81,8 @@
"phonePlaceholder": "+1 555 1231 Ext. 42",
"instAddress": "Institutional address",
"instAddressPlaceholder": "Address of institution of affiliation when the dataset was created.",
"add": "Add dataset creator"
"add": "Add dataset creator",
"autocomplete": "Creator name"
},
"location": {
"title": "Location and timing",
......
import * as React from 'react';
import { translate } from 'react-i18next';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import TextField from '@material-ui/core/TextField';
import FormControl from 'ui/common/forms/FormControl';
import DatasetService from 'service/catalog/DatasetService';
import Select from '@material-ui/core/Select';
import Input from '@material-ui/core/Input';
interface IDatasetCreatorAutocompleteFieldProps extends React.ClassAttributes<any> {
label: any;
input: any;
t: any;
updateDatasetCreator: (newDatasetCreator: string) => void;
}
class DatasetCreatorAutocompleteField extends React.Component<IDatasetCreatorAutocompleteFieldProps> {
public state = {
suggestions: [],
open: false,
anchorEl: null,
};
public render() {
const { label, input, t } = this.props;
return (
<FormControl fullWidth label={ label }>
<Select
onClick={ this.handleOpen }
value={ input.value }
input={ <Input/> }
MenuProps={ {
open: false,
} }
>
{
<MenuItem value={ input.value }>{ input.value }</MenuItem>
}
</Select>
<Menu
anchorEl={ this.state.anchorEl }
open={ this.state.open }
onClose={ this.handleClose }
>
<MenuItem>
<TextField
fullWidth
value={ input.value }
label={ t('datasets.dashboard.p.stepper.creators.autocomplete') }
onChange={ this.handleInputChange }
/>
</MenuItem>
{
this.state.suggestions.filter((item, index, self) => self.findIndex((tmp) => tmp.fullName === item.fullName) === index).map((dCr, index) => (
<MenuItem
onClick={ () => this.select(dCr) }
key={ `dataset-creator-${ index }` }
>
<div>
<b>{ `${index + 1}. ` }</b>
<b>{ `${ dCr.fullName }` }</b>
<i>{ dCr.email && ` - ${ dCr.email }` }</i>
<div>
{ dCr.institutionalAffiliation && `${ dCr.institutionalAffiliation } - ` }
<i>{ dCr.role && `${ t(`datasets.common.creator.role.${dCr.role}`)}` }</i>
</div>
</div>
</MenuItem>
))
}
</Menu>
</FormControl>
);
}
private handleInputChange = (e) => {
const {input} = this.props;
DatasetService.autocomplete('uuid', e.target.value)
.then((creators) => this.setState({ suggestions: creators }));
input.onChange(e.target.value);
}
private select = (datasetCreator) => {
const { updateDatasetCreator } = this.props;
updateDatasetCreator(datasetCreator);
this.setState({open: false});
}
private handleOpen = (e) => {
this.setState({open: true, anchorEl: e.target});
}
private handleClose = () => {
this.setState({open: false});
}
}
export default translate()(DatasetCreatorAutocompleteField);
......@@ -16,6 +16,7 @@ import { DATASET_CREATOR_FORM } from 'datasets/constants';
import Dataset from 'model/catalog/Dataset';
import DatasetCreator, { CreatorRole } from 'model/catalog/DatasetCreator';
import RadioSelection from 'ui/common/forms/RadioSelection';
import DatasetCreatorAutocompleteField from './DatasetCreatorAutocompleteField';
interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
t: any;
......@@ -25,6 +26,7 @@ interface IDatasetCreatorFormProps extends React.ClassAttributes<any> {
dataset: Dataset;
createDatasetCreator: () => Promise<Location>;
deleteCreatorRequest: (creator: DatasetCreator) => Promise<DatasetCreator>;
updateCreatorRequest: (creator: DatasetCreator) => Promise<DatasetCreator>;
}
const styles = (theme) => ({
......@@ -50,6 +52,18 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
this.props.deleteCreatorRequest(fields.get(index));
}
public updateCreatorData = (fields, index) => (newCreator) => {
this.props.updateCreatorRequest({
...fields.get(index),
...newCreator,
uuid: fields.get(index).uuid,
id: fields.get(index).id,
version: fields.get(index).version,
});
}
private renderRoleLabel = (role) => (
<div style={ {paddingTop: '6px', marginBottom: '-6px'} }>
<b style={ {fontSize: '14px'} }>{ this.props.t(`datasets.common.creator.role.${role}`) }</b>
......@@ -74,10 +88,11 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
</div>
<Field
required name={ `${creator}.fullName` }
component={ TextField }
component={ DatasetCreatorAutocompleteField }
label={ t('datasets.dashboard.p.stepper.creators.name') }
placeholder={ t('datasets.dashboard.p.stepper.creators.namePlaceholder') }
validate={ [Validators.required] }
updateDatasetCreator={ this.updateCreatorData(fields, index) }
/>
<Field
required name={ `${creator}.role` }
......
......@@ -34,6 +34,7 @@ class CreatorsStep extends StepperTemplate<ICreatorsStepProps> {
initialValues={ this.props.item }
createDatasetCreator={ this.create }
deleteCreatorRequest={ this.props.deleteCreatorRequest }
updateCreatorRequest={ this.props.updateCreatorRequest }
/>
)
private updateIfNeed = () => {
......
......@@ -26,7 +26,7 @@ const URL_UPDATE_DATASET = `/api/v1/dataset/update`;
const URL_UPSERT_ACCESSIONS = UrlTemplate.parse(`/api/v1/dataset/upsertaccessions/{uuid},{version}`);
const URL_GET_DATASET = UrlTemplate.parse(`/api/v1/dataset/{uuid}`);
const URL_DELETE_DATASET = UrlTemplate.parse(`/api/v1/dataset/{uuid},{version}`);
const URL_AUTOCOMPLETE = `/api/v1/dataset/{uuid}/datasetcreator/autocomplete`;
const URL_AUTOCOMPLETE = UrlTemplate.parse(`/api/v1/dataset/{uuid}/datasetcreator/autocomplete`);
const URL_CREATE_DATASET_CREATOR = UrlTemplate.parse(`/api/v1/dataset/{uuid}/datasetcreator/create`);
const URL_DELETE_DATASET_CREATOR = UrlTemplate.parse(`/api/v1/dataset/{uuid}/datasetcreator/delete`);
const URL_LIST_DATASET_CREATORS = UrlTemplate.parse(`/api/v1/dataset/{uuid}/datasetcreator/list`);
......@@ -350,12 +350,12 @@ class DatasetService {
*
* @param c c
*/
public static autocomplete(c: string): Promise<DatasetCreator[]> {
public static autocomplete(uuid: string, c: string): Promise<DatasetCreator[]> {
const qs = QueryString.stringify({
c: c || undefined,
}, {});
const apiUrl = URL_AUTOCOMPLETE + (qs ? `?${qs}` : '');
const apiUrl = URL_AUTOCOMPLETE.expand({uuid}) + (qs ? `?${qs}` : '');
// console.log(`Fetching from ${apiUrl}`);
const content = { /* No content in request body */ };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment