@openmrs/esm-stock-management-app 3.0.1-pre.833 → 3.0.1-pre.840

package/src/stock-user-role-scopes/add-stock-user-scope/{add-stock-user-role-scope.component.tsx → add-stock-user-role-scope.workspace.tsx}

@@ -1,21 +1,31 @@
+import React, { type ChangeEvent, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import {
   Button,
+  ButtonSet,
   Checkbox,
   CheckboxGroup,
+  ComboBox,
+  DatePicker,
+  DatePickerInput,
   Form,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  FormGroup,
   InlineLoading,
-  Toggle,
-  DatePickerInput,
-  DatePicker,
-  ComboBox,
   Select,
   SelectItem,
+  Stack,
+  Toggle,
 } from '@carbon/react';
-import React, { type ChangeEvent, useEffect, useState } from 'react';
-import styles from './add-stock-user-role-scope.scss';
+import { Save } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import {
+  type DefaultWorkspaceProps,
+  getCoreTranslation,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+  useSession,
+} from '@openmrs/esm-framework';
 import {
   useRoles,
   useStockOperationTypes,
@@ -24,44 +34,45 @@ import {
   useUsers,
 } from '../../stock-lookups/stock-lookups.resource';
 import { ResourceRepresentation } from '../../core/api/api';
-import { closeOverlay } from '../../core/components/overlay/hook';
-import { useTranslation } from 'react-i18next';
 import { type UserRoleScope } from '../../core/api/types/identity/UserRoleScope';
 import { createOrUpdateUserRoleScope } from '../stock-user-role-scopes.resource';
-import { restBaseUrl, showSnackbar, useSession } from '@openmrs/esm-framework';
 import { type UserRoleScopeOperationType } from '../../core/api/types/identity/UserRoleScopeOperationType';
 import { type UserRoleScopeLocation } from '../../core/api/types/identity/UserRoleScopeLocation';
 import {
   DATE_PICKER_CONTROL_FORMAT,
   DATE_PICKER_FORMAT,
+  formatForDatePicker,
   INVENTORY_ADMNISTRATOR_ROLE_UUID,
   INVENTORY_CLERK_ROLE_UUID,
   INVENTORY_DISPENSING_ROLE_UUID,
   INVENTORY_MANAGER_ROLE_UUID,
   INVENTORY_REPORTING_ROLE_UUID,
-  formatForDatePicker,
   today,
 } from '../../constants';
-import { type User } from '../../core/api/types/identity/User';
 import { type Role } from '../../core/api/types/identity/Role';
 import { type StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { type User } from '../../core/api/types/identity/User';
 import { handleMutate } from '../../utils';
+import styles from './add-stock-user-role-scope.scss';
 
 const MinDate: Date = today();
 
-interface AddStockUserRoleScopeProps {
+type AddStockUserRoleScopeProps = DefaultWorkspaceProps & {
   model?: UserRoleScope;
   editMode?: boolean;
-}
+};
 
-const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, editMode }) => {
+const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, editMode, closeWorkspace }) => {
   const { t } = useTranslation();
   const currentUser = useSession();
   const [formModel, setFormModel] = useState<UserRoleScope>({ ...model });
+  const isTablet = useLayoutType() === 'tablet';
 
   const [roles, setRoles] = useState<Role[]>([]);
 
   const loggedInUserUuid = currentUser?.user?.uuid;
+  const [selectedUserUuid, setSelectedUserUuid] = useState<string | null>(null);
+  const { data: user } = useUser(selectedUserUuid);
 
   // operation types
   const {
@@ -74,9 +85,6 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
     v: ResourceRepresentation.Default,
   });
 
-  const [selectedUserUuid, setSelectedUserUuid] = useState<string | null>(null);
-  const { data: user } = useUser(selectedUserUuid);
-
   // get roles
   const { isLoading: loadingRoles } = useRoles({
     v: ResourceRepresentation.Default,
@@ -220,7 +228,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           kind: 'success',
           subtitle: t('successfullysaved', 'You have successfully saved user role scope'),
         });
-        closeOverlay();
+        closeWorkspace();
       },
       (err) => {
         showSnackbar({
@@ -230,7 +238,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           subtitle: err?.message,
         });
 
-        closeOverlay();
+        closeWorkspace();
       },
     );
   };
@@ -240,196 +248,168 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
     );
   }
   return (
-    <div>
-      <Form>
-        <ModalHeader />
-        <ModalBody>
-          <section className={styles.section}>
-            <div>
-              {users?.results?.length > 0 && (
-                <>
-                  <span className={styles.subTitle}>{t('user', 'User')}</span>
-                  <ComboBox
-                    id="userName"
-                    size="md"
-                    labelText={t('user', 'User')}
-                    items={filteredItems.length ? filteredItems : usersResults}
-                    onChange={onUserChanged}
-                    shouldFilterItem={() => true}
-                    itemToString={(item) => `${item?.person?.display ?? item?.display ?? ''}`}
-                    onInputChange={handleSearchQueryChange}
-                    placeholder="Filter..."
-                    initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
-                  />
-                </>
-              )}
-            </div>
-          </section>
-          <section className={styles.section}>
-            <div>
-              <Select
-                name="role"
-                className="select-field"
-                labelText={t('role', 'Role')}
-                id="select-role"
-                value={formModel.role ?? 'placeholder-item'}
-                onChange={onRoleChange}
+    <Form className={styles.container}>
+      <Stack className={styles.form} gap={5}>
+        <div>
+          {users?.results?.length > 0 && (
+            <>
+              <FormGroup legendText={t('user', 'User')}>
+                <ComboBox
+                  id="userName"
+                  initialSelectedItem={usersResults.find((user) => user.uuid === model?.userUuid) ?? null}
+                  items={filteredItems.length ? filteredItems : usersResults}
+                  itemToString={(item) => `${item?.person?.display ?? item?.display ?? ''}`}
+                  labelText={t('user', 'User')}
+                  onChange={onUserChanged}
+                  onInputChange={handleSearchQueryChange}
+                  placeholder="Filter..."
+                  shouldFilterItem={() => true}
+                  size="md"
+                />
+              </FormGroup>
+            </>
+          )}
+        </div>
+        <Select
+          id="select-role"
+          labelText={t('role', 'Role')}
+          name="role"
+          onChange={onRoleChange}
+          value={formModel.role}
+        >
+          <SelectItem value={''} text={t('chooseARole', 'Choose a role')} />
+          {editMode ? (
+            <SelectItem key={formModel?.role} value={formModel?.role} text={formModel?.role} />
+          ) : (
+            (user?.roles ?? roles)?.map((role) => {
+              return <SelectItem key={role.display} value={role.display} text={role.display} />;
+            })
+          )}
+        </Select>
+        <CheckboxGroup className={styles.checkboxGrid}>
+          <Checkbox
+            checked={formModel?.enabled}
+            id="chk-userEnabled"
+            labelText={t('enabled', 'Enabled')}
+            onChange={onEnabledChanged}
+            value={model?.enabled}
+          />
+          <Checkbox
+            checked={formModel?.permanent}
+            id="chk-userPermanent"
+            labelText={t('permanent', 'Permanent')}
+            name="isPermanent"
+            onChange={onPermanentChanged}
+            value={model?.permanent}
+          />
+
+          {!formModel?.permanent && (
+            <>
+              <DatePicker
+                dateFormat={DATE_PICKER_CONTROL_FORMAT}
+                datePickerType="range"
+                light
+                locale="en"
+                minDate={formatForDatePicker(MinDate)}
+                onChange={onActiveDatesChange}
               >
-                <SelectItem disabled hidden value="placeholder-item" text={t('chooseARole', 'Choose a role')} />
+                <DatePickerInput
+                  id="date-picker-input-id-start"
+                  labelText={t('activeFrom', 'Active From')}
+                  name="activeFrom"
+                  placeholder={DATE_PICKER_FORMAT}
+                  value={formatForDatePicker(formModel?.activeFrom)}
+                />
+                <DatePickerInput
+                  id="date-picker-input-id-finish"
+                  labelText={t('activeTo', 'Active To')}
+                  name="activeTo"
+                  placeholder={DATE_PICKER_FORMAT}
+                  value={formatForDatePicker(formModel?.activeTo)}
+                />
+              </DatePicker>
+            </>
+          )}
+        </CheckboxGroup>
+        <FormGroup legendText={t('stockOperation', 'Stock Operations')}>
+          <span className={styles.subTitle}>
+            {t('roleDescription', 'The role will be applicable to only selected stock operations.')}
+          </span>
+        </FormGroup>
+        <CheckboxGroup className={styles.checkboxGrid}>
+          {stockOperations?.length > 0 &&
+            stockOperations.map((type) => {
+              return (
+                <div className={styles.flexRow}>
+                  <Checkbox
+                    checked={isOperationChecked(type)}
+                    className={styles.checkbox}
+                    id={type.uuid}
+                    labelText={type.name}
+                    onChange={(event) => onStockOperationTypeChanged(event)}
+                    value={type.uuid}
+                  />
+                </div>
+              );
+            })}
+        </CheckboxGroup>
+        <FormGroup legendText={t('locations', 'Locations')}>
+          <span className={styles.subTitle}>
+            {t('toggleMessage', 'Use the toggle to apply this scope to the locations under the selected location.')}
+          </span>
+        </FormGroup>
+        <CheckboxGroup className={styles.checkboxGrid}>
+          {stockLocations?.length > 0 &&
+            stockLocations.map((type) => {
+              const checkedLocation = findCheckedLocation(type);
 
-                {editMode ? (
-                  <SelectItem key={formModel?.role} value={formModel?.role} text={formModel?.role} />
-                ) : (
-                  (user?.roles ?? roles)?.map((role) => {
-                    return <SelectItem key={role.display} value={role.display} text={role.display} />;
-                  })
-                )}
-              </Select>
-            </div>
-          </section>
-          <section className={styles.section}>
-            <CheckboxGroup className={styles.checkboxGrid}>
-              <Checkbox
-                onChange={onEnabledChanged}
-                checked={formModel?.enabled}
-                labelText={t('enabled', 'Enabled ?')}
-                value={model?.enabled}
-                id="chk-userEnabled"
-              />
-              <Checkbox
-                onChange={onPermanentChanged}
-                name="isPermanent"
-                checked={formModel?.permanent}
-                value={model?.permanent}
-                labelText={t('permanent', 'Permanent ?')}
-                id="chk-userPermanent"
-              />
+              const getToggledValue = (locationUuid) => {
+                const location = checkedLocation?.locationUuid === locationUuid ? checkedLocation : null;
+                return location?.enableDescendants === true;
+              };
 
-              {!formModel?.permanent && (
-                <>
-                  <DatePicker
-                    datePickerType="range"
-                    light
-                    minDate={formatForDatePicker(MinDate)}
-                    locale="en"
-                    dateFormat={DATE_PICKER_CONTROL_FORMAT}
-                    onChange={onActiveDatesChange}
-                  >
-                    <DatePickerInput
-                      id="date-picker-input-id-start"
-                      name="activeFrom"
-                      placeholder={DATE_PICKER_FORMAT}
-                      labelText={t('activeFrom', 'Active From')}
-                      value={formatForDatePicker(formModel?.activeFrom)}
-                    />
-                    <DatePickerInput
-                      id="date-picker-input-id-finish"
-                      name="activeTo"
-                      placeholder={DATE_PICKER_FORMAT}
-                      labelText={t('activeTo', 'Active To')}
-                      value={formatForDatePicker(formModel?.activeTo)}
+              return (
+                <div className={styles.flexRow}>
+                  <Checkbox
+                    checked={checkedLocation != null}
+                    className={styles.checkbox}
+                    id={`chk-loc-child-${type.id}`}
+                    key={`chk-loc-child-key-${type.id}`}
+                    labelText={type.name}
+                    name="location"
+                    onChange={(event) => onLocationCheckBoxChanged(event)}
+                    value={type.id}
+                  />
+                  {checkedLocation && (
+                    <Toggle
+                      className={styles.toggle}
+                      hideLabel
+                      id={`tg-loc-child-${type.id}`}
+                      key={`tg-loc-child-key-${type.id}`}
+                      onToggleClick={getToggledValue(type.id)}
+                      size="sm"
+                      value={type.id}
                     />
-                  </DatePicker>
-                </>
-              )}
-            </CheckboxGroup>
-          </section>
-          <br />
-          <section className={styles.section}>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <span className={styles.sectionTitle}> {t('stockOperation', 'Stock Operations')}</span>
-              <div className={styles.hr} />
-              <span className={styles.subTitle}>
-                {t('roleDescription', 'The role will be applicable to only selected stock operations.')}
-              </span>
-            </div>
-          </section>
-          <section className={styles.section}>
-            <CheckboxGroup className={styles.checkboxGrid}>
-              {stockOperations?.length > 0 &&
-                stockOperations.map((type) => {
-                  return (
-                    <div style={{ display: 'flex', flexDirection: 'row' }}>
-                      <Checkbox
-                        value={type.uuid}
-                        checked={isOperationChecked(type)}
-                        className={styles.checkbox}
-                        onChange={(event) => onStockOperationTypeChanged(event)}
-                        labelText={type.name}
-                        id={type.uuid}
-                      />
-                    </div>
-                  );
-                })}
-            </CheckboxGroup>
-          </section>
-          <br />
-          <section className={styles.section}>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <span className={styles.sectionTitle}> {t('locations', 'Locations')}</span>
-              <div className={styles.hr} />
-              <span className={styles.subTitle}>
-                {t('toggleMessage', 'Use the toggle to apply this scope to the locations under the selected location.')}
-              </span>
-            </div>
-          </section>
-          <section className={styles.section}>
-            <CheckboxGroup className={styles.checkboxGrid}>
-              {stockLocations?.length > 0 &&
-                stockLocations.map((type) => {
-                  const checkedLocation = findCheckedLocation(type);
-
-                  const getToggledValue = (locationUuid) => {
-                    const location = checkedLocation?.locationUuid === locationUuid ? checkedLocation : null;
-                    return location?.enableDescendants === true;
-                  };
-
-                  return (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        margin: '4px',
-                        padding: '5px',
-                      }}
-                    >
-                      <Checkbox
-                        name="location"
-                        key={`chk-loc-child-key-${type.id}`}
-                        id={`chk-loc-child-${type.id}`}
-                        value={type.id}
-                        onChange={(event) => onLocationCheckBoxChanged(event)}
-                        className={styles.checkbox}
-                        labelText={type.name}
-                        checked={checkedLocation != null}
-                      />
-                      {checkedLocation && (
-                        <Toggle
-                          value={type.id}
-                          hideLabel
-                          className={styles.toggle}
-                          size={'sm'}
-                          onToggleClick={getToggledValue(type.id)}
-                          key={`tg-loc-child-key-${type.id}`}
-                          id={`tg-loc-child-${type.id}`}
-                        />
-                      )}
-                    </div>
-                  );
-                })}
-            </CheckboxGroup>
-          </section>
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary" onClick={closeOverlay}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button type="submit" onClick={addStockUserRole}>
-            {t('save', 'Save')}
-          </Button>
-        </ModalFooter>
-      </Form>
-    </div>
+                  )}
+                </div>
+              );
+            })}
+        </CheckboxGroup>
+      </Stack>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}
+      >
+        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" className={styles.button} onClick={addStockUserRole} renderIcon={Save}>
+          {getCoreTranslation('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
   );
 };
 

package/src/stock-user-role-scopes/edit-stock-user-scope/edit-stock-user-scope-action-menu.component.tsx

@@ -3,9 +3,8 @@ import { Edit } from '@carbon/react/icons';
 
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchOverlay } from '../../core/components/overlay/hook';
-import AddStockUserRoleScope from '../add-stock-user-scope/add-stock-user-role-scope.component';
 import { type UserRoleScope } from '../../core/api/types/identity/UserRoleScope';
+import { launchWorkspace } from '@openmrs/esm-framework';
 
 interface EditStockUserRoleActionsMenuProps {
   data: UserRoleScope;
@@ -15,14 +14,17 @@ const EditStockUserRoleActionsMenu: React.FC<EditStockUserRoleActionsMenuProps>
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchOverlay('Edit Stock User Role', <AddStockUserRoleScope model={data} editMode={true} />);
-  }, [data]);
+    launchWorkspace('stock-user-role-scopes-form-workspace', {
+      workspaceTitle: t('editUserScope', 'Edit user scope role'),
+      model: data,
+    });
+  }, [data, t]);
 
   return (
     <Button
       kind="ghost"
       onClick={handleClick}
-      iconDescription={t('editUserScope', 'Edit UserScope')}
+      iconDescription={t('editUserScope', 'Edit user scope role')}
       renderIcon={(props) => <Edit size={16} {...props} />}
     />
   );

package/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx

@@ -4,7 +4,6 @@ import {
   DataTable,
   DataTableSkeleton,
   Link,
-  TabPanel,
   Pagination,
   Table,
   TableBody,
@@ -14,28 +13,29 @@ import {
   TableHeader,
   TableRow,
   TableToolbar,
+  TableToolbarAction,
   TableToolbarContent,
+  TableToolbarMenu,
   TableToolbarSearch,
+  TabPanel,
   Tile,
-  TableToolbarMenu,
-  TableToolbarAction,
 } from '@carbon/react';
-import styles from './stock-user-role-scopes.scss';
 import { ArrowDownLeft, ArrowLeft } from '@carbon/react/icons';
 import { isDesktop, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import { formatDisplayDate } from '../core/utils/datetimeUtils';
+import { handleMutate } from '../utils';
 import { ResourceRepresentation } from '../core/api/api';
-import useStockUserRoleScopesPage from './stock-user-role-scopes-items-table.resource';
+import { URL_USER_ROLE_SCOPE } from '../constants';
 import AddStockUserRoleScopeActionButton from './add-stock-user-role-scope-button.component';
-import { formatDisplayDate } from '../core/utils/datetimeUtils';
 import EditStockUserRoleActionsMenu from './edit-stock-user-scope/edit-stock-user-scope-action-menu.component';
 import StockUserScopeDeleteActionMenu from './delete-stock-user-scope/delete-stock-user-scope.component';
-import { URL_USER_ROLE_SCOPE } from '../constants';
-import { handleMutate } from '../utils';
+import useStockUserRoleScopesPage from './stock-user-role-scopes-items-table.resource';
+import styles from './stock-user-role-scopes.scss';
 
 function StockUserRoleScopesItems() {
   const { t } = useTranslation();
-
   const currentUser = useSession();
+
   const handleRefresh = () => {
     handleMutate(`${restBaseUrl}/stockmanagement/userrolescope`);
   };
@@ -46,6 +46,7 @@ function StockUserRoleScopesItems() {
       v: ResourceRepresentation.Default,
       totalCount: true,
     });
+
   const tableHeaders = useMemo(
     () => [
       {
@@ -71,7 +72,7 @@ function StockUserRoleScopesItems() {
       },
       {
         id: 4,
-        header: t('permanent', 'Permanent ?'),
+        header: t('permanent', 'Permanent'),
         key: 'permanent',
       },
       {
@@ -164,15 +165,11 @@ function StockUserRoleScopesItems() {
           'To access stock management features, users must have assigned roles specifying location and stock operation type scopes.',
         )}
       </TabPanel>
-      <div id="table-tool-bar">
-        <div></div>
-        <div className="right-filters"></div>
-      </div>
       <DataTable
-        rows={tableRows ?? []}
         headers={tableHeaders}
-        isSortable={true}
-        useZebraStyles={true}
+        isSortable
+        rows={tableRows ?? []}
+        useZebraStyles
         render={({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
           <TableContainer>
             <TableToolbar
@@ -185,7 +182,9 @@ function StockUserRoleScopesItems() {
               <TableToolbarContent className={styles.toolbarContent}>
                 <TableToolbarSearch persistent onChange={onInputChange} />
                 <TableToolbarMenu>
-                  <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+                  <TableToolbarAction className={styles.toolbarAction} onClick={handleRefresh}>
+                    {t('refresh', 'Refresh')}
+                  </TableToolbarAction>
                 </TableToolbarMenu>
                 <AddStockUserRoleScopeActionButton />
               </TableToolbarContent>
@@ -230,7 +229,9 @@ function StockUserRoleScopesItems() {
               <div className={styles.tileContainer}>
                 <Tile className={styles.tile}>
                   <div className={styles.tileContent}>
-                    <p className={styles.content}>{t('noUserScopesToDisplay', 'No Stock User scopes to display')}</p>
+                    <p className={styles.content}>
+                      {t('noStockUserRoleScopesToDisplay', 'No stock user role scopes to display')}
+                    </p>
                     <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
                   </div>
                 </Tile>

package/src/stock-user-role-scopes/stock-user-role-scopes.scss

@@ -60,3 +60,7 @@
   flex-direction: column;
   align-items: center;
 }
+
+.toolbarAction {
+  max-width: none;
+}

package/translations/en.json

@@ -101,7 +101,7 @@
   "editStockOperation": "Edit stock operation",
   "editStockRule": "Edit Stock Rule",
   "editUserScope": "Edit UserScope",
-  "enabled": "Enabled ?",
+  "enabled": "Enabled",
   "endDate": "End Date",
   "ended": "Ended",
   "enterRemarks": "Enter remarks",
@@ -217,7 +217,7 @@
   "partialFulfillment": "Partial Fulfillment",
   "partieserror": "Error launching base operation details form",
   "patients": "Patients",
-  "permanent": "Permanent ?",
+  "permanent": "Permanent",
   "pleaseFillField": "",
   "pleaseSpecify": "Please Specify",
   "poorquality": "Poor Quality",