cesnimda
309 lines
10 KiB
TypeScript
309 lines
10 KiB
TypeScript
import React, { useEffect, useMemo, useState } from "react";
|
|
|
|
import {
|
|
Autocomplete,
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
FormControlLabel,
|
|
Checkbox,
|
|
MenuItem,
|
|
TextField,
|
|
} 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 [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");
|
|
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(() => {
|
|
return !!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,
|
|
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,
|
|
});
|
|
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={{
|
|
display: "grid",
|
|
gridTemplateColumns: "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 select label="Status" value={status} onChange={(e) => setStatus(e.target.value)}>
|
|
{STATUS_OPTIONS.map((s) => (
|
|
<MenuItem key={s} value={s}>
|
|
{s}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
|
|
<TextField label="Job Title" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} />
|
|
|
|
<TextField
|
|
label="Date Applied"
|
|
type="date"
|
|
value={dateApplied}
|
|
onChange={(e) => setDateApplied(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<TextField label="Location" value={location} onChange={(e) => setLocation(e.target.value)} />
|
|
|
|
<TextField label="Salary" value={salary} onChange={(e) => setSalary(e.target.value)} />
|
|
|
|
<TextField label="Next Action" value={nextAction} onChange={(e) => setNextAction(e.target.value)} />
|
|
|
|
<TextField
|
|
label="Follow Up"
|
|
type="date"
|
|
value={followUpAt}
|
|
onChange={(e) => setFollowUpAt(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<TextField
|
|
label="Job URL"
|
|
value={jobUrl}
|
|
onChange={(e) => setJobUrl(e.target.value)}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
|
|
<TextField
|
|
label="Notes"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
multiline
|
|
rows={4}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
|
|
<TextField
|
|
label="Description (Original)"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
multiline
|
|
rows={6}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
|
|
<TextField
|
|
label="Translated Description"
|
|
value={translatedDescription}
|
|
onChange={(e) => setTranslatedDescription(e.target.value)}
|
|
multiline
|
|
rows={6}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
|
|
<TextField
|
|
label="Description Language"
|
|
value={descriptionLanguage}
|
|
onChange={(e) => setDescriptionLanguage(e.target.value)}
|
|
/>
|
|
|
|
<TextField
|
|
label="Deadline"
|
|
type="date"
|
|
value={deadline}
|
|
onChange={(e) => setDeadline(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<Box sx={{ gridColumn: "1 / -1" }}>
|
|
<TagsInput value={tags} onChange={setTags} />
|
|
</Box>
|
|
|
|
<TextField
|
|
label="Cover Letter"
|
|
value={coverLetterText}
|
|
onChange={(e) => setCoverLetterText(e.target.value)}
|
|
multiline
|
|
rows={6}
|
|
sx={{ gridColumn: "1 / -1" }}
|
|
/>
|
|
|
|
<FormControlLabel
|
|
control={<Checkbox checked={responseReceived} onChange={(e) => setResponseReceived(e.target.checked)} />}
|
|
label="Response received"
|
|
/>
|
|
|
|
<TextField
|
|
label="Response Date"
|
|
type="date"
|
|
disabled={!responseReceived}
|
|
value={responseDate}
|
|
onChange={(e) => setResponseDate(e.target.value)}
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<Box sx={{ gridColumn: "1 / -1", display: "flex", gap: 2, flexWrap: "wrap" }}>
|
|
<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>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>Cancel</Button>
|
|
<Button variant="contained" onClick={save} disabled={!canSave}>
|
|
Save
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|