Create CreateGroupDialog's form

Feature #14505

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

diff --git a/src/store/groups-panel/groups-panel-actions.ts b/src/store/groups-panel/groups-panel-actions.ts
index 28a1c07e191160b9ba7ad81db5131cf42711d083..b5465d0dd2012809cbe5fb3d7969469d8c5a29ac 100644 (file)
--- a/src/store/groups-panel/groups-panel-actions.ts
+++ b/src/store/groups-panel/groups-panel-actions.ts
@@ -2,16 +2,34 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
+import { Dispatch } from 'redux';
+import { reset } from 'redux-form';
 import { bindDataExplorerActions } from "~/store/data-explorer/data-explorer-action";
 import { dialogActions } from '~/store/dialog/dialog-actions';
+import { Person } from '~/views-components/sharing-dialog/people-select';
 
 export const GROUPS_PANEL_ID = "groupsPanel";
 export const CREATE_GROUP_DIALOG = "createGroupDialog";
 export const CREATE_GROUP_FORM = "createGroupForm";
+export const CREATE_GROUP_NAME_FIELD_NAME = 'name';
+export const CREATE_GROUP_USERS_FIELD_NAME = 'users';
 
 export const GroupsPanelActions = bindDataExplorerActions(GROUPS_PANEL_ID);
 
 export const loadGroupsPanel = () => GroupsPanelActions.REQUEST_ITEMS();
 
 export const openCreateGroupDialog = () =>
-    dialogActions.OPEN_DIALOG({ id: CREATE_GROUP_DIALOG, data: {} });
+    (dispatch: Dispatch) => {
+        dispatch(dialogActions.OPEN_DIALOG({ id: CREATE_GROUP_DIALOG, data: {} }));
+        dispatch(reset(CREATE_GROUP_FORM));
+    };
+
+export interface CreateGroupFormData {
+    [CREATE_GROUP_NAME_FIELD_NAME]: string;
+    [CREATE_GROUP_USERS_FIELD_NAME]: Person[];
+}
+
+export const createGroup = (data: CreateGroupFormData) =>
+    (dispatch: Dispatch) => {
+        console.log(data);
+    };

diff --git a/src/views-components/dialog-forms/create-group-dialog.tsx b/src/views-components/dialog-forms/create-group-dialog.tsx
index 10d60c3ad0fff06963d52c06db88e8f2fbb9c646..554ad79059736bc8d0c94f212458617528e3b59c 100644 (file)
--- a/src/views-components/dialog-forms/create-group-dialog.tsx
+++ b/src/views-components/dialog-forms/create-group-dialog.tsx
@@ -4,16 +4,22 @@
 
 import * as React from 'react';
 import { compose } from "redux";
-import { reduxForm, InjectedFormProps } from 'redux-form';
+import { reduxForm, InjectedFormProps, Field, WrappedFieldArrayProps, FieldArray } from 'redux-form';
 import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog";
 import { FormDialog } from '~/components/form-dialog/form-dialog';
-import { CREATE_GROUP_DIALOG, CREATE_GROUP_FORM } from '~/store/groups-panel/groups-panel-actions';
+import { CREATE_GROUP_DIALOG, CREATE_GROUP_FORM, createGroup, CreateGroupFormData, CREATE_GROUP_NAME_FIELD_NAME, CREATE_GROUP_USERS_FIELD_NAME } from '~/store/groups-panel/groups-panel-actions';
+import { TextField } from '~/components/text-field/text-field';
+import { maxLength } from '~/validators/max-length';
+import { require } from '~/validators/require';
+import { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select';
 
 export const CreateGroupDialog = compose(
     withDialog(CREATE_GROUP_DIALOG),
-    reduxForm<{}>({
+    reduxForm<CreateGroupFormData>({
         form: CREATE_GROUP_FORM,
-        onSubmit: (data, dispatch) => { return; }
+        onSubmit: (data, dispatch) => {
+            dispatch(createGroup(data));
+        }
     })
 )(
     (props: CreateGroupDialogComponentProps) =>
@@ -25,8 +31,32 @@ export const CreateGroupDialog = compose(
         />
 );
 
-type CreateGroupDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<{}>;
+type CreateGroupDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<CreateGroupFormData>;
 
-const CreateGroupFormFields = (props: CreateGroupDialogComponentProps) => <span>
-    CreateGroupFormFields
-</span>;
+const CreateGroupFormFields = () =>
+    <>
+        <GroupNameField />
+        <UsersField />
+    </>;
+
+const GroupNameField = () =>
+    <Field
+        name={CREATE_GROUP_NAME_FIELD_NAME}
+        component={TextField}
+        validate={GROUP_NAME_VALIDATION}
+        label="Name"
+        autoFocus={true} />;
+
+const GROUP_NAME_VALIDATION = [require, maxLength(255)];
+
+const UsersField = () =>
+    <FieldArray
+        name={CREATE_GROUP_USERS_FIELD_NAME}
+        component={UsersSelect} />;
+
+const UsersSelect = ({ fields }: WrappedFieldArrayProps<Person>) =>
+    <PeopleSelect
+        label='Enter email adresses '
+        items={fields.getAll() || []}
+        onSelect={fields.push}
+        onDelete={fields.remove} />;

diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx
index 2aada00e8ae7c75aee8266ccdcf7c3267c89fca3..bee59c22530ca602be754f8e7fb0e6542b89ff95 100644 (file)
--- a/src/views-components/sharing-dialog/people-select.tsx
+++ b/src/views-components/sharing-dialog/people-select.tsx
@@ -20,6 +20,7 @@ export interface Person {
 export interface PeopleSelectProps {
 
     items: Person[];
+    label?: string;
 
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -43,9 +44,12 @@ export const PeopleSelect = connect()(
         };
 
         render() {
+
+            const { label = 'Invite people' } = this.props;
+
             return (
                 <Autocomplete
-                    label='Invite people'
+                    label={label}
                     value={this.state.value}
                     items={this.props.items}
                     suggestions={this.state.suggestions}