cesnimda
230 lines
12 KiB
TypeScript
230 lines
12 KiB
TypeScript
import React, { useEffect, useMemo, useState } from "react";
|
|
|
|
import {
|
|
Autocomplete,
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
FormControlLabel,
|
|
Checkbox,
|
|
MenuItem,
|
|
Paper,
|
|
TextField,
|
|
Typography,
|
|
Chip,
|
|
} from "@mui/material";
|
|
|
|
import { api } from "../api";
|
|
import { Company, JobApplication } from "../types";
|
|
import { useToast } from "../toast";
|
|
import { useCompanies } from "../hooks/useCompanies";
|
|
import TagsInput from "./TagsInput";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
jobId: number | null;
|
|
onClose: () => void;
|
|
onSaved: () => void;
|
|
}
|
|
|
|
const STATUS_OPTIONS = ["Applied", "Waiting", "Interview", "Offer", "Rejected", "Ghosted"] as const;
|
|
|
|
function toDateInputValue(isoLike?: string): string {
|
|
if (!isoLike) return new Date().toISOString().slice(0, 10);
|
|
const d = new Date(isoLike);
|
|
if (Number.isNaN(+d)) return new Date().toISOString().slice(0, 10);
|
|
return d.toISOString().slice(0, 10);
|
|
}
|
|
|
|
function parseTags(raw: any): string[] {
|
|
if (!raw) return [];
|
|
if (Array.isArray(raw)) return raw.filter((x) => typeof x === "string");
|
|
if (typeof raw !== "string") return [];
|
|
try {
|
|
const p = JSON.parse(raw);
|
|
return Array.isArray(p) ? p.filter((x) => typeof x === "string") : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
export default function EditJobDialog({ open, jobId, onClose, onSaved }: Props) {
|
|
const { toast } = useToast();
|
|
const [loading, setLoading] = useState(false);
|
|
const { companies } = useCompanies();
|
|
|
|
const [company, setCompany] = useState<Company | null>(null);
|
|
const [jobTitle, setJobTitle] = useState("");
|
|
const [status, setStatus] = useState("Applied");
|
|
const [initialStatus, setInitialStatus] = useState("Applied");
|
|
const [statusChangedAt, setStatusChangedAt] = useState(() => new Date().toISOString().slice(0, 10));
|
|
const [dateApplied, setDateApplied] = useState(() => new Date().toISOString().slice(0, 10));
|
|
const [location, setLocation] = useState("");
|
|
const [salary, setSalary] = useState("");
|
|
const [nextAction, setNextAction] = useState("");
|
|
const [followUpAt, setFollowUpAt] = useState<string>("");
|
|
const [jobUrl, setJobUrl] = useState("");
|
|
const [notes, setNotes] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [translatedDescription, setTranslatedDescription] = useState("");
|
|
const [descriptionLanguage, setDescriptionLanguage] = useState("");
|
|
const [tags, setTags] = useState<string[]>([]);
|
|
const [deadline, setDeadline] = useState<string>("");
|
|
const [coverLetterText, setCoverLetterText] = useState("");
|
|
const [responseReceived, setResponseReceived] = useState(false);
|
|
const [responseDate, setResponseDate] = useState<string>("");
|
|
const [hasResume, setHasResume] = useState(false);
|
|
const [hasCoverLetter, setHasCoverLetter] = useState(false);
|
|
const [hasPortfolio, setHasPortfolio] = useState(false);
|
|
const [hasOtherAttachment, setHasOtherAttachment] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId) return;
|
|
setLoading(true);
|
|
api.get<JobApplication>(`/jobapplications/${jobId}`).then((r) => {
|
|
const j = r.data;
|
|
setCompany(j.company ?? null);
|
|
setJobTitle(j.jobTitle ?? "");
|
|
setStatus(j.status ?? "Applied");
|
|
setInitialStatus(j.status ?? "Applied");
|
|
setStatusChangedAt(new Date().toISOString().slice(0, 10));
|
|
setDateApplied(toDateInputValue(j.dateApplied));
|
|
setLocation(j.location ?? "");
|
|
setSalary(j.salary ?? "");
|
|
setNextAction((j as any).nextAction ?? "");
|
|
setFollowUpAt((j as any).followUpAt ? toDateInputValue((j as any).followUpAt) : "");
|
|
setJobUrl(j.jobUrl ?? "");
|
|
setNotes(j.notes ?? "");
|
|
setDescription((j as any).description ?? "");
|
|
setTranslatedDescription((j as any).translatedDescription ?? "");
|
|
setDescriptionLanguage((j as any).descriptionLanguage ?? "");
|
|
setTags(parseTags((j as any).tags));
|
|
setDeadline((j as any).deadline ? toDateInputValue((j as any).deadline) : "");
|
|
setCoverLetterText(j.coverLetterText ?? "");
|
|
setResponseReceived(Boolean(j.responseReceived));
|
|
setResponseDate(j.responseDate ? toDateInputValue(j.responseDate) : "");
|
|
setHasResume(Boolean((j as any).hasResume));
|
|
setHasCoverLetter(Boolean((j as any).hasCoverLetter));
|
|
setHasPortfolio(Boolean((j as any).hasPortfolio));
|
|
setHasOtherAttachment(Boolean((j as any).hasOtherAttachment));
|
|
}).finally(() => setLoading(false));
|
|
}, [open, jobId]);
|
|
|
|
const canSave = useMemo(() => !!company?.id && jobTitle.trim().length > 0 && !loading, [company, jobTitle, loading]);
|
|
|
|
const save = async () => {
|
|
if (!jobId || !company?.id) return;
|
|
setLoading(true);
|
|
try {
|
|
await api.put(`/jobapplications/${jobId}`, {
|
|
jobTitle: jobTitle.trim(),
|
|
companyId: company.id,
|
|
status,
|
|
statusChangedAt: status !== initialStatus ? statusChangedAt || null : null,
|
|
responseReceived,
|
|
responseDate: responseReceived && responseDate ? responseDate : null,
|
|
location: location.trim() || null,
|
|
salary: salary.trim() || null,
|
|
nextAction: nextAction.trim() || null,
|
|
followUpAt: followUpAt || null,
|
|
hasResume,
|
|
hasCoverLetter,
|
|
hasPortfolio,
|
|
hasOtherAttachment,
|
|
notes: notes || null,
|
|
description: description || null,
|
|
translatedDescription: translatedDescription || null,
|
|
descriptionLanguage: descriptionLanguage || null,
|
|
tags: tags.length ? JSON.stringify(tags) : null,
|
|
deadline: deadline || null,
|
|
coverLetterText: coverLetterText || null,
|
|
dateApplied: dateApplied || null,
|
|
jobUrl: jobUrl.trim() || null,
|
|
});
|
|
toast("Saved.", "success");
|
|
onSaved();
|
|
onClose();
|
|
} catch {
|
|
toast("Save failed.", "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
|
|
<DialogTitle>Edit job</DialogTitle>
|
|
<DialogContent>
|
|
<Box sx={{ mt: 1, mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
|
Update job details, timeline status, documents, and notes from one editing workspace.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}>
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>Application details</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
|
|
<Autocomplete options={companies} getOptionLabel={(c) => c.name} value={company} onChange={(_, v) => setCompany(v)} renderInput={(params) => <TextField {...params} label="Company" />} />
|
|
<TextField label="Job title" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} />
|
|
<TextField label="Applied on" type="date" value={dateApplied} onChange={(e) => setDateApplied(e.target.value)} InputLabelProps={{ shrink: true }} />
|
|
<TextField label="Job URL" value={jobUrl} onChange={(e) => setJobUrl(e.target.value)} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>Status update</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2, mt: 1 }}>
|
|
<TextField select label="Current status" value={status} onChange={(e) => setStatus(e.target.value)}>
|
|
{STATUS_OPTIONS.map((s) => <MenuItem key={s} value={s}>{s}</MenuItem>)}
|
|
</TextField>
|
|
<TextField label="Status changed on" type="date" value={statusChangedAt} onChange={(e) => setStatusChangedAt(e.target.value)} InputLabelProps={{ shrink: true }} helperText={status === initialStatus ? "Only used when you change the status." : "This date will be recorded in the timeline."} />
|
|
<Box sx={{ display: "flex", alignItems: "center" }}><FormControlLabel control={<Checkbox checked={responseReceived} onChange={(e) => setResponseReceived(e.target.checked)} />} label="Reply received" /></Box>
|
|
<TextField label="Reply received on" type="date" disabled={!responseReceived} value={responseDate} onChange={(e) => setResponseDate(e.target.value)} InputLabelProps={{ shrink: true }} />
|
|
<TextField label="Next action" value={nextAction} onChange={(e) => setNextAction(e.target.value)} />
|
|
<TextField label="Follow up on" type="date" value={followUpAt} onChange={(e) => setFollowUpAt(e.target.value)} InputLabelProps={{ shrink: true }} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>Role details</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
|
|
<TextField label="Location" value={location} onChange={(e) => setLocation(e.target.value)} />
|
|
<TextField label="Salary" value={salary} onChange={(e) => setSalary(e.target.value)} />
|
|
<TextField label="Deadline" type="date" value={deadline} onChange={(e) => setDeadline(e.target.value)} InputLabelProps={{ shrink: true }} />
|
|
<TextField label="Description language" value={descriptionLanguage} onChange={(e) => setDescriptionLanguage(e.target.value)} />
|
|
<Box sx={{ gridColumn: "1 / -1" }}><TagsInput value={tags} onChange={setTags} /></Box>
|
|
<TextField label="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} multiline rows={4} helperText={`${notes.length} characters`} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label="Description (original)" value={description} onChange={(e) => setDescription(e.target.value)} multiline rows={6} helperText={`${description.length} characters`} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label="Translated description" value={translatedDescription} onChange={(e) => setTranslatedDescription(e.target.value)} multiline rows={6} helperText={`${translatedDescription.length} characters`} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label="Cover letter" value={coverLetterText} onChange={(e) => setCoverLetterText(e.target.value)} multiline rows={6} helperText={`${coverLetterText.length} characters`} sx={{ gridColumn: "1 / -1" }} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>Attachments checklist</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1, mb: 1.5 }}>
|
|
<Chip size="small" label={hasResume ? "Resume ready" : "Resume missing"} color={hasResume ? "success" : "default"} variant={hasResume ? "filled" : "outlined"} />
|
|
<Chip size="small" label={hasCoverLetter ? "Cover letter ready" : "Cover letter missing"} color={hasCoverLetter ? "success" : "default"} variant={hasCoverLetter ? "filled" : "outlined"} />
|
|
<Chip size="small" label={hasPortfolio ? "Portfolio ready" : "Portfolio optional"} color={hasPortfolio ? "success" : "default"} variant={hasPortfolio ? "filled" : "outlined"} />
|
|
</Box>
|
|
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mt: 1 }}>
|
|
<FormControlLabel control={<Checkbox checked={hasResume} onChange={(e) => setHasResume(e.target.checked)} />} label="Resume" />
|
|
<FormControlLabel control={<Checkbox checked={hasCoverLetter} onChange={(e) => setHasCoverLetter(e.target.checked)} />} label="Cover letter" />
|
|
<FormControlLabel control={<Checkbox checked={hasPortfolio} onChange={(e) => setHasPortfolio(e.target.checked)} />} label="Portfolio" />
|
|
<FormControlLabel control={<Checkbox checked={hasOtherAttachment} onChange={(e) => setHasOtherAttachment(e.target.checked)} />} label="Other attachment" />
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>Cancel</Button>
|
|
<Button variant="contained" onClick={save} disabled={!canSave}>Save</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|