Init people select backend connection

Feature #14365

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx
index 2e24560c74870239c699bfaa3bd80cd49ffa1f7d..71694b553fb5f16bd7b351c95b366544aeea035a 100644 (file)
--- a/src/views-components/sharing-dialog/people-select.tsx
+++ b/src/views-components/sharing-dialog/people-select.tsx
@@ -4,48 +4,77 @@
 
 import * as React from 'react';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
+import { UserResource, User } from '~/models/user';
+import { connect, DispatchProp } from 'react-redux';
+import { ServiceRepository } from '~/services/services';
+import { FilterBuilder } from '../../services/api/filter-builder';
+import { debounce } from 'debounce';
+import { ListItemText } from '@material-ui/core';
 
-
-export interface Person {
-    name: string;
-}
 export interface PeopleSelectProps {
-    suggestedPeople: Person[];
+
 }
 
 export interface PeopleSelectState {
     value: string;
-    items: Person[];
-    suggestions: string[];
-}
-export class PeopleSelect extends React.Component<PeopleSelectProps, PeopleSelectState> {
-
-    state = {
-        value: '',
-        items: [{ name: 'Michal Klobukowski' }],
-        suggestions: ['Michal Klobukowski', 'Mateusz Ollik']
-    };
-
-    render() {
-        return (
-            <Autocomplete
-                label='Invite people'
-                value={this.state.value}
-                items={this.state.items}
-                suggestions={this.getSuggestions()}
-                renderChipValue={item => item.name}
-                onChange={this.handleChange} />
-        );
-    }
-
-    getSuggestions() {
-        const { value, suggestions } = this.state;
-        return value
-            ? suggestions.filter(suggestion => suggestion.includes(value))
-            : [];
-    }
-
-    handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ value: event.target.value });
-    }
+    items: UserResource[];
+    suggestions: UserResource[];
 }
+
+export const PeopleSelect = connect()(
+    class PeopleSelect extends React.Component<PeopleSelectProps & DispatchProp, PeopleSelectState> {
+
+        state: PeopleSelectState = {
+            value: '',
+            items: [],
+            suggestions: []
+        };
+
+        render() {
+            return (
+                <Autocomplete
+                    label='Invite people'
+                    value={this.state.value}
+                    items={this.state.items}
+                    suggestions={this.state.suggestions}
+                    onChange={this.handleChange}
+                    onSelect={this.handleSelect}
+                    renderChipValue={this.renderChipValue}
+                    renderSuggestion={this.renderSuggestion} />
+            );
+        }
+
+        renderChipValue({ firstName, lastName }: UserResource) {
+            return `${firstName} ${lastName}`;
+        }
+
+        renderSuggestion({ firstName, lastName, email }: UserResource) {
+            return (
+                <ListItemText>
+                    {`${firstName} ${lastName} <<${email}>>`}
+                </ListItemText>
+            );
+        }
+
+        handleSelect = (user: UserResource) => {
+            const { items } = this.state;
+            this.setState({ items: [...items, user], suggestions: [], value: '' });
+        }
+
+        handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            this.setState({ value: event.target.value }, this.getSuggestions);
+        }
+
+        getSuggestions = debounce(() => this.props.dispatch<any>(this.requestSuggestions), 500);
+
+        requestSuggestions = async (_: void, __: void, { userService }: ServiceRepository) => {
+            const { value } = this.state;
+            const filters = new FilterBuilder()
+                .addILike('email', value)
+                .getFilters();
+            const { items } = await userService.list();
+            // const { items } = await userService.list({ filters, limit: 5 });
+            this.setState({ suggestions: items });
+        }
+
+    });

diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
index f1eb177becbfd8f33ae57378dbc3effa1ffda1dd..8a516894d7e3c85cf28f411399f6c5992d4bc70d 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -4,12 +4,9 @@
 
 import * as React from 'react';
 import { Field, WrappedFieldProps } from 'redux-form';
-import { Grid, Input, FormControl, FormHelperText, FormLabel, InputLabel, Chip } from '@material-ui/core';
-import { ChipsInput } from '~/components/chips-input/chips-input';
-import { identity } from 'lodash';
+import { Grid, FormControl, InputLabel } from '@material-ui/core';
 import { PermissionSelect } from './permission-select';
 import { PeopleSelect } from './people-select';
-import ChipInput from 'material-ui-chip-input';
 
 export default () =>
     <Grid container spacing={8}>
@@ -28,7 +25,7 @@ const InvitedPeopleField = () =>
 
 
 const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
-    <PeopleSelect suggestedPeople={[]} />;
+    <PeopleSelect />;
 
 const PermissionSelectField = () =>
     <Field