Skip to content

Enhance profile and team edit forms #423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 16, 2023
Merged

Enhance profile and team edit forms #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccf0188
Use correct input type for edit team attributes
LanesGood Mar 14, 2023
41d83e0
Add org name to team edit page
LanesGood Mar 14, 2023
f4c6d71
Prevent modification of attribute key_types
LanesGood Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions src/components/edit-team-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
Select,
Checkbox,
VStack,
Flex,
Text,
} from '@chakra-ui/react'
import dynamic from 'next/dynamic'
import { uniqBy, prop } from 'ramda'
Expand Down Expand Up @@ -44,6 +46,7 @@ export default function EditTeamForm({
initialValues,
onSubmit,
staff,
team,
isCreateForm,
orgTeamTags = [],
teamTags = [],
Expand Down Expand Up @@ -83,13 +86,13 @@ export default function EditTeamForm({
}
if (orgTeamTags.length > 0) {
extraOrgTeamFields = orgTeamTags.map(
({ id, name, required, description }) => {
({ id, name, key_type, required, description }) => {
return (
<FormControl isRequired={required} key={`extra-tag-${id}`}>
<FormLabel htmlFor={`extra-tag-${id}`}>{name}</FormLabel>
<Field
as={Input}
type='text'
type={key_type}
name={`tags.key-${id}`}
id={`extra-tag-${id}`}
required={required}
Expand All @@ -106,13 +109,13 @@ export default function EditTeamForm({

if (teamTags.length > 0) {
extraTeamFields = teamTags.map(
({ id, name, required, description }) => {
({ id, name, key_type, required, description }) => {
return (
<FormControl isRequired={required} key={`extra-tag-${id}`}>
<FormLabel htmlFor={`extra-tag-${id}`}>{name}</FormLabel>
<Field
as={Input}
type='text'
type={key_type}
name={`tags.key-${id}`}
id={`extra-tag-${id}`}
required={required}
Expand All @@ -129,8 +132,8 @@ export default function EditTeamForm({

return (
<Form>
<VStack alignItems={'flex-start'}>
<Heading variant='sectionHead'>Details</Heading>
<VStack alignItems={'flex-start'} spacing={4}>
<Heading variant='sectionHead'>Team Details</Heading>
<FormControl isRequired isInvalid={errors.name}>
<FormLabel htmlFor='name'>Name</FormLabel>
<Field
Expand Down Expand Up @@ -222,18 +225,29 @@ export default function EditTeamForm({
</FormControl>
)}
{extraOrgTeamFields.length > 0 ? (
<>
<Heading as='h3' size='sm'>
Organization Attributes
<Flex
flexDir='column'
alignItems='flex-start'
border={'1px'}
borderRadius='base'
p={8}
borderColor='brand.50'
>
<Heading as='h3' size='sm' variant='sectionHead'>
{team.org?.name} Details
</Heading>
<Text fontSize='sm' pb={4}>
Organization {team.org?.name} requests the following
additional details
</Text>
{extraOrgTeamFields}
</>
</Flex>
) : (
''
)}
{extraTeamFields.length > 0 ? (
<>
<Heading as='h3' size='sm'>
<Heading as='h3' size='sm' variant='sectionHead'>
Other Team Attributes
</Heading>
{extraTeamFields}
Expand Down
8 changes: 4 additions & 4 deletions src/components/privacy-policy-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,15 @@ export default function PrivacyPolicyForm({ initialValues, onSubmit }) {
}) => {
return (
<VStack as={Form} alignItems='flex-start'>
<FormControl>
<FormLabel isRequired isInvalid={errors.body}>
Body
</FormLabel>
<FormControl isRequired isInvalid={errors.body}>
<FormLabel>Body</FormLabel>
<Field
cols={40}
rows={6}
as={Textarea}
name='body'
id='body'
placeholder='Privacy policy text body'
value={values.body}
required
className={errors.body ? 'form-error' : ''}
Expand All @@ -68,6 +67,7 @@ export default function PrivacyPolicyForm({ initialValues, onSubmit }) {
as={Textarea}
name='consentText'
id='consentText'
placeholder='Consent text body'
value={values.consentText}
required
className={errors.consentText ? 'form-error' : ''}
Expand Down
13 changes: 7 additions & 6 deletions src/components/profile-attribute-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const defaultValues = {
description: '',
visibility: 'team',
required: [],
key_type: 'text',
key_type: '',
}

export default function ProfileAttributeForm({
Expand Down Expand Up @@ -76,17 +76,16 @@ export default function ProfileAttributeForm({

return (
<VStack as={Form} alignItems='flex-start'>
<FormControl>
<FormLabel htmlFor='name' isRequired isInvalid={errors.name}>
Name of attribute
</FormLabel>
<FormControl isRequired isInvalid={errors.name}>
<FormLabel htmlFor='name'>Name of attribute</FormLabel>
<Field
as={Input}
type='text'
name='name'
id='name'
placeholder='Name of the attribute'
value={values.name}
required
/>
{errors.name ? (
<FormErrorMessage>{errors.name}</FormErrorMessage>
Expand Down Expand Up @@ -117,14 +116,16 @@ export default function ProfileAttributeForm({
<option value='public'>Public</option>
</Field>
</FormControl>
<FormControl>
<FormControl isRequired>
<FormLabel>Type:</FormLabel>
<Field
as={Select}
type='text'
name='key_type'
id='key_type'
value={values.key_type}
isDisabled={values.key_type}
placeholder='Select type'
>
<option value='text'>Text</option>
<option value='number'>Number</option>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/teams/[id]/edit-profiles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export default class TeamEditProfile extends Component {
{ key: 'name' },
{ key: 'description' },
{ key: 'visibility' },
{ key: 'key_type', header: 'type' },
{ key: 'key_type', label: 'type' },
{ key: 'required' },
{ key: 'actions', render: this.renderActions },
]
Expand Down
1 change: 1 addition & 0 deletions src/pages/teams/[id]/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export default class TeamEdit extends Component {
profileValues={profileValues}
teamTags={teamAttributes}
orgTeamTags={orgTeamAttributes}
team={team}
onSubmit={async (values, actions) => {
try {
let tags = Object.keys(values.tags).map((key) => {
Expand Down