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

package/src/components/users/manage-users/manage-user-role-scope/user-role-scope-workspace/user-role-scope.workspace.tsx

@@ -0,0 +1,316 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
+import styles from '../../../manage-users/user-management.workspace.scss';
+import { TextInput, ButtonSet, Button, InlineLoading, Stack } from '@carbon/react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+import { User, UserRoleScope } from '../../../../../types';
+import UserRoleScopeFormSchema from './userRoleScopeFormSchema';
+import {
+  createOrUpdateUserRoleScope,
+  handleMutation,
+  useStockOperationTypes,
+  useStockTagLocations,
+  useUserRoleScopes,
+} from '../../../../../user-management.resources';
+import { formatNewDate, ROLE_CATEGORIES, today } from '../../../../../constants';
+import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib/src';
+import { Add, ChevronSortUp } from '@carbon/react/icons';
+import { useSystemUserRoleConfigSetting } from '../../../../hook/useSystemRoleSetting';
+import UserRoleScopeFormFields from './user-role-scope-fields.component';
+import StockUserRoleScopesList from '../user-role-scope-list/user-role-scope-list.component';
+
+type UserRoleScopeWorkspaceProps = DefaultWorkspaceProps & {
+  user?: User;
+};
+
+const UserRoleScopeWorkspace: React.FC<UserRoleScopeWorkspaceProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  user = {} as User,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { userRoleScopeFormSchema } = UserRoleScopeFormSchema();
+  const { stockOperations, loadingStock } = useStockOperationTypes();
+  const { stockLocations } = useStockTagLocations();
+  const { rolesConfig, error } = useSystemUserRoleConfigSetting();
+  const { items, loadingRoleScope } = useUserRoleScopes();
+
+  const [userRoleScopeInitialValues, setUserRoleScopeInitialValues] = useState<UserRoleScope | null>(null);
+  const handleEditUserRoleScope = useCallback((userRoleScope: UserRoleScope) => {
+    setUserRoleScopeInitialValues(userRoleScope);
+  }, []);
+
+  type UserRoleScopeFormSchema = z.infer<typeof userRoleScopeFormSchema>;
+
+  const userRoleScopedefaultValues = useMemo(
+    () => ({
+      forms: userRoleScopeInitialValues
+        ? [
+            {
+              ...userRoleScopeInitialValues,
+              userName: user?.username || userRoleScopeInitialValues?.userName,
+              dateRange: {
+                activeTo: formatNewDate(userRoleScopeInitialValues?.activeTo),
+                activeFrom: formatNewDate(userRoleScopeInitialValues?.activeFrom),
+              },
+              locations:
+                userRoleScopeInitialValues?.locations?.map(({ locationName, locationUuid }) => ({
+                  locationName,
+                  locationUuid,
+                })) || [],
+              operationTypes:
+                userRoleScopeInitialValues?.operationTypes?.map(({ operationTypeName, operationTypeUuid }) => ({
+                  operationTypeName,
+                  operationTypeUuid,
+                })) || [],
+            },
+          ]
+        : [],
+    }),
+    [userRoleScopeInitialValues, user],
+  );
+
+  const roleScopeformMethods = useForm<UserRoleScopeFormSchema>({
+    resolver: zodResolver(userRoleScopeFormSchema),
+    mode: 'all',
+    defaultValues: userRoleScopedefaultValues as UserRoleScopeFormSchema,
+  });
+
+  const { reset } = roleScopeformMethods;
+
+  const { errors, isSubmitting, isDirty } = roleScopeformMethods.formState;
+  useEffect(() => {
+    if (isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [isDirty, promptBeforeClosing]);
+
+  useEffect(() => {
+    if (userRoleScopeInitialValues && !loadingStock) {
+      reset(userRoleScopedefaultValues as UserRoleScopeFormSchema);
+    }
+  }, [userRoleScopedefaultValues, loadingStock, userRoleScopeInitialValues, user, reset]);
+  const {
+    fields: forms,
+    append: appendForm,
+    remove: removeForm,
+  } = useFieldArray({
+    control: roleScopeformMethods.control,
+    name: 'forms',
+  });
+
+  const mappedRoleScopeForms = (form) => ({
+    uuid: userRoleScopeInitialValues?.uuid,
+    userUuid: userRoleScopeInitialValues?.userUuid || user?.uuid,
+    userName: userRoleScopeInitialValues?.userName,
+    userGivenName: userRoleScopeInitialValues?.userGivenName,
+    userFamilyName: userRoleScopeInitialValues?.userFamilyName,
+    permanent: form?.permanent,
+    enabled: form?.enabled,
+    operationTypes: form?.operationTypes?.map(({ operationTypeUuid, operationTypeName }) => ({
+      operationTypeUuid,
+      operationTypeName,
+    })),
+    locations: form?.locations?.map(({ locationUuid, locationName }) => ({
+      locationUuid,
+      locationName,
+      enableDescendants: false,
+    })),
+    role: form?.role,
+    activeFrom: form?.dateRange?.activeFrom || null,
+    activeTo: form?.dateRange?.activeTo || null,
+  });
+
+  const showNotification = (titleKey, subtitleKey, kind, params = {}) => {
+    showSnackbar({
+      title: t(titleKey),
+      subtitle: t(subtitleKey, params),
+      kind,
+      isLowContrast: true,
+    });
+  };
+
+  const onSubmit = async (data: UserRoleScopeFormSchema) => {
+    try {
+      const userRoleScopeUrl = userRoleScopeInitialValues?.uuid
+        ? `${restBaseUrl}/stockmanagement/userrolescope/${userRoleScopeInitialValues.uuid}`
+        : `${restBaseUrl}/stockmanagement/userrolescope`;
+
+      await Promise.all(
+        data.forms.map(async (form) => {
+          const roleScope = mappedRoleScopeForms(form);
+          const response = await createOrUpdateUserRoleScope(userRoleScopeUrl, roleScope, user?.uuid ?? '');
+          if (response.ok) {
+            showNotification('userRoleScopeSaved', 'User role scope saved successfully', 'success');
+            closeWorkspaceWithSavedChanges();
+          }
+        }),
+      );
+
+      handleMutation(`${restBaseUrl}/stockmanagement/userrolescope`);
+    } catch (error) {
+      const errorMessage =
+        error?.responseBody?.error?.message ?? 'An error occurred while creating the User role scope';
+      showNotification('userRoleScopeCreationFailed', 'User role scope failed to save successfully', 'error', {
+        errorMessage,
+      });
+    }
+  };
+
+  const handleError = (error) => {
+    console.error('Error:', error);
+    showSnackbar({
+      title: t('userRoleScopeCreationFailed', 'User Role Scope creation failed'),
+      subtitle: t(
+        'userRoleScopeCreationFailedSubtitle',
+        'An error occurred while creating the user role scope mode. Please try again.',
+      ),
+      kind: 'error',
+      isLowContrast: true,
+    });
+  };
+
+  useEffect(() => {
+    if (isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [isDirty, promptBeforeClosing]);
+
+  function extractInventoryRoleNames(rolesConfig) {
+    return rolesConfig.find((category) => category.category === ROLE_CATEGORIES.CORE_INVENTORY)?.roles || [];
+  }
+
+  const inventoryRoleNames = useMemo(() => extractInventoryRoleNames(rolesConfig || []), [rolesConfig]);
+
+  const inventoryRoles = useMemo(() => {
+    if (!user?.roles || inventoryRoleNames.length === 0) {
+      return [];
+    }
+    return user.roles.filter((role) => inventoryRoleNames.includes(role.display));
+  }, [user?.roles, inventoryRoleNames]);
+
+  const scopeRoles = useMemo(
+    () =>
+      items?.results?.reduce((acc, role) => {
+        if (role.userUuid === user.uuid) {
+          acc.push(role.role);
+        }
+        return acc;
+      }, []) || [],
+    [items, user.uuid],
+  );
+
+  const filteredInventoryRoles = useMemo(() => {
+    if (!user?.roles) {
+      return [];
+    }
+    return user.uuid ? inventoryRoles.filter((role) => !scopeRoles.includes(role.display)) : inventoryRoles;
+  }, [user?.roles, user.uuid, inventoryRoles, scopeRoles]);
+
+  const hasInventoryRole = useMemo(
+    () => filteredInventoryRoles.length > 0 && user.roles.some((role) => filteredInventoryRoles.includes(role)),
+    [user.roles, filteredInventoryRoles],
+  );
+
+  return (
+    <>
+      <div>
+        <StockUserRoleScopesList onEditUserRoleScope={handleEditUserRoleScope} user={user} />
+      </div>
+      {userRoleScopedefaultValues && (
+        <FormProvider {...roleScopeformMethods}>
+          <form onSubmit={roleScopeformMethods.handleSubmit(onSubmit, handleError)} className={styles.form}>
+            <div className={styles.formContainer}>
+              <Stack className={styles.formStackControl} gap={7}>
+                <ResponsiveWrapper>
+                  <CardHeader
+                    title={
+                      userRoleScopeInitialValues
+                        ? t('editRoleScope', 'Edit User Role Scope')
+                        : t('addRoleScope', 'Add a new user role scope')
+                    }>
+                    <ChevronSortUp />
+                  </CardHeader>
+                </ResponsiveWrapper>
+                <div className={styles.roleStockFields}>
+                  <ResponsiveWrapper>
+                    <TextInput
+                      readOnly={true}
+                      id="userName"
+                      labelText={t('username', 'Username')}
+                      value={user?.username || userRoleScopeInitialValues?.userName}
+                    />
+                  </ResponsiveWrapper>
+                </div>
+
+                {forms.map((field, index) => (
+                  <UserRoleScopeFormFields
+                    key={field.id}
+                    field={field}
+                    index={index}
+                    control={roleScopeformMethods.control}
+                    removeForm={removeForm}
+                    filteredInventoryRoles={filteredInventoryRoles}
+                    hasInventoryRole={hasInventoryRole}
+                    stockOperations={stockOperations}
+                    stockLocations={stockLocations}
+                    loadingStock={loadingStock}
+                    roleScopeformMethods={roleScopeformMethods}
+                    userRoleScopeInitialValues={userRoleScopeInitialValues}
+                  />
+                ))}
+                {!userRoleScopeInitialValues && (
+                  <div>
+                    <div className={styles.roleStockFields}>
+                      {!hasInventoryRole && <EmptyState displayText={t('noUserRole', 'No user role')} headerTitle="" />}
+                      <Button
+                        size="sm"
+                        kind="tertiary"
+                        renderIcon={Add}
+                        onClick={() => appendForm({})}
+                        disabled={!hasInventoryRole}>
+                        {t('addAnotherRoleScope', 'Add user role scope')}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </Stack>
+            </div>
+            <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+              <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace()}>
+                {t('cancel', 'Cancel')}
+              </Button>
+              <Button
+                disabled={isSubmitting || Object.keys(errors).length > 0}
+                style={{ maxWidth: '50%' }}
+                kind="primary"
+                type="submit">
+                {isSubmitting ? (
+                  <span style={{ display: 'flex', justifyItems: 'center' }}>
+                    {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+                  </span>
+                ) : (
+                  t('saveAndClose', 'Save & close')
+                )}
+              </Button>
+            </ButtonSet>
+          </form>
+        </FormProvider>
+      )}
+    </>
+  );
+};
+
+export default UserRoleScopeWorkspace;

package/src/components/users/manage-users/manage-user-role-scope/user-role-scope-workspace/userRoleScopeFormSchema.tsx

@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+const UserRoleScopeFormSchema = () => {
+  const { t } = useTranslation();
+
+  const userRoleScopeFormSchema = z.object({
+    forms: z.array(
+      z.object({
+        userName: z.string().optional(),
+        permanent: z.boolean().optional(),
+        enabled: z.boolean().optional(),
+        operationTypes: z
+          .array(
+            z.object({
+              operationTypeName: z.string().optional(),
+              operationTypeUuid: z.string().optional(),
+            }),
+          )
+          .optional(),
+        locations: z
+          .array(
+            z.object({
+              locationName: z.string().optional(),
+              locationUuid: z.string().optional(),
+            }),
+          )
+          .optional(),
+        dateRange: z
+          .object({
+            activeTo: z.date().optional(),
+            activeFrom: z.date().optional(),
+          })
+          .optional(),
+        role: z.string().optional(),
+      }),
+    ),
+  });
+
+  return { userRoleScopeFormSchema };
+};
+
+export default UserRoleScopeFormSchema;

package/src/components/users/manage-users/manage-user.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './manage-user.scss';
+import UserList from './user-list/user-list.component';
+import { useTranslation } from 'react-i18next';
+import Header from '../header/user-management-header.component';
+
+const UserManagentLandingPage: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <section className={styles.section}>
+      <div className={`omrs-main-content`}>
+        <Header title={t('userManagement', 'User Management')} />
+      </div>
+      <UserList />
+    </section>
+  );
+};
+
+export default UserManagentLandingPage;

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

@@ -0,0 +1,31 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: calc(100vh - 3rem);
+}
+
+.servicesTableContainer {
+  margin: layout.$spacing-05;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05 0;
+  text-align: center;
+}
+
+.section {
+  border-right: 1px solid colors.$gray-20;
+}

package/src/components/users/manage-users/provider-autosuggest.component.tsx

@@ -0,0 +1,117 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Autosuggest } from '../../locations/auto-suggest/autosuggest.component';
+import { fetchProvidersByName, type ProviderSearchResult } from './provider-search.resource';
+
+const SEARCH_DEBOUNCE_MS = 300;
+
+interface ProviderAutosuggestProps {
+  onProviderSelected: (providerData: ProviderSearchResult) => void;
+  labelText?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: string;
+}
+
+export const ProviderAutosuggest: React.FC<ProviderAutosuggestProps> = ({
+  onProviderSelected,
+  labelText,
+  placeholder,
+  invalid = false,
+  invalidText,
+}) => {
+  const [searchResults, setSearchResults] = useState<ProviderSearchResult[]>([]);
+  const [hasSelectedProvider, setHasSelectedProvider] = useState(false);
+  const { t } = useTranslation();
+
+  const getDisplayValue = useCallback((item: ProviderSearchResult) => {
+    return item.person?.display ?? item.identifier ?? '';
+  }, []);
+
+  const getFieldValue = useCallback((item: ProviderSearchResult) => {
+    return item.uuid ?? '';
+  }, []);
+
+  const handleSuggestionSelected = useCallback(
+    (field: string, value: string) => {
+      if (value) {
+        const selected = searchResults.find((item) => item.uuid === value);
+        if (selected) {
+          setHasSelectedProvider(true);
+          onProviderSelected(selected);
+        }
+      } else {
+        setHasSelectedProvider(false);
+      }
+    },
+    [onProviderSelected, searchResults],
+  );
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const previousResolveRef = useRef<((results: ProviderSearchResult[]) => void) | null>(null);
+
+  const handleSearchResults = useCallback((query: string) => {
+    return new Promise<ProviderSearchResult[]>((resolve, reject) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        previousResolveRef.current?.([]);
+      }
+      previousResolveRef.current = resolve;
+      timeoutRef.current = setTimeout(async () => {
+        try {
+          const abortController = new AbortController();
+          const results = await fetchProvidersByName(query, abortController);
+          setSearchResults(results);
+          previousResolveRef.current?.(results);
+        } catch (err) {
+          reject(err);
+        } finally {
+          timeoutRef.current = null;
+          previousResolveRef.current = null;
+        }
+      }, SEARCH_DEBOUNCE_MS);
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const renderSuggestionItem = useCallback((item: ProviderSearchResult) => {
+    return <div>{item.person?.display ?? item.identifier ?? ''}</div>;
+  }, []);
+
+  const renderEmptyState = useCallback(
+    (value: string) => {
+      if (!value || hasSelectedProvider) {
+        return null;
+      }
+      return (
+        <div style={{ padding: '1rem' }}>
+          <p>{t('providerNotFound', 'No matching provider found')}</p>
+        </div>
+      );
+    },
+    [t, hasSelectedProvider],
+  );
+
+  return (
+    <Autosuggest
+      id="provider-autosuggest"
+      labelText={labelText ?? t('searchForProvider', 'Search for existing provider')}
+      placeholder={placeholder ?? t('searchProviderPlaceholder', 'Search by provider name')}
+      getDisplayValue={getDisplayValue}
+      getFieldValue={getFieldValue}
+      getSearchResults={handleSearchResults}
+      onSuggestionSelected={handleSuggestionSelected}
+      renderSuggestionItem={renderSuggestionItem}
+      renderEmptyState={renderEmptyState}
+      invalid={invalid}
+      invalidText={invalidText}
+    />
+  );
+};

package/src/components/users/manage-users/provider-search.resource.ts

@@ -0,0 +1,34 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+const providerCustomRep =
+  'custom:(uuid,identifier,retired,person:(uuid,display,gender),attributes:(uuid,display,value,attributeType:(uuid,name)))';
+
+export interface ProviderSearchResult {
+  uuid: string;
+  identifier?: string;
+  retired?: boolean;
+  person?: {
+    uuid?: string;
+    display?: string;
+    gender?: string;
+  };
+  attributes?: Array<{
+    uuid?: string;
+    display?: string;
+    value?: string | { name?: string };
+    attributeType?: { uuid: string; name?: string };
+  }>;
+}
+
+export async function fetchProvidersByName(
+  query: string,
+  abortController: AbortController,
+): Promise<ProviderSearchResult[]> {
+  const response = await openmrsFetch<{ results: ProviderSearchResult[] }>(
+    `${restBaseUrl}/provider?q=${encodeURIComponent(query)}&includeAll=false&v=${providerCustomRep}`,
+    {
+      signal: abortController.signal,
+    },
+  );
+  return response?.data?.results ?? [];
+}