Enhance stock user roles to display all tagged locations.

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

@@ -20,7 +20,7 @@ import { Concept } from "../core/api/types/concept/Concept";
 import { Party } from "../core/api/types/Party";
 import { Drug } from "../core/api/types/concept/Drug";
 import { Patient } from "../core/api/types/identity/Patient";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { uniqBy } from "lodash-es";
 import { UserRoleScope } from "../core/api/types/identity/UserRoleScope";
 
@@ -59,7 +59,8 @@ export function useStockLocations(filter: LocationFilterCriteria) {
    Unless a location is tag as main store, main pharmacy or dispensing, it will not be fetched.
 */
 export function useStockTagLocations() {
-  const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=main store,main pharmacy,dispensary `;
+  const [count, setCount] = useState(100);
+  const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=main store,main pharmacy,dispensary&_count=${count}`;
   const { data, error, isLoading } = useSWR<{ data: FHIRResponse }>(
     apiUrl,
     openmrsFetch
@@ -68,10 +69,15 @@ export function useStockTagLocations() {
     () => data?.data?.entry?.map((response) => response.resource) ?? [],
     [data?.data?.entry]
   );
+  const increaseCount = () => {
+    setCount((prevCount) => prevCount + 100);
+  };
   return {
     stockLocations: uniqBy(stockLocations, "id") ?? [],
     isLoading,
     error,
+    count,
+    increaseCount,
   };
 }
 

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

@@ -114,7 +114,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
         .filter((item: any) => item.uuid !== loggedInUserUuid)
         .filter((item: any) => {
           const displayName = item?.person?.display ?? item?.display ?? "";
-          return displayName?.toLowerCase().includes(query?.toLowerCase());
+          return displayName.toLowerCase().includes(query.toLowerCase());
         });
       setFilteredItems(filtered);
     }
@@ -443,8 +443,8 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
               </span>
             </div>
           </section>
-          <section className={styles.section}>
-            <CheckboxGroup className={styles.checkboxGrid}>
+          <section className={styles.sectionScroll}>
+            <CheckboxGroup className={styles.checkboxGridScroll}>
               {stockLocations?.length > 0 &&
                 stockLocations.map((type) => {
                   const checkedLocation = findCheckedLocation(type);
@@ -459,16 +459,11 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
 
                   return (
                     <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        margin: "4px",
-                        padding: "5px",
-                      }}
+                      key={`chk-loc-child-key-${type.id}`}
+                      className={styles.checkboxItem}
                     >
                       <Checkbox
                         name="location"
-                        key={`chk-loc-child-key-${type.id}`}
                         id={`chk-loc-child-${type.id}`}
                         value={type.id}
                         onChange={(event) => onLocationCheckBoxChanged(event)}
@@ -481,7 +476,7 @@ const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
                           value={type.id}
                           hideLabel
                           className={styles.toggle}
-                          size={"sm"}
+                          size="sm"
                           onToggleClick={getToggledValue(type.id)}
                           key={`tg-loc-child-key-${type.id}`}
                           id={`tg-loc-child-${type.id}`}

src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.scss

@@ -5,6 +5,27 @@
 .section {
   margin: spacing.$spacing-03;
 }
+.sectionScroll {
+  margin: spacing.$spacing-03;
+  height: 200px;
+  width: 60%;
+  overflow-y: auto;
+  max-height: 200px;
+  border: 1px solid #ddd;
+}
+
+.checkboxGridScroll {
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+}
+.checkboxItem {
+  display: flex;
+  flex-direction: row;
+  margin: 4px 0;
+  padding:5px;
+  gap: 8px;
+}
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
@@ -23,8 +44,8 @@
 
 .checkboxGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust the values as needed */
-  gap: 16px; /* Adjust the gap between checkboxes */
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 16px;
 }
 
 .hr {