From 927463abbc1d611ca61b8dc8ad865b63a844f41d Mon Sep 17 00:00:00 2001 From: Jabar Jeremy <24471994+jabahum@users.noreply.github.com> Date: Tue, 13 Aug 2024 08:55:25 +0300 Subject: [PATCH] Fix-searching (#36) Fix-searching (#36) --- .../client-registry-data.component.tsx | 157 +++++++++++------- .../client-registry.resource.ts | 2 +- src/index.ts | 8 - src/root.component.tsx | 6 +- src/routes.json | 17 +- 5 files changed, 112 insertions(+), 78 deletions(-) diff --git a/src/client-registry/client-registry-data/client-registry-data.component.tsx b/src/client-registry/client-registry-data/client-registry-data.component.tsx index e306775..c11252b 100644 --- a/src/client-registry/client-registry-data/client-registry-data.component.tsx +++ b/src/client-registry/client-registry-data/client-registry-data.component.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { extractErrorMessagesFromResponse, @@ -11,7 +11,6 @@ import { parseDate, showNotification, showSnackbar, - usePagination, } from "@openmrs/esm-framework"; import { DataTable, @@ -37,15 +36,35 @@ const ClientRegistryData: React.FC = () => { const { t } = useTranslation(); const [isLoading, setIsLoading] = useState(false); - const { patients, isLoading: loading, mutate } = usePatients("sarah", false); + const [searchQuery, setSearchQuery] = useState(""); + const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery); + + // Debounce the search input + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedSearchQuery(searchQuery); + }, 500); + + return () => { + clearTimeout(handler); + }; + }, [searchQuery]); + + const { + patients, + isLoading: loading, + mutate, + } = usePatients(debouncedSearchQuery, false); const pageSizes = [10, 20, 30, 40, 50]; const [currentPageSize, setPageSize] = useState(10); - const { - goTo, - results: paginatedPatientEntries, - currentPage, - } = usePagination(patients, currentPageSize); + const [currentPage, setCurrentPage] = useState(1); + + const paginatedPatientEntries = useMemo(() => { + const startIndex = (currentPage - 1) * currentPageSize; + const endIndex = startIndex + currentPageSize; + return patients?.slice(startIndex, endIndex) || []; + }, [patients, currentPage, currentPageSize]); const tableHeaders = useMemo( () => [ @@ -67,42 +86,8 @@ const ClientRegistryData: React.FC = () => { [t] ); - const startClientRegistry = async (e) => { - e.preventDefault(); - setIsLoading(true); - startClientRegistryTask().then( - () => { - mutate(); - setIsLoading(false); - showSnackbar({ - isLowContrast: true, - title: t("runTask", "Start Client Registry Task"), - kind: "success", - subtitle: t( - "successfullyStarted", - `You have successfully started Client Registry` - ), - }); - }, - (error) => { - const errorMessages = extractErrorMessagesFromResponse(error); - - mutate(); - setIsLoading(false); - showNotification({ - title: t( - `errorStartingTask', 'Error Starting client registry task"),` - ), - kind: "error", - critical: true, - description: errorMessages.join(", "), - }); - } - ); - }; - const tableRows = useMemo(() => { - return patients?.map((patient, index) => ({ + return paginatedPatientEntries.map((patient, index) => ({ ...patient, id: patient?.uuid, name: patient?.person?.display, @@ -144,13 +129,54 @@ const ClientRegistryData: React.FC = () => { > ), })); - }, [patients]); + }, [paginatedPatientEntries]); + + const startClientRegistry = async (e) => { + e.preventDefault(); + setIsLoading(true); + startClientRegistryTask().then( + () => { + mutate(); + setIsLoading(false); + showSnackbar({ + isLowContrast: true, + title: t("runTask", "Start Client Registry Task"), + kind: "success", + subtitle: t( + "successfullyStarted", + `You have successfully started Client Registry` + ), + }); + }, + (error) => { + const errorMessages = extractErrorMessagesFromResponse(error); + + mutate(); + setIsLoading(false); + showNotification({ + title: t("errorStartingTask", "Error Starting client registry task"), + kind: "error", + critical: true, + description: errorMessages.join(", "), + }); + } + ); + }; + + const handlePageChange = ({ pageSize, page }) => { + if (pageSize !== currentPageSize) { + setPageSize(pageSize); + setCurrentPage(1); // Reset to the first page when page size changes + } else if (page !== currentPage) { + setCurrentPage(page); + } + }; if (loading) { return ; @@ -158,13 +184,29 @@ const ClientRegistryData: React.FC = () => { return (
- + setSearchQuery(e.target.value)} + style={{ + marginRight: "2rem", + marginLeft: "1rem", + padding: "0.5rem", + flex: "1", + }} + /> + +
{({ rows, @@ -175,7 +217,7 @@ const ClientRegistryData: React.FC = () => { getTableContainerProps, }) => ( @@ -217,16 +259,9 @@ const ClientRegistryData: React.FC = () => { page={currentPage} pageSize={currentPageSize} pageSizes={pageSizes} - totalItems={paginatedPatientEntries?.length} + totalItems={patients?.length || 0} // Reflect the total number of patients className={styles.pagination} - onChange={({ pageSize, page }) => { - if (pageSize !== currentPageSize) { - setPageSize(pageSize); - } - if (page !== currentPage) { - goTo(page); - } - }} + onChange={handlePageChange} /> )} diff --git a/src/client-registry/client-registry.resource.ts b/src/client-registry/client-registry.resource.ts index 4bb4331..68b4afb 100644 --- a/src/client-registry/client-registry.resource.ts +++ b/src/client-registry/client-registry.resource.ts @@ -102,7 +102,7 @@ export interface ValueReference { // get Patients export function usePatients(q: string, includeDead: boolean) { - const apiUrl = `${restBaseUrl}/patient?q=${q}&v=${v}&includeDead=${includeDead}&totalCount=true&limit=10`; + const apiUrl = `${restBaseUrl}/patient?q=${q}&v=${v}&includeDead=${includeDead}&totalCount=true`; const { data, error, isLoading, isValidating, mutate } = useSWR< FetchResponse, Error diff --git a/src/index.ts b/src/index.ts index 98ea048..3ea5959 100644 --- a/src/index.ts +++ b/src/index.ts @@ -59,14 +59,6 @@ export const syncTaskTypesLink = getSyncLifecycle( options ); -export const clientRegistryLink = getSyncLifecycle( - createLeftPanelLink({ - name: "client-registry", - title: "Client Registry", - }), - options -); - export const scheduleManagerLink = getSyncLifecycle( createLeftPanelLink({ name: "schedule-manager", diff --git a/src/root.component.tsx b/src/root.component.tsx index c5523a8..f842df5 100644 --- a/src/root.component.tsx +++ b/src/root.component.tsx @@ -9,6 +9,7 @@ import ClientRegistry from "./client-registry/client-registry.component"; import FacilityRegistry from "./facility-registry/facility-registry.component"; import ProductRegistry from "./product-registry/product-registry.component"; import ScheduleManager from "./scheduler/scheduler.component"; +import SyncTaskTypes from "./fhir/sync-task-types/sync-task-types.component"; const Root: React.FC = () => { const spaBasePath = window.spaBase; @@ -27,7 +28,11 @@ const Root: React.FC = () => {
} /> + } /> } /> + } /> + } /> + } @@ -40,7 +45,6 @@ const Root: React.FC = () => { path="/product-registry-dashboard" element={} /> - } />
diff --git a/src/routes.json b/src/routes.json index e168501..f6cc183 100644 --- a/src/routes.json +++ b/src/routes.json @@ -34,10 +34,17 @@ "slot": "health-exchange-left-panel-slot", "order": 2 }, + { + "component": "scheduleManagerLink", + "name": "scheduler-manager-link", + "slot": "health-exchange-left-panel-slot", + "order": 3 + }, { "component": "registriesDashboard", - "name": "client-registry-link", - "slot": "health-exchange-left-panel-slot" + "name": "registry-link", + "slot": "health-exchange-left-panel-slot", + "order": 4 }, { "name": "vl-suppression-prediction", @@ -161,11 +168,7 @@ "name": "product-registry-dashboard-ext", "slot": "product-registry-dashboard-slot", "component": "productRegistry" - }, - { - "component": "scheduleManagerLink", - "name": "scheduler-manager-link", - "slot": "health-exchange-left-panel-slot" } + ] } \ No newline at end of file