Select descriptors in dataset registration

src/model/descriptor.model.ts

@@ -99,6 +99,7 @@ export interface IDescriptorFilter extends IAuditedVersionedModelFilter {
   description?: IStringFilter;
   integerOnly?: boolean;
   uom?: IStringFilter;
+  list?: IDescriptorListFilter;
 }
 
 export enum DescriptorListExtra {

src/ui/catalog/descriptor/DescriptorListPicker.tsx

+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 { Field } from 'redux-form';
+import Input from 'material-ui/Input';
+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[];
+    label: string;
+    meta?: any;
+}
+
+class SelectDescriptorListInternal extends React.Component<ISelectDescriptorListInternal, any> {
+
+    private constructor(props, context) {
+        super(props, context);
+        this.state = {
+            pickerList: '',
+        };
+    }
+
+    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});
+        } else {
+            this.setState({pickerList: ''});
+        }
+    }
+
+    public handleChange = ({target: {value}}) => {
+        const { input, listDescriptorLists } = this.props;
+        const descriptorList = listDescriptorLists.find((dl) => dl.id === value);
+        if (descriptorList) {
+            input.onChange({ id: [ descriptorList.id ]});
+            this.setState({ pickerList: descriptorList.id });
+        } else {
+            input.onChange('');
+            this.setState({ pickerList: '' });
+        }
+    }
+
+    public render() {
+        const { listDescriptorLists, label, meta } = this.props;
+        return (
+            <FormControl fullWidth meta={ meta } label={ label }>
+                <Select
+                    value={ this.state.pickerList }
+                    onChange={ this.handleChange }
+                    input={ <Input /> }
+                >
+                    <MenuItem value="">{ `Select descriptor list` }</MenuItem>
+                    {
+                        listDescriptorLists && listDescriptorLists.map((dl) => {
+                            return (
+                                <MenuItem key={ dl.uuid } value={ dl.id }>
+                                    <Markdown basic source={ dl.title } />
+                                </MenuItem>
+                            );
+                        })
+                    }
+                </Select>
+            </FormControl>
+        );
+    }
+}
+
+interface IDescriptorListPicker extends React.ClassAttributes<any> {
+    name: string;
+    label: string;
+    className?: string;
+    promiseListDescriptorLists: any;
+}
+
+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;
+        return (
+            <div className={ className }>
+                <Field
+                    name={ name }
+                    component={ SelectDescriptorListInternal }
+                    label={ label }
+                    listDescriptorLists={ this.state.listDescriptorLists }
+                    { ...other }
+                />
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+    promiseListDescriptorLists,
+}, dispatch);
+
+export default connect(null, mapDispatchToProps)(DescriptorListPicker);

src/ui/catalog/descriptor/Filters.tsx

@@ -10,6 +10,7 @@ import TextFilter from 'ui/common/filter/TextFilter';
 import CropFilter from 'ui/catalog/crop/CropFilter';
 import {DESCRIPTOR_FILTER_FORM} from 'constants/filter';
 import {Descriptor} from 'model/descriptor.model';
+import DescriptorListPicker from './DescriptorListPicker';
 
 // <CollapsibleComponentSearch title="Descriptions">
 //     <StringFilter name="title" searchType="contains" label="Descriptor title" placeholder="Title"/>
@@ -24,6 +25,7 @@ import {Descriptor} from 'model/descriptor.model';
 const DescriptorFilters = ({handleSubmit, initialize, ...other}) => (
   <FiltersBlock title="Descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
       <TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
+      <DescriptorListPicker name="list" label="Select descriptor list" className="p-20" />
       <CollapsibleComponentSearch title="Crop">
           <CropFilter />
       </CollapsibleComponentSearch>