From: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
Date: Wed, 5 Dec 2018 15:04:36 +0000 (+0100)
Subject: Send new user data to server
X-Git-Tag: 1.4.0~92^2~4
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/e8e0182d65a74b1a222127eb8b36f31a906b14c8?hp=b7a4d46fe2b011cdb6e38ed42e9f886fee8290b8

Send new user data to server

Feature #14452

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
---

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index d57c4a8c..627e004d 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 cb1584cb..93c6a3c5 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 45875770..994a7819 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 adc2f694..03caa887 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