Skip to content

Commit

Permalink
fix: update user group form [DHIS2-12294] (#1328)
Browse files Browse the repository at this point in the history
  • Loading branch information
tomzemp authored Dec 14, 2023
1 parent ed3f6ff commit 80234cd
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 114 deletions.
65 changes: 17 additions & 48 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2023-08-02T13:20:46.717Z\n"
"PO-Revision-Date: 2023-08-02T13:20:46.717Z\n"
"POT-Creation-Date: 2023-12-12T13:36:05.060Z\n"
"PO-Revision-Date: 2023-12-12T13:36:05.060Z\n"

msgid "Yes"
msgstr "Yes"
Expand Down Expand Up @@ -56,43 +56,6 @@ msgstr "Error updating group"
msgid "Error creating group"
msgstr "Error creating group"

msgid "Basic information"
msgstr "Basic information"

msgid "Name"
msgstr "Name"

msgid "Code"
msgstr "Code"

msgid "Used in analytics reports."
msgstr "Used in analytics reports."

msgid "User management"
msgstr "User management"

msgid "Add or remove users from this group."
msgstr "Add or remove users from this group."

msgid ""
"To add a user to this group, go to the User section and edit the user group "
"settings for a specific user."
msgstr ""
"To add a user to this group, go to the User section and edit the user group "
"settings for a specific user."

msgid "User group management"
msgstr "User group management"

msgid "This group can manage other user groups. Add managed user groups below."
msgstr "This group can manage other user groups. Add managed user groups below."

msgid "Available user groups"
msgstr "Available user groups"

msgid "Managed user groups"
msgstr "Managed user groups"

msgid "Attributes"
msgstr "Attributes"

Expand Down Expand Up @@ -132,6 +95,12 @@ msgstr "Error updating role"
msgid "Error creating role"
msgstr "Error creating role"

msgid "Basic information"
msgstr "Basic information"

msgid "Name"
msgstr "Name"

msgid "Description"
msgstr "Description"

Expand Down Expand Up @@ -512,6 +481,9 @@ msgstr "Available user roles"
msgid "User roles this user is assigned"
msgstr "User roles this user is assigned"

msgid "Available user groups"
msgstr "Available user groups"

msgid "User groups this user is a member of"
msgstr "User groups this user is a member of"

Expand All @@ -530,8 +502,12 @@ msgstr "New password"
msgid "Password"
msgstr "Password"

msgid "Minimum 8 characters, one uppercase and lowercase letter and one number"
msgstr "Minimum 8 characters, one uppercase and lowercase letter and one number"
msgid ""
"Password should be at least 8 characters long, with at least one lowercase "
"character, one uppercase character and one special character."
msgstr ""
"Password should be at least 8 characters long, with at least one lowercase "
"character, one uppercase character and one special character."

msgid "Repeat new password"
msgstr "Repeat new password"
Expand Down Expand Up @@ -905,13 +881,6 @@ msgstr "Username for new user"
msgid "Password for new user"
msgstr "Password for new user"

msgid ""
"Password should be at least 8 characters long, with at least one lowercase "
"character, one uppercase character and one special character."
msgstr ""
"Password should be at least 8 characters long, with at least one lowercase "
"character, one uppercase character and one special character."

msgid "Cancel"
msgstr "Cancel"

Expand Down
53 changes: 53 additions & 0 deletions src/components/GroupForm/BasicInformationSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import i18n from '@dhis2/d2-i18n'
import {
composeValidators,
hasValue,
createMaxCharacterLength,
} from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
import { FormSection, TextField } from '../Form'
import {
useDebouncedUniqueGroupNameValidator,
useDebouncedUniqueGroupCodeValidator,
} from './validators'

const codeLengthValidator = createMaxCharacterLength(50)

const BasicInformationSection = React.memo(({ group }) => {
const debouncedUniqueGroupNameValidator =
useDebouncedUniqueGroupNameValidator({ groupName: group?.name })
const debouncedUniqueGroupCodeValidator =
useDebouncedUniqueGroupCodeValidator({ groupCode: group?.code })

return (
<FormSection title={i18n.t('Basic information')}>
<TextField
required
name="name"
label={i18n.t('Name')}
initialValue={group?.name}
validate={composeValidators(
hasValue,
debouncedUniqueGroupNameValidator
)}
/>
<TextField
name="code"
label={i18n.t('Code')}
helpText={i18n.t('Used in analytics reports.')}
initialValue={group?.code}
validate={composeValidators(
codeLengthValidator,
debouncedUniqueGroupCodeValidator
)}
/>
</FormSection>
)
})

BasicInformationSection.propTypes = {
group: PropTypes.object,
}

export default BasicInformationSection
87 changes: 23 additions & 64 deletions src/components/GroupForm/GroupForm.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,44 @@
import { useDataEngine } from '@dhis2/app-runtime'
import i18n from '@dhis2/d2-i18n'
import {
NoticeBox,
composeValidators,
hasValue,
createMaxCharacterLength,
FinalForm,
} from '@dhis2/ui'
import { NoticeBox, FinalForm } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
import { useHistory } from 'react-router-dom'
import { useCurrentUser } from '../../hooks/useCurrentUser'
import Attributes from '../Attributes'
import Form, { FormSection, TextField, TransferField } from '../Form'
import { getGroupData } from './getGroupData'
import Form, { FormSection } from '../Form'
import BasicInformationSection from './BasicInformationSection.js'
import {
createPostRequestBody,
createJsonPatchRequestBody,
} from './createRequestBody.js'
import styles from './GroupForm.module.css'
import { useFormData } from './useFormData'
import {
useDebouncedUniqueGroupNameValidator,
useDebouncedUniqueGroupCodeValidator,
} from './validators'

const codeLengthValidator = createMaxCharacterLength(50)
import UserGroupManagementSection from './UserGroupManagementSection.js'

const GroupForm = ({ submitButtonLabel, group }) => {
const history = useHistory()
const engine = useDataEngine()
const debouncedUniqueGroupNameValidator =
useDebouncedUniqueGroupNameValidator({ engine, groupName: group?.name })
const debouncedUniqueGroupCodeValidator =
useDebouncedUniqueGroupCodeValidator({ engine, groupCode: group?.code })
const { loading, error, userGroupOptions, attributes } = useFormData()
const { currentUser, refreshCurrentUser } = useCurrentUser()
const handleSubmit = async values => {
const groupData = getGroupData({ values, group, attributes })

const handleSubmit = async (values, form) => {
try {
if (group) {
await engine.mutate({
resource: `userGroups/${group.id}?mergeMode=MERGE`,
type: 'update',
data: groupData,
resource: 'userGroups',
id: group.id,
type: 'json-patch',
data: createJsonPatchRequestBody({
values,
attributes,
dirtyFields: form.getState().dirtyFields,
}),
})
} else {
await engine.mutate({
resource: 'userGroups',
type: 'create',
data: groupData,
data: createPostRequestBody({ values, attributes }),
})
}

Expand Down Expand Up @@ -91,28 +83,7 @@ const GroupForm = ({ submitButtonLabel, group }) => {
{submitError.message}
</NoticeBox>
)}
<FormSection title={i18n.t('Basic information')}>
<TextField
required
name="name"
label={i18n.t('Name')}
initialValue={group?.name}
validate={composeValidators(
hasValue,
debouncedUniqueGroupNameValidator
)}
/>
<TextField
name="code"
label={i18n.t('Code')}
helpText={i18n.t('Used in analytics reports.')}
initialValue={group?.code}
validate={composeValidators(
codeLengthValidator,
debouncedUniqueGroupCodeValidator
)}
/>
</FormSection>
<BasicInformationSection group={group} />
<FormSection
title={i18n.t('User management')}
description={i18n.t(
Expand All @@ -126,22 +97,10 @@ const GroupForm = ({ submitButtonLabel, group }) => {
)}
</NoticeBox>
</FormSection>
<FormSection
title={i18n.t('User group management')}
description={i18n.t(
'This group can manage other user groups. Add managed user groups below.'
)}
>
<TransferField
name="managedGroups"
leftHeader={i18n.t('Available user groups')}
rightHeader={i18n.t('Managed user groups')}
options={userGroupOptions}
initialValue={
group?.managedGroups.map(({ id }) => id) || []
}
/>
</FormSection>
<UserGroupManagementSection
group={group}
userGroupOptions={userGroupOptions}
/>
{attributes.length > 0 && (
<FormSection title={i18n.t('Attributes')}>
<Attributes
Expand Down
28 changes: 28 additions & 0 deletions src/components/GroupForm/UserGroupManagementSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import i18n from '@dhis2/d2-i18n'
import PropTypes from 'prop-types'
import React from 'react'
import { FormSection, TransferField } from '../Form'

const UserGroupManagementSection = React.memo(({ group, userGroupOptions }) => (
<FormSection
title={i18n.t('User group management')}
description={i18n.t(
'This group can manage other user groups. Add managed user groups below.'
)}
>
<TransferField
name="managedGroups"
leftHeader={i18n.t('Available user groups')}
rightHeader={i18n.t('Managed user groups')}
options={userGroupOptions}
initialValue={group?.managedGroups.map(({ id }) => id) || []}
/>
</FormSection>
))

UserGroupManagementSection.propTypes = {
userGroupOptions: PropTypes.array.isRequired,
group: PropTypes.object,
}

export default UserGroupManagementSection
74 changes: 74 additions & 0 deletions src/components/GroupForm/createRequestBody.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { getAttributeValues } from '../../attributes.js'

const ATTRIBUTE_VALUES = 'attributeValues'

export const createPostRequestBody = ({ values, attributes }) => {
const { name, code, members, managedGroups } = values

return {
name,
code,
users: members.additions.map(({ id }) => ({ id })),
managedGroups: managedGroups.map(id => ({ id })),
attributeValues: getAttributeValues({ attributes, values }),
}
}

export const createJsonPatchRequestBody = ({
values,
attributes,
dirtyFields,
}) => {
const dirtyFieldsArray = Object.keys(dirtyFields).filter(
key => dirtyFields[key]
)
const patch = dirtyFieldsArray.reduce((acc, key) => {
if (key !== 'members' && !key.startsWith(ATTRIBUTE_VALUES)) {
const value =
key === 'managedGroups'
? values[key].map(id => ({ id }))
: values[key]

acc.push({
op: 'replace',
path: '/' + key,
value: value ?? null,
})
}
return acc
}, [])

// Replace all attribute values if any were changed.
// There is no way to update individual attributes.
const anyDirtyAttributes = dirtyFieldsArray.some(key =>
key.startsWith(ATTRIBUTE_VALUES)
)

if (anyDirtyAttributes) {
patch.push({
op: 'replace',
path: `/${ATTRIBUTE_VALUES}`,
value: getAttributeValues({ attributes, values }),
})
}

if (dirtyFields.members) {
const { additions, removals } = values.members
for (const addition of additions) {
patch.push({
op: 'add',
path: '/users/-',
value: { id: addition.id },
})
}
for (const removal of removals) {
patch.push({
op: 'remove-by-id',
path: '/users',
id: removal.id,
})
}
}

return patch
}
Loading

0 comments on commit 80234cd

Please sign in to comment.