Skip to content

Commit

Permalink
Refactor user management form fields and corresponding props config
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterMuriuki
peterMuriuki committed Nov 8, 2024
1 parent c4fcd61 commit 814817e
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 99 deletions.
14 changes: 12 additions & 2 deletions packages/fhir-keycloak-user-management/src/components/CreateEditUser/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import {
FormFields,
PRACTITIONER_USER_TYPE_CODE,
SUPERVISOR_USER_TYPE_CODE,
commonFhirFields,
userTypeField,
FormFieldsKey,
} from '@opensrp/user-management';
import {
practitionerResourceType,
Expand Down Expand Up @@ -356,13 +359,20 @@ export const practitionerUpdater =
* @param props - component props
*/
export function CreateEditUser(props: CreateEditPropTypes) {
const extraFormFields = getConfig('projectCode') === 'giz' ? renderExtraFields : [];
let renderFormFields: FormFieldsKey[] = [...commonFhirFields];
const projectCode = getConfig('projectCode');
if (projectCode === 'giz') {
renderFormFields = [...commonFhirFields, ...renderExtraFields] as FormFieldsKey[];
} else if (projectCode === 'eusm') {
renderFormFields = renderFormFields.filter((field) => field !== userTypeField);
}

const baseCompProps = {
...props,
getPractitionerFun: getPractitioner,
getPractitionerRoleFun: getPractitionerRole,
postPutPractitionerFactory: practitionerUpdater,
extraFormFields: extraFormFields,
userFormRenderFields: renderFormFields,
};

return <BaseCreateEditUser {...baseCompProps} />;
Expand Down
4 changes: 0 additions & 4 deletions packages/keycloak-user-management/src/components/CreateEditUser/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export interface CreateEditUserProps {
getPractitionerFun: (baseUrl: string, userId: string) => Promise<Practitioner | IPractitioner>;
getPractitionerRoleFun?: (baseUrl: string, userId: string) => Promise<IPractitionerRole>;
postPutPractitionerFactory: UserFormProps['practitionerUpdaterFactory'];
extraFormFields: string[];
}

const getOpenSrpPractitioner = (baseUrl: string, userId: string) => {
Expand Down Expand Up @@ -95,7 +94,6 @@ const CreateEditUser: React.FC<CreateEditPropTypes> = (props: CreateEditPropType
getPractitionerFun,
postPutPractitionerFactory,
getPractitionerRoleFun,
extraFormFields,
} = props;

const userId = props.match.params[ROUTE_PARAM_USER_ID];
Expand Down Expand Up @@ -215,8 +213,6 @@ const CreateEditUser: React.FC<CreateEditPropTypes> = (props: CreateEditPropType
hiddenFields={userFormHiddenFields}
renderFields={userFormRenderFields}
practitionerUpdaterFactory={postPutPractitionerFactory}
isFHIRInstance={!!getPractitionerRoleFun}
extraFormFields={extraFormFields}
/>
</Col>
</Row>
Expand Down
195 changes: 115 additions & 80 deletions packages/keycloak-user-management/src/components/forms/UserForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,23 @@ import {
} from './utils';
import { sendErrorNotification } from '@opensrp/notifications';
import '../../../index.css';
import {
CONTACT_FORM_FIELD,
FormFields,
FormFieldsKey,
SelectOption,
UserFormProps,
} from './types';
import { FormFields, FormFieldsKey, SelectOption, UserFormProps } from './types';
import { SelectProps } from 'antd/lib/select';
import { useTranslation } from '../../../mls';
import {
compositionResourceType,
emailField,
enabledField,
fhirCoreAppIdField,
firstNameField,
lastNameField,
NATIONAL_ID_FORM_FIELD,
PHONE_NUMBER_FORM_FIELD,
PRACTITIONER,
SUPERVISOR,
userGroupsField,
usernameField,
userTypeField,
} from '../../../constants';
import { PaginatedAsyncSelect } from '@opensrp/react-utils';
import { IComposition } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IComposition';
Expand All @@ -41,10 +43,13 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
userGroups,
renderFields,
hiddenFields,
isFHIRInstance,
extraFormFields,
} = props;
const shouldRender = (fieldName: FormFieldsKey) => !!renderFields?.includes(fieldName);
const shouldRender = (fieldName: FormFieldsKey) => {
if (renderFields === undefined) {
return true;
}
return !!renderFields.includes(fieldName);
};

const isHidden = (fieldName: FormFieldsKey) => !!hiddenFields?.includes(fieldName);
const { t } = useTranslation();
Expand Down Expand Up @@ -147,26 +152,35 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
.finally(() => setSubmitting(false));
}}
>
<Form.Item
name="firstName"
id="firstName"
label={t('First Name')}
rules={[{ required: true, message: t('First Name is required') }]}
>
<Input />
</Form.Item>
<Form.Item
name="lastName"
id="lastName"
label={t('Last Name')}
rules={[{ required: true, message: t('Last Name is required') }]}
>
<Input />
</Form.Item>
{extraFormFields.includes(NATIONAL_ID_FORM_FIELD) && (
{shouldRender(firstNameField) ? (
<Form.Item
name={firstNameField}
id={firstNameField}
hidden={isHidden(firstNameField)}
label={t('First Name')}
rules={[{ required: true, message: t('First Name is required') }]}
>
<Input />
</Form.Item>
) : null}

{shouldRender(lastNameField) ? (
<Form.Item
name={lastNameField}
id={lastNameField}
hidden={isHidden(lastNameField)}
label={t('Last Name')}
rules={[{ required: true, message: t('Last Name is required') }]}
>
<Input />
</Form.Item>
) : null}

{shouldRender(NATIONAL_ID_FORM_FIELD) ? (
<Form.Item
name={NATIONAL_ID_FORM_FIELD}
id={NATIONAL_ID_FORM_FIELD}
hidden={isHidden(NATIONAL_ID_FORM_FIELD)}
label={t('National Id')}
rules={[
{
Expand All @@ -178,9 +192,11 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
>
<Input />
</Form.Item>
)}
{extraFormFields.includes(PHONE_NUMBER_FORM_FIELD) && (
) : null}

{shouldRender(PHONE_NUMBER_FORM_FIELD) ? (
<Form.Item
hidden={isHidden(PHONE_NUMBER_FORM_FIELD)}
name={PHONE_NUMBER_FORM_FIELD}
id={PHONE_NUMBER_FORM_FIELD}
label={t('Mobile Phone Number')}
Expand All @@ -194,64 +210,63 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
>
<Input />
</Form.Item>
)}
<Form.Item name="email" id="email" label={t('Email')}>
<Input />
</Form.Item>
<Form.Item
name="username"
id="username"
label={t('Username')}
rules={[{ required: true, message: t('Username is required') }]}
>
<Input disabled={initialValues.id ? true : false} />
</Form.Item>
) : null}

{shouldRender(CONTACT_FORM_FIELD) ? (
{shouldRender(emailField) ? (
<Form.Item name={emailField} id={emailField} label={t('Email')}>
<Input />
</Form.Item>
) : null}

{shouldRender(usernameField) ? (
<Form.Item
id={CONTACT_FORM_FIELD}
rules={[
{
type: 'string',
pattern: /^0\d{9}$/,
message: t('Contact should be 10 digits and start with 0'),
},
{
required: !isHidden(CONTACT_FORM_FIELD),
message: t('Contact is required'),
},
]}
hidden={isHidden(CONTACT_FORM_FIELD)}
name={CONTACT_FORM_FIELD}
label={t('Contact')}
name={usernameField}
id={usernameField}
label={t('Username')}
rules={[{ required: true, message: t('Username is required') }]}
>
<Input></Input>
<Input disabled={initialValues.id ? true : false} />
</Form.Item>
) : null}

{isFHIRInstance ? (
<Form.Item id="userType" name="userType" label={t('User Type')}>
{shouldRender(userTypeField) ? (
<Form.Item
id={userTypeField}
name={userTypeField}
label={t('User Type')}
hidden={isHidden(userTypeField)}
>
<Radio.Group
options={[
{ label: t('Practitioner'), value: PRACTITIONER },
{ label: t('Supervisor'), value: SUPERVISOR },
]}
name="userType"
></Radio.Group>
</Form.Item>
) : null}

<Form.Item id="enabled" name="enabled" label={t('Enable user')}>
<Form.Item
id={enabledField}
name={enabledField}
label={t('Enable user')}
hidden={isHidden(enabledField)}
>
<Radio.Group
options={status}
name="enabled"
// watch user's status
onChange={(e) => setUserEnabled(e.target.value)}
></Radio.Group>
</Form.Item>

{initialValues.id && initialValues.id !== extraData.user_id ? (
<Form.Item id="practitionerToggle" name="active" label={t('Mark as Practitioner')}>
{initialValues.id &&
initialValues.id !== extraData.user_id &&
shouldRender('active') ? (
<Form.Item
id="practitionerToggle"
name="active"
label={t('Mark as Practitioner')}
hidden={isHidden('active')}
>
<Radio.Group name="active">
{status.map((e) => (
<Radio
Expand All @@ -268,21 +283,31 @@ const UserForm: FC<UserFormProps> = (props: UserFormProps) => {
</Form.Item>
) : null}

<Form.Item name="userGroups" id="userGroups" label={t('Keycloak User Group')}>
<Select<SelectOption[]>
mode="multiple"
allowClear
placeholder={t('Please select')}
style={{ width: '100%' }}
options={getUserGroupsOptions(userGroups)}
filterOption={userGroupOptionsFilter as SelectProps<SelectOption[]>['filterOption']}
></Select>
</Form.Item>
{shouldRender(userGroupsField) ? (
<Form.Item
name={userGroupsField}
id={userGroupsField}
hidden={isHidden(userGroupsField)}
label={t('Keycloak User Group')}
>
<Select<SelectOption[]>
mode="multiple"
allowClear
placeholder={t('Please select')}
style={{ width: '100%' }}
options={getUserGroupsOptions(userGroups)}
filterOption={
userGroupOptionsFilter as SelectProps<SelectOption[]>['filterOption']
}
></Select>
</Form.Item>
) : null}

{isFHIRInstance ? (
{shouldRender(fhirCoreAppIdField) ? (
<Form.Item
id="fhirCoreAppId"
name="fhirCoreAppId"
hidden={isHidden(fhirCoreAppIdField)}
id={fhirCoreAppIdField}
name={fhirCoreAppIdField}
label={t('Application ID')}
rules={[{ required: true, message: t('Application Id is required') }]}
data-testid="fhirCoreAppId"
Expand Down Expand Up @@ -323,15 +348,25 @@ export const defaultUserFormInitialValues: FormFields = {
userType: 'practitioner',
userGroups: undefined,
practitioner: undefined,
contact: undefined,
enabled: true,
fhirCoreAppId: undefined,
};

UserForm.defaultProps = {
initialValues: defaultUserFormInitialValues,
practitionerUpdaterFactory: postPutPractitioner,
extraFormFields: [],
};

export const commonFhirFields: FormFieldsKey[] = [
firstNameField,
lastNameField,
emailField,
usernameField,
userTypeField,
enabledField,
'active',
userGroupsField,
fhirCoreAppIdField,
];

export { UserForm };
17 changes: 10 additions & 7 deletions packages/keycloak-user-management/src/components/forms/UserForm/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { Dictionary } from '@onaio/utils';
import { IPractitioner } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IPractitioner';
import { TFunction } from '@opensrp/i18n';
import { IPractitionerRole } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IPractitionerRole';
import { PRACTITIONER, SUPERVISOR } from '../../../constants';
import {
fhirCoreAppIdField,
PRACTITIONER,
SUPERVISOR,
userGroupsField,
userTypeField,
} from '../../../constants';

export interface FormFields
extends Pick<
Expand All @@ -18,13 +24,12 @@ export interface FormFields
| 'enabled'
> {
active?: boolean;
userType?: typeof PRACTITIONER | typeof SUPERVISOR;
userGroups?: string[];
[userTypeField]?: typeof PRACTITIONER | typeof SUPERVISOR;
[userGroupsField]?: string[];
practitioner?: Practitioner | IPractitioner;
keycloakUser?: KeycloakUser;
contact?: string;
practitionerRole?: IPractitionerRole;
fhirCoreAppId?: string;
[fhirCoreAppIdField]?: string;
}

export type FormFieldsKey = keyof FormFields | keyof UserAttributes;
Expand All @@ -45,8 +50,6 @@ export interface UserFormProps {
hiddenFields?: FormFieldsKey[];
renderFields?: FormFieldsKey[];
practitionerUpdaterFactory: PractitionerUpdaterFactory;
isFHIRInstance: boolean;
extraFormFields: string[];
}

/** descibes antd select component options */
Expand Down
Loading

0 comments on commit 814817e

Please sign in to comment.