From c2aac4c5b6d61ae133e811ec6f81ee1ae5c48759 Mon Sep 17 00:00:00 2001
From: malexsan <alexandru.munt@gmail.com>
Date: Tue, 11 Dec 2018 14:51:26 +0200
Subject: [PATCH] feat(adminUsers): add fetching and errors to admin users form
modal
---
.../src/modals/FormModal.js | 97 +++++++++++--------
.../src/components/Admin/AdminUsers.js | 1 -
.../src/components/Admin/withUsersGQL.js | 20 ++--
3 files changed, 67 insertions(+), 51 deletions(-)
diff --git a/packages/component-faraday-ui/src/modals/FormModal.js b/packages/component-faraday-ui/src/modals/FormModal.js
index a139df8e7..af161bf39 100644
--- a/packages/component-faraday-ui/src/modals/FormModal.js
+++ b/packages/component-faraday-ui/src/modals/FormModal.js
@@ -4,21 +4,28 @@ import { Formik } from 'formik'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
-import { H2, Button, TextField, ValidatedFieldFormik } from '@pubsweet/ui'
+import {
+ H2,
+ Button,
+ Spinner,
+ TextField,
+ ValidatedFieldFormik,
+} from '@pubsweet/ui'
import { compose, setDisplayName, withHandlers, withProps } from 'recompose'
import {
Row,
Item,
+ Text,
Label,
IconButton,
RowOverrideAlert,
ItemOverrideAlert,
withRoles,
+ withFetching,
withCountries,
} from 'pubsweet-component-faraday-ui'
import ValidatedMenuField from './ValidatedMenuField'
-import ValidatedCheckboxField from './ValidatedCheckboxField'
const FormModal = ({
edit,
@@ -34,22 +41,41 @@ const FormModal = ({
cancelText = 'Cancel',
onSubmit,
initialValues,
+ //
+ isFetching,
+ fetchingError,
}) => (
<Root>
<IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
<H2>{title}</H2>
- <Formik initialValues={initialValues} onSubmit={onSubmit}>
- {({ handleSubmit }) => (
+ <Formik
+ initialValues={initialValues}
+ onSubmit={onSubmit}
+ validate={values => {
+ const errors = {}
+
+ if (values.email === '') {
+ errors.email = 'Required'
+ }
+
+ if (values.affiliation === '') {
+ errors.affiliation = 'Required'
+ }
+
+ return errors
+ }}
+ >
+ {({ handleSubmit, ...rest }) => (
<Fragment>
<Row alignItems="baseline" mb={1} mt={1}>
- <Item mr={1} vertical>
+ <ItemOverrideAlert mr={1} vertical>
<Label required>Email</Label>
<ValidatedFieldFormik
component={TextField}
name="email"
validate={[required]}
/>
- </Item>
+ </ItemOverrideAlert>
<ItemOverrideAlert ml={1} vertical>
<Label required>Role</Label>
<ValidatedMenuField name="role" options={roles} />
@@ -80,37 +106,27 @@ const FormModal = ({
<Row mb={!edit && 3}>
<Item vertical>
- <Label>Affiliation</Label>
+ <Label required>Affiliation</Label>
<ValidatedFieldFormik component={TextField} name="affiliation" />
</Item>
</Row>
- {edit && (
- <RowOverrideAlert mb={3}>
- <Item>
- <ValidatedCheckboxField
- label="Editor in Chief"
- name="editorInChief"
- />
- </Item>
- <Item>
- <ValidatedCheckboxField label="Admin" name="admin" />
- </Item>
- <Item>
- <ValidatedCheckboxField
- label="Handling Editor"
- name="handlingEditor"
- />
- </Item>
- </RowOverrideAlert>
+ {fetchingError && (
+ <Row mb={1}>
+ <Text error>{fetchingError}</Text>
+ </Row>
)}
- <Row>
- <Button onClick={onClose}>Cancel</Button>
- <Button onClick={handleSubmit} primary>
- {confirmText}
- </Button>
- </Row>
+ {isFetching ? (
+ <Spinner />
+ ) : (
+ <Row>
+ <Button onClick={onClose}>Cancel</Button>
+ <Button onClick={handleSubmit} primary>
+ {confirmText}
+ </Button>
+ </Row>
+ )}
</Fragment>
)}
</Formik>
@@ -128,18 +144,19 @@ const setInitialRole = a => {
return 'author'
}
-const parseValues = ({ email, role, ...rest }) => ({
- email,
- username: email,
- admin: role === 'admin',
- editorInChief: role === 'editorInChief',
- handlingEditor: role === 'handlingEditor',
- ...rest,
-})
+// const parseValues = ({ email, role, ...rest }) => ({
+// email,
+// username: email,
+// admin: role === 'admin',
+// editorInChief: role === 'editorInChief',
+// handlingEditor: role === 'handlingEditor',
+// ...rest,
+// })
// #endregion
export default compose(
withRoles,
+ withFetching,
withCountries,
withProps(({ user, edit }) => ({
initialValues: {
@@ -152,7 +169,7 @@ export default compose(
withHandlers({
onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
if (typeof onSubmit === 'function') {
- onSubmit(parseValues(values), { formProps, props })
+ onSubmit(values, { formProps, props })
}
},
onClose: ({ onCancel, ...props }) => () => {
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index 39697bbc1..0e0555f57 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -138,7 +138,6 @@ const Users = ({
export default compose(
withJournal,
- withFetching,
withUsersGQL,
withProps(({ journal: { roles = {} }, users }) => ({
roles: Object.keys(roles),
diff --git a/packages/components-faraday/src/components/Admin/withUsersGQL.js b/packages/components-faraday/src/components/Admin/withUsersGQL.js
index 807a31924..b7e811045 100644
--- a/packages/components-faraday/src/components/Admin/withUsersGQL.js
+++ b/packages/components-faraday/src/components/Admin/withUsersGQL.js
@@ -57,16 +57,16 @@ export default compose(
}),
withHandlers({
addUser: ({ addUser }) => (values, props) => {},
- updateUser: ({ updateUser }) => (
- { __typename, id, ...input },
- { props: { hideModal } },
- ) => {
- updateUser({
- variables: {
- id,
- input,
- },
- }).then(hideModal)
+ updateUser: ({ updateUser }) => (formValues, other) => {
+ console.log('aici vom face update', formValues)
+ console.log({ other })
+ other.props.setError('iisus e mare')
+ // updateUser({
+ // variables: {
+ // id,
+ // input,
+ // },
+ // }).then(hideModal).catch()
},
}),
withProps(({ data }) => ({
--
GitLab