Skip to content

Commit 329b83b

Browse files
CarsonFCarsonF
committed
Refactor UserForm use standard DialogForm.fieldsPrefix 
1 parent 219305b commit 329b83b

File tree

3 files changed

+87
-92
lines changed

3 files changed

+87
-92
lines changed

‎src/scenes/Users/Create/CreateUser.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
type SubmitResult = CreatePersonMutation['createPerson']['user'];
1414
export type CreateUserProps = Except<
1515
UserFormProps<CreatePersonInput, SubmitResult>,
16-
'prefix' | 'onSubmit'
16+
'fieldsPrefix' | 'onSubmit'
1717
>;
1818

1919
export const CreateUser = (props: CreateUserProps) => {
@@ -39,7 +39,7 @@ export const CreateUser = (props: CreateUserProps) => {
3939
});
4040
}}
4141
{...props}
42-
prefix="person"
42+
fieldsPrefix="person"
4343
onSubmit={async (input) => {
4444
const { data } = await createPerson({
4545
variables: { input },

‎src/scenes/Users/Edit/EditUser.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { UpdateUserDocument } from './EditUser.graphql';
77

88
export type EditUserProps = Except<
99
UserFormProps<UpdateUserInput>,
10-
'prefix' | 'onSubmit' | 'initialValues'
10+
'fieldsPrefix' | 'onSubmit' | 'initialValues'
1111
>;
1212

1313
export const EditUser = (props: EditUserProps) => {
@@ -40,7 +40,7 @@ export const EditUser = (props: EditUserProps) => {
4040
<UserForm<UpdateUserInput & { user: { email?: Maybe<string> } }>
4141
title="Edit Person"
4242
{...props}
43-
prefix="user"
43+
fieldsPrefix="user"
4444
initialValues={initialValues}
4545
onSubmit={async ({ user }) => {
4646
await updateUser({

‎src/scenes/Users/UserForm/UserForm.tsx‎

Lines changed: 83 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Box, Stack } from '@mui/material';
1+
import { Stack } from '@mui/material';
22
import { memoize } from 'lodash';
3+
import { SetRequired } from 'type-fest';
34
import { RoleLabels } from '~/api/schema.graphql';
45
import { labelFrom } from '~/common';
56
import {
@@ -8,7 +9,6 @@ import {
89
} from '../../../components/Dialog/DialogForm';
910
import {
1011
EmailField,
11-
FieldGroup,
1212
matchFieldIfSame,
1313
SecuredField,
1414
SubmitError,
@@ -18,10 +18,12 @@ import { AutocompleteField } from '../../../components/form/AutocompleteField';
1818
import { useSession } from '../../../components/Session';
1919
import { UserFormFragment } from './UserForm.graphql';
2020

21-
export type UserFormProps<T, R = void> = DialogFormProps<T, R> & {
21+
export type UserFormProps<T, R = void> = SetRequired<
22+
DialogFormProps<T, R>,
23+
'fieldsPrefix'
24+
> & {
2225
/** The pre-existing user to edit */
2326
user?: UserFormFragment;
24-
prefix: string;
2527
};
2628

2729
const decorators = memoize((prefix: string) => [
@@ -32,7 +34,6 @@ const decorators = memoize((prefix: string) => [
3234

3335
export const UserForm = <T, R = void>({
3436
user,
35-
prefix,
3637
...rest
3738
}: UserFormProps<T, R>) => {
3839
const { session } = useSession();
@@ -42,112 +43,106 @@ export const UserForm = <T, R = void>({
4243
maxWidth: 'sm',
4344
}}
4445
{...rest}
45-
decorators={decorators(prefix)}
46+
decorators={decorators(rest.fieldsPrefix)}
4647
>
4748
<SubmitError />
48-
<FieldGroup prefix={prefix}>
49-
<Stack>
50-
<Stack direction="row" spacing={2}>
51-
<Box flex={1}>
52-
<SecuredField obj={user} name="realFirstName">
53-
{(props) => (
54-
<TextField
55-
label="First Name"
56-
placeholder="Enter First Name"
57-
required
58-
{...props}
59-
/>
60-
)}
61-
</SecuredField>
62-
</Box>
63-
<Box flex={1}>
64-
<SecuredField obj={user} name="realLastName">
65-
{(props) => (
66-
<TextField
67-
label="Last Name"
68-
placeholder="Enter Last Name"
69-
required
70-
{...props}
71-
/>
72-
)}
73-
</SecuredField>
74-
</Box>
75-
</Stack>
76-
<Stack direction="row" spacing={2}>
77-
<SecuredField obj={user} name="displayFirstName">
78-
{(props) => (
79-
<TextField
80-
label="Public First Name"
81-
placeholder="Enter Public First Name"
82-
required
83-
{...props}
84-
/>
85-
)}
86-
</SecuredField>
87-
<SecuredField obj={user} name="displayLastName">
88-
{(props) => (
89-
<TextField
90-
label="Public Last Name"
91-
placeholder="Enter Public Last Name"
92-
required
93-
{...props}
94-
/>
95-
)}
96-
</SecuredField>
97-
</Stack>
98-
<SecuredField obj={user} name="email">
99-
{(props) => <EmailField {...props} required={false} />}
100-
</SecuredField>
101-
<SecuredField obj={user} name="title">
49+
<Stack>
50+
<Stack direction="row" spacing={2}>
51+
<SecuredField obj={user} name="realFirstName">
10252
{(props) => (
103-
<TextField label="Title" placeholder="Enter Title" {...props} />
53+
<TextField
54+
label="First Name"
55+
placeholder="Enter First Name"
56+
required
57+
{...props}
58+
/>
10459
)}
10560
</SecuredField>
106-
<SecuredField obj={user} name="phone">
61+
<SecuredField obj={user} name="realLastName">
10762
{(props) => (
10863
<TextField
109-
label="Phone"
110-
placeholder="Enter Phone Number"
111-
type="tel"
64+
label="Last Name"
65+
placeholder="Enter Last Name"
66+
required
11267
{...props}
11368
/>
11469
)}
11570
</SecuredField>
116-
{/*TODO: Replace with timezone autocomplete #307 */}
117-
{/*<SecuredField obj={user} name="timezone">*/}
118-
{/* {(props) => (*/}
119-
{/* <TextField label="Timezone" placeholder="Enter Timezone" {...props} />*/}
120-
{/* )}*/}
121-
{/*</SecuredField>*/}
122-
<SecuredField obj={user} name="about">
71+
</Stack>
72+
<Stack direction="row" spacing={2}>
73+
<SecuredField obj={user} name="displayFirstName">
12374
{(props) => (
12475
<TextField
125-
label="About"
126-
multiline
127-
placeholder="Enter About"
128-
minRows={2}
76+
label="Public First Name"
77+
placeholder="Enter Public First Name"
78+
required
12979
{...props}
13080
/>
13181
)}
13282
</SecuredField>
133-
<SecuredField obj={user} name="roles">
83+
<SecuredField obj={user} name="displayLastName">
13484
{(props) => (
135-
<AutocompleteField
136-
multiple
137-
options={
138-
user?.roles.assignableRoles ??
139-
session?.roles.assignableRoles ??
140-
[]
141-
}
142-
getOptionLabel={labelFrom(RoleLabels)}
143-
label="Roles"
144-
variant="outlined"
85+
<TextField
86+
label="Public Last Name"
87+
placeholder="Enter Public Last Name"
88+
required
14589
{...props}
14690
/>
14791
)}
14892
</SecuredField>
14993
</Stack>
150-
</FieldGroup>
94+
<SecuredField obj={user} name="email">
95+
{(props) => <EmailField {...props} required={false} />}
96+
</SecuredField>
97+
<SecuredField obj={user} name="title">
98+
{(props) => (
99+
<TextField label="Title" placeholder="Enter Title" {...props} />
100+
)}
101+
</SecuredField>
102+
<SecuredField obj={user} name="phone">
103+
{(props) => (
104+
<TextField
105+
label="Phone"
106+
placeholder="Enter Phone Number"
107+
type="tel"
108+
{...props}
109+
/>
110+
)}
111+
</SecuredField>
112+
{/*TODO: Replace with timezone autocomplete #307 */}
113+
{/*<SecuredField obj={user} name="timezone">*/}
114+
{/* {(props) => (*/}
115+
{/* <TextField label="Timezone" placeholder="Enter Timezone" {...props} />*/}
116+
{/* )}*/}
117+
{/*</SecuredField>*/}
118+
<SecuredField obj={user} name="about">
119+
{(props) => (
120+
<TextField
121+
label="About"
122+
multiline
123+
placeholder="Enter About"
124+
minRows={2}
125+
{...props}
126+
/>
127+
)}
128+
</SecuredField>
129+
<SecuredField obj={user} name="roles">
130+
{(props) => (
131+
<AutocompleteField
132+
multiple
133+
options={
134+
user?.roles.assignableRoles ??
135+
session?.roles.assignableRoles ??
136+
[]
137+
}
138+
getOptionLabel={labelFrom(RoleLabels)}
139+
label="Roles"
140+
variant="outlined"
141+
{...props}
142+
/>
143+
)}
144+
</SecuredField>
145+
</Stack>
151146
</DialogForm>
152147
);
153148
};

0 commit comments

Comments
 (0)