Merge branch 'develop' into log-update-v2

ohcnetwork · Jul 31, 2024 · 8bb6f27 · 8bb6f27
2 parents df32999 + f356406
commit 8bb6f27
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 54 deletions.
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
@@ -92,9 +92,12 @@ export const TimelineNode = (props: TimelineNodeProps) => {
                             }`}{" "}
                       </span>
                     )}
-                    {props.titleSuffix
-                      ? props.titleSuffix
-                      : `${props.event.type} the ${props.name || name}.`}
+                    {props.titleSuffix || (
+                      <>
+                        {`${props.event.type} the `}
+                        <span className="capitalize">{props.name || name}</span>
+                      </>
+                    )}
                   </p>
                   <div className="md:w-fit">
                     {props.actions && (

diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
@@ -256,7 +256,7 @@ const DateInputV2: React.FC<Props> = ({
                   type="text"
                   readOnly
                   disabled={disabled}
-                  className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
+                  className={`cui-input-base cursor-pointer !px-2 disabled:cursor-not-allowed ${className}`}
                   placeholder={placeholder ?? t("select_date")}
                   value={value && dayjs(value).format("DD/MM/YYYY")}
                 />

diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -71,6 +71,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
         )}
         optionLabel={(option) => option.label}
         optionValue={(option) => option}
+        minQueryLength={2}
         onQuery={(query) => refetch({ query: { query } })}
         isLoading={loading}
         error={hasError ? t("diagnosis_already_added") : undefined}

diff --git a/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx b/src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
@@ -30,13 +30,10 @@ export default function EventsList() {
                 {(item, items) => (
                   <TimelineNode
                     name={
-                      item.event_type.name
-                        .split("_")
-                        .map(
-                          (text) =>
-                            text[0].toUpperCase() + text.toLowerCase().slice(1),
-                        )
-                        .join(" ") + " Event"
+                      t(item.event_type.name.toLowerCase()).replaceAll(
+                        /_/g,
+                        " ",
+                      ) + " Event"
                     }
                     event={{
                       type: item.change_type.replace(/_/g, " ").toLowerCase(),

diff --git a/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx b/src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
 interface IProps {
   values: Record<string, unknown>;
 }
@@ -80,12 +82,13 @@ const formatValue = (value: unknown, key?: string): ReactNode => {
 };
 
 export default function GenericEvent(props: IProps) {
+  const { t } = useTranslation();
   return (
     <div className="flex w-full flex-col gap-4 rounded-lg border border-secondary-400 p-4 @container">
       {Object.entries(props.values).map(([key, value]) => (
         <div className="flex w-full flex-col items-start gap-2">
-          <span className="text-xs uppercase text-secondary-700">
-            {key.replaceAll(/_/g, " ")}
+          <span className="text-xs capitalize text-secondary-700">
+            {t(key).replaceAll(/_/g, " ")}
           </span>
           <span className="break-all text-sm font-semibold text-secondary-700">
             {formatValue(value, key)}

diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
@@ -932,11 +932,11 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
             );
           })}
         </div>
-        <div className="flex h-full w-full overflow-auto xl:ml-72">
+        <div className="flex h-full w-full overflow-auto xl:ml-64 2xl:ml-72">
           <div className="w-full max-w-4xl">
             <form
               onSubmit={handleSubmit}
-              className="rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
+              className="rounded bg-white p-6 transition-all sm:rounded-xl sm:p-8"
             >
               <DraftSection
                 handleDraftSelect={(newState: any) => {

diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -18,6 +18,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
+  minQueryLength?: number;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
   isLoading?: boolean;
@@ -45,6 +46,7 @@ const AutocompleteFormField = <T, V>(
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
+        minQueryLength={props.minQueryLength}
         onQuery={props.onQuery}
         isLoading={props.isLoading}
         allowRawInput={props.allowRawInput}
@@ -69,6 +71,7 @@ type AutocompleteProps<T, V = T> = {
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
   className?: string;
+  minQueryLength?: number;
   onQuery?: (query: string) => void;
   requiredError?: boolean;
   isLoading?: boolean;
@@ -95,6 +98,7 @@ type AutocompleteProps<T, V = T> = {
 export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState(""); // Ensure lower case
+
   useEffect(() => {
     props.onQuery?.(query);
   }, [query]);
@@ -136,6 +140,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const options = props.allowRawInput ? getOptions() : mappedOptions;
 
   const value = options.find((o) => props.value == o.value);
+
   const filteredOptions =
     props.onQuery === undefined
       ? options.filter((o) => o.search.includes(query))
@@ -198,43 +203,48 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
 
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
-              {filteredOptions.length === 0 && (
+              {props.minQueryLength && query.length < props.minQueryLength ? (
+                <div className="p-2 text-sm text-secondary-500">
+                  {`Please enter at least ${props.minQueryLength} characters to search`}
+                </div>
+              ) : filteredOptions.length === 0 ? (
                 <div className="p-2 text-sm text-secondary-500">
                   No options found
                 </div>
-              )}
-              {filteredOptions.map((option, index) => (
-                <Combobox.Option
-                  id={`${props.id}-option-${option.label}-value-${index}`}
-                  key={`${props.id}-option-${option.label}-value-${index}`}
-                  className={dropdownOptionClassNames}
-                  value={option}
-                  disabled={option.disabled}
-                >
-                  {({ active }) => (
-                    <div className="flex flex-col">
-                      <div className="flex justify-between">
-                        <span>{option.label}</span>
-                        <span>{option.icon}</span>
-                      </div>
-                      {option.description && (
-                        <div
-                          className={classNames(
-                            "text-sm font-normal",
-                            option.disabled
-                              ? "text-secondary-700"
-                              : active
-                                ? "text-primary-200"
-                                : "text-secondary-700",
-                          )}
-                        >
-                          {option.description}
+              ) : (
+                filteredOptions.map((option, index) => (
+                  <Combobox.Option
+                    id={`${props.id}-option-${option.label}-value-${index}`}
+                    key={`${props.id}-option-${option.label}-value-${index}`}
+                    className={dropdownOptionClassNames}
+                    value={option}
+                    disabled={option.disabled}
+                  >
+                    {({ active }) => (
+                      <div className="flex flex-col">
+                        <div className="flex justify-between">
+                          <span>{option.label}</span>
+                          <span>{option.icon}</span>
                         </div>
-                      )}
-                    </div>
-                  )}
-                </Combobox.Option>
-              ))}
+                        {option.description && (
+                          <div
+                            className={classNames(
+                              "text-sm font-normal",
+                              option.disabled
+                                ? "text-secondary-700"
+                                : active
+                                  ? "text-primary-200"
+                                  : "text-secondary-700",
+                            )}
+                          >
+                            {option.description}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </Combobox.Option>
+                ))
+              )}
             </Combobox.Options>
           </DropdownTransition>
         </div>

diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
@@ -487,7 +487,7 @@ export const DailyRounds = (props: any) => {
           }}
         />
       </div>
-      <form className="w-full max-w-4xl rounded-lg bg-white px-8 py-5 shadow md:m-4 md:px-16 md:py-11">
+      <form className="w-full max-w-4xl rounded-lg bg-white px-3 py-5 shadow sm:px-6 md:py-11">
         <DraftSection
           handleDraftSelect={(newState) => {
             dispatch({ type: "set_state", state: newState });

diff --git a/src/Components/Symptoms/SymptomsBuilder.tsx b/src/Components/Symptoms/SymptomsBuilder.tsx
@@ -176,9 +176,9 @@ const SymptomEntry = (props: {
   const disabled =
     props.disabled || symptom.clinical_impression_status === "entered-in-error";
   return (
-    <div className="grid grid-cols-6 items-center gap-2 md:grid-cols-5">
+    <div className="grid grid-cols-6 items-center gap-2 lg:grid-cols-8 xl:grid-cols-5">
       <DateFormField
-        className="col-span-3 w-full md:col-span-1"
+        className="col-span-3 w-full lg:col-span-2 xl:col-span-1"
         name="onset_date"
         value={new Date(symptom.onset_date)}
         disableFuture
@@ -187,7 +187,7 @@ const SymptomEntry = (props: {
         errorClassName="hidden"
       />
       <DateFormField
-        className="col-span-3 w-full md:col-span-1"
+        className="col-span-3 w-full lg:col-span-2 xl:col-span-1"
         name="cure_date"
         value={symptom.cure_date ? new Date(symptom.cure_date) : undefined}
         disableFuture
@@ -198,7 +198,7 @@ const SymptomEntry = (props: {
         onChange={props.onChange}
         errorClassName="hidden"
       />
-      <div className="col-span-6 flex items-center gap-2 md:col-span-3">
+      <div className="col-span-6 flex items-center gap-2 lg:col-span-4 xl:col-span-3">
         <div
           className={classNames(
             "cui-input-base w-full font-medium",

diff --git a/src/Locale/en/Consultation.json b/src/Locale/en/Consultation.json
@@ -46,5 +46,6 @@
   "encounter_date_field_label__HI": "Date & Time of Consultation",
   "encounter_date_field_label__R": "Date & Time of Consultation",
   "back_dated_encounter_date_caution": "You are creating an encounter for",
-  "encounter_duration_confirmation": "The duration of this encounter would be"
+  "encounter_duration_confirmation": "The duration of this encounter would be",
+  "consultation_notes": "General Instructions (Advice)"
 }