Show asset import progress

ohcnetwork · Oct 5, 2023 · 5f4585a · 5f4585a
1 parent 7df0f13
commit 5f4585a
Showing 1 changed file with 43 additions and 25 deletions.
diff --git a/src/Components/Assets/AssetImportModal.tsx b/src/Components/Assets/AssetImportModal.tsx
@@ -8,7 +8,6 @@ import { Cancel, Submit } from "../Common/components/ButtonV2";
 import { listFacilityAssetLocation } from "../../Redux/actions";
 import { useDispatch } from "react-redux";
 import { Link } from "raviger";
-import SelectMenuV2 from "../Form/SelectMenuV2";
 import readXlsxFile from "read-excel-file";
 import {
   LocalStorageKeys,
@@ -17,6 +16,7 @@ import {
 import { parseCsvFile } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import DialogModal from "../Common/Dialog";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
 
 interface Props {
   open: boolean;
@@ -25,14 +25,18 @@ interface Props {
 }
 
 const AssetImportModal = ({ open, onClose, facility }: Props) => {
-  const [isImporting, setIsUploading] = useState(false);
+  const [isImporting, setIsImporting] = useState(false);
   const [selectedFile, setSelectedFile] = useState<any>();
   const [preview, setPreview] =
     useState<(AssetData & { notes?: string; last_serviced_on?: string })[]>();
   const [location, setLocation] = useState("");
+  const [errors, setErrors] = useState<any>({
+    location: "",
+  });
   const [locations, setLocations] = useState<any>([]);
   const dispatchAction: any = useDispatch();
   const { sample_format_asset_import } = useConfig();
+  const [locationsLoading, setLocationsLoading] = useState(false);
 
   const closeModal = () => {
     setPreview(undefined);
@@ -41,9 +45,11 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
   };
 
   useEffect(() => {
+    setLocationsLoading(true);
     dispatchAction(
       listFacilityAssetLocation({}, { facility_external_id: facility.id })
     ).then(({ data }: any) => {
+      setLocationsLoading(false);
       if (data.count > 0) {
         setLocations(data.results);
       }
@@ -110,7 +116,16 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
       closeModal();
       return;
     }
+    if (!location) {
+      setErrors({
+        ...errors,
+        location: "Please select a location",
+      });
+      return;
+    }
+    setIsImporting(true);
     let error = false;
+    Notification.Success({ msg: "Importing assets..." });
 
     for (const asset of preview || []) {
       const asset_data: any = {
@@ -156,16 +171,22 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
         });
         error = true;
       } else {
-        if (preview) setPreview(preview.filter((a) => a.id !== asset.id));
+        setPreview((preview) => {
+          return preview?.slice(1);
+        });
       }
     }
     if (!error) {
       Notification.Success({ msg: "Assets imported successfully" });
       await sleep(1000);
-      setIsUploading(false);
-      closeModal();
+      setIsImporting(false);
       window.location.reload();
-    } else Notification.Error({ msg: "Error importing some assets" });
+    } else {
+      Notification.Error({ msg: "Error importing some assets" });
+      await sleep(1000);
+      setIsImporting(false);
+      closeModal();
+    }
   };
 
   const dragProps = useDragAndDrop();
@@ -193,7 +214,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
       fixedWidth={false}
     >
       <span className="mt-1 text-gray-700">{facility.name}</span>
-      {locations.length === 0 ? (
+      {!locationsLoading && locations.length === 0 ? (
         <>
           <div className="flex h-full flex-col items-center justify-center">
             <h1 className="m-7 text-2xl font-medium text-gray-700">
@@ -218,31 +239,28 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
           {preview && preview?.length > 0 ? (
             <div className="flex flex-col items-center justify-center rounded-lg">
               <h1 className="m-7 text-2xl font-medium text-gray-700">
-                {preview.length} assets will be imported
+                {preview.length} assets {isImporting ? "are being" : "will be"}{" "}
+                imported
               </h1>
               <div className="w-1/2 p-4">
-                <label htmlFor="asset-location">
-                  Select location for import *
+                <label htmlFor="asset-location" className="flex gap-1">
+                  Select location for import{" "}
+                  <p className="font-semibold text-danger-500">*</p>
                 </label>
                 <div className="mt-2" data-testid="select-import-location">
-                  <SelectMenuV2
-                    required
-                    options={[
-                      {
-                        title: "Select",
-                        description: "Select the location",
-                        value: "0",
-                      },
-                      ...locations.map((location: any) => ({
-                        title: location.name,
-                        description: location.facility.name,
-                        value: location.id,
-                      })),
-                    ]}
+                  <SelectFormField
+                    name="asset-import-location"
+                    options={locations.map((location: any) => ({
+                      title: location.name,
+                      description: location.facility.name,
+                      value: location.id,
+                    }))}
                     optionLabel={(o) => o.title}
                     optionValue={(o) => o.value}
+                    placeholder="Select a location"
                     value={location}
-                    onChange={(e) => setLocation(e)}
+                    onChange={({ value }) => setLocation(value)}
+                    error={errors.location}
                   />
                 </div>
               </div>