[ARVADOS-WORKBENCH2] updated: 1.2.1-1065-ge8e0182
Git user
git at public.curoverse.com
Wed Dec 5 10:04:46 EST 2018
Summary of changes:
src/components/text-field/text-field.tsx | 4 +-
src/store/my-account/my-account-panel-actions.ts | 19 ++-
.../my-account-panel/my-account-panel-root.tsx | 186 ++++++++++++---------
src/views/my-account-panel/my-account-panel.tsx | 22 +--
4 files changed, 140 insertions(+), 91 deletions(-)
via e8e0182d65a74b1a222127eb8b36f31a906b14c8 (commit)
from b7a4d46fe2b011cdb6e38ed42e9f886fee8290b8 (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 e8e0182d65a74b1a222127eb8b36f31a906b14c8
Author: Pawel Kromplewski <pawel.kromplewski at contractors.roche.com>
Date: Wed Dec 5 16:04:36 2018 +0100
Send new user data to server
Feature #14452
Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski at contractors.roche.com>
diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index d57c4a8..627e004 100644
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -19,13 +19,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
export const TextField = withStyles(styles)((props: TextFieldProps & {
- label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode
+ label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode
}) =>
<MaterialTextField
helperText={props.meta.touched && props.meta.error}
className={props.classes.textField}
label={props.label}
- disabled={props.meta.submitting}
+ disabled={props.disabled || props.meta.submitting}
error={props.meta.touched && !!props.meta.error}
autoComplete='off'
autoFocus={props.autoFocus}
diff --git a/src/store/my-account/my-account-panel-actions.ts b/src/store/my-account/my-account-panel-actions.ts
index cb1584c..93c6a3c 100644
--- a/src/store/my-account/my-account-panel-actions.ts
+++ b/src/store/my-account/my-account-panel-actions.ts
@@ -4,8 +4,12 @@
import { Dispatch } from "redux";
import { RootState } from "~/store/store";
+import { initialize } from "redux-form";
import { ServiceRepository } from "~/services/services";
import { setBreadcrumbs } from "~/store/breadcrumbs/breadcrumbs-actions";
+import { authActions } from "~/store/auth/auth-action";
+import { snackbarActions } from "~/store/snackbar/snackbar-actions";
+import { MY_ACCOUNT_FORM } from "~/views/my-account-panel/my-account-panel-root";
export const loadMyAccountPanel = () =>
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
@@ -14,4 +18,17 @@ export const loadMyAccountPanel = () =>
} catch (e) {
return;
}
- };
\ No newline at end of file
+ };
+
+export const saveEditedUser = (resource: any) =>
+ async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ try {
+ await services.userService.update(resource.uuid, resource);
+ services.authService.saveUser(resource);
+ dispatch(authActions.USER_DETAILS_SUCCESS(resource));
+ dispatch(initialize(MY_ACCOUNT_FORM, resource));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Profile has been updated." }));
+ } catch(e) {
+ return;
+ }
+ };
diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx
index 4587577..994a781 100644
--- a/src/views/my-account-panel/my-account-panel-root.tsx
+++ b/src/views/my-account-panel/my-account-panel-root.tsx
@@ -5,11 +5,23 @@
import * as React from 'react';
import { Field, InjectedFormProps } from "redux-form";
import { TextField } from "~/components/text-field/text-field";
-import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
+import { NativeSelectField } from "~/components/select-field/select-field";
+import {
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ Card,
+ CardContent,
+ Button,
+ Typography,
+ Grid,
+ InputLabel
+} from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
import { User } from "~/models/user";
+import { require } from "~/validators/require";
-type CssRules = 'root' | 'gridItem' | 'title';
+type CssRules = 'root' | 'gridItem' | 'label' | 'title' | 'actions';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -20,104 +32,124 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
height: 45,
marginBottom: 20
},
+ label: {
+ fontSize: '0.675rem'
+ },
title: {
marginBottom: theme.spacing.unit * 3,
color: theme.palette.grey["600"]
+ },
+ actions: {
+ display: 'flex',
+ justifyContent: 'flex-end'
}
});
export interface MyAccountPanelRootActionProps {}
export interface MyAccountPanelRootDataProps {
- user?: User;
+ isPristine: boolean;
+ isValid: boolean;
+ initialValues?: User;
}
export const MY_ACCOUNT_FORM = 'myAccountForm';
+const FILES_FIELD_VALIDATION = [require];
+
type MyAccountPanelRootProps = InjectedFormProps<MyAccountPanelRootActionProps> & MyAccountPanelRootDataProps & WithStyles<CssRules>;
export const MyAccountPanelRoot = withStyles(styles)(
- ({ classes, user }: MyAccountPanelRootProps) => {
- console.log(user);
+ ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
return <Card className={classes.root}>
<CardContent>
<Typography variant="title" className={classes.title}>User profile</Typography>
- <Grid container direction="row" spacing={24}>
- <Grid item xs={6}>
- <Grid item className={classes.gridItem}>
- <Field
- label="E-mail"
- name="email"
- component={TextField}
- value={user!.email}
- disabled
- />
- </Grid>
- <Grid item className={classes.gridItem}>
- <Field
- label="First name"
- name="firstName"
- component={TextField}
- value={user!.firstName}
- disabled
- />
- </Grid>
- <Grid item className={classes.gridItem}>
- <Field
- label="Identity URL"
- name="identityUrl"
- component={TextField}
- value={user!.identityUrl}
- disabled
- />
+ <form onSubmit={handleSubmit}>
+ <Grid container direction="row" spacing={24}>
+ <Grid item xs={6}>
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="E-mail"
+ name="email"
+ component={TextField}
+ disabled
+ />
+ </Grid>
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="First name"
+ name="firstName"
+ component={TextField}
+ disabled
+ />
+ </Grid>
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="Identity URL"
+ name="identityUrl"
+ component={TextField}
+ disabled
+ />
+ </Grid>
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="*Organization"
+ name="prefs.profile.organization"
+ component={TextField}
+ validate={FILES_FIELD_VALIDATION}
+ />
+ </Grid>
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="Website"
+ name="prefs.profile.website_url"
+ component={TextField}
+ />
+ </Grid>
+ <Grid item className={classes.gridItem}>
+ <InputLabel className={classes.label} htmlFor="prefs.profile.role">Organization</InputLabel>
+ <Field
+ id="prefs.profile.role"
+ name="prefs.profile.role"
+ component={NativeSelectField}
+ items={[
+ {key: 'Bio-informatician', value: 'Bio-informatician'},
+ {key: 'Data Scientist', value: 'Data Scientist'},
+ {key: 'Analyst', value: 'Analyst'},
+ {key: 'Researcher', value: 'Researcher'},
+ {key: 'Software Developer', value: 'Software Developer'},
+ {key: 'System Administrator', value: 'System Administrator'},
+ {key: 'Other', value: 'Other'}
+ ]}
+ />
+ </Grid>
</Grid>
- <Grid item className={classes.gridItem}>
- <Field
- label="Organization"
- name="organization"
- value={user!.prefs.profile!.organization}
- component={TextField}
- />
- </Grid>
- <Grid item className={classes.gridItem}>
- <Field
- label="Website"
- name="website"
- value={user!.prefs.profile!.website_url}
- component={TextField}
- />
- </Grid>
- <Grid item className={classes.gridItem}>
- <Field
- label="Role"
- name="role"
- value={user!.prefs.profile!.role}
- component={TextField}
- />
- </Grid>
- </Grid>
- <Grid item xs={6}>
- <Grid item className={classes.gridItem} />
- <Grid item className={classes.gridItem}>
- <Field
- label="Last name"
- name="lastName"
- component={TextField}
- value={user!.lastName}
- disabled
- />
+ <Grid item xs={6}>
+ <Grid item className={classes.gridItem} />
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="Last name"
+ name="lastName"
+ component={TextField}
+ disabled
+ />
+ </Grid>
+ <Grid item className={classes.gridItem} />
+ <Grid item className={classes.gridItem}>
+ <Field
+ label="*E-mail at Organization"
+ name="prefs.profile.organization_email"
+ component={TextField}
+ validate={FILES_FIELD_VALIDATION}
+ />
+ </Grid>
</Grid>
- <Grid item className={classes.gridItem} />
- <Grid item className={classes.gridItem}>
- <Field
- label="E-mail at Organization"
- name="organizationEmail"
- value={user!.prefs.profile!.organization_email}
- component={TextField}
- />
+ <Grid item xs={12} className={classes.actions}>
+ <Button color="primary" onClick={reset} disabled={isPristine}>Discard changes</Button>
+ <Button color="primary" variant="contained" type="submit" disabled={isPristine || invalid || submitting}>Save changes</Button>
</Grid>
</Grid>
- </Grid>
+ </form>
</CardContent>
</Card>;}
);
\ No newline at end of file
diff --git a/src/views/my-account-panel/my-account-panel.tsx b/src/views/my-account-panel/my-account-panel.tsx
index adc2f69..03caa88 100644
--- a/src/views/my-account-panel/my-account-panel.tsx
+++ b/src/views/my-account-panel/my-account-panel.tsx
@@ -3,23 +3,23 @@
// SPDX-License-Identifier: AGPL-3.0
import { RootState } from '~/store/store';
-import { Dispatch, compose } from 'redux';
-import { reduxForm, reset } from 'redux-form';
+import { compose } from 'redux';
+import { reduxForm, isPristine, isValid } from 'redux-form';
import { connect } from 'react-redux';
-import { MyAccountPanelRoot, MyAccountPanelRootDataProps, MyAccountPanelRootActionProps, MY_ACCOUNT_FORM } from '~/views/my-account-panel/my-account-panel-root';
+import { saveEditedUser } from '~/store/my-account/my-account-panel-actions';
+import { MyAccountPanelRoot, MyAccountPanelRootDataProps, MY_ACCOUNT_FORM } from '~/views/my-account-panel/my-account-panel-root';
const mapStateToProps = (state: RootState): MyAccountPanelRootDataProps => ({
- user: state.auth.user
+ isPristine: isPristine(MY_ACCOUNT_FORM)(state),
+ isValid: isValid(MY_ACCOUNT_FORM)(state),
+ initialValues: state.auth.user
});
-const mapDispatchToProps = (dispatch: Dispatch): MyAccountPanelRootActionProps => ({
-
-});
-
-export const MyAccountPanel = compose(connect(mapStateToProps, mapDispatchToProps), reduxForm({
+export const MyAccountPanel = compose(
+ connect(mapStateToProps),
+ reduxForm({
form: MY_ACCOUNT_FORM,
onSubmit: (data, dispatch) => {
- // dispatch(moveProject(data));
-
+ dispatch(saveEditedUser(data));
}
}))(MyAccountPanelRoot);
\ No newline at end of file
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list