cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add drag and drop uploads and profile workspace polish

Browse Source
This commit is contained in:
cesnimda
2026-03-22 14:36:36 +01:00
parent 51e3d695b3
commit 8bd6f30973
2 changed files with 134 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/Attachments.tsx
+98 -46
View File
@@ -1,13 +1,16 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
Alert,
Box,
Button,
Chip,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
LinearProgress,
Table,
TableBody,
TableCell,
@@ -21,6 +24,7 @@ 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 CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";
import { api } from "../api";
import { useToast } from "../toast";
@@ -63,6 +67,9 @@ export default function Attachments({ jobId }: { jobId: number }) {
const [items, setItems] = useState<AttachmentItem[]>([]);
const [previewOpen, setPreviewOpen] = useState(false);
const [preview, setPreview] = useState<{ url: string; type: string; name: string } | null>(null);
const [dragActive, setDragActive] = useState(false);
const [uploading, setUploading] = useState(false);
const fileInputRef = useRef<HTMLInputElement | null>(null);
const load = useCallback(async () => {
try {
@@ -83,6 +90,30 @@ export default function Attachments({ jobId }: { jobId: number }) {
};
}, [preview?.url]);
const uploadFiles = useCallback(
async (files: File[]) => {
if (!files.length) return;
const data = new FormData();
files.forEach((f) => data.append("files", f));
data.append("jobId", jobId.toString());
setUploading(true);
try {
await api.post("/attachments", data, {
headers: { "Content-Type": "multipart/form-data" },
});
toast(files.length === 1 ? "File uploaded." : `${files.length} files uploaded.`, "success");
await load();
} catch {
toast("Upload failed.", "error");
} finally {
setUploading(false);
}
},
[jobId, load, toast],
);
const rename = async (a: AttachmentItem) => {
const next = await promptForValue("Rename attachment to:", a.fileName, { title: "Rename attachment", confirmLabel: "Rename" });
if (!next || next.trim() === a.fileName) return;
@@ -106,23 +137,10 @@ export default function Attachments({ jobId }: { jobId: number }) {
}
};
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 upload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files ? Array.from(e.target.files) : [];
await uploadFiles(files);
e.target.value = "";
};
const getBlobUrl = async (id: number) => {
@@ -158,17 +176,65 @@ export default function Attachments({ jobId }: { jobId: number }) {
};
const count = useMemo(() => items.length, [items.length]);
const imageCount = useMemo(() => items.filter((x) => isImageType(x.fileType)).length, [items]);
const pdfCount = useMemo(() => items.filter((x) => isPdfType(x.fileType)).length, [items]);
return (
<Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 1 }}>
<Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, mb: 1.5, flexWrap: "wrap" }}>
<Box>
<Typography sx={{ fontWeight: 800 }}>Attachments ({count})</Typography>
<Button component="label" size="small" variant="outlined">
Upload
<input type="file" multiple hidden onChange={upload} />
<Typography variant="body2" sx={{ color: "text.secondary" }}>
Upload resumes, cover letters, portfolios, and supporting files for this application.
</Typography>
<Box sx={{ display: "flex", gap: 1, mt: 1, flexWrap: "wrap" }}>
<Chip size="small" label={`${imageCount} images`} variant="outlined" />
<Chip size="small" label={`${pdfCount} PDFs`} variant="outlined" />
<Chip size="small" label="Max 10 MB each" variant="outlined" />
</Box>
</Box>
<Button component="label" size="small" variant="outlined" startIcon={<CloudUploadOutlinedIcon />} disabled={uploading}>
{uploading ? "Uploading..." : "Upload"}
<input ref={fileInputRef} type="file" multiple hidden onChange={upload} />
</Button>
</Box>
<Box
onDragOver={(e) => {
e.preventDefault();
setDragActive(true);
}}
onDragEnter={(e) => {
e.preventDefault();
setDragActive(true);
}}
onDragLeave={(e) => {
e.preventDefault();
setDragActive(false);
}}
onDrop={(e) => {
e.preventDefault();
setDragActive(false);
void uploadFiles(Array.from(e.dataTransfer.files || []));
}}
sx={{
mb: 2,
p: 2,
borderRadius: 3,
border: "1px dashed",
borderColor: dragActive ? "primary.main" : "divider",
backgroundColor: dragActive ? "action.hover" : "background.paper",
transition: "all 0.2s ease",
textAlign: "center",
}}
>
<Typography sx={{ fontWeight: 700 }}>Drag and drop files here</Typography>
<Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
or use the upload button to choose documents from your device.
</Typography>
{uploading ? <LinearProgress sx={{ mt: 1.5, borderRadius: 999 }} /> : null}
</Box>
<TableContainer sx={{ borderRadius: 3, border: "1px solid", borderColor: "divider" }}>
<Table size="small">
<TableHead>
@@ -188,7 +254,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
return (
<TableRow key={a.id} hover>
<TableCell>
<Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800 }}>
<Button size="small" variant="text" onClick={() => void download(a)} sx={{ fontWeight: 800, textTransform: "none" }}>
{a.fileName}
</Button>
</TableCell>
@@ -221,7 +287,9 @@ export default function Attachments({ jobId }: { jobId: number }) {
{items.length === 0 ? (
<TableRow>
<TableCell colSpan={6}>
<Typography sx={{ color: "text.secondary" }}>No attachments yet.</Typography>
<Alert severity="info" variant="outlined">
No attachments yet. Upload a resume, cover letter, or portfolio to keep everything tied to this job.
</Alert>
</TableCell>
</TableRow>
) : null}
@@ -231,9 +299,11 @@ export default function Attachments({ jobId }: { jobId: number }) {
<Dialog open={previewOpen} onClose={() => setPreviewOpen(false)} fullWidth maxWidth="md">
<DialogTitle>Preview{preview?.name ? `: ${preview.name}` : ""}</DialogTitle>
<DialogContent>
<DialogContent sx={{ minHeight: 220 }}>
{!preview ? null : isImageType(preview.type) ? (
<img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", borderRadius: 12 }} />
<Box sx={{ display: "flex", justifyContent: "center", py: 1 }}>
<img src={preview.url} alt={preview.name} style={{ maxWidth: "100%", maxHeight: "70vh", borderRadius: 12 }} />
</Box>
) : isPdfType(preview.type) ? (
<iframe title="pdf" src={preview.url} style={{ width: "100%", height: 560, border: 0, borderRadius: 12 }} />
) : (
@@ -241,26 +311,8 @@ export default function Attachments({ jobId }: { jobId: number }) {
)}
</DialogContent>
<DialogActions>
<Button
onClick={() => {
setPreviewOpen(false);
}}
>
Close
</Button>
</DialogActions>
</Dialog>
</Box>
);
}
ialogActions>
<Button
onClick={() => {
setPreviewOpen(false);
}}
>
Close
</Button>
{preview ? <Button onClick={() => void download({ id: 0, fileName: preview.name, fileType: preview.type, fileSize: 0, uploadDate: "" } as AttachmentItem)}>Download</Button> : null}
<Button onClick={() => setPreviewOpen(false)}>Close</Button>
</DialogActions>
</Dialog>
</Box>
job-tracker-ui/src/pages/ProfilePage.tsx
+30 -66
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useMemo, useState } from "react";
import { Alert, Avatar, Box, Button, Paper, TextField, Typography } from "@mui/material";
import { Alert, Avatar, Box, Button, Chip, Divider, Paper, TextField, Typography } from "@mui/material";
import { api } from "../api";
import GoogleAuthCard from "../components/GoogleAuthCard";
import { useToast } from "../toast";
type MeResponse = {
@@ -42,6 +43,7 @@ export default function ProfilePage() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [displayName, setDisplayName] = useState("");
const [headline, setHeadline] = useState("");
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
@@ -55,6 +57,7 @@ export default function ProfilePage() {
setFirstName(r.data?.firstName ?? "");
setLastName(r.data?.lastName ?? "");
setDisplayName(r.data?.displayName ?? "");
setHeadline(window.localStorage.getItem("profileHeadline") ?? "");
} catch {
setMe(null);
}
@@ -64,27 +67,26 @@ export default function ProfilePage() {
void loadProfile();
}, []);
const initials = useMemo(
() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]),
[me],
);
const initials = useMemo(() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]), [me]);
const isLocal = me?.provider === "local";
const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");
return (
<Paper sx={{ mt: 0, p: 2 }}>
<Paper sx={{ mt: 0, p: 2.5 }}>
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
<Avatar sx={{ width: 52, height: 52, fontWeight: 900 }}>{initials}</Avatar>
<Avatar sx={{ width: 64, height: 64, fontWeight: 900, fontSize: 24 }}>{initials}</Avatar>
<Box>
<Typography variant="h5" sx={{ fontWeight: 900 }}>
Profile
</Typography>
<Typography sx={{ color: "text.secondary" }}>
{me?.displayName || fullName || me?.userName || me?.email || "-"}
</Typography>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{me?.email || "-"} {me?.provider ? `(${me.provider})` : ""}
</Typography>
<Typography sx={{ color: "text.secondary" }}>{me?.displayName || fullName || me?.userName || me?.email || "-"}</Typography>
<Typography variant="body2" sx={{ color: "text.secondary" }}>{headline || "Add a short headline to personalize your account view."}</Typography>
</Box>
</Box>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "flex-start" }}>
<Chip label={me?.provider === "local" ? "Local account" : me?.provider === "google" ? "Google session" : "External session"} color={me?.provider === "local" ? "primary" : "default"} />
<Chip label={me?.googleLink?.linked ? `Google linked${me.googleLink.email ? `: ${me.googleLink.email}` : ""}` : "Google not linked"} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
</Box>
</Box>
@@ -104,15 +106,19 @@ export default function ProfilePage() {
<TextField label="Username" value={userName} onChange={(e) => setUserName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="First name" value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="Last name" value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth sx={{ gridColumn: "1 / -1" }} />
<TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth />
<TextField
label="Profile headline"
value={headline}
onChange={(e) => setHeadline(e.target.value)}
helperText="Stored only in this browser to personalize your workspace."
fullWidth
/>
<Box sx={{ gridColumn: "1 / -1" }}>
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
Google account: {me?.googleLink?.linked ? `Linked${me.googleLink.email ? ` to ${me.googleLink.email}` : ""}` : "Not linked"}
</Typography>
</Box>
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
<Button
variant="contained"
disabled={!isLocal || loading}
@@ -120,6 +126,7 @@ export default function ProfilePage() {
setLoading(true);
try {
await api.put("/auth/profile", { email, userName, firstName, lastName, displayName });
window.localStorage.setItem("profileHeadline", headline.trim());
await loadProfile();
toast("Profile updated.", "success");
} catch (e: any) {
@@ -135,30 +142,13 @@ export default function ProfilePage() {
</Box>
<Box sx={{ gridColumn: "1 / -1", mt: 1 }}>
<Divider sx={{ mb: 2 }} />
<Typography variant="h6">Change password</Typography>
{!isLocal ? (
<Typography sx={{ color: "text.secondary" }}>
Password changes are only available for local accounts.
</Typography>
) : null}
{!isLocal ? <Typography sx={{ color: "text.secondary" }}>Password changes are only available for local accounts.</Typography> : null}
</Box>
<TextField
label="Current password"
type="password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
disabled={!isLocal}
fullWidth
/>
<TextField
label="New password"
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
disabled={!isLocal}
fullWidth
/>
<TextField label="Current password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="New password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} disabled={!isLocal} fullWidth />
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
<Button
@@ -167,33 +157,7 @@ export default function ProfilePage() {
onClick={async () => {
setLoading(true);
try {
await api.post("/auth/change-password", {
currentPassword,
newPassword,
});
setCurrentPassword("");
setNewPassword("");
toast("Password updated.", "success");
} catch (e: any) {
const msg = e?.response?.data || e?.message || "Failed to change password.";
toast(String(msg), "error");
} finally {
setLoading(false);
}
}}
>
Update password
</Button>
</Box>
</Box>
</Paper>
);
}
try {
await api.post("/auth/change-password", {
currentPassword,
newPassword,
});
await api.post("/auth/change-password", { currentPassword, newPassword });
setCurrentPassword("");
setNewPassword("");
toast("Password updated.", "success");