96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { FC } from 'react';
|
|
import { Group } from '../../components/Group';
|
|
import { Approval } from '../../types/approval';
|
|
|
|
type UploadFilesProps = {
|
|
approval?: Approval;
|
|
handleFileUpload: (files: FileList) => void;
|
|
handleDeleteFile: (index: number) => void;
|
|
};
|
|
|
|
export const UploadFiles: FC<UploadFilesProps> = ({
|
|
approval,
|
|
handleFileUpload,
|
|
handleDeleteFile,
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-col gap-4">
|
|
<p className="mb-4 text-2xl font-bold">Approval</p>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<Group className="flex items-center gap-2">
|
|
<p className="font-bold">Upload Files:</p>
|
|
<button
|
|
className="hover:bg-blue-600 rounded bg-blue-5 p-1 text-white"
|
|
onClick={() => {
|
|
const fileInput = document.getElementById(
|
|
'fileInput',
|
|
) as HTMLInputElement;
|
|
fileInput.click();
|
|
}}
|
|
>
|
|
<div className="i-ant-design-upload-outlined text-2xl" />
|
|
</button>
|
|
<input
|
|
id="fileInput"
|
|
type="file"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) =>
|
|
e.target.files && handleFileUpload(e.target.files)
|
|
}
|
|
/>
|
|
</Group>
|
|
<table className="mt-2 w-full">
|
|
<tbody>
|
|
{approval?.files.map((file, index) => (
|
|
<tr key={index} className="border-b last:border-b-0">
|
|
<td className="py-2">
|
|
<div className="text-gray-600 dark:text-gray-400">
|
|
{file.name}
|
|
</div>
|
|
</td>
|
|
<td className="w-10 py-2 text-right">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
const url = window.URL.createObjectURL(file);
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', file.name);
|
|
|
|
document.body.appendChild(link);
|
|
|
|
link.click();
|
|
|
|
link.parentNode?.removeChild(link);
|
|
}}
|
|
className="text-red-500 hover:text-red-700 bg-transparent"
|
|
>
|
|
<div className="i-ant-design-download-outlined text-3xl" />
|
|
</button>
|
|
</td>
|
|
<td className="w-10 py-2 text-right">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteFile(index);
|
|
}}
|
|
className="text-red-500 hover:text-red-700 bg-transparent"
|
|
>
|
|
<div className="i-ant-design-delete-outlined text-3xl" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|