From e8c7a0273b26829728bc1f0e1be978748ed48e42 Mon Sep 17 00:00:00 2001 From: sainingo Date: Mon, 29 Jul 2024 09:01:02 +0300 Subject: [PATCH 1/2] (feat) search user in providers --- packages/esm-providers-app/src/api/api.ts | 7 + .../providers-metrics-header.component.tsx | 174 +++++++++--------- .../providers-metrics.component.tsx | 8 +- .../esm-providers-app/translations/en.json | 3 +- 4 files changed, 100 insertions(+), 92 deletions(-) diff --git a/packages/esm-providers-app/src/api/api.ts b/packages/esm-providers-app/src/api/api.ts index 00db1d4..1eec06f 100644 --- a/packages/esm-providers-app/src/api/api.ts +++ b/packages/esm-providers-app/src/api/api.ts @@ -31,3 +31,10 @@ export const getAllProviders = () => { isValidating, }; }; + +export const searchUsers = async (name: string, ac = new AbortController()) => { + const results = await openmrsFetch(`ws/rest/v1/user?q=${name}&v=custom:(uuid,display,person)`, { + signal: ac.signal, + }); + return results.data.results; +}; diff --git a/packages/esm-providers-app/src/providers-metrics/providers-metrics-header.component.tsx b/packages/esm-providers-app/src/providers-metrics/providers-metrics-header.component.tsx index d990392..a59a7b2 100755 --- a/packages/esm-providers-app/src/providers-metrics/providers-metrics-header.component.tsx +++ b/packages/esm-providers-app/src/providers-metrics/providers-metrics-header.component.tsx @@ -1,16 +1,57 @@ /* eslint-disable no-console */ -import React, { useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ArrowRight } from '@carbon/react/icons'; +import { ClickableTile } from '@carbon/react'; import styles from './providers-header.scss'; -import { Button, TextInput, Modal, Select, ComboBox, SelectItem, DatePickerInput, DatePicker } from '@carbon/react'; +import { Button, TextInput, Modal, Search, DatePickerInput, DatePicker } from '@carbon/react'; +import { searchUsers } from '../api/api'; + +const debounce = (func, delay) => { + let timeoutId; + return (...args) => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => func(...args), delay); + }; +}; const MetricsHeader = () => { const { t } = useTranslation(); const metricsTitle = t('providersSummary', 'Providers Summary'); const [isModalOpen, setIsModalOpen] = useState(false); - const filterItems = (menu) => { - return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase()); + const [searchResults, setSearchResults] = useState([]); + const [selectedUser, setSelectedUser] = useState(null); + const [licenseNumber, setLicenseNumber] = useState(''); + const [expiryDate, setExpiryDate] = useState(''); + const [query, setQuery] = useState(''); + + const handleSearch = async (searchQuery) => { + if (searchQuery.trim() === '') { + setSearchResults([]); + return; + } + + const response = await searchUsers(searchQuery.toLowerCase()); + + if (response) { + setSearchResults(response); + } else { + console.error('Error fetching users:'); + } + }; + + const handleSearchOnEnter = (e) => { + if (e.key === 'Enter') { + handleSearch(query); + } + }; + + const handleUserSelect = (user) => { + setSelectedUser(user); + setLicenseNumber(''); + setExpiryDate(''); + setIsModalOpen(true); + setSearchResults([]); }; return ( @@ -30,115 +71,68 @@ const MetricsHeader = () => { secondaryButtonText="CANCEL" open={isModalOpen} onRequestClose={() => setIsModalOpen(false)} - //modalLabel="ADMIT BROUGHT IN BODY" modalHeading="NEW PROVIDER" hasScrollingContent> +
+ setQuery(e.target.value)} + onKeyDown={handleSearchOnEnter} + /> +
+ {searchResults.length > 0 && ( +
+ {searchResults.map((user) => ( + handleUserSelect(user.person)} + style={{ marginBottom: '8px' }}> + {user.person.display} + + ))} +
+ )} - -
- -
- - - -
- { - console.log(e); - }} - id="carbon-combobox" - items={[ - 'Married Polygamous', - 'Married Monogamous', - 'Divorced', - 'Widowed', - 'Cohabiting', - 'Single', - 'Not Married', - ]} - downshiftProps={{ - onStateChange: () => { - console.log('the state has changed'); - }, - }} - titleText="Marital Status*" - /> -
setLicenseNumber(e.target.value)} + style={{ marginBottom: '1rem' }} /> - + setExpiryDate(date[0] || '')}>
- -
- { - console.log(e); - }} - id="carbon-combobox" - items={['TB', 'Malaria']} - downshiftProps={{ - onStateChange: () => { - console.log('the state has changed'); - }, - }} - titleText="Cause of death*" - /> -
-
); diff --git a/packages/esm-providers-app/src/providers-metrics/providers-metrics.component.tsx b/packages/esm-providers-app/src/providers-metrics/providers-metrics.component.tsx index 8b522b8..cde6af3 100755 --- a/packages/esm-providers-app/src/providers-metrics/providers-metrics.component.tsx +++ b/packages/esm-providers-app/src/providers-metrics/providers-metrics.component.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import styles from './providers-metrics.scss'; import MetricsHeader from './providers-metrics-header.component'; import MetricsCard from './providers-card.component'; +import { getAllProviders } from '../api/api'; export interface Service { uuid: string; @@ -11,12 +12,17 @@ export interface Service { function ProviderMetrics() { const { t } = useTranslation(); + const { response } = getAllProviders(); return ( <>
- + Date: Mon, 29 Jul 2024 09:01:36 +0300 Subject: [PATCH 2/2] (feat) search user in providers --- packages/esm-providers-app/translations/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/esm-providers-app/translations/en.json b/packages/esm-providers-app/translations/en.json index 0ec6215..3f15be4 100755 --- a/packages/esm-providers-app/translations/en.json +++ b/packages/esm-providers-app/translations/en.json @@ -25,6 +25,6 @@ "pending-bill": "Send the Bill", "providersSummary": "Providers Summary", "received-by": "RECEIVED BY", - "viewReport": "View Report", - "searchUser": "Search User" + "searchUser": "Search User", + "viewReport": "View Report" }