Search in DescriptorListPicker

src/actions/descriptorList.ts

@@ -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');

src/constants/apiURLS.ts

@@ -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

src/service/DescriptorListService.ts

@@ -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>> {

src/ui/catalog/descriptor/DescriptorListPicker.tsx

@@ -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);