Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 3x 21x 21x 21x 21x 21x 21x 10x 10x 10x 21x 10x 10x 21x 21x 10x 21x 1x 1x 21x 10x 10x 10x 10x 1x | import React, { useCallback, useEffect, useState } from 'react';
import { ClickableTile, Search } from '@carbon/react';
import { useTranslation } from 'react-i18next';
import { useConfig, useDebounce } from '@openmrs/esm-framework';
import { type StockItemDTO } from '../../../core/api/types/stockItem/StockItem';
import { useFilterableStockItems } from '../hooks/useFilterableStockItems';
import { type ConfigObject } from '../../../config-schema';
import styles from './input-components-styles.scss';
type StockItemSearchProps = {
onSelectedItem?: (stockItem: StockItemDTO) => void;
};
const StockItemSearch: React.FC<StockItemSearchProps> = ({ onSelectedItem }) => {
const { t } = useTranslation();
const { isLoading, stockItemsList, setSearchString } = useFilterableStockItems({});
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounce(searchTerm);
const { useItemCommonNameAsDisplay } = useConfig<ConfigObject>();
const getDrugName = useCallback(
(item: StockItemDTO) => {
Iif (useItemCommonNameAsDisplay) return;
const commonName = item?.commonName ? `(Common name: ${item.commonName})` : undefined;
return `${item?.drugName || t('noDrugNameAvailable', 'No drug name available') + (commonName ?? '')}`;
},
[useItemCommonNameAsDisplay, t],
);
const getCommonName = useCallback(
(item: StockItemDTO) => {
Eif (!useItemCommonNameAsDisplay) return;
const drugName = item?.drugName ? `(Drug name: ${item.drugName})` : undefined;
return `${item?.commonName || t('noCommonNameAvailable', 'No common name available') + (drugName ?? '')}`;
},
[useItemCommonNameAsDisplay, t],
);
useEffect(() => {
if (debouncedSearchTerm?.length !== 0) {
setSearchString(debouncedSearchTerm);
}
}, [debouncedSearchTerm, setSearchString]);
const handleOnSearchResultClick = (stockItem: StockItemDTO) => {
onSelectedItem?.(stockItem);
setSearchTerm('');
};
return (
<div className={styles.stockItemSearchContainer}>
<div style={{ display: 'flex' }}>
<Search
size="lg"
placeholder={t('findItems', 'Find your items')}
labelText={t('search', 'Search')}
closeButtonLabelText={t('clearSearch', 'Clear search input')}
value={searchTerm}
id="search-stock-operation-item"
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
{searchTerm && stockItemsList?.length > 0 && (
<div className={styles.searchResults}>
{stockItemsList?.slice(0, 5).map((stockItem) => {
const commonName = getCommonName(stockItem);
const drugName = getDrugName(stockItem);
return (
<ClickableTile onClick={() => handleOnSearchResultClick(stockItem)} key={stockItem?.uuid}>
{useItemCommonNameAsDisplay ? commonName : drugName}
</ClickableTile>
);
})}
</div>
)}
</div>
);
};
export default StockItemSearch;
|