[ARVADOS-WORKBENCH2] updated: 1.2.0-742-ga60d90f
Git user
git at public.curoverse.com
Fri Oct 26 10:28:25 EDT 2018
Summary of changes:
src/components/select-field/select-field.tsx | 30 ++++++++-
src/components/text-field/text-field.tsx | 12 ++--
.../sharing-dialog/permission-select.tsx | 75 ++++++++++++++++++++++
.../sharing-dialog/sharing-dialog.tsx | 4 +-
.../sharing-invitation-form-component.tsx | 52 +++++++++++++++
.../sharing-dialog/sharing-simple-form.tsx | 10 +++
6 files changed, 176 insertions(+), 7 deletions(-)
create mode 100644 src/views-components/sharing-dialog/permission-select.tsx
create mode 100644 src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
create mode 100644 src/views-components/sharing-dialog/sharing-simple-form.tsx
via a60d90f0ee4d4cd71ccc876b112911f437ffb974 (commit)
from 2a1d30b31a3d93d94ea0651dc7c8944d83a11e9e (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 a60d90f0ee4d4cd71ccc876b112911f437ffb974
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Oct 26 16:28:09 2018 +0200
Create sharing invitation form
Feature #14365
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/select-field/select-field.tsx b/src/components/select-field/select-field.tsx
index 1c3dec3..4a25ea7 100644
--- a/src/components/select-field/select-field.tsx
+++ b/src/components/select-field/select-field.tsx
@@ -5,7 +5,7 @@
import * as React from 'react';
import { WrappedFieldProps } from 'redux-form';
import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles, FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@material-ui/core';
type CssRules = 'formControl' | 'selectWrapper' | 'select' | 'option';
@@ -55,4 +55,30 @@ export const NativeSelectField = withStyles(styles)
))}
</Select>
</FormControl>
- );
\ No newline at end of file
+ );
+
+interface SelectFieldProps {
+ children: React.ReactNode;
+ label: string;
+}
+
+type SelectFieldCssRules = 'formControl';
+
+const selectFieldStyles: StyleRulesCallback<SelectFieldCssRules> = (theme: ArvadosTheme) => ({
+ formControl: {
+ marginBottom: theme.spacing.unit * 3
+ },
+});
+export const SelectField = withStyles(selectFieldStyles)(
+ (props: WrappedFieldProps & SelectFieldProps & WithStyles<SelectFieldCssRules>) =>
+ <FormControl error={props.meta.invalid} className={props.classes.formControl}>
+ <InputLabel>
+ {props.label}
+ </InputLabel>
+ <Select
+ {...props.input}>
+ {props.children}
+ </Select>
+ <FormHelperText>{props.meta.error}</FormHelperText>
+ </FormControl>
+);
\ No newline at end of file
diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index dd864a9..d57c4a8 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -18,7 +18,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
-export const TextField = withStyles(styles)((props: TextFieldProps & { label?: string, autoFocus?: boolean, required?: boolean }) =>
+export const TextField = withStyles(styles)((props: TextFieldProps & {
+ label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode
+}) =>
<MaterialTextField
helperText={props.meta.touched && props.meta.error}
className={props.classes.textField}
@@ -29,6 +31,8 @@ export const TextField = withStyles(styles)((props: TextFieldProps & { label?: s
autoFocus={props.autoFocus}
fullWidth={true}
required={props.required}
+ select={props.select}
+ children={props.children}
{...props.input}
/>);
@@ -51,7 +55,7 @@ export const RichEditorTextField = withStyles(styles)(
}
render() {
- return <RichTextEditor
+ return <RichTextEditor
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.label} />;
@@ -60,7 +64,7 @@ export const RichEditorTextField = withStyles(styles)(
);
export const DateTextField = withStyles(styles)
- ((props: TextFieldProps) =>
+ ((props: TextFieldProps) =>
<MaterialTextField
type="date"
disabled={props.meta.submitting}
@@ -73,5 +77,5 @@ export const DateTextField = withStyles(styles)
name={props.input.name}
onChange={props.input.onChange}
value={props.input.value}
- />
+ />
);
\ No newline at end of file
diff --git a/src/views-components/sharing-dialog/permission-select.tsx b/src/views-components/sharing-dialog/permission-select.tsx
new file mode 100644
index 0000000..6a88922
--- /dev/null
+++ b/src/views-components/sharing-dialog/permission-select.tsx
@@ -0,0 +1,75 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { MenuItem, Grid, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
+import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
+import Edit from '@material-ui/icons/Edit';
+import Computer from '@material-ui/icons/Computer';
+import { WithStyles } from '@material-ui/core/styles';
+import { SelectProps } from '@material-ui/core/Select';
+
+export enum PermissionSelectValue {
+ READ = 'Read',
+ WRITE = 'Write',
+ MANAGE = 'Manage',
+}
+
+type PermissionSelectClasses = 'value';
+
+const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
+ value: {
+ marginLeft: theme.spacing.unit,
+ }
+});
+
+export const PermissionSelect = withStyles(PermissionSelectStyles)(
+ ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
+ <Select
+ {...props}
+ renderValue={renderPermissionItem}
+ inputProps={{ classes }}>
+ <MenuItem value={PermissionSelectValue.READ}>
+ {renderPermissionItem(PermissionSelectValue.READ)}
+ </MenuItem>
+ <MenuItem value={PermissionSelectValue.WRITE}>
+ {renderPermissionItem(PermissionSelectValue.WRITE)}
+ </MenuItem>
+ <MenuItem value={PermissionSelectValue.MANAGE}>
+ {renderPermissionItem(PermissionSelectValue.MANAGE)}
+ </MenuItem>
+ </Select>);
+
+const renderPermissionItem = (value: string) =>
+ <PermissionItem {...{ value }} />;
+
+type PermissionItemClasses = 'value';
+
+const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
+ value: {
+ marginLeft: theme.spacing.unit,
+ }
+});
+
+const PermissionItem = withStyles(permissionItemStyles)(
+ ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) =>
+ <Grid container alignItems='center'>
+ {renderPermissionIcon(value)}
+ <span className={classes.value}>
+ {value}
+ </span>
+ </Grid>);
+
+const renderPermissionIcon = (value: string) => {
+ switch (value) {
+ case PermissionSelectValue.READ:
+ return <RemoveRedEye />;
+ case PermissionSelectValue.WRITE:
+ return <Edit />;
+ case PermissionSelectValue.MANAGE:
+ return <Computer />;
+ default:
+ return null;
+ }
+};
diff --git a/src/views-components/sharing-dialog/sharing-dialog.tsx b/src/views-components/sharing-dialog/sharing-dialog.tsx
index e83885a..c43d94e 100644
--- a/src/views-components/sharing-dialog/sharing-dialog.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog.tsx
@@ -5,16 +5,18 @@
import { compose, Dispatch } from 'redux';
import { connect } from 'react-redux';
+import * as React from 'react';
import { connectSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
import { WithDialogProps } from '~/store/dialog/with-dialog';
import { RootState } from '~/store/store';
import SharingDialogComponent, { SharingDialogDataProps, SharingDialogActionProps } from './sharing-dialog-component';
+import { SharingSimpleForm } from './sharing-simple-form';
const mapStateToProps = (_: RootState, props: WithDialogProps<string>): SharingDialogDataProps => ({
...props,
saveEnabled: false,
- children: null,
+ children: <SharingSimpleForm />,
});
const mapDispatchToProps = (_: Dispatch, props: WithDialogProps<string>): SharingDialogActionProps => ({
diff --git a/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
new file mode 100644
index 0000000..9efbb1b
--- /dev/null
+++ b/src/views-components/sharing-dialog/sharing-invitation-form-component.tsx
@@ -0,0 +1,52 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// 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';
+
+export default () =>
+ <Grid container spacing={8}>
+ <Grid item xs={8}>
+ <InvitedPeopleField />
+ </Grid>
+ <Grid item xs={4}>
+ <PermissionSelectField />
+ </Grid>
+ </Grid>;
+
+const InvitedPeopleField = () =>
+ <Field
+ 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 PermissionSelectField = () =>
+ <Field
+ name='permission'
+ component={PermissionSelectComponent} />;
+
+const PermissionSelectComponent = ({ input }: WrappedFieldProps) =>
+ <FormControl fullWidth>
+ <InputLabel>Authorization</InputLabel>
+ <PermissionSelect {...input} />
+ </FormControl>;
diff --git a/src/views-components/sharing-dialog/sharing-simple-form.tsx b/src/views-components/sharing-dialog/sharing-simple-form.tsx
new file mode 100644
index 0000000..4e3bf2b
--- /dev/null
+++ b/src/views-components/sharing-dialog/sharing-simple-form.tsx
@@ -0,0 +1,10 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+
+import { reduxForm } from 'redux-form';
+
+import SharingInvitationFormComponent from './sharing-invitation-form-component';
+
+export const SharingSimpleForm = reduxForm({form: 'SIMPLE_SHARING_FORM'})(SharingInvitationFormComponent);
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list