remove limit and add status call on the endpoint

packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx

@@ -30,7 +30,6 @@ import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import { ArrowUp, ArrowDown } from '@carbon/react/icons';
 import styles from './change-status-dialog.scss';
-import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import {
   NewQueuePayload,
   addQueueEntry,
@@ -43,6 +42,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
 import { PatientQueue } from '../types/patient-queues';
+import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../helpers/functions';
 
 interface ChangeStatusDialogProps {
   queueEntry: PatientQueue;

packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx

@@ -28,7 +28,6 @@ import {
 } from '@openmrs/esm-framework';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import styles from './change-status-dialog.scss';
-import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import {
   NewQueuePayload,
   addQueueEntry,
@@ -41,6 +40,7 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
 import { Controller, useForm } from 'react-hook-form';
+import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../helpers/functions';
 
 interface ChangeStatusDialogProps {
   patientUuid: string;

packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts

@@ -3,10 +3,9 @@ import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl, usePagination } from '@openmrs/esm-framework';
 import { PatientQueue } from '../types/patient-queues';
 import { NewVisitPayload, ProviderResponse } from '../types';
-import { ResourceFilterCriteria, ResourceRepresentation, toQueryParams } from '../resource-filter-criteria';
-import { PageableResult } from '../pageable-result';
 import { useEffect, useState } from 'react';
 import last from 'lodash-es/last';
+import { PageableResult, ResourceFilterCriteria, ResourceRepresentation, toQueryParams } from '../helpers/functions';
 
 export interface PatientQueueFilter extends ResourceFilterCriteria {
   status?: string;
@@ -242,50 +241,40 @@ export function usePatientQueuePages(
   isToggled?: boolean,
   isClinical?: boolean,
 ) {
-  const pageSizes = [10, 20, 30, 40, 50];
-  const [currentPage, setCurrentPage] = useState(1);
-  const [currentPageSize, setPageSize] = useState(10);
-  const [searchString, setSearchString] = useState<string | null>(null);
-
   const [patientQueueFilter, setPatientQueueFilter] = useState<PatientQueueFilter>({
-    startIndex: currentPage - 1,
     v: ResourceRepresentation.Full,
-    limit: currentPageSize,
-    q: null,
     totalCount: true,
     parentLocation: isToggled && !isClinical ? currentLocation : '',
     status: isToggled ? currentStatus : '',
     room: !isToggled ? currentLocation : '',
   });
 
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
   const { items, isLoading, error } = usePatientQueues(patientQueueFilter);
-  const pagination = usePagination(items.results, currentPageSize);
+  const { goTo, results: paginatedItems, currentPage } = usePagination(items.results, currentPageSize);
 
   useEffect(() => {
     setPatientQueueFilter({
-      startIndex: (currentPage - 1) * currentPageSize,
       v: ResourceRepresentation.Full,
-      limit: currentPageSize,
-      q: searchString,
       totalCount: true,
       parentLocation: isToggled && !isClinical ? currentLocation : '',
       status: isToggled ? currentStatus : '',
       room: !isToggled ? currentLocation : '',
     });
-  }, [searchString, currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]);
+  }, [currentPage, currentPageSize, currentLocation, currentStatus, isToggled, isClinical]);
 
   return {
-    items: pagination.results,
-    pagination,
+    items: paginatedItems,
     totalCount: items.totalCount,
     currentPageSize,
     currentPage,
-    setCurrentPage,
     setPageSize,
+    goTo,
     pageSizes,
     isLoading,
     error,
-    setSearchString,
   };
 }
 

packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx

@@ -11,8 +11,7 @@ import {
 } from '@openmrs/esm-framework';
 
 import { useTranslation } from 'react-i18next';
-import { trimVisitNumber } from '../helpers/functions';
-import { extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
+import { extractErrorMessagesFromResponse, handleMutate, trimVisitNumber } from '../helpers/functions';
 import { PatientQueue } from '../types/patient-queues';
 import { getCareProvider, updateQueueEntry } from './patient-queues.resource';
 

packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx

@@ -1,4 +1,4 @@
-import React, { AnchorHTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { AnchorHTMLAttributes, useCallback, useMemo, useState } from 'react';
 
 import {
   DataTable,
@@ -16,31 +16,24 @@ import {
   Tag,
   Tile,
   Toggle,
-  TableToolbarSearch,
 } from '@carbon/react';
 
 import { useTranslation } from 'react-i18next';
 import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework';
-import {
-  getLocationByUuid,
-  getOriginFromPathName,
-  useParentLocation,
-  usePatientQueuePages,
-} from '../patient-queues.resource';
-import {
+import { getOriginFromPathName, useParentLocation, usePatientQueuePages } from '../patient-queues.resource';
+import StatusIcon, {
+  QueueStatus,
   buildStatusString,
   formatWaitTime,
   getProviderTagColor,
   getTagColor,
   trimVisitNumber,
 } from '../../helpers/functions';
-import StatusIcon from '../../queue-entry-table-components/status-icon.component';
 import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component';
 import ViewActionsMenu from '../view-action-menu.components';
 import NotesActionsMenu from '../notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
-import { QueueStatus } from '../../utils/utils';
 import { PatientQueueConfig } from '../../config-schema';
 
 interface ActiveVisitsTableProps {
@@ -56,7 +49,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
   const { t } = useTranslation();
   const session = useSession();
   const layout = useLayoutType();
-  const [searchTerm, setSearchTerm] = useState('');
+  // const [searchTerm, setSearchTerm] = useState('');
 
   const { clinicalRoomTag } = useConfig<PatientQueueConfig>();
 
@@ -77,11 +70,11 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
   const currentPathName = useMemo(() => window.location.pathname, []);
   const fromPage = useMemo(() => getOriginFromPathName(currentPathName), [currentPathName]);
 
-  const handleSearchInputChange = useCallback((event) => {
-    setSearchTerm(event?.target?.value?.trim().toLowerCase());
-  }, []);
+  // const handleSearchInputChange = useCallback((event) => {
+  //   setSearchTerm(event?.target?.value?.trim().toLowerCase());
+  // }, []);
 
-  const { isLoading, items, totalCount, currentPageSize, setPageSize, pageSizes, currentPage, setCurrentPage } =
+  const { items, currentPage, pageSizes, goTo, currentPageSize, setPageSize, isLoading, totalCount } =
     usePatientQueuePages(activeLocationUuid, status, isToggled, true);
 
   const tableHeaders = useMemo(
@@ -141,10 +134,10 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
     }
 
     // Filter by `searchTerm` if provided
-    if (searchTerm) {
-      const lowercasedTerm = searchTerm.toLowerCase();
-      entries = entries.filter((entry) => entry?.patient?.person?.display?.toLowerCase()?.includes(lowercasedTerm));
-    }
+    // if (searchTerm) {
+    //   const lowercasedTerm = searchTerm.toLowerCase();
+    //   entries = entries.filter((entry) => entry?.patient?.person?.display?.toLowerCase()?.includes(lowercasedTerm));
+    // }
 
     // Correct filtering for queueRoom tags
     entries = entries.filter((entry) => entry?.queueRoom?.tags?.some((item) => item.uuid === clinicalRoomTag));
@@ -160,10 +153,10 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
     });
 
     return entries;
-  }, [items, searchTerm, status, clinicalRoomTag]);
+  }, [items, status, clinicalRoomTag]);
 
   const tableRows = useMemo(() => {
-    return filteredPatientQueueEntries.map((patientqueue, entry) => ({
+    return filteredPatientQueueEntries.map((patientqueue) => ({
       ...patientqueue,
       id: patientqueue.uuid,
       visitNumber: {
@@ -229,15 +222,15 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
   }
 
   return (
-    <>
+    <div className={styles.container}>
       <DataTable
         data-floating-menu-container
         headers={tableHeaders}
         overflowMenuOnHover={isDesktop(layout)}
         rows={tableRows}
         useZebraStyles
       >
-        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
           <TableContainer className={styles.tableContainer}>
             <TableToolbar
               style={{
@@ -252,13 +245,13 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
                   alignItems: 'center',
                 }}
               >
-                <TableToolbarSearch
+                {/* <TableToolbarSearch
                   expanded
                   className={styles.search}
                   onChange={handleSearchInputChange}
                   placeholder={t('searchThisList', 'Search this list')}
                   size="sm"
-                />
+                /> */}
                 <Toggle
                   className={styles.toggle}
                   labelA="My Location"
@@ -311,13 +304,17 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
         pageSize={currentPageSize}
         pageSizes={pageSizes}
         totalItems={totalCount}
-        onChange={({ page, pageSize }) => {
-          setCurrentPage(page);
-          setPageSize(pageSize);
+        onChange={({ pageSize, page }) => {
+          if (pageSize !== currentPageSize) {
+            setPageSize(pageSize);
+          }
+          if (page !== currentPage) {
+            goTo(page);
+          }
         }}
         className={styles.paginationOverride}
       />
-    </>
+    </div>
   );
 };
 export default ActiveClinicalVisitsTable;