Show error for invalid records of import external results page (#6832)

* show error for invalid records

* refactor filter logic

* add warning icons

src/Components/ExternalResult/ExternalResultUpload.tsx

@@ -1,6 +1,6 @@
 import _ from "lodash-es";
 import { navigate } from "raviger";
-import { lazy, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import CSVReader from "react-csv-reader";
 import useConfig from "../../Common/hooks/useConfig";
 import * as Notification from "../../Utils/Notifications.js";
@@ -11,19 +11,39 @@ import useAppHistory from "../../Common/hooks/useAppHistory";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import { IExternalResult } from "./models";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 export default function ExternalResultUpload() {
   const { sample_format_external_result_import } = useConfig();
   // for disabling save button once clicked
   const [loading, setLoading] = useState(false);
   const [csvData, setCsvData] = useState(new Array<IExternalResult>());
   const [errors, setErrors] = useState<any>([]);
+  const [validationErrorCount, setValidationErrorCount] = useState(0);
+  const [user, setUser] = useState<any>({});
   const handleForce = (data: any) => {
     setCsvData(data);
+    setValidationErrorCount(
+      data.filter(
+        (result: IExternalResult) =>
+          result.district !== user.district_object.name
+      ).length
+    );
   };
   const { t } = useTranslation();
   const { goBack } = useAppHistory();
 
+  const fetchUser = async () => {
+    const { data: userData } = await request(routes.currentUser, {
+      pathParams: {},
+    });
+    setUser(userData);
+  };
+
+  useEffect(() => {
+    fetchUser();
+  }, []);
+
   const papaparseOptions = {
     header: true,
     dynamicTyping: true,
@@ -44,13 +64,21 @@ export default function ExternalResultUpload() {
         try {
           const { res, data } = await request(routes.externalResultUploadCsv, {
             body: {
-              sample_tests: csvData,
+              sample_tests: validationErrorCount
+                ? csvData.filter(
+                    (data: IExternalResult) =>
+                      data.district === user.district_object.name
+                  )
+                : csvData,
             },
           });
 
           if (res && res.status === 202) {
             setLoading(false);
             navigate("/external_results");
+            Notification.Success({
+              msg: "External Results imported successfully",
+            });
           } else {
             if (data) {
               setErrors(data.map((err: any) => Object.entries(err)));
@@ -59,6 +87,9 @@ export default function ExternalResultUpload() {
           }
         } catch (error) {
           console.error("An error occurred:", error);
+          Notification.Error({
+            msg: "Something went wrong: " + error,
+          });
           setLoading(false);
         }
       } else {
@@ -121,6 +152,9 @@ export default function ExternalResultUpload() {
               </div>
             </div>
           </div>
+          {csvData.length > 0 && (
+            <p className="flex justify-end p-2">Total: {csvData.length}</p>
+          )}
           <div className=" rounded bg-white shadow">
             {csvData.map((data: any, index: number) => {
               return (
@@ -140,6 +174,14 @@ export default function ExternalResultUpload() {
                         })
                       : null}
                   </div>
+                  <div>
+                    {data.district !== user.district_object.name && (
+                      <p className="mt-2 flex items-center justify-center gap-1 text-red-500">
+                        <CareIcon icon="l-exclamation-triangle" /> Different
+                        districts
+                      </p>
+                    )}
+                  </div>
                 </div>
               );
             })}
@@ -149,8 +191,14 @@ export default function ExternalResultUpload() {
             <Cancel onClick={() => goBack()} />
             <Submit
               onClick={handleSubmit}
-              disabled={loading}
-              label={t("save")}
+              disabled={loading || csvData.length === validationErrorCount}
+              label={
+                validationErrorCount
+                  ? `Save Valid Records(${
+                      csvData.length - validationErrorCount
+                    })`
+                  : t("save")
+              }
               data-testid="submit-button"
             />
           </div>