Commit e3ca6469 authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files

Search in DescriptorListPicker

parent 6de885ea
......@@ -80,6 +80,25 @@ export const promiseListDescriptorLists = (page?, results?, sortBy?, filter?, or
});
};
export const promiseDescriptorList = (uuid) => (dispatch, getState) => {
const token = getState().login.access_token;
return DescriptorListService.loadDescriptorList(token, uuid)
.catch((error) => {
log('Error', error);
return error;
});
};
export const autocomplete = (term: string = '') => (dispatch, getState) => {
const token = getState().login.access_token;
return DescriptorListService.autocomplete(token, term)
.catch((error) => {
log('Error', error);
});
};
// List published descriptor lists
export const listDescriptorLists = (page?, results?, sortBy?, filter?, order?) => (dispatch, getState) => {
log('Loading published descriptor lists');
......
......@@ -20,6 +20,7 @@ export const CHANGE_USER_PASSWORD_URL = `${ME_API}/password`;
// Descriptor List API
const DESCRIPTORLIST_API = `${API_BASE_URL}/descriptorlist`;
export const AUTOCOMPLETE_DESCRIPTORLIST_URL = `${DESCRIPTORLIST_API}/autocomplete`;
export const GET_DESCRIPTORLIST_URL = DESCRIPTORLIST_API;
export const LIST_DESCRIPTORLISTS_URL = `${DESCRIPTORLIST_API}/list`;
// -- these require proper permissions
......
......@@ -4,7 +4,7 @@ import {log} from 'utilities/debug';
import { stringify } from 'query-string';
import {
MY_LIST_DESCRIPTORSLISTS_URL, GET_DESCRIPTORLIST_URL, REMOVE_DESCRIPTORLIST_URL,
AUTOCOMPLETE_DESCRIPTORLIST_URL, MY_LIST_DESCRIPTORSLISTS_URL, GET_DESCRIPTORLIST_URL, REMOVE_DESCRIPTORLIST_URL,
CREATE_DESCRIPTORLIST_URL, UPDATE_DESCRIPTORLIST_URL, LIST_DESCRIPTORLISTS_URL, PUBLISH_DESCRIPTORLIST_URL,
ADD_DESCRIPTORLIST_DESCRIPTOR_URL, REMOVE_DESCRIPTORLIST_DESCRIPTOR_URL, SET_DESCRIPTORLIST_DESCRIPTORS_URL,
} from 'constants/apiURLS';
......@@ -60,6 +60,14 @@ export class DescriptorListService {
});
}
public static autocomplete(token: string, term: string): Promise<DescriptorList[]> {
return authenticatedRequest(token, {
url: `${AUTOCOMPLETE_DESCRIPTORLIST_URL}?d=${term}`,
method: 'GET',
}).then(({data}) => data);
}
// Lists published descriptor lists by filter code
// TODO Remove
public static listDescriptorListsByCode(token: string, page: number = 0, results: number = 10, sortBy: string = 'title', filterCode: string, order: string = 'ASC'): Promise<Page<DescriptorList>> {
......
......@@ -2,21 +2,22 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {Page} from 'model/common.model';
import {DescriptorList} from 'model/descriptor.model';
import {promiseListDescriptorLists} from 'actions/descriptorList';
import {autocomplete, promiseDescriptorList} from 'actions/descriptorList';
import { Field } from 'redux-form';
import Menu, { MenuItem } from 'material-ui/Menu';
import Input from 'material-ui/Input';
import TextField from 'material-ui/TextField';
import FormControl from 'ui/common/forms/FormControl';
import Select from 'material-ui/Select';
import { MenuItem } from 'material-ui/Menu';
import Markdown from 'ui/catalog/markdown';
interface ISelectDescriptorListInternal extends React.ClassAttributes<any> {
classes: any;
input: any;
listDescriptorLists: DescriptorList[];
autocomplete: (term: string) => Promise<DescriptorList[]>;
loadDescriptorList: (uuid: string) => Promise<DescriptorList>;
label: string;
meta?: any;
}
......@@ -26,51 +27,116 @@ class SelectDescriptorListInternal extends React.Component<ISelectDescriptorList
private constructor(props, context) {
super(props, context);
this.state = {
pickerList: '',
pickerList: null,
open: false,
anchorEl: null,
searchText: '',
suggestions: [],
};
}
public componentWillMount() {
// const { initialValues } = this.props;
// if (initialValues && initialValues.list && initialValues.list.uuid && initialValues.list.uuid.length > 0) {
// this.props.loadDescriptorList(initialValues.list.uuid[0]).then((dl) => {
// this.setState({pickerList: { uuid: dl.uuid, title: dl.title }});
// });
// }
this.props.autocomplete('').then((data) => {
this.setState({suggestions: data});
});
}
public componentWillReceiveProps(nextProps) {
if (nextProps.input.value) {
const value = nextProps.input.value.id && nextProps.input.value.id > 0 ? nextProps.input.value.id[0] : '';
this.setState({pickerList: value});
if (nextProps.input.value && nextProps.input.value.uuid && nextProps.input.value.uuid.length > 0) {
const uuid = nextProps.input.value.uuid[0];
const descriptorList = this.state.suggestions.find((dl) => dl.uuid === uuid);
if (descriptorList) {
this.setState({pickerList: { uuid: descriptorList.uuid, title: descriptorList.title }});
} else {
this.props.loadDescriptorList(uuid).then((dl) => {
this.setState({pickerList: { uuid: dl.uuid, title: dl.title }});
});
}
} else {
this.setState({pickerList: ''});
this.setState({pickerList: null});
}
}
public handleChange = ({target: {value}}) => {
const { input, listDescriptorLists } = this.props;
const descriptorList = listDescriptorLists.find((dl) => dl.id === value);
protected handleInputChange = (event) => {
this.setState({searchText: event.target.value});
this.props.autocomplete(event.target.value).then((suggestions) => {
this.setState({suggestions});
});
}
protected handleClick = (event) => {
this.setState({ open: true, anchorEl: event.currentTarget });
}
protected handleRequestClose = () => {
this.setState({ open: false });
}
protected select = (value) => (event) => {
const { input } = this.props;
const descriptorList = this.state.suggestions.find((dl) => dl.uuid === value);
if (descriptorList) {
input.onChange({ id: [ descriptorList.id ]});
this.setState({ pickerList: descriptorList.id });
input.onChange({ uuid: [ descriptorList.uuid ]});
this.setState({
open: false,
pickerList: { uuid: descriptorList.uuid, title: descriptorList.title },
});
} else {
input.onChange('');
this.setState({ pickerList: '' });
this.setState({
open: false,
pickerList: null,
});
}
}
public render() {
const { listDescriptorLists, label, meta } = this.props;
const { label, meta } = this.props;
const inputValue = this.state.pickerList && this.state.pickerList.uuid ? this.state.pickerList.uuid : '';
return (
<FormControl fullWidth meta={ meta } label={ label }>
<Select
value={ this.state.pickerList }
onChange={ this.handleChange }
onClick={ this.handleClick }
value={ inputValue }
input={ <Input /> }
MenuProps={ {
open: false,
} }
>
<MenuItem value="">{ `Select descriptor list` }</MenuItem>
{
listDescriptorLists && listDescriptorLists.map((dl) => {
return (
<MenuItem key={ dl.uuid } value={ dl.id }>
<Markdown basic source={ dl.title } />
</MenuItem>
);
})
this.state.pickerList ? (
<MenuItem value={ inputValue }>
<Markdown basic source={ this.state.pickerList.title } />
</MenuItem>) : null
}
</Select>
<Menu
anchorEl={ this.state.anchorEl }
open={ this.state.open }
onClose={ this.handleRequestClose }
>
<MenuItem >
<TextField fullWidth
value={ this.state.searchText }
label="Search..."
onChange={ this.handleInputChange }
/>
</MenuItem>
{
this.state.suggestions.map((dl, index) => (
<MenuItem onClick={ this.select(dl.uuid) } key={ `descriptor-list-${index}` }>
<Markdown basic source={ dl.title } />
</MenuItem>
))
}
</Menu>
</FormControl>
);
}
......@@ -80,40 +146,23 @@ interface IDescriptorListPicker extends React.ClassAttributes<any> {
name: string;
label: string;
className?: string;
promiseListDescriptorLists: any;
autocomplete: (term: string) => Promise<DescriptorList[]>;
promiseDescriptorList: (uuid: string) => Promise<DescriptorList>;
}
class DescriptorListPicker extends React.Component<IDescriptorListPicker, any> {
public constructor(props: any) {
super(props);
this.state = {
listDescriptorLists: [],
};
}
public componentWillMount() {
const {promiseListDescriptorLists} = this.props;
promiseListDescriptorLists(0, 50).then((data) => new Page<DescriptorList>(data, (dl) => new DescriptorList(dl)))
.then((paged) => {
this.setState({
listDescriptorLists: paged.content,
});
});
}
public render() {
const { name , label, className, ...other } = this.props;
const { name , label, className, autocomplete, promiseDescriptorList } = this.props;
return (
<div className={ className }>
<Field
name={ name }
component={ SelectDescriptorListInternal }
label={ label }
listDescriptorLists={ this.state.listDescriptorLists }
{ ...other }
autocomplete={ autocomplete }
loadDescriptorList={ promiseDescriptorList }
/>
</div>
);
......@@ -121,7 +170,8 @@ class DescriptorListPicker extends React.Component<IDescriptorListPicker, any> {
}
const mapDispatchToProps = (dispatch) => bindActionCreators({
promiseListDescriptorLists,
autocomplete,
promiseDescriptorList,
}, dispatch);
export default connect(null, mapDispatchToProps)(DescriptorListPicker);
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