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

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

@@ -0,0 +1,177 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  OverflowMenu,
+  OverflowMenuItem,
+  InlineLoading,
+} from '@carbon/react';
+import { ArrowDownLeft, ArrowLeft } from '@carbon/react/icons';
+import styles from '../../manage-user.scss';
+import { restBaseUrl, showModal, showSnackbar } from '@openmrs/esm-framework';
+import { deleteUserRoleScopes, handleMutation, useUserRoleScopes } from '../../../../../user-management.resources';
+import { User, UserRoleScope } from '../../../../../types';
+
+interface StockUserRoleScopesListProps {
+  user?: User;
+  onEditUserRoleScope?: (userRoleScope: UserRoleScope) => void;
+  onAddUserRoleScope?: (isAddRoleScope: boolean) => void;
+}
+
+const StockUserRoleScopesList: React.FC<StockUserRoleScopesListProps> = ({ user, onEditUserRoleScope }) => {
+  const { t } = useTranslation();
+
+  // Fetch user role scopes
+  const { items: userRoleScopes, loadingRoleScope, isValidating } = useUserRoleScopes();
+  const [deletingUserScope, setDeletingUserScope] = useState(false);
+  const size = 'md';
+
+  const tableHeaders = useMemo(
+    () => [
+      { key: 'role', header: t('role', 'Role') },
+      { key: 'location', header: t('location', 'Location(s)') },
+      { key: 'stockOperation', header: t('stockOperation', 'Stock Operation') },
+      { key: 'permanent', header: t('permanent', 'Permanent') },
+      { key: 'enabled', header: t('enabled', 'Enabled') },
+      { key: 'actions', header: t('actions', 'Actions') },
+    ],
+    [t],
+  );
+
+  const showDeleteUserRoleScopeModal = useCallback(
+    (uuid: string) => {
+      const close = showModal('delete-stock-user-scope-modal', {
+        close: () => close(),
+        uuid,
+        onConfirmation: () => {
+          deleteUserRoleScopes([uuid])
+            .then(
+              () => {
+                handleMutation(`${restBaseUrl}/stockmanagement/userrolescope`);
+                setDeletingUserScope(false);
+                showSnackbar({
+                  isLowContrast: true,
+                  title: t('deletingstockUserScope', 'Delete Stock User Scope'),
+                  kind: 'success',
+                  subtitle: t('stockUserScopeDeletedSuccessfully', 'Stock User Scope Deleted Successfully'),
+                });
+              },
+              (error) => {
+                setDeletingUserScope(false);
+                showSnackbar({
+                  title: t('errorDeletingUserScope', 'Error deleting a user scope'),
+                  kind: 'error',
+                  isLowContrast: true,
+                  subtitle: error?.message,
+                });
+              },
+            )
+            .catch();
+          close();
+        },
+      });
+    },
+    [t],
+  );
+
+  const renderLocationIcon = (enableDescendants) => (enableDescendants ? <ArrowDownLeft /> : <ArrowLeft />);
+
+  const tableRows = useMemo(() => {
+    return (
+      (userRoleScopes?.results ?? [])
+        .filter((scope) => scope.userUuid === user.uuid)
+        .map((userRoleScope, index) => ({
+          id: index.toString(),
+          role: userRoleScope.role || 'N/A',
+          location: userRoleScope?.locations?.map((location) => (
+            <span key={`loc-${userRoleScope?.uuid}-${location.locationUuid}`}>
+              {location?.locationName} {renderLocationIcon(location?.enableDescendants)}
+            </span>
+          )),
+          stockOperation: userRoleScope?.operationTypes?.map((operation) => operation?.operationTypeName).join(', '),
+          permanent: userRoleScope.permanent ? t('yes', 'Yes') : t('no', 'No'),
+          enabled: userRoleScope.enabled ? t('yes', 'Yes') : t('no', 'No'),
+          actions: (
+            <OverflowMenu className={styles.btnSet}>
+              <OverflowMenuItem
+                onClick={() => {
+                  onEditUserRoleScope(userRoleScope);
+                }}
+                itemText={t('edit', 'Edit')}
+              />
+              <OverflowMenuItem
+                hasDivider
+                isDelete
+                onClick={() => {
+                  showDeleteUserRoleScopeModal(userRoleScope.uuid);
+                }}
+                itemText={t('delete', 'Delete')}
+              />
+            </OverflowMenu>
+          ),
+        })) || []
+    );
+  }, [userRoleScopes, t, user.uuid, showDeleteUserRoleScopeModal, onEditUserRoleScope]);
+
+  if (loadingRoleScope) {
+    return <DataTableSkeleton />;
+  }
+
+  return (
+    <div>
+      <CardHeader title="Manage User Role Scope">
+        {isValidating && <InlineLoading description={t('refreshingUserScopes', 'Refreshing user scopes...')} />}
+      </CardHeader>
+      <div className={styles.dataTable}>
+        <DataTable useZebraStyles size={size} rows={tableRows} headers={tableHeaders}>
+          {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()} aria-label="user role scope table">
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.length > 0 ? (
+                    rows.map((row) => (
+                      <TableRow key={row.id} {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={headers.length} className={styles.emptyTable}>
+                        <EmptyState
+                          displayText={t('noUserRoleScope', 'No user role scope')}
+                          headerTitle={t('userRoleScope', 'User Role Scope')}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default StockUserRoleScopesList;

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

@@ -0,0 +1,117 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.roleStockFields {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  outline: 1px solid colors.$gray-10;
+  padding: layout.$spacing-05;
+}
+
+.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;
+}

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

@@ -0,0 +1,290 @@
+import React, { useEffect } from 'react';
+import { Control, Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import styles from './user-role-fields.scss';
+import { formatDatetime, ResponsiveWrapper } from '@openmrs/esm-framework';
+import {
+  DatePickerInput,
+  InlineLoading,
+  Button,
+  ComboBox,
+  CheckboxGroup,
+  Column,
+  Tile,
+  DatePicker,
+} from '@carbon/react';
+import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, today } from '../../../../../constants';
+import { Role, StockOperationType, UserRoleScope } from '../../../../../types';
+
+type UserRoleScopeFields = {
+  field: Record<string, any>;
+  index: number;
+  control: Control<Record<string, any>>;
+  removeForm: (index: number) => void;
+  filteredInventoryRoles: Array<Role>;
+  hasInventoryRole: boolean;
+  stockOperations: Array<StockOperationType>;
+  loadingStock: boolean;
+  stockLocations: Array<fhir.Location>;
+  roleScopeformMethods: any;
+  userRoleScopeInitialValues: UserRoleScope;
+};
+const MinDate: Date = today();
+
+const UserRoleScopeFormFields: React.FC<UserRoleScopeFields> = ({
+  field,
+  index,
+  control,
+  removeForm,
+  filteredInventoryRoles,
+  hasInventoryRole,
+  stockOperations,
+  loadingStock,
+  stockLocations,
+  roleScopeformMethods,
+  userRoleScopeInitialValues,
+}) => {
+  const { t } = useTranslation();
+  const { watch, setValue } = useFormContext();
+  const enabled = watch(`forms.${index}.enabled`);
+  const permanent = watch(`forms.${index}.permanent`);
+
+  const handlePermissionDurationChange = (e, field, setValue) => {
+    const isChecked = e.target.checked;
+    field.onChange(isChecked);
+
+    if (isChecked) {
+      setValue(`forms.${index}.dateRange`, { activeFrom: undefined, activeTo: undefined });
+    }
+  };
+
+  useEffect(() => {
+    if (permanent) {
+      setValue(`forms.${index}.dateRange`, { activeFrom: undefined, activeTo: undefined });
+    }
+  }, [permanent, setValue, index]);
+
+  return (
+    <div className={styles.roleStockFields}>
+      <ResponsiveWrapper>
+        <Controller
+          name={`forms.${index}.role`}
+          control={control}
+          render={({ field }) => (
+            <ComboBox
+              {...field}
+              id="role"
+              items={filteredInventoryRoles}
+              itemToString={(item) => item?.display?.trim() || ''}
+              placeholder={t('chooseAStockRole', 'Choose a stock role')}
+              titleText={t('stockRole', 'Stock Role')}
+              selectedItem={filteredInventoryRoles.find((item) => item?.display === field.value) || null}
+              onChange={({ selectedItem }) => {
+                field.onChange(selectedItem ? selectedItem.display.trim() : '');
+              }}
+              disabled={!!userRoleScopeInitialValues}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Column xsm={8} md={12} lg={12} className={styles.checkBoxColumn}>
+          <CheckboxGroup legendText={t('stockRoleAccess', 'Stock Role Access')} className={styles.checkboxGroupGrid}>
+            <Controller
+              name={`forms.${index}.enabled`}
+              control={control}
+              render={({ field }) => (
+                <div>
+                  <label htmlFor="enable">
+                    <input
+                      type="checkbox"
+                      id="enable"
+                      name="enabled"
+                      checked={field.value || false}
+                      onChange={(e) => field.onChange(e.target.checked)}
+                    />
+                    {t('enable', 'Enable?')}
+                  </label>
+                </div>
+              )}
+            />
+            {enabled && (
+              <Controller
+                name={`forms.${index}.permanent`}
+                control={control}
+                render={({ field }) => (
+                  <div>
+                    <label htmlFor="permanent">
+                      <input
+                        type="checkbox"
+                        id="permanent"
+                        name="permanent"
+                        checked={field.value || false}
+                        onChange={(e) => handlePermissionDurationChange(e, field, roleScopeformMethods.setValue)}
+                      />
+                      {t('permanent', 'Permanent?')}
+                    </label>
+                  </div>
+                )}
+              />
+            )}
+          </CheckboxGroup>
+          {!permanent && enabled && (
+            <ResponsiveWrapper>
+              <Tile>
+                <Controller
+                  name={`forms.${index}.dateRange`}
+                  control={control}
+                  render={({ field }) => {
+                    const { value, onChange } = field;
+
+                    const handleDateChange = (dates: Array<Date>) => {
+                      onChange({
+                        activeFrom: dates[0],
+                        activeTo: dates[1],
+                      });
+                    };
+
+                    return (
+                      <DatePicker
+                        datePickerType="range"
+                        light
+                        minDate={formatDatetime(MinDate)}
+                        locale="en"
+                        dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                        onChange={handleDateChange}
+                        value={[value?.activeFrom, value?.activeTo]}>
+                        <DatePickerInput
+                          id="date-picker-input-id-start"
+                          placeholder={DATE_PICKER_FORMAT}
+                          labelText={t('activeFrom', 'Active From')}
+                        />
+                        <DatePickerInput
+                          id="date-picker-input-id-finish"
+                          placeholder={DATE_PICKER_FORMAT}
+                          labelText={t('activeTo', 'Active To')}
+                        />
+                      </DatePicker>
+                    );
+                  }}
+                />
+              </Tile>
+            </ResponsiveWrapper>
+          )}
+        </Column>
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Column xsm={8} md={12} lg={12} className={styles.checkBoxColumn}>
+          <CheckboxGroup legendText={t('stockOperation', 'Stock Operation')} className={styles.checkboxGroupGrid}>
+            {loadingStock ? (
+              <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+            ) : (
+              <Controller
+                name={`forms.${index}.operationTypes`}
+                control={control}
+                render={({ field }) => {
+                  const selectedStockOperation = field.value || [];
+
+                  const isSelected = (operationUuid: string) =>
+                    selectedStockOperation.some((op) => op.operationTypeUuid === operationUuid);
+                  const toggleOperation = (operation) => {
+                    if (isSelected(operation.uuid)) {
+                      field.onChange(selectedStockOperation.filter((op) => op.operationTypeUuid !== operation.uuid));
+                    } else {
+                      field.onChange([
+                        ...selectedStockOperation,
+                        {
+                          operationTypeUuid: operation.uuid,
+                          operationTypeName: operation.name,
+                        },
+                      ]);
+                    }
+                  };
+
+                  return (
+                    <>
+                      {stockOperations?.length > 0 &&
+                        stockOperations.map((operation) => {
+                          return (
+                            <label
+                              key={operation.uuid}
+                              className={
+                                isSelected(operation.uuid) ? styles.checkboxLabelSelected : styles.checkboxLabel
+                              }>
+                              <input
+                                type="checkbox"
+                                id={operation.uuid}
+                                checked={isSelected(operation.uuid)}
+                                onChange={() => toggleOperation(operation)}
+                              />
+                              {operation.name}
+                            </label>
+                          );
+                        })}
+                    </>
+                  );
+                }}
+              />
+            )}
+          </CheckboxGroup>
+        </Column>
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Column xsm={8} md={12} lg={12} className={styles.checkBoxColumn}>
+          <CheckboxGroup legendText={t('stockLocation', 'Stock Location')} className={styles.checkboxGroupGrid}>
+            {loadingStock ? (
+              <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+            ) : (
+              <Controller
+                name={`forms.${index}.locations`}
+                control={control}
+                render={({ field }) => {
+                  const selectedLocations = field.value || [];
+
+                  const isSelected = (locationUuid: string) =>
+                    selectedLocations.some((loc) => loc.locationUuid === locationUuid);
+                  const toggleLocation = (location) => {
+                    if (isSelected(location.id)) {
+                      field.onChange(selectedLocations.filter((loc) => loc.locationUuid !== location.id));
+                    } else {
+                      field.onChange([
+                        ...selectedLocations,
+                        { locationName: location.name, locationUuid: location.id },
+                      ]);
+                    }
+                  };
+
+                  return (
+                    <>
+                      {stockLocations?.length > 0 &&
+                        stockLocations.map((location) => (
+                          <label
+                            key={location.id}
+                            className={isSelected(location.id) ? styles.checkboxLabelSelected : styles.checkboxLabel}>
+                            <input
+                              type="checkbox"
+                              id={location.id}
+                              checked={isSelected(location.id)}
+                              onChange={() => toggleLocation(location)}
+                            />
+                            {location.name}
+                          </label>
+                        ))}
+                    </>
+                  );
+                }}
+              />
+            )}
+          </CheckboxGroup>
+        </Column>
+      </ResponsiveWrapper>
+      {!userRoleScopeInitialValues && (
+        <Button size="sm" kind="danger--tertiary" onClick={() => removeForm(index)}>
+          {t('remove', 'Remove')}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default UserRoleScopeFormFields;