First Commit
This commit is contained in:
cesnimda
@@ -0,0 +1,253 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
|
||||
|
||||
import { api } from "../api";
|
||||
import { useToast } from "../toast";
|
||||
|
||||
interface AttachmentItem {
|
||||
id: number;
|
||||
fileName: string;
|
||||
uploadDate: string;
|
||||
fileType: string;
|
||||
fileSize: number;
|
||||
}
|
||||
|
||||
function fmtSize(n: number) {
|
||||
if (!n) return "";
|
||||
const kb = n / 1024;
|
||||
if (kb < 1024) return `${kb.toFixed(0)} KB`;
|
||||
return `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function isImageType(t: string) {
|
||||
return (t || "").toLowerCase().startsWith("image/");
|
||||
}
|
||||
|
||||
function isPdfType(t: string) {
|
||||
return (t || "").toLowerCase() === "application/pdf";
|
||||
}
|
||||
|
||||
function guessKind(fileName: string): string {
|
||||
const n = (fileName || "").toLowerCase();
|
||||
if (n.includes("cover")) return "Cover letter";
|
||||
if (n.includes("resume") || n.includes("résumé") || n.includes(" cv") || n.endsWith("cv.pdf")) return "Resume";
|
||||
if (n.includes("portfolio")) return "Portfolio";
|
||||
return "Attachment";
|
||||
}
|
||||
|
||||
export default function Attachments({ jobId }: { jobId: number }) {
|
||||
const { toast } = useToast();
|
||||
const [items, setItems] = useState<AttachmentItem[]>([]);
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [preview, setPreview] = useState<{ url: string; type: string; name: string } | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const res = await api.get<AttachmentItem[]>(`/attachments/${jobId}`);
|
||||
setItems(res.data);
|
||||
} catch {
|
||||
// non-fatal
|
||||
}
|
||||
}, [jobId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (preview?.url) URL.revokeObjectURL(preview.url);
|
||||
};
|
||||
}, [preview?.url]);
|
||||
|
||||
const rename = async (a: AttachmentItem) => {
|
||||
const next = window.prompt("Rename attachment to:", a.fileName);
|
||||
if (!next || next.trim() === a.fileName) return;
|
||||
try {
|
||||
await api.patch(`/attachments/${a.id}`, { fileName: next.trim() });
|
||||
toast("Renamed.", "success");
|
||||
await load();
|
||||
} catch {
|
||||
toast("Rename failed.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (a: AttachmentItem) => {
|
||||
if (!window.confirm(`Delete attachment "${a.fileName}"?`)) return;
|
||||
try {
|
||||
await api.delete(`/attachments/${a.id}`);
|
||||
toast("Deleted attachment.", "success");
|
||||
await load();
|
||||
} catch {
|
||||
toast("Delete failed.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const upload = async (e: any) => {
|
||||
if (!e.target.files) return;
|
||||
|
||||
const data = new FormData();
|
||||
const files = Array.from(e.target.files) as File[];
|
||||
files.forEach((f) => data.append("files", f));
|
||||
data.append("jobId", jobId.toString());
|
||||
|
||||
try {
|
||||
await api.post("/attachments", data, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
toast("Files uploaded.", "success");
|
||||
await load();
|
||||
} catch {
|
||||
toast("Upload failed.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const getBlobUrl = async (id: number) => {
|
||||
const res = await api.get(`/attachments/download/${id}`, { responseType: "blob" });
|
||||
const blob: Blob = res.data;
|
||||
return URL.createObjectURL(blob);
|
||||
};
|
||||
|
||||
const download = async (a: AttachmentItem) => {
|
||||
try {
|
||||
const url = await getBlobUrl(a.id);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = a.fileName || `attachment_${a.id}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(url), 5000);
|
||||
} catch {
|
||||
toast("Download failed.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const openPreview = async (a: AttachmentItem) => {
|
||||
try {
|
||||
if (preview?.url) URL.revokeObjectURL(preview.url);
|
||||
const url = await getBlobUrl(a.id);
|
||||
setPreview({ url, type: a.fileType || "", name: a.fileName });
|
||||
setPreviewOpen(true);
|
||||
} catch {
|
||||
toast("Preview failed.", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const count = useMemo(() => items.length, [items.length]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 1 }}>
|
||||
<Typography sx={{ fontWeight: 800 }}>Attachments ({count})</Typography>
|
||||
<Button component="label" size="small" variant="outlined">
|
||||
Upload
|
||||
<input type="file" multiple hidden onChange={upload} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer sx={{ borderRadius: 2, border: "1px solid", borderColor: "divider" }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell sx={{ width: 140 }}>Kind</TableCell>
|
||||
<TableCell sx={{ width: 120 }}>Type</TableCell>
|
||||
<TableCell sx={{ width: 90 }}>Size</TableCell>
|
||||
<TableCell sx={{ width: 170 }}>Uploaded</TableCell>
|
||||
<TableCell sx={{ width: 170 }}>Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{items.map((a) => {
|
||||
const canPreview = isImageType(a.fileType) || isPdfType(a.fileType);
|
||||
const kind = guessKind(a.fileName);
|
||||
return (
|
||||
<TableRow key={a.id} hover>
|
||||
<TableCell>
|
||||
<Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800 }}>
|
||||
{a.fileName}
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell>{kind}</TableCell>
|
||||
<TableCell sx={{ color: "text.secondary" }}>{a.fileType ? a.fileType.replace("application/", "") : ""}</TableCell>
|
||||
<TableCell sx={{ color: "text.secondary" }}>{a.fileSize ? fmtSize(a.fileSize) : ""}</TableCell>
|
||||
<TableCell sx={{ color: "text.secondary" }}>{a.uploadDate ? new Date(a.uploadDate).toLocaleString() : ""}</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: "flex", gap: 0.5, flex: "0 0 auto" }}>
|
||||
{canPreview ? (
|
||||
<IconButton size="small" onClick={() => void openPreview(a)} title="Preview">
|
||||
<VisibilityOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
) : null}
|
||||
<IconButton size="small" onClick={() => void download(a)} title="Download">
|
||||
<DownloadIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={() => void rename(a)} title="Rename">
|
||||
<DriveFileRenameOutlineIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={() => void remove(a)} title="Delete">
|
||||
<DeleteOutlineIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
|
||||
{items.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6}>
|
||||
<Typography sx={{ color: "text.secondary" }}>No attachments yet.</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : null}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Dialog open={previewOpen} onClose={() => setPreviewOpen(false)} fullWidth maxWidth="md">
|
||||
<DialogTitle>Preview{preview?.name ? `: ${preview.name}` : ""}</DialogTitle>
|
||||
<DialogContent>
|
||||
{!preview ? null : isImageType(preview.type) ? (
|
||||
<img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", borderRadius: 12 }} />
|
||||
) : isPdfType(preview.type) ? (
|
||||
<iframe title="pdf" src={preview.url} style={{ width: "100%", height: 560, border: 0, borderRadius: 12 }} />
|
||||
) : (
|
||||
<Typography sx={{ color: "text.secondary" }}>No inline preview for this file type.</Typography>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPreviewOpen(false);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user