[ARVADOS-WORKBENCH2] updated: 1.2.0-748-g3e62053
Git user
git at public.curoverse.com
Sun Oct 28 11:52:01 EDT 2018
Summary of changes:
src/components/autocomplete/autocomplete.tsx | 2 +-
.../sharing-dialog/people-select.tsx | 57 +++++++++++++++++-----
.../sharing-invitation-form-component.tsx | 14 ++++--
.../sharing-dialog/sharing-simple-form.tsx | 14 ++++--
4 files changed, 67 insertions(+), 20 deletions(-)
via 3e620538c5c0431bc587bb4c92da8c483f22a053 (commit)
from 527f2f9488f6f3a795bf70964921107d0ac10c12 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 3e620538c5c0431bc587bb4c92da8c483f22a053
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Sun Oct 28 16:51:43 2018 +0100
Connect people select to form
Feature #14365
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index bc2e60e..85704c3 100644
--- 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 71694b5..f49d171 100644
--- 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 8a51689..c8db68d 100644
--- 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 4e3bf2b..eea8fa2 100644
--- 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
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list