Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🛠Upgrade the colors of tailwind input components + 🛠Tailwind Consul…
…tation Form + 🛠Tailiwnd discharge patient dialog (#4309) * momentarily copied secondary until #4307 merged * upgrade textarea colors as per figma * consultation: replace mui label and textarea w. tw * tailwind discharge modal * add hints to discharge modal * upgrade `SelectMenuV2` * upgrade `TextFormField` * upgrade `MultiSelectMenuV2` * upgrade AutoCompleteAsync colors * use CareIcons * upgrade `DateInputV2` * upgrade PhoneInput style to perfection * place clear inside the phone input * fix padding * fix `SelectMenuV2` conflict * add missing verified by label * Add form field comp: `PatientCategorySelect` * use PatientCategorySelect in consultation form * cleanup patient category tw-class mess * tw-comp: `SelectMenuFormField` * Upgrade consultation form * tw-comp: `AutocompleteMultiselect` * tw-comp: `AutocompleteV2` (single select, but not form field yet) * add hook: `useAsyncOptions` for use in async dropdowns * tw-comp: `DiagnosisAutocompleteFormField` * MultiSelect, AutocompleteMulti: option chip + remove * consultation form: upgrade diag. and prov. diag. * replicate figma page layout for consultation * fix form submission * empty * rename `SelectMenuFormField` -> `SelectFormField` * tw-comp: `MultiSelectFormField` * Deprecate old `DateRangePicker` * tw-comp: `SymptomsSelect` Form Field * show helpful descriptions in `SymptomsSelect` * consultation form use new `SymptomsSelect` * so far it never felt the date input was getting disabled? * let the dropdown be near the calendar for less mouse movement * consultation form, use `DateFormFields` * hide disabled fields * introduce style: `cui-input-base` * migrate select and multiselect to new colors * migrate text form field and text area * remove conflicting classes * BRING BACK ORIGINAL GRAY PALLETE * update Form Field label color * ensure cui-input-base is properly applied * migrate autocomplete * hack: make online user select to look consistent with the form * migrate autocomplete async design * improve consistency on dropdown options * adds class: `cui-dropdown-base` * migrate date picker * check-circle * `cui-input-base` for prescription builder * `cui-input-base` for investigation builder * fix memory loss of diagnosis select * autocomplete show loading or nothing found * document: `useAsyncOptions` * fix issues w. state handling of DiagnosisSelect
- Loading branch information
1 parent
0333752
commit 397a2ce
Showing
40 changed files
with
1,348 additions
and
1,024 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { debounce } from "lodash"; | ||
| import { useMemo, useState } from "react"; | ||
| import { useDispatch } from "react-redux"; | ||
|
|
||
| interface IUseAsyncOptionsArgs { | ||
| debounceInterval?: number; | ||
| } | ||
|
|
||
| /** | ||
| * Hook to implement async autocompletes with ease and typesafety. | ||
| * | ||
| * See `DiagnosisSelectFormField` for usage. | ||
| * | ||
| * **Example usage:** | ||
| * ```jsx | ||
| * const { fetchOptions, isLoading, options } = useAsyncOptions<Model>("id"); | ||
| * | ||
| * return ( | ||
| * <AutocompleteMultiselect | ||
| * ... | ||
| * options={options(props.value)} | ||
| * isLoading={isLoading} | ||
| * onQuery={(query) => fetchOptions(action({ query }))} | ||
| * optionValue={(option) => option} | ||
| * ... | ||
| * /> | ||
| * ); | ||
| * ``` | ||
| */ | ||
| export function useAsyncOptions<T extends Record<string, unknown>>( | ||
| uniqueKey: keyof T, | ||
| args?: IUseAsyncOptionsArgs | ||
| ) { | ||
| const dispatch = useDispatch<any>(); | ||
| const [queryOptions, setQueryOptions] = useState<T[]>([]); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| const fetchOptions = useMemo( | ||
| () => | ||
| debounce(async (action: any) => { | ||
| setIsLoading(true); | ||
| const res = await dispatch(action); | ||
| if (res?.data) setQueryOptions(res.data as T[]); | ||
| setIsLoading(false); | ||
| }, args?.debounceInterval ?? 300), | ||
| [dispatch, args?.debounceInterval] | ||
| ); | ||
|
|
||
| const mergeValueWithQueryOptions = (selected?: T[]) => { | ||
| if (!selected?.length) return queryOptions; | ||
|
|
||
| return [ | ||
| ...queryOptions, | ||
| ...selected.filter( | ||
| (obj) => !queryOptions.some((s) => s[uniqueKey] === obj[uniqueKey]) | ||
| ), | ||
| ]; | ||
| }; | ||
|
|
||
| return { | ||
| /** | ||
| * Merges query options and selected options. | ||
| * | ||
| * **Example usage:** | ||
| * ```jsx | ||
| * const { isLoading } = useAsyncOptions<Model>("id"); | ||
| * | ||
| * <AutocompleteMultiselect | ||
| * ... | ||
| * isLoading={isLoading} | ||
| * ... | ||
| * /> | ||
| * ``` | ||
| */ | ||
| fetchOptions, | ||
|
|
||
| /** | ||
| * Merges query options and selected options. | ||
| * | ||
| * **Example usage:** | ||
| * ```jsx | ||
| * const { options } = useAsyncOptions<Model>("id"); | ||
| * | ||
| * <AutocompleteMultiselect | ||
| * ... | ||
| * onQuery={(query) => fetchOptions(action({ query }))} | ||
| * ... | ||
| * /> | ||
| * ``` | ||
| */ | ||
| isLoading, | ||
|
|
||
| /** | ||
| * Merges query options and selected options. | ||
| * | ||
| * **Example usage:** | ||
| * ```jsx | ||
| * const { options } = useAsyncOptions<Model>("id"); | ||
| * | ||
| * <AutocompleteMultiselect | ||
| * ... | ||
| * options={options(props.value)} | ||
| * ... | ||
| * /> | ||
| * ``` | ||
| */ | ||
| options: mergeValueWithQueryOptions, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions"; | ||
| import { listICD11Diagnosis } from "../../Redux/actions"; | ||
| import { ICD11DiagnosisModel } from "../Facility/models"; | ||
| import { AutocompleteMutliSelect } from "../Form/FormFields/AutocompleteMultiselect"; | ||
| import FormField from "../Form/FormFields/FormField"; | ||
| import { | ||
| FormFieldBaseProps, | ||
| resolveFormFieldChangeEventHandler, | ||
| } from "../Form/FormFields/Utils"; | ||
|
|
||
| type Props = | ||
| // | ({ multiple?: false | undefined } & FormFieldBaseProps<ICD11DiagnosisModel>) // uncomment when single select form field is required and implemented. | ||
| { multiple: true } & FormFieldBaseProps<ICD11DiagnosisModel[]>; | ||
|
|
||
| export function DiagnosisSelectFormField(props: Props) { | ||
| const { name } = props; | ||
| const handleChange = resolveFormFieldChangeEventHandler(props); | ||
|
|
||
| const { fetchOptions, isLoading, options } = | ||
| useAsyncOptions<ICD11DiagnosisModel>("id"); | ||
|
|
||
| if (!props.multiple) { | ||
| return ( | ||
| <div className="bg-danger-500 text-white font-bold"> | ||
| Component not implemented | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <FormField props={props}> | ||
| <AutocompleteMutliSelect | ||
| id={props.id} | ||
| disabled={props.disabled} | ||
| value={props.value || []} | ||
| options={options(props.value)} | ||
| optionLabel={(option) => option.label} | ||
| optionValue={(option) => option} | ||
| onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }, ""))} | ||
| isLoading={isLoading} | ||
| onChange={(value) => handleChange({ name, value })} | ||
| /> | ||
| </FormField> | ||
| ); | ||
| } |
Oops, something went wrong.