Merge pull request #130 from sainingo/add-provider

Add provider
AMPATH · Jul 29, 2024 · afdcf34 · afdcf34
2 parents 599ca5f + eaf5fed
commit afdcf34
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 91 deletions.
diff --git 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
@@ -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<boolean>(false);
- const filterItems = (menu) => {
- return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase());
+ const [searchResults, setSearchResults] = useState<any[]>([]);
+ const [selectedUser, setSelectedUser] = useState<any | null>(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>
+ <div style={{ paddingBottom: '8px' }}>
+ <Search
+ id="userSearch"
+ autoFocus
+ placeHolderText={t('searchUser', 'Search User')}
+ onChange={(e) => setQuery(e.target.value)}
+ onKeyDown={handleSearchOnEnter}
+ />
+ </div>
+ {searchResults.length > 0 && (
+ <div style={{ marginBottom: '1rem' }}>
+ {searchResults.map((user) => (
+ <ClickableTile
+ key={user.id}
+ onClick={() => handleUserSelect(user.person)}
+ style={{ marginBottom: '8px' }}>
+ <span>{user.person.display}</span>
+ </ClickableTile>
+ ))}
+ </div>
+ )}
  <TextInput
  data-modal-primary-focus
- id="text-input-1"
- labelText="Given Name*"
- placeholder="Enter your given name"
- required
- style={{
- marginBottom: '1rem',
- }}
- />
- <TextInput
- data-modal-primary-focus
- id="text-input-1"
- labelText="Middle Name"
- placeholder="Enter your middle name"
+ id="full-name-input"
+ labelText="Full Names*"
+ placeholder="Full Names"
  required
- style={{
-  marginBottom: '1rem',
- }}
+ value={selectedUser?.display || ''}
+ readOnly
+ style={{ marginBottom: '1rem' }}
  />
  <TextInput
  data-modal-primary-focus
- id="text-input-1"
- labelText="Family Name*"
- placeholder="Enter your family name"
+ id="gender-input"
+ labelText="Gender*"
+ placeholder="Gender"
  required
- style={{
-  marginBottom: '1rem',
- }}
+ value={selectedUser?.gender || ''}
+ readOnly
+ style={{ marginBottom: '1rem' }}
  />
- <div style={{ marginBottom: '20px' }}>
- <Select id="select-1" labelText="Gender*">
- <SelectItem value="" text="Select Gender" />
- <SelectItem value="Option 2" text="Male" />
- <SelectItem value="Option 2" text="Female" />
- </Select>
- </div>
- <DatePicker datePickerType="single">
- <DatePickerInput placeholder="mm/dd/yyyy" labelText="Date of Birth" id="date-picker-single" size="md" />
- </DatePicker>
- <div style={{ marginBottom: '20px' }}>
- <ComboBox
- allowCustomValue
- shouldFilterItem={filterItems}
- required
- onChange={(e) => {
- 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*"
- />
- </div>
  <div style={{ marginBottom: '20px' }}>
  <TextInput
- data-modal-primary-focus
- id="text-input-1"
+ id="license-number-input"
  labelText="License Number*"
  placeholder="Enter License Number"
  required
- style={{
-  marginBottom: '1rem',
- }}
+ value={licenseNumber}
+ onChange={(e) => setLicenseNumber(e.target.value)}
+ style={{ marginBottom: '1rem' }}
  />
- <DatePicker datePickerType="single">
+ <DatePicker datePickerType="single" dateFormat="m/d/Y" onChange={(date) => setExpiryDate(date[0] || '')}>
  <DatePickerInput
  placeholder="mm/dd/yyyy"
  labelText="License Expiry Date"
  id="date-picker-single"
- size="md"
+ value={expiryDate}
  />
  </DatePicker>
  </div>
-
- <div style={{ marginBottom: '20px' }}>
- <ComboBox
- allowCustomValue
- shouldFilterItem={filterItems}
- required
- onChange={(e) => {
- console.log(e);
- }}
- id="carbon-combobox"
- items={['TB', 'Malaria']}
- downshiftProps={{
- onStateChange: () => {
- console.log('the state has changed');
- },
- }}
- titleText="Cause of death*"
- />
- </div>
- <div style={{ marginBottom: '20px' }}></div>
  </Modal>
  </div>
  );

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
@@ -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 (
  <>
  <MetricsHeader />
  <div className={styles.cardContainer} data-testid="clinic-metrics">
- <MetricsCard label={t('allt', 'Total Providers')} value={'0'} headerLabel={t('all', 'All Providers')} />
+ <MetricsCard
+ label={t('allt', 'Total Providers')}
+ value={response ? response.length : 0}
+ headerLabel={t('all', 'All Providers')}
+ />
  <MetricsCard
  label={t('activet', 'Total Active Providers')}
  value={'0'}

diff --git a/packages/esm-providers-app/translations/en.json b/packages/esm-providers-app/translations/en.json
@@ -25,5 +25,6 @@
  "pending-bill": "Send the Bill",
  "providersSummary": "Providers Summary",
  "received-by": "RECEIVED BY",
+ "searchUser": "Search User",
  "viewReport": "View Report"
 }