Skip to content

Commit

Permalink
Download press is different section now shows loader until file is re…
Browse files Browse the repository at this point in the history 
…ady. (#2453)
  • Loading branch information
@ishanExtreme
ishanExtreme committed May 25, 2022
1 parent 560568d commit 98e66d0
Show file tree
Hide file tree
Showing 9 changed files with 214 additions and 96 deletions.
75 changes: 44 additions & 31 deletions src/Components/ExternalResult/ResultList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,42 @@
import loadable from "@loadable/component";
import Grid from "@material-ui/core/Grid";
import { Button } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import { navigate, useQueryParams } from "raviger";
import { parsePhoneNumberFromString } from "libphonenumber-js";
// import { parsePhoneNumberFromString } from "libphonenumber-js";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { externalResultList } from "../../Redux/actions";
import { PhoneNumberField } from "../Common/HelperInputFields";
// import { PhoneNumberField } from "../Common/HelperInputFields";
import Pagination from "../Common/Pagination";
import { InputSearchBox } from "../Common/SearchBox";
import { make as SlideOver } from "../Common/SlideOver.gen";
import ListFilter from "./ListFilter";
import moment from "moment";
import { CSVLink } from "react-csv";
import { externalResultFormatter } from "./Commons";
// import { externalResultFormatter } from "./Commons";
import GetAppIcon from "@material-ui/icons/GetApp";
import FacilitiesSelectDialogue from "./FacilitiesSelectDialogue";
import { FacilityModel } from "../Facility/models";

const Loading = loadable(() => import("../Common/Loading"));
const PageTitle = loadable(() => import("../Common/PageTitle"));

function Badge(props: { color: string; icon: string; text: string }) {
return (
<span
className="m-1 h-full inline-flex items-center px-3 py-1 rounded-full text-xs font-medium leading-4 bg-gray-100 text-gray-700"
title={props.text}
>
<i
className={
"mr-2 text-md text-" + props.color + "-500 fas fa-" + props.icon
}
></i>
{props.text}
</span>
);
}
// function Badge(props: { color: string; icon: string; text: string }) {
// return (
// <span
// className="m-1 h-full inline-flex items-center px-3 py-1 rounded-full text-xs font-medium leading-4 bg-gray-100 text-gray-700"
// title={props.text}
// >
// <i
// className={
// "mr-2 text-md text-" + props.color + "-500 fas fa-" + props.icon
// }
// ></i>
// {props.text}
// </span>
// );
// }

const RESULT_LIMIT = 14;
const now = moment().format("DD-MM-YYYY:hh:mm:ss");
Expand All @@ -49,6 +50,8 @@ export default function ResultList() {
const [qParams, setQueryParams] = useQueryParams();
const [showFilters, setShowFilters] = useState(false);
const [showDialog, setShowDialog] = useState(false);
// state to change download button to loading while file is not ready
const [downloadLoading, setDownloadLoading] = useState(false);
const [selectedFacility, setSelectedFacility] = useState<FacilityModel>({
name: "",
});
Expand All @@ -57,11 +60,11 @@ export default function ResultList() {
lsgList: [],
wardList: [],
});

let manageResults: any = null;
const local = JSON.parse(localStorage.getItem("external-filters") || "{}");
const localLsgWard = JSON.parse(
localStorage.getItem("lsg-ward-data") || '{"lsgList": [], "wardList": []}'
localStorage.getItem("lsg-ward-data") ||
JSON.stringify({ lsgList: [], wardList: [] })
);

useEffect(() => {
Expand Down Expand Up @@ -135,9 +138,9 @@ export default function ResultList() {
updateQuery({ ...qParams, mobile_number: value, page: 1 });
};

const handleFilter = (value: string) => {
updateQuery({ disease_status: value, page: 1 });
};
// const handleFilter = (value: string) => {
// updateQuery({ disease_status: value, page: 1 });
// };

const applyFilter = (data: any) => {
const filter = { ...qParams, ...data };
Expand Down Expand Up @@ -212,11 +215,15 @@ export default function ResultList() {
};

const triggerDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const res = await dispatch(
externalResultList({ ...qParams, csv: true }, "externalResultList")
);
// file ready to download
setDownloadLoading(false);
setDownloadFile(res?.data);
document.getElementById(`downloadCSV`)?.click();
document.getElementById("downloadCSV")?.click();
};

const badge = (key: string, value: any, paramKey: string) => {
Expand All @@ -228,7 +235,7 @@ export default function ResultList() {
{value}
<i
className="fas fa-times ml-2 rounded-full cursor-pointer hover:bg-gray-500 px-1 py-0.5"
onClick={(e) => removeFilter(paramKey)}
onClick={() => removeFilter(paramKey)}
></i>
</span>
)
Expand All @@ -247,7 +254,7 @@ export default function ResultList() {
{value.name}
<i
className="fas fa-times ml-2 rounded-full cursor-pointer hover:bg-gray-500 px-1 py-0.5"
onClick={(e) =>
onClick={() =>
paramKey === "local_bodies"
? removeLSGFilter(paramKey, value.id)
: paramKey === "wards"
Expand All @@ -262,7 +269,7 @@ export default function ResultList() {

let resultList: any[] = [];
if (data && data.length) {
resultList = data.map((result: any, idx: number) => {
resultList = data.map((result: any) => {
const resultUrl = `/external_results/${result.id}`;
return (
<tr key={`usr_${result.id}`} className="bg-white">
Expand Down Expand Up @@ -412,11 +419,17 @@ export default function ResultList() {
Upload List
</div>
<div
className="btn mt-8 ml-4 gap-2 btn-primary"
className={`btn mt-8 ml-4 gap-2 btn-primary ${
downloadLoading ? "pointer-events-none" : ""
}`}
onClick={triggerDownload}
>
<span>
<GetAppIcon className="cursor-pointer" />
<span className="flex flex-row justify-center">
{downloadLoading ? (
<CircularProgress className="w-5 h-5 mr-1 text-white" />
) : (
<GetAppIcon className="cursor-pointer" />
)}
Export
</span>
</div>
Expand Down Expand Up @@ -510,7 +523,7 @@ export default function ResultList() {
filename={`external-result--${now}.csv`}
target="_blank"
className="hidden"
id={`downloadCSV`}
id={"downloadCSV"}
/>
<SlideOver show={showFilters} setShow={setShowFilters}>
<div className="bg-white min-h-screen p-4">
Expand Down
72 changes: 49 additions & 23 deletions src/Components/Facility/HospitalList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ const HospitalListPage = (props: any) => {
const userType = currentUser.data.user_type;
const [notifyMessage, setNotifyMessage] = useState("");
const [modalFor, setModalFor] = useState(undefined);
// state to change download button to loading while file is not ready
const [downloadLoading, setDownloadLoading] = useState(false);
const { t } = props;
const limit = 14;

Expand Down Expand Up @@ -205,25 +207,41 @@ const HospitalListPage = (props: any) => {
};

const handleDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const res = await dispatchAction(downloadFacility());
// file ready to download
setDownloadLoading(false);
setDownloadFile(res.data);
document.getElementById("facilityDownloader")?.click();
};

const handleCapacityDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const cap = await dispatchAction(downloadFacilityCapacity());
// file ready to download
setDownloadLoading(false);
setCapacityDownloadFile(cap.data);
document.getElementById("capacityDownloader")?.click();
};

const handleDoctorsDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const doc = await dispatchAction(downloadFacilityDoctors());
// file ready to download
setDownloadLoading(false);
setDoctorsDownloadFile(doc.data);
document.getElementById("doctorsDownloader")?.click();
};

const handleTriageDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const tri = await dispatchAction(downloadFacilityTriage());
// file ready to download
setDownloadLoading(false);
setTriageDownloadFile(tri.data);
document.getElementById("triageDownloader")?.click();
};
Expand Down Expand Up @@ -539,30 +557,38 @@ const HospitalListPage = (props: any) => {
setdownloadSelect(e.target.value);
}}
/>
<button
className="bg-primary-600 hover:shadow-md px-2 ml-2 my-2 rounded"
onClick={handleDownloader}
>
<svg
className="h-6 w-6"
viewBox="0 0 16 16"
fill="white"
xmlns="http://www.w3.org/2000/svg"

{downloadLoading ? (
<div className="px-2 ml-2 my-2 pt-1 rounded">
<CircularProgress className="text-primary-600 w-6 h-6" />
</div>
) : (
<button
className="bg-primary-600 hover:shadow-md px-2 ml-2 my-2 rounded"
onClick={handleDownloader}
disabled={downloadLoading}
>
<path
fillRule="evenodd"
d="M.5 8a.5.5 0 0 1 .5.5V12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8.5a.5.5 0 0 1 1 0V12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5A.5.5 0 0 1 .5 8z"
/>
<path
fillRule="evenodd"
d="M5 7.5a.5.5 0 0 1 .707 0L8 9.793 10.293 7.5a.5.5 0 1 1 .707.707l-2.646 2.647a.5.5 0 0 1-.708 0L5 8.207A.5.5 0 0 1 5 7.5z"
/>
<path
fillRule="evenodd"
d="M8 1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0v-8A.5.5 0 0 1 8 1z"
/>
</svg>
</button>
<svg
className="h-6 w-6"
viewBox="0 0 16 16"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M.5 8a.5.5 0 0 1 .5.5V12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8.5a.5.5 0 0 1 1 0V12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5A.5.5 0 0 1 .5 8z"
/>
<path
fillRule="evenodd"
d="M5 7.5a.5.5 0 0 1 .707 0L8 9.793 10.293 7.5a.5.5 0 1 1 .707.707l-2.646 2.647a.5.5 0 0 1-.708 0L5 8.207A.5.5 0 0 1 5 7.5z"
/>
<path
fillRule="evenodd"
d="M8 1a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0v-8A.5.5 0 0 1 8 1z"
/>
</svg>
</button>
)}
</div>
</div>
<div className="hidden">
Expand Down
18 changes: 14 additions & 4 deletions src/Components/Patient/SampleViewAdmin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export default function SampleViewAdmin() {
const [fetchFlag, callFetchData] = useState(false);
const [showFilters, setShowFilters] = useState(false);
const [facilityName, setFacilityName] = useState("");
// state to change download button to loading while file is not ready
const [downloadLoading, setDownloadLoading] = useState(false);
const [statusDialog, setStatusDialog] = useState<{
show: boolean;
sample: SampleTestModel;
Expand Down Expand Up @@ -113,7 +115,11 @@ export default function SampleViewAdmin() {
);

const triggerDownload = async () => {
// while is getting ready
setDownloadLoading(true);
const res = await dispatch(downloadSampleTests({ ...qParams }));
// file ready to download
setDownloadLoading(false);
setDownloadFile(res.data);
document.getElementById("download-sample-tests")?.click();
};
Expand Down Expand Up @@ -418,10 +424,14 @@ export default function SampleViewAdmin() {
className="mx-3 md:mx-8"
breadcrumbs={false}
componentRight={
<GetAppIcon
className="cursor-pointer mt-2 ml-2"
onClick={triggerDownload}
/>
downloadLoading ? (
<CircularProgress className="mt-2 ml-2 w-6 h-6 text-black" />
) : (
<GetAppIcon
className="cursor-pointer mt-2 ml-2"
onClick={triggerDownload}
/>
)
}
/>
<div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3 m-4 md:px-4">
Expand Down
Loading

0 comments on commit 98e66d0

Please sign in to comment.