Skip to content
Snippets Groups Projects
Commit 6529997d authored by Alexandru Munteanu's avatar Alexandru Munteanu
Browse files

feat(adminUsers): add createUser mutation

parent 8a72f937
No related branches found
No related tags found
3 merge requests!222Sprint #26,!217Sprint #26,!192Hin 1085 user component graphql
Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 176 deletions
packages/component-faraday-ui/src/modals/FormModal.js
+ 222
− 174
View file @ 6529997d
import React, { Fragment } from 'react'
import { get } from 'lodash'
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 { compose, setDisplayName, withHandlers, withProps } from 'recompose'
import {
H2,
Menu,
Button,
Spinner,
Checkbox,
TextField,
ValidatedField,
} from '@pubsweet/ui'
import {
Row,
Text,
......@@ -23,166 +16,173 @@ import {
ItemOverrideAlert,
} from 'pubsweet-component-faraday-ui'
import { Formik } from 'formik'
import ValidatedMenuField from './ValidatedMenuField'
const AddUserForm = ({ roles, countries, titles }) => (
<Fragment>
<Row alignItems="baseline" mb={1} mt={1}>
<Item mr={1} vertical>
<Label required>Email</Label>
<ValidatedField
component={TextField}
name="email"
validate={[required]}
/>
</Item>
<ItemOverrideAlert ml={1} vertical>
<Label required>Role</Label>
<ValidatedField
component={input => (
<Menu options={roles} {...input} placeholder="Please select" />
)}
name="role"
validate={[required]}
/>
</ItemOverrideAlert>
</Row>
// #region Unused stuff
<Row mb={2}>
<Item mr={1} vertical>
<Label>First Name</Label>
<ValidatedField component={TextField} name="firstName" />
</Item>
<Item ml={1} vertical>
<Label>Last Name</Label>
<ValidatedField component={TextField} name="lastName" />
</Item>
</Row>
// const AddUserForm = ({ roles, countries, titles }) => (
// <Fragment>
// <Row alignItems="baseline" mb={1} mt={1}>
// <Item mr={1} vertical>
// <Label required>Email</Label>
// <ValidatedField
// component={TextField}
// name="email"
// validate={[required]}
// />
// </Item>
// <ItemOverrideAlert ml={1} vertical>
// <Label required>Role</Label>
// <ValidatedField
// component={input => (
// <Menu options={roles} {...input} placeholder="Please select" />
// )}
// name="role"
// validate={[required]}
// />
// </ItemOverrideAlert>
// </Row>
<RowOverrideAlert alignItems="center" mb={2}>
<ItemOverrideAlert mr={1} vertical>
<Label>Title</Label>
<ValidatedField
component={input => (
<Menu options={titles} {...input} placeholder="Please select" />
)}
name="title"
/>
</ItemOverrideAlert>
<ItemOverrideAlert ml={1} vertical>
<Label>Country</Label>
<ValidatedField
component={input => (
<Menu options={countries} {...input} placeholder="Please select" />
)}
name="country"
/>
</ItemOverrideAlert>
</RowOverrideAlert>
// <Row mb={2}>
// <Item mr={1} vertical>
// <Label>First Name</Label>
// <ValidatedField component={TextField} name="firstName" />
// </Item>
// <Item ml={1} vertical>
// <Label>Last Name</Label>
// <ValidatedField component={TextField} name="lastName" />
// </Item>
// </Row>
<Row mb={3}>
<Item vertical>
<Label>Affiliation</Label>
<ValidatedField component={TextField} name="affiliation" />
</Item>
</Row>
</Fragment>
)
// <RowOverrideAlert alignItems="center" mb={2}>
// <ItemOverrideAlert mr={1} vertical>
// <Label>Title</Label>
// <ValidatedField
// component={input => (
// <Menu options={titles} {...input} placeholder="Please select" />
// )}
// name="title"
// />
// </ItemOverrideAlert>
// <ItemOverrideAlert ml={1} vertical>
// <Label>Country</Label>
// <ValidatedField
// component={input => (
// <Menu options={countries} {...input} placeholder="Please select" />
// )}
// name="country"
// />
// </ItemOverrideAlert>
// </RowOverrideAlert>
const EditForm = ({ titles, countries }) => (
<Fragment>
<Row alignItems="center" mb={2} mt={1}>
<Item mr={1} vertical>
<Label>First Name</Label>
<ValidatedField component={TextField} name="firstName" />
</Item>
<Item ml={1} vertical>
<Label>Last Name</Label>
<ValidatedField component={TextField} name="lastName" />
</Item>
</Row>
// <Row mb={3}>
// <Item vertical>
// <Label>Affiliation</Label>
// <ValidatedField component={TextField} name="affiliation" />
// </Item>
// </Row>
// </Fragment>
// )
<RowOverrideAlert alignItems="center" mb={2}>
<ItemOverrideAlert mr={1} vertical>
<Label>Title</Label>
<ValidatedField
component={input => (
<Menu options={titles} {...input} placeholder="Please select" />
)}
name="title"
/>
</ItemOverrideAlert>
<ItemOverrideAlert ml={1} vertical>
<Label>Country</Label>
<ValidatedField
component={input => (
<Menu options={countries} {...input} placeholder="Please select" />
)}
name="country"
/>
</ItemOverrideAlert>
</RowOverrideAlert>
// const EditForm = ({ titles, countries }) => (
// <Fragment>
// <Row alignItems="center" mb={2} mt={1}>
// <Item mr={1} vertical>
// <Label>First Name</Label>
// <ValidatedField component={TextField} name="firstName" />
// </Item>
// <Item ml={1} vertical>
// <Label>Last Name</Label>
// <ValidatedField component={TextField} name="lastName" />
// </Item>
// </Row>
<Row mb={2}>
<Item vertical>
<Label>Affiliation</Label>
<ValidatedField component={TextField} name="affiliation" />
</Item>
</Row>
<Row>
<Item>
<Label>Roles</Label>
</Item>
</Row>
<RowOverrideAlert mb={3} mt={1}>
<Item>
<ValidatedField
component={({ value, onChange }) => (
<Checkbox
checked={value}
label="Editor in Chief"
onChange={onChange}
value={value}
/>
)}
name="editorInChief"
/>
</Item>
<Item>
<ValidatedField
component={({ value, onChange }) => (
<Checkbox
checked={value}
label="Admin"
onChange={onChange}
value={value}
/>
)}
name="admin"
/>
</Item>
<Item>
<ValidatedField
component={({ value, onChange }) => (
<Checkbox
checked={value}
label="Handling Editor"
onChange={onChange}
value={value}
/>
)}
name="handlingEditor"
/>
</Item>
</RowOverrideAlert>
</Fragment>
)
// <RowOverrideAlert alignItems="center" mb={2}>
// <ItemOverrideAlert mr={1} vertical>
// <Label>Title</Label>
// <ValidatedField
// component={input => (
// <Menu options={titles} {...input} placeholder="Please select" />
// )}
// name="title"
// />
// </ItemOverrideAlert>
// <ItemOverrideAlert ml={1} vertical>
// <Label>Country</Label>
// <ValidatedField
// component={input => (
// <Menu options={countries} {...input} placeholder="Please select" />
// )}
// name="country"
// />
// </ItemOverrideAlert>
// </RowOverrideAlert>
const FormikForm = () => (
<Formik onSubmit={(...props) => console.log(props)}>
{ceva => console.log(ceva) || <span onClick={ceva.handleSubmit}>gg</span>}
</Formik>
)
// <Row mb={2}>
// <Item vertical>
// <Label>Affiliation</Label>
// <ValidatedField component={TextField} name="affiliation" />
// </Item>
// </Row>
// <Row>
// <Item>
// <Label>Roles</Label>
// </Item>
// </Row>
// <RowOverrideAlert mb={3} mt={1}>
// <Item>
// <ValidatedField
// component={({ value, onChange }) => (
// <Checkbox
// checked={value}
// label="Editor in Chief"
// onChange={onChange}
// value={value}
// />
// )}
// name="editorInChief"
// />
// </Item>
// <Item>
// <ValidatedField
// component={({ value, onChange }) => (
// <Checkbox
// checked={value}
// label="Admin"
// onChange={onChange}
// value={value}
// />
// )}
// name="admin"
// />
// </Item>
// <Item>
// <ValidatedField
// component={({ value, onChange }) => (
// <Checkbox
// checked={value}
// label="Handling Editor"
// onChange={onChange}
// value={value}
// />
// )}
// name="handlingEditor"
// />
// </Item>
// </RowOverrideAlert>
// </Fragment>
// )
// #endregion
const parseUser = ({ email, role, ...rest }) => ({
email,
username: email,
admin: role === 'admin',
editorInChief: role === 'editorInChief',
handlingEditor: role === 'handlingEditor',
...rest,
})
const FormModal = ({
edit,
......@@ -199,30 +199,78 @@ const FormModal = ({
handleSubmit,
confirmText = 'OK',
cancelText = 'Cancel',
//
addUser,
}) => (
<Root>
<IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
<H2>{title}</H2>
<Formik
onSubmit={values => {
addUser({ variables: { user: parseUser(values) } })
}}
>
{ceva => (
<Fragment>
<Row alignItems="baseline" mb={1} mt={1}>
<Item mr={1} vertical>
<Label required>Email</Label>
<ValidatedFieldFormik
component={TextField}
name="email"
validate={[required]}
/>
</Item>
<ItemOverrideAlert ml={1} vertical>
<Label required>Role</Label>
<ValidatedMenuField name="role" options={roles} />
</ItemOverrideAlert>
</Row>
<Row mb={2}>
<Item mr={1} vertical>
<Label>First Name</Label>
<ValidatedFieldFormik component={TextField} name="firstName" />
</Item>
<Item ml={1} vertical>
<Label>Last Name</Label>
<ValidatedFieldFormik component={TextField} name="lastName" />
</Item>
</Row>
<RowOverrideAlert alignItems="center" mb={2}>
<ItemOverrideAlert mr={1} vertical>
<Label>Title</Label>
<ValidatedMenuField name="title" options={titles} />
</ItemOverrideAlert>
<ItemOverrideAlert ml={1} vertical>
<Label>Country</Label>
<ValidatedMenuField name="country" options={countries} />
</ItemOverrideAlert>
</RowOverrideAlert>
<FormikForm />
<Row mb={3}>
<Item vertical>
<Label>Affiliation</Label>
<ValidatedFieldFormik component={TextField} name="affiliation" />
</Item>
</Row>
<Row>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={ceva.handleSubmit} primary>
Save user
</Button>
</Row>
</Fragment>
)}
</Formik>
{modalError && (
<Row mb={1}>
<Text error>{modalError}</Text>
</Row>
)}
<Row>
{isFetching ? (
<Spinner size={3} />
) : (
<Fragment>
<Button onClick={onClose}>{cancelText}</Button>
<Button onClick={handleSubmit} primary>
{confirmText}
</Button>
</Fragment>
)}
</Row>
</Root>
)
......
packages/component-faraday-ui/src/modals/MyMenu.js 0 → 100644
+ 26
− 0
View file @ 6529997d
import React, { Fragment } from 'react'
import { compose, withStateHandlers } from 'recompose'
const MyMenu = ({ open, toggleMenu, field, form }) => (
<div onClick={toggleMenu}>
Click to open
{open && (
<Fragment>
<span onClick={() => form.setFieldValue(field.name, 1)}>Option 1</span>
<span onClick={() => form.setFieldValue(field.name, 2)}>Option 2</span>
<span onClick={() => form.setFieldValue(field.name, 3)}>Option 3</span>
</Fragment>
)}
</div>
)
export default compose(
withStateHandlers(
{ open: false },
{
toggleMenu: ({ open }) => () => ({
open: !open,
}),
},
),
)(MyMenu)
packages/component-faraday-ui/src/modals/ValidatedMenuField.js 0 → 100644
+ 19
− 0
View file @ 6529997d
import React from 'react'
import { Field } from 'formik'
import { Menu } from '@pubsweet/ui'
const ValidatedMenuField = ({ options, name }) => (
<Field name={name}>
{({ field, form }) => (
<Menu
onChange={v => {
field.onChange(v)
form.setFieldValue(name, v)
}}
options={options}
/>
)}
</Field>
)
export default ValidatedMenuField
packages/components-faraday/src/components/Admin/AddUser.js
+ 2
− 1
View file @ 6529997d
......@@ -12,8 +12,9 @@ import {
withCountries,
} from 'pubsweet-component-faraday-ui'
const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
const AddUser = ({ edit, journal, addUser, ...rest }) => (
<OpenModal
addUser={addUser}
edit={edit}
formModal
title={edit ? 'Edit User' : 'Add User'}
......
packages/components-faraday/src/components/Admin/AdminUsers.js
+ 15
− 1
View file @ 6529997d
......@@ -29,11 +29,13 @@ const GET_USERS = gql`
users {
id
admin
email
country
username
lastName
isActive
firstName
affiliation
isConfirmed
editorInChief
handlingEditor
......@@ -41,6 +43,15 @@ const GET_USERS = gql`
}
`
const ADD_USER = gql`
mutation addUser($user: UserInput) {
createUser(input: $user) {
id
email
}
}
`
const Users = ({
page,
users,
......@@ -56,6 +67,8 @@ const Users = ({
getStatusLabel,
paginatedItems,
toggleUserStatus,
//
addUser,
...rest
}) => (
<Fragment>
......@@ -70,10 +83,10 @@ const Users = ({
Admin Dashboard
</ActionLink>
<AddUser
addUser={addUser}
form="add-user"
getUsers={getUsers}
modalKey="addUser"
onSubmit={onSubmit}
/>
</Item>
......@@ -162,6 +175,7 @@ export default compose(
withJournal,
withFetching,
graphql(GET_USERS),
graphql(ADD_USER, { name: 'addUser' }),
withProps(({ journal: { roles = {} }, data: { users } }) => ({
roles: Object.keys(roles),
items: users,
......
packages/xpub-faraday/config/validations.js
+ 1
− 0
View file @ 6529997d
......@@ -156,6 +156,7 @@ module.exports = {
handlingEditor: Joi.boolean(),
agreeTC: Joi.boolean(),
isActive: Joi.boolean(),
passwordHash: Joi.string(),
notifications: Joi.object({
email: Joi.object({
system: Joi.boolean().default(true),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment