cesnimda
244 lines
13 KiB
TypeScript
244 lines
13 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 { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
|
|
import { api } from "../api";
|
|
import { Company, JobApplication } from "../types";
|
|
import { useToast } from "../toast";
|
|
import { useCompanies } from "../hooks/useCompanies";
|
|
import TagsInput from "./TagsInput";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
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 parsePickerDate(value?: string | null): Date | null {
|
|
if (!value) return null;
|
|
const parsed = new Date(value);
|
|
return Number.isNaN(+parsed) ? null : parsed;
|
|
}
|
|
|
|
function toPickerIso(value: Date | null): string {
|
|
if (!value || Number.isNaN(+value)) return "";
|
|
return value.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 { t } = useI18n();
|
|
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(t("save"), "success");
|
|
onSaved();
|
|
onClose();
|
|
} catch {
|
|
toast(t("editJobSaveFailed"), "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
|
|
<DialogTitle>{t("editJobTitle")}</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" }}>
|
|
{t("editJobIntro")}
|
|
</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" }}>{t("editJobApplicationDetails")}</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={t("company")} />} />
|
|
<TextField label={t("editJobJobTitle")} value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} />
|
|
<DatePicker label={t("editJobAppliedOn")} value={parsePickerDate(dateApplied)} onChange={(value) => setDateApplied(toPickerIso(value))} slotProps={{ textField: { fullWidth: true } }} />
|
|
<TextField label={t("addJobModalJobUrl")} value={jobUrl} onChange={(e) => setJobUrl(e.target.value)} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobStatusUpdate")}</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2, mt: 1 }}>
|
|
<TextField select label={t("editJobCurrentStatus")} value={status} onChange={(e) => setStatus(e.target.value)}>
|
|
{STATUS_OPTIONS.map((s) => <MenuItem key={s} value={s}>{s}</MenuItem>)}
|
|
</TextField>
|
|
<DatePicker label={t("editJobStatusChangedOn")} value={parsePickerDate(statusChangedAt)} onChange={(value) => setStatusChangedAt(toPickerIso(value))} slotProps={{ textField: { fullWidth: true, helperText: status === initialStatus ? t("editJobStatusChangedHelpIdle") : t("editJobStatusChangedHelpActive") } }} />
|
|
<Box sx={{ display: "flex", alignItems: "center" }}><FormControlLabel control={<Checkbox checked={responseReceived} onChange={(e) => setResponseReceived(e.target.checked)} />} label={t("editJobReplyReceived")} /></Box>
|
|
<DatePicker label={t("editJobReplyReceivedOn")} disabled={!responseReceived} value={parsePickerDate(responseDate)} onChange={(value) => setResponseDate(toPickerIso(value))} slotProps={{ textField: { fullWidth: true } }} />
|
|
<TextField label={t("editJobNextAction")} value={nextAction} onChange={(e) => setNextAction(e.target.value)} />
|
|
<DatePicker label={t("editJobFollowUpOn")} value={parsePickerDate(followUpAt)} onChange={(value) => setFollowUpAt(toPickerIso(value))} slotProps={{ textField: { fullWidth: true } }} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobRoleDetails")}</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
|
|
<TextField label={t("location")} value={location} onChange={(e) => setLocation(e.target.value)} />
|
|
<TextField label={t("addJobModalSalary")} value={salary} onChange={(e) => setSalary(e.target.value)} />
|
|
<DatePicker label={t("editJobDeadline")} value={parsePickerDate(deadline)} onChange={(value) => setDeadline(toPickerIso(value))} slotProps={{ textField: { fullWidth: true } }} />
|
|
<TextField label={t("editJobDescriptionLanguage")} value={descriptionLanguage} onChange={(e) => setDescriptionLanguage(e.target.value)} />
|
|
<Box sx={{ gridColumn: "1 / -1" }}><TagsInput value={tags} onChange={setTags} /></Box>
|
|
<TextField label={t("editJobNotes")} value={notes} onChange={(e) => setNotes(e.target.value)} multiline rows={4} helperText={t("correspondenceCharacters", { count: notes.length })} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label={t("editJobDescriptionOriginal")} value={description} onChange={(e) => setDescription(e.target.value)} multiline rows={6} helperText={t("correspondenceCharacters", { count: description.length })} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label={t("editJobTranslatedDescription")} value={translatedDescription} onChange={(e) => setTranslatedDescription(e.target.value)} multiline rows={6} helperText={t("correspondenceCharacters", { count: translatedDescription.length })} sx={{ gridColumn: "1 / -1" }} />
|
|
<TextField label={t("editJobCoverLetter")} value={coverLetterText} onChange={(e) => setCoverLetterText(e.target.value)} multiline rows={6} helperText={t("correspondenceCharacters", { count: coverLetterText.length })} sx={{ gridColumn: "1 / -1" }} />
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper variant="outlined" sx={{ p: 2 }}>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobAttachmentsChecklist")}</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1, mb: 1.5 }}>
|
|
<Chip size="small" label={hasResume ? t("editJobResumeReady") : t("editJobResumeMissing")} color={hasResume ? "success" : "default"} variant={hasResume ? "filled" : "outlined"} />
|
|
<Chip size="small" label={hasCoverLetter ? t("editJobCoverLetterReady") : t("editJobCoverLetterMissing")} color={hasCoverLetter ? "success" : "default"} variant={hasCoverLetter ? "filled" : "outlined"} />
|
|
<Chip size="small" label={hasPortfolio ? t("editJobPortfolioReady") : t("editJobPortfolioOptional")} 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={t("editJobResume")} />
|
|
<FormControlLabel control={<Checkbox checked={hasCoverLetter} onChange={(e) => setHasCoverLetter(e.target.checked)} />} label={t("editJobCoverLetter")} />
|
|
<FormControlLabel control={<Checkbox checked={hasPortfolio} onChange={(e) => setHasPortfolio(e.target.checked)} />} label={t("editJobPortfolio")} />
|
|
<FormControlLabel control={<Checkbox checked={hasOtherAttachment} onChange={(e) => setHasOtherAttachment(e.target.checked)} />} label={t("editJobOtherAttachment")} />
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>{t("cancel")}</Button>
|
|
<Button variant="contained" onClick={save} disabled={!canSave}>{t("save")}</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|