Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Sample File Upload and upgrade buttons to Shadcn button #9157

Merged
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
8448989
Added Clear Image functionality
nithish1018 Nov 19, 2024
662f437
removed unneccessary line
nithish1018 Nov 19, 2024
cef5438
Added bot suggestions
nithish1018 Nov 19, 2024
ec36ef5
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 20, 2024
a7043f6
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 21, 2024
a341da1
Fixed search icon overlay
nithish1018 Nov 21, 2024
5403593
removing unrelated change
nithish1018 Nov 21, 2024
9d3de71
Updated file upload with useFileUpload hook
nithish1018 Nov 22, 2024
bae2649
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 22, 2024
52100c4
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 25, 2024
18ad9b5
Added types for sample
nithish1018 Nov 26, 2024
180fa67
Merge branch 'develop' into issues/9153/addclearimage
shivankacker Nov 26, 2024
ceba9fb
\Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 27, 2024
c972c5b
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 27, 2024
5489cb6
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 28, 2024
3c6eb0e
Updated the file upload UI
nithish1018 Nov 28, 2024
b48a7e3
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 29, 2024
3801776
Updated Button to shadcn button
nithish1018 Nov 29, 2024
6e180b3
removed unnecessary line
nithish1018 Nov 29, 2024
4598c0c
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 29, 2024
28ccbc4
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 30, 2024
fd0bf27
removed remove icon in favour of discard button
nithish1018 Nov 30, 2024
e86f229
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 30, 2024
66cf623
updated primary button color
nithish1018 Nov 30, 2024
48a604f
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Nov 30, 2024
37cfc0e
fixed eslint issues
nithish1018 Nov 30, 2024
76ebf4f
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Dec 1, 2024
0af4cf0
Merge branch 'develop' into issues/9153/addclearimage
nithish1018 Dec 2, 2024
cd09c74
removed button array
nithish1018 Dec 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1297,6 +1297,7 @@
"upload_headings__patient": "Upload New Patient File",
"upload_headings__sample_report": "Upload Sample Report",
"upload_headings__supporting_info": "Upload Supporting Info",
"upload_report": "Upload Report",
"uploading": "Uploading",
"use_existing_abha_address": "Use Existing ABHA Address",
"user_deleted_successfuly": "User Deleted Successfuly",
Expand Down
140 changes: 40 additions & 100 deletions src/components/Patient/UpdateStatusDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useReducer, useState } from "react";
import { useEffect, useReducer } from "react";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";
Expand All @@ -10,22 +10,18 @@ import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
import TextFormField from "@/components/Form/FormFields/TextFormField";
import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
import {
CreateFileResponse,
SampleTestModel,
} from "@/components/Patient/models";

import useFileUpload from "@/hooks/useFileUpload";

import {
HEADER_CONTENT_TYPES,
SAMPLE_FLOW_RULES,
SAMPLE_TEST_RESULT,
SAMPLE_TEST_STATUS,
} from "@/common/constants";

import * as Notification from "@/Utils/Notifications";
import routes from "@/Utils/request/api";
import request from "@/Utils/request/request";
import uploadFile from "@/Utils/request/uploadFile";

import { SampleTestModel } from "./models";

interface Props {
sample: SampleTestModel;
Expand All @@ -34,7 +30,6 @@ interface Props {
}

const statusChoices = [...SAMPLE_TEST_STATUS];

const statusFlow = { ...SAMPLE_FLOW_RULES };

const initForm: any = {
Expand Down Expand Up @@ -65,11 +60,12 @@ const UpdateStatusDialog = (props: Props) => {
const { t } = useTranslation();
const { sample, handleOk, handleCancel } = props;
const [state, dispatch] = useReducer(updateStatusReducer, initialState);
const [file, setfile] = useState<File>();
const [contentType, setcontentType] = useState<string>("");
const [uploadPercent, setUploadPercent] = useState(0);
const [uploadStarted, setUploadStarted] = useState<boolean>(false);
const [uploadDone, setUploadDone] = useState<boolean>(false);

const fileUpload = useFileUpload({
type: "SAMPLE_MANAGEMENT",
allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
allowNameFallback: true,
});

const currentStatus = SAMPLE_TEST_STATUS.find(
(i) => i.text === sample.status,
Expand Down Expand Up @@ -104,79 +100,20 @@ const UpdateStatusDialog = (props: Props) => {
dispatch({ type: "set_form", form });
};

const uploadfile = (data: CreateFileResponse) => {
const url = data.signed_url;
const internal_name = data.internal_name;

const f = file;
if (f === undefined) return;
const newFile = new File([f], `${internal_name}`);

uploadFile(
url,
newFile,
"PUT",
{
"Content-Type": contentType,
"Content-disposition": "inline",
},
(xhr: XMLHttpRequest) => {
if (xhr.status >= 200 && xhr.status < 300) {
setUploadStarted(false);
setUploadDone(true);
request(routes.editUpload, {
pathParams: {
id: data.id,
fileType: "SAMPLE_MANAGEMENT",
associatingId: sample.id?.toString() ?? "",
},
body: { upload_completed: true },
});
Notification.Success({ msg: "File Uploaded Successfully" });
} else {
setUploadStarted(false);
}
},
setUploadPercent,
() => {
setUploadStarted(false);
},
);
};

const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files == null) {
throw new Error("Error finding e.target.files");
}
setfile(e.target.files[0]);
const fileName = e.target.files[0].name;
const ext: string = fileName.split(".")[1];
setcontentType(
HEADER_CONTENT_TYPES[ext as keyof typeof HEADER_CONTENT_TYPES],
);
return e.target.files[0];
};
const handleUpload = async () => {
const f = file;
if (f === undefined) return;
const category = "UNSPECIFIED";
const name = f.name;
setUploadStarted(true);
setUploadDone(false);

const { data } = await request(routes.createUpload, {
body: {
original_name: name,
file_type: "SAMPLE_MANAGEMENT",
name: `${sample.patient_name} Sample Report`,
associating_id: sample.id ?? "",
file_category: category,
mime_type: contentType,
},
});

if (data) {
uploadfile(data);
if (fileUpload.files.length > 0) {
if (sample.id) {
await fileUpload.handleFileUpload(sample.id);
} else {
Notification.Error({ msg: "Sample ID is missing" });
}
if (!fileUpload.error) {
Notification.Success({ msg: "File Uploaded Successfully" });
} else {
Notification.Error({ msg: `Upload failed: ${fileUpload.error}` });
}
} else {
Notification.Error({ msg: "No file selected for upload" });
}
};

Expand Down Expand Up @@ -218,31 +155,34 @@ const UpdateStatusDialog = (props: Props) => {
onChange={handleChange}
/>
<span className="font-semibold leading-relaxed">
Upload Report :
{t("upload_report")}:
</span>
{uploadStarted ? (
<LinearProgressWithLabel value={uploadPercent} />
{fileUpload.progress !== null &&
fileUpload.progress !== undefined ? (
<LinearProgressWithLabel value={fileUpload.progress} />
) : (
<div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
<label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
<CareIcon icon="l-file-upload-alt" className="text-lg" />
<span className="max-w-full truncate">
{file ? file.name : t("choose_file")}
{fileUpload.files?.[0]?.name || t("choose_file")}
</span>
<input
title="changeFile"
onChange={onFileChange}
type="file"
hidden
/>
<fileUpload.Input />
</label>
{fileUpload.fileNames.length > 0 && (
<CareIcon
icon="l-times"
className="text-lg cursor-pointer mt-2 mr-4"
onClick={fileUpload.clearFiles}
/>
)}
<Submit
type="submit"
type="button"
onClick={handleUpload}
disabled={uploadDone}
disabled={!fileUpload.files.length}
>
<CareIcon icon="l-cloud-upload" className="text-lg" />
<span>Upload</span>
<span>{t("upload")}</span>
</Submit>
</div>
)}
Expand Down
Loading