// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { Grid, Input, FormControl, FormHelperText, FormLabel, InputLabel } from '@material-ui/core';
-import { ChipsInput } from '~/components/chips-input/chips-input';
-import { identity } from 'lodash';
-import { PermissionSelect } from './permission-select';
+import { Field, WrappedFieldProps, FieldArray, WrappedFieldArrayProps } from 'redux-form';
+import { Grid, FormControl, InputLabel } from '@material-ui/core';
+import { PermissionSelect, parsePermissionLevel, formatPermissionLevel } from './permission-select';
+import { PeopleSelect, Person } from './people-select';
export default () =>
<Grid container spacing={8}>
</Grid>;
const InvitedPeopleField = () =>
- <Field
+ <FieldArray
name='invitedPeople'
component={InvitedPeopleFieldComponent} />;
-const InvitedPeopleFieldComponent = (props: WrappedFieldProps) =>
- <FormControl fullWidth>
- <FormLabel>
- Invite people
- </FormLabel>
- <ChipsInput
- {...props.input}
- value={['Test User']}
- createNewValue={identity}
- inputComponent={Input} />
- <FormHelperText>
- Helper text
- </FormHelperText>
- </FormControl>;
+const InvitedPeopleFieldComponent = ({ fields }: WrappedFieldArrayProps<Person>) =>
+ <PeopleSelect
+ items={fields.getAll() || []}
+ onSelect={fields.push}
+ onDelete={fields.remove} />;
const PermissionSelectField = () =>
<Field
- name='permission'
- component={PermissionSelectComponent} />;
+ name='permissions'
+ component={PermissionSelectComponent}
+ format={formatPermissionLevel}
+ parse={parsePermissionLevel} />;
const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
<FormControl fullWidth>