Connect people select to form

Feature #14365

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

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index bc2e60ef2278b8cbab4bf9c7e609fe98b37d3b9a..85704c357ca127ff240ba5a08173166c1c9054e4 100644 (file)
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -100,7 +100,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
 
     handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
         const { onCreate = noop } = this.props;
-        if (key === 'Enter') {
+        if (key === 'Enter' && this.props.value.length > 0) {
             onCreate();
         }
     }

diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx
index 71694b553fb5f16bd7b351c95b366544aeea035a..f49d171edd152e5767d39cf696bcb51bea36cbd2 100644 (file)
--- a/src/views-components/sharing-dialog/people-select.tsx
+++ b/src/views-components/sharing-dialog/people-select.tsx
@@ -4,20 +4,33 @@
 
 import * as React from 'react';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
-import { UserResource, User } from '~/models/user';
+import { UserResource } 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';
+import { noop } from 'lodash/fp';
 
+export interface Person {
+    name: string;
+    email: string;
+    uuid: string;
+}
 export interface PeopleSelectProps {
 
+    items: Person[];
+
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onCreate?: (person: Person) => void;
+    onDelete?: (index: number) => void;
+    onSelect?: (person: Person) => void;
+
 }
 
 export interface PeopleSelectState {
     value: string;
-    items: UserResource[];
     suggestions: UserResource[];
 }
 
@@ -26,7 +39,6 @@ export const PeopleSelect = connect()(
 
         state: PeopleSelectState = {
             value: '',
-            items: [],
             suggestions: []
         };
 
@@ -35,17 +47,21 @@ export const PeopleSelect = connect()(
                 <Autocomplete
                     label='Invite people'
                     value={this.state.value}
-                    items={this.state.items}
+                    items={this.props.items}
                     suggestions={this.state.suggestions}
                     onChange={this.handleChange}
+                    onCreate={this.handleCreate}
                     onSelect={this.handleSelect}
+                    onDelete={this.handleDelete}
+                    onFocus={this.props.onFocus}
+                    onBlur={this.props.onBlur}
                     renderChipValue={this.renderChipValue}
                     renderSuggestion={this.renderSuggestion} />
             );
         }
 
-        renderChipValue({ firstName, lastName }: UserResource) {
-            return `${firstName} ${lastName}`;
+        renderChipValue({ name, uuid }: Person) {
+            return name ? name : uuid;
         }
 
         renderSuggestion({ firstName, lastName, email }: UserResource) {
@@ -56,9 +72,29 @@ export const PeopleSelect = connect()(
             );
         }
 
-        handleSelect = (user: UserResource) => {
-            const { items } = this.state;
-            this.setState({ items: [...items, user], suggestions: [], value: '' });
+        handleDelete = (_: Person, index: number) => {
+            const { onDelete = noop } = this.props;
+            onDelete(index);
+        }
+
+        handleCreate = () => {
+            const { onCreate = noop } = this.props;
+            this.setState({ value: '', suggestions: [] });
+            onCreate({
+                email: '',
+                name: '',
+                uuid: this.state.value,
+            });
+        }
+
+        handleSelect = ({ email, firstName, lastName, uuid }: UserResource) => {
+            const { onSelect = noop } = this.props;
+            this.setState({ value: '', suggestions: [] });
+            onSelect({
+                email,
+                name: `${firstName} ${lastName}`,
+                uuid,
+            });
         }
 
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -72,8 +108,7 @@ export const PeopleSelect = connect()(
             const filters = new FilterBuilder()
                 .addILike('email', value)
                 .getFilters();
-            const { items } = await userService.list();
-            // const { items } = await userService.list({ filters, limit: 5 });
+            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 8a516894d7e3c85cf28f411399f6c5992d4bc70d..c8db68dcf65180c78291b8e944a44285c714af4a 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -3,10 +3,10 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Field, WrappedFieldProps } from 'redux-form';
+import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
 import { Grid, FormControl, InputLabel } from '@material-ui/core';
 import { PermissionSelect } from './permission-select';
-import { PeopleSelect } from './people-select';
+import { PeopleSelect, Person } from './people-select';
 
 export default () =>
     <Grid container spacing={8}>
@@ -19,13 +19,17 @@ export default () =>
     </Grid>;
 
 const InvitedPeopleField = () =>
-    <Field
+    <FieldArray
         name='invitedPeople'
         component={InvitedPeopleFieldComponent} />;
 
 
-const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
-    <PeopleSelect />;
+const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Person>) =>
+    <PeopleSelect
+        items={fields.getAll() || []}
+        onCreate={fields.push}
+        onSelect={fields.push}
+        onDelete={fields.remove} />;
 
 const PermissionSelectField = () =>
     <Field

diff --git a/src/views-components/sharing-dialog/sharing-simple-form.tsx b/src/views-components/sharing-dialog/sharing-simple-form.tsx
index 4e3bf2b33aca58491788a9dc9ad94df4b8ed3888..eea8fa2667fe00bcdd02298c708b2e3f1df008d4 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-simple-form.tsx
+++ b/src/views-components/sharing-dialog/sharing-simple-form.tsx
@@ -2,9 +2,17 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-
 import { reduxForm } from 'redux-form';
-
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 import SharingInvitationFormComponent from './sharing-invitation-form-component';
+import { PermissionSelectValue } from './permission-select';
 
-export const SharingSimpleForm = reduxForm({form: 'SIMPLE_SHARING_FORM'})(SharingInvitationFormComponent);
\ No newline at end of file
+export const SharingSimpleForm = compose(
+    connect(() => ({
+        initialValues: {
+            permission: PermissionSelectValue.READ
+        }
+    })),
+    reduxForm({ form: 'SIMPLE_SHARING_FORM' })
+)(SharingInvitationFormComponent);
\ No newline at end of file