@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/users/manage-users/user-management.utils.ts

@@ -0,0 +1,100 @@
+import type { ProviderWithAttributes } from '../../../user-management.resources';
+import type { ConfigObject } from '../../../config-schema';
+import type { ProviderSearchResult } from './provider-search.resource';
+import { EXCLUDED_ROLE_CATEGORY } from './user-management.constants';
+
+export interface ProviderWithAttributesMinimal {
+  attributes?: Array<{ attributeType?: { uuid: string }; value?: string | { name?: string } }>;
+  identifier?: string;
+}
+
+export interface AttributeTypeMappingForExtraction {
+  licenseNumber: string;
+  licenseExpiry: string;
+  providerNationalId: string;
+  qualification: string;
+  licenseBody: string;
+  phoneNumber: string;
+  providerAddress: string;
+  passportNumber: string;
+  providerUniqueIdentifier: string;
+}
+
+export interface ProviderFormValues {
+  providerLicenseNumber: string;
+  licenseExpiryDate: Date | string;
+  qualification: string;
+  nationalId: string;
+  passportNumber: string;
+  registrationNumber: string;
+  phoneNumber: string;
+  email: string;
+  providerUniqueIdentifier: string;
+}
+
+export interface NameParts {
+  givenName: string;
+  middleName: string;
+  familyName: string;
+}
+
+export function extractNameParts(display = ''): NameParts {
+  const nameParts = display.split(' ');
+  const [givenName = '', middleName = '', familyName = ''] =
+    nameParts.length === 3 ? nameParts : [nameParts[0], '', nameParts[1] || ''];
+  return { givenName, middleName, familyName };
+}
+
+export function extractAttributeFromProvider(providerData: ProviderWithAttributes, attributeTypeUuid: string): string {
+  const attr = providerData.attributes?.find((a) => a.attributeType?.uuid === attributeTypeUuid);
+  if (!attr?.value) {
+    return '';
+  }
+  return typeof attr.value === 'string' ? attr.value : attr.value?.name ?? '';
+}
+
+export function hasExternalOrIhrisAttributes(
+  provider: ProviderWithAttributes | ProviderSearchResult,
+  config: Pick<ConfigObject, 'providerExternalIdAttributeTypeUuid' | 'providerIHRISIdentifierAttributeTypeUuid'>,
+): boolean {
+  const externalId = extractAttributeFromProvider(
+    provider as ProviderWithAttributes,
+    config.providerExternalIdAttributeTypeUuid,
+  );
+  const ihrisIdentifier = extractAttributeFromProvider(
+    provider as ProviderWithAttributes,
+    config.providerIHRISIdentifierAttributeTypeUuid,
+  );
+  return !!(externalId || ihrisIdentifier);
+}
+
+export function extractProviderFormValues(
+  provider: ProviderWithAttributesMinimal | ProviderWithAttributes,
+  attributeTypeMapping: AttributeTypeMappingForExtraction,
+): ProviderFormValues {
+  const getVal = (uuid: string) => extractAttributeFromProvider(provider as ProviderWithAttributes, uuid);
+  const licenseExpiryVal = getVal(attributeTypeMapping.licenseExpiry);
+  return {
+    providerLicenseNumber: getVal(attributeTypeMapping.licenseNumber),
+    licenseExpiryDate: licenseExpiryVal ? new Date(licenseExpiryVal) : '',
+    qualification: getVal(attributeTypeMapping.qualification),
+    nationalId: getVal(attributeTypeMapping.providerNationalId),
+    passportNumber: getVal(attributeTypeMapping.passportNumber),
+    registrationNumber: getVal(attributeTypeMapping.licenseBody),
+    phoneNumber: getVal(attributeTypeMapping.phoneNumber),
+    email: getVal(attributeTypeMapping.providerAddress),
+    providerUniqueIdentifier: getVal(attributeTypeMapping.providerUniqueIdentifier),
+  };
+}
+
+export interface RoleConfigCategory {
+  category: string;
+  roles: string[];
+}
+
+export function filterRolesConfig(
+  rolesConfig: RoleConfigCategory[],
+  excludeCategory = EXCLUDED_ROLE_CATEGORY,
+): RoleConfigCategory[] {
+  return rolesConfig.filter((category) => category.category !== excludeCategory);
+}

package/src/components/users/manage-users/user-management.workspace.scss

@@ -0,0 +1,172 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin-right: layout.$spacing-05;
+  margin-left: 0;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+  width: 100%;
+}
+
+.formStackControl {
+  row-gap: layout.$layout-01;
+}
+
+.checkBoxColumn {
+  background-color: colors.$gray-10;
+  margin: layout.$spacing-05;
+  padding: layout.$spacing-03;
+  border-radius: layout.$spacing-05;
+}
+
+.checkboxLabelSingleLine {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.checkboxGroupGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: layout.$spacing-03;
+  column-gap: layout.$spacing-02;
+  font-size: 14px;
+
+  :global(.cds--fieldset-legend) {
+    font-size: 14px;
+  }
+}
+
+.CheckboxGroup .bx--fieldset-legend {
+  font-size: 14px;
+}
+
+.btn {
+  min-width: 50%;
+}
+
+.checkboxLabelSelected {
+  background-color: colors.$green-10;
+  border-radius: layout.$spacing-05;
+  padding: layout.$spacing-02;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  transition: background-color 0.3s ease;
+}
+
+.checkboxLabel {
+  background-color: transparent;
+  border-radius: layout.$spacing-05;
+  padding: layout.$spacing-02;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.3s ease;
+  font-size: 14px;
+}
+
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  border-radius: layout.$spacing-05;
+  overflow: hidden;
+}
+
+.leftLayout {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.progressIndicator {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  padding-top: layout.$spacing-03;
+  border-right: 1px solid colors.$gray-30;
+}
+
+.sections {
+  flex: 1;
+  padding: layout.$spacing-04;
+}
+
+@media (max-width: 768px) {
+  .leftLayout {
+    flex-direction: column;
+  }
+
+  .progressIndicator {
+    flex-direction: row;
+    border-right: none;
+    border-bottom: 1px solid colors.$gray-30;
+    min-width: unset;
+    justify-content: space-between;
+    padding: layout.$spacing-02;
+  }
+
+  .sections {
+    padding: layout.$spacing-03;
+  }
+}
+
+.multilineCheckboxLabel .cds--checkbox-label {
+  display: block;
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 1.4;
+}
+
+.formHeaderSection {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  row-gap: layout.$spacing-06;
+  position: relative;
+  padding-top: layout.$spacing-06;
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+.formIdentifierType {
+  color: colors.$gray-70;
+  display: inline-block;
+  font-size: layout.$spacing-04;
+  line-height: layout.$spacing-05;
+  line-height: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+  vertical-align: baseline;
+}
+.formRow {
+  display: flex;
+  align-items: center;
+}
+.roleStockFields {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  outline: 1px solid colors.$gray-10;
+  padding: layout.$spacing-05;
+}

package/src/components/users/manage-users/user-management.workspace.tsx

@@ -0,0 +1,334 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DefaultWorkspaceProps, useLayoutType, useConfig, parseDate } from '@openmrs/esm-framework';
+import { FormProvider } from 'react-hook-form';
+import styles from './user-management.workspace.scss';
+import { ButtonSet, Button, InlineLoading, Stack, ProgressIndicator, ProgressStep } from '@carbon/react';
+import classNames from 'classnames';
+import {
+  useRoles,
+  useProvider,
+  useProviderAttributeType,
+  type ProviderWithAttributes,
+} from '../../../user-management.resources';
+import { useSystemUserRoleConfigSetting } from '../../hook/useSystemRoleSetting';
+import { User } from '../../../types';
+import { ConfigObject } from '../../../config-schema';
+import { useUsers } from './user-list/user-list.resource';
+import { type ProviderSearchResult } from './provider-search.resource';
+import { extractNameParts, extractProviderFormValues, hasExternalOrIhrisAttributes } from './user-management.utils';
+import { useProviderAttributeMapping } from './hooks/useProviderAttributeMapping';
+import { useUserManagementForm, type UserFormSchema } from './hooks/useUserManagementForm';
+import { useUserFormSteps } from './hooks/useUserFormSteps';
+import { useUserFormSubmission } from './hooks/useUserFormSubmission';
+import { DemographicSection } from './sections/demographic-section.component';
+import { ProviderSection } from './sections/provider-section.component';
+import { LoginSection } from './sections/login-section.component';
+import { RolesSection } from './sections/roles-section.component';
+
+type ManageUserWorkspaceProps = DefaultWorkspaceProps & {
+  initialUserValue?: User;
+  initialProvider?: ProviderSearchResult | ProviderWithAttributes;
+};
+
+const EMPTY_FORM_VALUES: Partial<UserFormSchema> = {
+  givenName: '',
+  middleName: '',
+  familyName: '',
+  gender: undefined,
+  phoneNumber: '',
+  email: '',
+  providerIdentifiers: false,
+  username: '',
+  password: '',
+  confirmPassword: '',
+  roles: [],
+  providerUniqueIdentifier: '',
+  nationalId: '',
+  passportNumber: '',
+  providerLicense: '',
+  registrationNumber: '',
+  qualification: '',
+  licenseExpiryDate: undefined,
+  systemId: '',
+  isEditProvider: false,
+};
+
+const ManageUserWorkspace: React.FC<ManageUserWorkspaceProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  initialUserValue = {} as User,
+  initialProvider,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [selectedProvider, setSelectedProvider] = useState<ProviderSearchResult | null>(null);
+  const [formResetKey, setFormResetKey] = useState(0);
+
+  // Gets providers by name and returns all rows if there is no match
+  const { provider = [], loadingProvider, providerError } = useProvider(initialUserValue?.person?.display);
+
+  const providerSource: ProviderWithAttributes[] = selectedProvider
+    ? [selectedProvider as ProviderWithAttributes]
+    : initialProvider
+    ? [initialProvider as ProviderWithAttributes]
+    : provider;
+
+  const { users } = useUsers();
+  const usernames =
+    users?.map((user) => user.username).filter((username) => username !== initialUserValue?.username) || [];
+  const isInitialValuesEmpty = Object.keys(initialUserValue).length === 0;
+
+  const { providerAttributeType = [] } = useProviderAttributeType();
+  const { roles = [], isLoading } = useRoles();
+  const { rolesConfig } = useSystemUserRoleConfigSetting();
+  const config = useConfig<ConfigObject>();
+
+  const isProviderReadOnly = providerSource.length > 0 && hasExternalOrIhrisAttributes(providerSource[0], config);
+
+  const { attributeTypeMapping, providerValues } = useProviderAttributeMapping({
+    provider: providerSource,
+    providerAttributeType,
+    config,
+  });
+
+  const { userFormMethods, errors, isSubmitting, isDirty } = useUserManagementForm({
+    initialUserValue,
+    usernames,
+    providerValues,
+    loadingProvider,
+    isInitialValuesEmpty,
+    isProviderReadOnly,
+  });
+
+  const { setValue, trigger } = userFormMethods;
+
+  const isStepValid = useCallback(
+    (stepIndex: number) => {
+      switch (stepIndex) {
+        case 0:
+          return !errors.givenName && !errors.familyName && !errors.gender && !errors.phoneNumber && !errors.email;
+        case 1:
+          return !errors.username && !errors.password && !errors.confirmPassword;
+        case 2:
+        case 3:
+        default:
+          return true;
+      }
+    },
+    [
+      errors.givenName,
+      errors.familyName,
+      errors.gender,
+      errors.phoneNumber,
+      errors.email,
+      errors.username,
+      errors.password,
+      errors.confirmPassword,
+    ],
+  );
+
+  const {
+    steps,
+    currentIndex,
+    hasDemographicInfo,
+    hasLoginInfo,
+    hasProviderAccount,
+    hasRoles,
+    markStepComplete,
+    isStepEnabled,
+    handleBackClick,
+    handleNextClick,
+    handleStepChange,
+    getSubmitButtonText,
+    getSubmitButtonType,
+    getSubmitButtonIcon,
+  } = useUserFormSteps({ t, closeWorkspace, isInitialValuesEmpty, isStepValid });
+
+  const handleNextWithValidation = useCallback(
+    async (e: React.MouseEvent) => {
+      let isValid = true;
+      if (hasDemographicInfo) {
+        isValid = await trigger(['givenName', 'familyName', 'gender', 'phoneNumber', 'email']);
+      } else if (hasLoginInfo) {
+        isValid = await trigger(['username', 'password', 'confirmPassword']);
+      }
+      if (!isValid) {
+        return;
+      }
+      markStepComplete(currentIndex);
+      handleNextClick(e);
+    },
+    [hasDemographicInfo, hasLoginInfo, currentIndex, trigger, markStepComplete, handleNextClick],
+  );
+
+  const { onSubmit, handleError } = useUserFormSubmission({
+    attributeTypeMapping,
+    selectedProvider,
+    initialUserValue,
+    provider: providerSource,
+    providerValues,
+    isProviderReadOnly,
+    isInitialValuesEmpty,
+    personPhonenumberAttributeUuid: config.personPhonenumberAttributeUuid,
+    personEmailAttributeUuid: config.personEmailAttributeUuid,
+    licenseBodyUuid: config.licenseBodyUuid,
+    providerNationalIdUuid: config.providerNationalIdUuid,
+    licenseNumberUuid: config.licenseNumberUuid,
+    passportNumberUuid: config.passportNumberUuid,
+    providerUniqueIdentifierAttributeTypeUuid: config.providerUniqueIdentifierAttributeTypeUuid,
+    closeWorkspaceWithSavedChanges,
+    t,
+  });
+
+  useEffect(() => {
+    if (isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [isDirty, promptBeforeClosing]);
+
+  const setPersonValuesFromProvider = useCallback(
+    (providerData: ProviderSearchResult) => {
+      const display = providerData.person?.display ?? '';
+      const { givenName, middleName, familyName } = extractNameParts(display);
+      setValue('givenName', givenName, { shouldDirty: true });
+      setValue('middleName', middleName, { shouldDirty: true });
+      setValue('familyName', familyName, { shouldDirty: true });
+      setValue('gender', (providerData.person?.gender as 'M' | 'F') || undefined, { shouldDirty: true });
+      setSelectedProvider(providerData);
+    },
+    [setValue],
+  );
+
+  const setProviderValuesFromProvider = useCallback(
+    (providerData: ProviderSearchResult) => {
+      const values = extractProviderFormValues(providerData, attributeTypeMapping);
+      setValue('providerUniqueIdentifier', values.providerUniqueIdentifier, { shouldDirty: true });
+      setValue('nationalId', values.nationalId, { shouldDirty: true });
+      setValue('passportNumber', values.passportNumber, { shouldDirty: true });
+      setValue('providerLicense', values.providerLicenseNumber, { shouldDirty: true });
+      setValue('registrationNumber', values.registrationNumber, { shouldDirty: true });
+      setValue('qualification', values.qualification, { shouldDirty: true });
+      setValue(
+        'licenseExpiryDate',
+        values.licenseExpiryDate
+          ? values.licenseExpiryDate instanceof Date
+            ? values.licenseExpiryDate
+            : parseDate(values.licenseExpiryDate)
+          : undefined,
+        { shouldDirty: true },
+      );
+      setValue('phoneNumber', values.phoneNumber, { shouldDirty: true });
+      setValue('email', values.email, { shouldDirty: true });
+      if (providerData.identifier) {
+        setValue('systemId', providerData.identifier, { shouldDirty: true });
+      }
+    },
+    [setValue, attributeTypeMapping],
+  );
+
+  const handleProviderSelected = useCallback(
+    async (providerData: ProviderSearchResult) => {
+      setPersonValuesFromProvider(providerData);
+      setProviderValuesFromProvider(providerData);
+      await trigger(['givenName', 'familyName', 'gender', 'phoneNumber', 'email']);
+    },
+    [setPersonValuesFromProvider, setProviderValuesFromProvider, trigger],
+  );
+
+  const handleFormReset = useCallback(() => {
+    setSelectedProvider(null);
+    userFormMethods.reset(EMPTY_FORM_VALUES, { keepDefaultValues: false });
+    setFormResetKey((k) => k + 1);
+  }, [userFormMethods]);
+
+  return (
+    <div className={styles.leftContainer}>
+      <div>
+        <div className={styles.leftLayout}>
+          <ProgressIndicator
+            currentIndex={currentIndex}
+            spaceEqually={true}
+            vertical={true}
+            className={styles.progressIndicator}
+            onChange={handleStepChange}>
+            {steps.map((step, index) => (
+              <ProgressStep
+                key={step.id}
+                label={step.label}
+                className={styles.ProgresStep}
+                disabled={!isStepEnabled(index)}
+              />
+            ))}
+          </ProgressIndicator>
+          <div className={styles.sections}>
+            <FormProvider {...userFormMethods}>
+              <form onSubmit={userFormMethods.handleSubmit(onSubmit, handleError)} className={styles.form}>
+                <div className={styles.formContainer}>
+                  <Stack className={styles.formStackControl} gap={7}>
+                    {hasDemographicInfo && (
+                      <DemographicSection
+                        control={userFormMethods.control}
+                        errors={errors}
+                        isInitialValuesEmpty={isInitialValuesEmpty}
+                        isProviderReadOnly={isProviderReadOnly}
+                        onProviderSelected={handleProviderSelected}
+                        onFormReset={handleFormReset}
+                        showResetButton={isInitialValuesEmpty}
+                        formResetKey={formResetKey}
+                        isFormDirty={isDirty}
+                      />
+                    )}
+                    {hasProviderAccount && (
+                      <ProviderSection
+                        control={userFormMethods.control}
+                        errors={errors}
+                        isInitialValuesEmpty={isInitialValuesEmpty}
+                        isProviderReadOnly={isProviderReadOnly}
+                        loadingProvider={initialProvider ? false : loadingProvider}
+                        providerError={providerError}
+                        provider={providerSource}
+                      />
+                    )}
+                    {hasLoginInfo && <LoginSection control={userFormMethods.control} errors={errors} />}
+                    {hasRoles && (
+                      <RolesSection
+                        control={userFormMethods.control}
+                        roles={roles}
+                        rolesConfig={rolesConfig || []}
+                        isLoading={isLoading}
+                      />
+                    )}
+                  </Stack>
+                </div>
+                <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+                  <Button kind="secondary" onClick={handleBackClick} className={styles.btn}>
+                    {t(hasDemographicInfo ? 'cancel' : 'back', hasDemographicInfo ? 'Cancel' : 'Back')}
+                  </Button>
+                  <Button
+                    kind="primary"
+                    type={getSubmitButtonType()}
+                    disabled={isSubmitting || Object.keys(errors).length > 0}
+                    renderIcon={getSubmitButtonIcon()}
+                    className={styles.btn}
+                    onClick={handleNextWithValidation}>
+                    {isSubmitting ? (
+                      <span style={{ display: 'flex', alignItems: 'center' }}>
+                        {t('submitting', 'Submitting...')} <InlineLoading status="active" />
+                      </span>
+                    ) : (
+                      getSubmitButtonText()
+                    )}
+                  </Button>
+                </ButtonSet>
+              </form>
+            </FormProvider>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ManageUserWorkspace;