(feat) O3-4066 : exclude stock issue from stock operation selector

src/config-schema.ts

@@ -35,6 +35,11 @@ export const configSchema = {
     _description: 'UUID for the stock item category',
     _default: '6d24eb6e-b42f-4706-ab2d-ae4472161f6a',
   },
+  excludeStockOperationTypes: {
+    _type: Type.Array,
+    _default: ['66666666-6666-6666-6666-666666666666'],
+    _description: 'Exclude stock operation types from the stock operation types selector',
+  },
   logo: {
     src: {
       _type: Type.String,
@@ -67,4 +72,5 @@ export type ConfigObject = {
     alt: string;
     name: string;
   };
+  excludeStockOperationTypes: Array<string>;
 };

src/stock-lookups/stock-lookups.resource.ts

@@ -20,6 +20,8 @@ import { Patient } from '../core/api/types/identity/Patient';
 import { useMemo } from 'react';
 import { uniqBy } from 'lodash-es';
 import { UserRoleScope } from '../core/api/types/identity/UserRoleScope';
+import { StockOperationTypeResponse } from '../types';
+import useSWRImmutable from 'swr/immutable';
 
 export type PatientFilterCriteria = ResourceFilterCriteria;
 
@@ -130,19 +132,29 @@ export function useRoles(filter: ResourceFilterCriteria) {
   };
 }
 
-// getStockOperationTypes
+/**
+ * Custom hook to fetch stock operation types.
+ *
+ * @returns {Object} An object containing:
+ *   - stockOperationTypes: Array of stock operation types
+ *   - isLoading: Boolean indicating if the data is being fetched
+ *   - error: Any error that occurred during fetching
+ */
 export function useStockOperationTypes() {
   const apiUrl = `${restBaseUrl}/stockmanagement/stockoperationtype?v=default`;
-  const { data, isLoading, error } = useSWR<
-    {
-      data: PageableResult<StockOperationType>;
-    },
-    Error
-  >(apiUrl, openmrsFetch);
+
+  const { data, error, isLoading, isValidating } = useSWRImmutable<StockOperationTypeResponse, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  const stockOperationTypes = data?.data?.results ?? [];
+
   return {
-    types: data?.data || <PageableResult<StockOperationType>>{},
+    stockOperationTypes,
     isLoading,
     error,
+    isValidating,
   };
 }
 

src/stock-operations/add-stock-operation/add-stock-operation.component.tsx

@@ -42,13 +42,13 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
   const { isLoading, error, result } = useInitializeStockOperations(props);
   const [operationLinks, setOperationLinks] = useState<StockOperationLinkDTO[]>();
   const [manageStockItems, setManageStockItems] = useState(props?.isEditing);
-  const { types } = useStockOperationTypes();
+  const { stockOperationTypes } = useStockOperationTypes();
   const [requisition, setRequisition] = useState(props?.model?.uuid);
   const [manageSubmitOrComplete, setManageSubmitOrComplete] = useState(props?.isEditing);
 
   const [requiresDispatchAcknowledgement, setRequiresDispatchAcknowledgement] = useState(false);
 
-  const currentStockOperationType = types?.results?.find((p) => p.operationType === props.model?.operationType);
+  const currentStockOperationType = stockOperationTypes?.find((p) => p.operationType === props.model?.operationType);
 
   useEffect(() => {
     if (
@@ -300,7 +300,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                     {!item?.childVoided && (
                       <span className={styles.relatedLink}>
                         <StockOperationRelatedLink
-                          operationTypes={types.results}
+                          operationTypes={stockOperationTypes}
                           operationUuid={item?.childUuid}
                           operationNumber={item?.childOperationNumber}
                         />
@@ -324,7 +324,7 @@ const AddStockOperation: React.FC<AddStockOperationProps> = (props) => {
                     {!item?.parentVoided && (
                       <span className={styles.relatedLink}>
                         <StockOperationRelatedLink
-                          operationTypes={types.results}
+                          operationTypes={stockOperationTypes}
                           operationUuid={item?.parentUuid}
                           operationNumber={item?.parentOperationNumber}
                         />

src/stock-operations/add-stock-operation/stock-operation-reference.component.tsx

@@ -12,7 +12,7 @@ interface StockOperationReferenceProps {
 
 const StockOperationReference = (props: StockOperationReferenceProps) => {
   const { t } = useTranslation();
-  const { types } = useStockOperationTypes();
+  const { stockOperationTypes } = useStockOperationTypes();
 
   let model: StockOperationDTO;
 
@@ -21,12 +21,12 @@ const StockOperationReference = (props: StockOperationReferenceProps) => {
   });
 
   const handleEdit = () => {
-    const operation = types.results?.find((op) => op?.uuid === model?.operationTypeUuid);
+    const operation = stockOperationTypes?.find((op) => op?.uuid === model?.operationTypeUuid);
 
     if (!operation) {
       return;
     }
-    launchAddOrEditDialog(t, model, true, operation, types?.results, false);
+    launchAddOrEditDialog(t, model, true, operation, stockOperationTypes, false);
   };
   return (
     <a onClick={handleEdit} style={{ cursor: 'pointer' }}>

src/stock-operations/stock-operation-operations-filter/stock-operation-operations-filter.component.tsx

@@ -5,7 +5,7 @@ import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resour
 
 const StockOperationOperationsFilter: React.FC = () => {
   // get stock sources
-  const { types, isLoading, error } = useStockOperationTypes();
+  const { stockOperationTypes, isLoading, error } = useStockOperationTypes();
   if (isLoading || error) {
     return <DropdownSkeleton />;
   }
@@ -14,7 +14,7 @@ const StockOperationOperationsFilter: React.FC = () => {
       <div className={styles.filterContainer}>
         <Dropdown
           id="stockOperationOperationsFiter"
-          items={types.results}
+          items={stockOperationTypes}
           itemToString={(item) => (item ? item.name : 'Not Set')}
           type="inline"
           size="sm"

src/stock-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx

@@ -3,37 +3,42 @@ import { ButtonSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
 import { useStockOperationTypes, useUserRoles } from '../../stock-lookups/stock-lookups.resource';
 import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { useConfig } from '@openmrs/esm-framework';
+import { ConfigObject } from '../../config-schema';
 
 interface StockOperationTypesSelectorProps {
-  onOperationTypeSelected?: (operation: StockOperationType) => void;
-  onOperationLoaded?: (operation: StockOperationType[]) => void;
+  onOperationTypeSelected?: (selectedOperation: StockOperationType) => void;
+  onOperationsLoaded?: (availableOperations: StockOperationType[]) => void;
 }
 
 const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> = ({
   onOperationTypeSelected,
-  onOperationLoaded,
+  onOperationsLoaded,
 }) => {
-  const {
-    types: { results: createOperationTypes },
-    isLoading,
-    error,
-  } = useStockOperationTypes();
+  const { stockOperationTypes, isLoading, error } = useStockOperationTypes();
   const { userRoles } = useUserRoles();
+  const { excludeStockOperationTypes } = useConfig<ConfigObject>();
 
-  const filterOperationTypes = useMemo(() => {
-    const applicablePrivilegeScopes = userRoles?.operationTypes?.map((p) => p.operationTypeUuid) || [];
-    const uniqueApplicablePrivilegeScopes = [...new Set(applicablePrivilegeScopes)];
+  const availableOperationTypes = useMemo(() => {
+    if (!stockOperationTypes || !userRoles?.operationTypes) return [];
 
-    return createOperationTypes?.filter((p) => uniqueApplicablePrivilegeScopes.includes(p.uuid)) || [];
-  }, [createOperationTypes, userRoles]);
+    const userOperationTypeUuids = new Set(userRoles.operationTypes.map((role) => role.operationTypeUuid));
+
+    return stockOperationTypes.filter(
+      (operationType) =>
+        userOperationTypeUuids.has(operationType.uuid) && !excludeStockOperationTypes.includes(operationType.uuid),
+    );
+  }, [stockOperationTypes, userRoles, excludeStockOperationTypes]);
 
   useEffect(() => {
-    onOperationLoaded?.(filterOperationTypes);
-  }, [filterOperationTypes, onOperationLoaded]);
+    onOperationsLoaded?.(availableOperationTypes);
+  }, [availableOperationTypes, onOperationsLoaded]);
 
   if (isLoading || error) return <ButtonSkeleton />;
 
-  return filterOperationTypes && filterOperationTypes.length ? (
+  if (!availableOperationTypes.length) return null;
+
+  return (
     <OverflowMenu
       renderIcon={() => (
         <>
@@ -42,30 +47,30 @@ const StockOperationTypesSelector: React.FC<StockOperationTypesSelectorProps> =
         </>
       )}
       menuOffset={{ right: '-100px' }}
-      style={{
-        backgroundColor: '#007d79',
-        backgroundImage: 'none',
-        color: '#fff',
-        minHeight: '1rem',
-        padding: '.95rem !important',
-        width: '8rem',
-        marginRight: '0.5rem',
-        whiteSpace: 'nowrap',
-      }}
+      style={menuStyle}
     >
-      {filterOperationTypes
+      {availableOperationTypes
         .sort((a, b) => a.name.localeCompare(b.name))
         .map((operation) => (
           <OverflowMenuItem
             key={operation.uuid}
             itemText={operation.name}
-            onClick={() => {
-              onOperationTypeSelected?.(operation);
-            }}
+            onClick={() => onOperationTypeSelected?.(operation)}
           />
         ))}
     </OverflowMenu>
-  ) : null;
+  );
 };
 
+const menuStyle = {
+  backgroundColor: '#007d79',
+  backgroundImage: 'none',
+  color: '#fff',
+  minHeight: '1rem',
+  padding: '.95rem !important',
+  width: '8rem',
+  marginRight: '0.5rem',
+  whiteSpace: 'nowrap',
+} as const;
+
 export default StockOperationTypesSelector;

src/stock-operations/stock-operations-table.component.tsx

@@ -240,7 +240,7 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                   onOperationTypeSelected={(operation) => {
                     launchAddOrEditDialog(t, initialStockOperationValue(), false, operation, operations, false);
                   }}
-                  onOperationLoaded={(ops) => {
+                  onOperationsLoaded={(ops) => {
                     setOperations(ops);
                   }}
                 />
@@ -302,11 +302,11 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                 </Tile>
               </div>
             ) : null}
-            {filterApplied && isLoading && (
+            {filterApplied && isLoading ? (
               <div className={styles.rowLoadingContainer}>
                 <InlineLoading description={t('loading', 'Loading...')} />
               </div>
-            )}
+            ) : null}
           </TableContainer>
         )}
       ></DataTable>

src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx

@@ -64,10 +64,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
   const loggedInUserUuid = currentUser?.user?.uuid;
 
   // operation types
-  const {
-    types: { results: stockOperations },
-    isLoading,
-  } = useStockOperationTypes();
+  const { stockOperationTypes, isLoading } = useStockOperationTypes();
 
   // get users
   const { items: users, isLoading: loadingUsers } = useUsers({
@@ -133,7 +130,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
       ];
       setFormModel({ ...formModel, operationTypes: newOperationTypes });
     } else {
-      const stockOperationType = stockOperations?.find((x) => x.uuid === event?.target?.value);
+      const stockOperationType = stockOperationTypes?.find((x) => x.uuid === event?.target?.value);
       const operationType: UserRoleScopeOperationType = {
         operationTypeName: stockOperationType?.name,
         operationTypeUuid: stockOperationType?.uuid,
@@ -346,8 +343,8 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({ model, ed
           </section>
           <section className={styles.section}>
             <CheckboxGroup className={styles.checkboxGrid}>
-              {stockOperations?.length > 0 &&
-                stockOperations.map((type) => {
+              {stockOperationTypes?.length > 0 &&
+                stockOperationTypes.map((type) => {
                   return (
                     <div style={{ display: 'flex', flexDirection: 'row' }}>
                       <Checkbox

src/types/index.ts

@@ -1,5 +1,12 @@
+import { PageableResult } from '../core/api/types/PageableResult';
+import { StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+
 export interface DashboardConfig {
   name: string;
   slot: string;
   title: string;
 }
+
+export type StockOperationTypeResponse = {
+  data: PageableResult<StockOperationType>;
+};