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.

Sign up for GitHub

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

Fix FileUploadDialog overflow | Use ShadCN component #10047

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
+35 −16
Open

Fix FileUploadDialog overflow | Use ShadCN component #10047

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c924585
Fix FileUploadDialog overflow | Use ShadCN component
rajku-dev Jan 19, 2025
44dd07c
revert padding
rajku-dev Jan 19, 2025
c24a77d
revert css
rajku-dev Jan 19, 2025
e34edf3
Update src/components/Files/FilesTab.tsx
rajku-dev Jan 19, 2025
cb68635
Fix Lint
rajku-dev Jan 19, 2025
71c2e8a
fix overfitting
rajku-dev Jan 20, 2025
0640bfe
Merge branch 'develop' into issue/10046/modal-overflow
rajku-dev Jan 20, 2025
b0d493d
add tooltip for file name
rajku-dev Jan 20, 2025
95d6e12
Merge branch 'issue/10046/modal-overflow' of https://github.com/rajku…
rajku-dev Jan 20, 2025
4cc0c3e
Merge branch 'develop' into issue/10046/modal-overflow
rajku-dev Jan 20, 2025
fba5b5b
Merge branch 'develop' into issue/10046/modal-overflow
rajku-dev Jan 21, 2025
3b632d6
Merge branch 'develop' into issue/10046/modal-overflow
rajku-dev Jan 22, 2025
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
51 changes: 35 additions & 16 deletions src/components/Files/FilesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import {
Table,
Expand All @@ -38,7 +40,6 @@ import {

import AudioPlayer from "@/components/Common/AudioPlayer";
import Loading from "@/components/Common/Loading";
import TextFormField from "@/components/Form/FormFields/TextFormField";
import { FileUploadModel } from "@/components/Patient/models";

import useFileManager from "@/hooks/useFileManager";
Expand Down Expand Up @@ -576,7 +577,7 @@ const FileUploadDialog = ({
aria-labelledby="file-upload-dialog"
>
<DialogContent
className="mb-8 rounded-lg p-5"
className="mb-8 rounded-lg p-5 max-w-fit"
rajku-dev marked this conversation as resolved.
Show resolved Hide resolved
aria-describedby="file-upload"
>
<DialogHeader>
Expand All @@ -590,7 +591,9 @@ const FileUploadDialog = ({
<div className="flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2">
<span className="flex items-center truncate">
<CareIcon icon="l-paperclip" className="mr-2 shrink-0" />
<span className="truncate">{file.name}</span>
<span className="truncate max-w-xs" title={file.name}>
{file.name}
</span>
</span>
<Button
variant="ghost"
Expand All @@ -601,19 +604,35 @@ const FileUploadDialog = ({
<CareIcon icon="l-times" />
</Button>
</div>
<TextFormField
name={`file_name_${index}`}
type="text"
label={t("enter_file_name")}
id={`upload-file-name-${index}`}
required
value={fileUpload.fileNames[index] || ""}
disabled={fileUpload.uploading}
onChange={(e) => fileUpload.setFileName(e.value, index)}
error={
index === 0 && fileUpload.error ? fileUpload.error : undefined
}
/>
<div className="space-y-2">
<Label
htmlFor={`upload-file-name-${index}`}
className="text-sm font-medium text-gray-700"
>
{t("enter_file_name")}
</Label>
<Input
name={`file_name_${index}`}
type="text"
id={`upload-file-name-${index}`}
required
className={
index === 0 && fileUpload.error
? "border-red-500 focus:ring-red-500"
: "border-gray-300 focus:ring-primary"
}
value={fileUpload.fileNames[index] || ""}
disabled={fileUpload.uploading}
onChange={(e) =>
fileUpload.setFileName(e.target.value, index)
}
/>
{index === 0 && fileUpload.error && (
<p className="mt-1 text-sm text-red-500">
{fileUpload.error}
</p>
)}
</div>
</div>
))}
</div>
Expand Down
Loading