Merge branch 'develop' into issues/8610/fix-clearing-facilities-white…

…-screen

src/Common/hooks/useFilters.tsx

@@ -6,6 +6,7 @@ import PaginationComponent from "../../Components/Common/Pagination";
 import { classNames, humanizeStrings } from "../../Utils/utils";
 import FiltersCache from "../../Utils/FiltersCache";
 import careConfig from "@careConfig";
+import { triggerGoal } from "../../Integrations/Plausible";
 
 export type FilterState = Record<string, unknown>;
 
@@ -42,6 +43,17 @@ export default function useFilters({
   ) => {
     query = FiltersCache.utils.clean(query);
     _setQueryParams(query, options);
+
+    // For each of the newly applied filters (additional filters compared to
+    // previously applied ones), trigger a plausible goal "Advanced filter
+    // applied" with the applied filter's query key and current location as tags.
+    Object.keys(query).forEach((filter) =>
+      triggerGoal("Advanced filter applied", {
+        filter,
+        location: location.pathname,
+      }),
+    );
+
     updateCache(query);
   };
 

src/Components/Files/FileUpload.tsx

@@ -195,6 +195,7 @@ export const FileUpload = (props: FileUploadProps) => {
       "ods",
       "pdf",
     ],
+    allowNameFallback: false,
     onUpload: refetchAll,
   });
 
@@ -259,7 +260,7 @@ export const FileUpload = (props: FileUploadProps) => {
                       </span>
                       <button
                         onClick={fileUpload.clearFiles}
-                        disabled={!!fileUpload.progress}
+                        disabled={fileUpload.uploading}
                         className="text-lg"
                       >
                         <CareIcon icon="l-times" />
@@ -271,8 +272,8 @@ export const FileUpload = (props: FileUploadProps) => {
                       label={t("enter_file_name")}
                       id="upload-file-name"
                       required
-                      value={fileUpload.fileNames[0]}
-                      disabled={!!fileUpload.progress}
+                      value={fileUpload.fileNames[0] || ""}
+                      disabled={fileUpload.uploading}
                       onChange={(e) => fileUpload.setFileName(e.value)}
                       error={fileUpload.error || undefined}
                     />
@@ -281,7 +282,7 @@ export const FileUpload = (props: FileUploadProps) => {
                         onClick={() =>
                           fileUpload.handleFileUpload(associatedId)
                         }
-                        loading={!!fileUpload.progress}
+                        loading={fileUpload.uploading}
                         className="w-full"
                         id="upload_file_button"
                       >
@@ -291,7 +292,7 @@ export const FileUpload = (props: FileUploadProps) => {
                       <ButtonV2
                         variant="danger"
                         onClick={fileUpload.clearFiles}
-                        disabled={!!fileUpload.progress}
+                        disabled={fileUpload.uploading}
                       >
                         <CareIcon icon="l-trash-alt" className="" />
                         {t("discard")}

src/Components/Patient/PatientConsentRecords.tsx

@@ -38,6 +38,7 @@ export default function PatientConsentRecords(props: {
   const fileUpload = useFileUpload({
     type: "CONSENT_RECORD",
     allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+    allowNameFallback: false,
   });
 
   const fileManager = useFileManager({
@@ -181,7 +182,7 @@ export default function PatientConsentRecords(props: {
           <TextFormField
             name="filename"
             label="File Name"
-            value={fileUpload.fileNames[0]}
+            value={fileUpload.fileNames[0] || ""}
             onChange={(e) => fileUpload.setFileName(e.value)}
           />
           <div className="flex gap-2">
@@ -203,7 +204,7 @@ export default function PatientConsentRecords(props: {
                       handleUpload();
                     }
                   }}
-                  loading={!!fileUpload.progress}
+                  loading={fileUpload.uploading}
                   disabled={
                     newConsent.type === 2 &&
                     newConsent.patient_code_status === 0
@@ -216,7 +217,7 @@ export default function PatientConsentRecords(props: {
                 <ButtonV2
                   variant="danger"
                   onClick={fileUpload.clearFiles}
-                  disabled={!!fileUpload.progress}
+                  disabled={fileUpload.uploading}
                 >
                   <CareIcon icon="l-trash-alt" className="" />
                 </ButtonV2>

src/Locale/en/FileUpload.json

@@ -21,6 +21,7 @@
   "file_list_headings__supporting_info": "Supporting Info",
   "file_error__choose_file": "Please choose a file to upload",
   "file_error__file_name": "Please give a name for all files!",
+  "file_error__single_file_name": "Please give a name for the file",
   "change_file": "Change File",
   "file_error__file_size": "Maximum size of files is 100 MB",
   "file_error__file_type": "Invalid file type \".{{extension}}\" Allowed types: {{allowedExtensions}}",

src/Utils/useFileUpload.tsx

@@ -2,6 +2,7 @@ import {
   ChangeEvent,
   DetailedHTMLProps,
   InputHTMLAttributes,
+  useEffect,
   useState,
 } from "react";
 import {
@@ -24,6 +25,8 @@ export type FileUploadOptions = {
   type: string;
   category?: FileCategory;
   onUpload?: (file: FileUploadModel) => void;
+  // if allowed, will fallback to the name of the file if a seperate filename is not defined.
+  allowNameFallback?: boolean;
 } & (
   | {
       allowedExtensions?: string[];
@@ -54,6 +57,7 @@ export type FileUploadReturn = {
   setFileNames: (names: string[]) => void;
   removeFile: (index: number) => void;
   clearFiles: () => void;
+  uploading: boolean;
 };
 
 // Array of image extensions
@@ -71,13 +75,20 @@ const ExtImage: string[] = [
 export default function useFileUpload(
   options: FileUploadOptions,
 ): FileUploadReturn {
-  const { type, onUpload, category = "UNSPECIFIED", multiple } = options;
+  const {
+    type,
+    onUpload,
+    category = "UNSPECIFIED",
+    multiple,
+    allowNameFallback = true,
+  } = options;
 
   const [uploadFileNames, setUploadFileNames] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [progress, setProgress] = useState<null | number>(null);
   const [cameraModalOpen, setCameraModalOpen] = useState(false);
   const [audioModalOpen, setAudioModalOpen] = useState(false);
+  const [uploading, setUploading] = useState(false);
 
   const [files, setFiles] = useState<File[]>([]);
 
@@ -104,6 +115,11 @@ export default function useFileUpload(
     });
   };
 
+  useEffect(() => {
+    const blanks = Array(files.length).fill("");
+    setUploadFileNames((names) => [...names, ...blanks].slice(0, files.length));
+  }, [files]);
+
   const validateFileUpload = () => {
     if (files.length === 0) {
       setError(t("file_error__choose_file"));
@@ -199,9 +215,14 @@ export default function useFileUpload(
 
     for (const [index, file] of files.entries()) {
       const filename =
-        uploadFileNames[index] === "" && file
+        allowNameFallback && uploadFileNames[index] === "" && file
           ? file.name
           : uploadFileNames[index];
+      if (!filename) {
+        setError(t("file_error__single_file_name"));
+        return;
+      }
+      setUploading(true);
 
       const { data } = await request(routes.createUpload, {
         body: {
@@ -220,6 +241,7 @@ export default function useFileUpload(
       }
     }
 
+    setUploading(false);
     setFiles([]);
     setUploadFileNames([]);
   };
@@ -229,17 +251,15 @@ export default function useFileUpload(
       <CameraCaptureDialog
         show={cameraModalOpen}
         onHide={() => setCameraModalOpen(false)}
-        onCapture={(file, fileName) => {
+        onCapture={(file) => {
           setFiles((prev) => [...prev, file]);
-          setUploadFileNames((prev) => [...prev, fileName]);
         }}
       />
       <AudioCaptureDialog
         show={audioModalOpen}
         onHide={() => setAudioModalOpen(false)}
-        onCapture={(file, fileName) => {
+        onCapture={(file) => {
           setFiles((prev) => [...prev, file]);
-          setUploadFileNames((prev) => [...prev, fileName]);
         }}
         autoRecord
       />
@@ -290,5 +310,6 @@ export default function useFileUpload(
       setFiles([]);
       setUploadFileNames([]);
     },
+    uploading,
   };
 }