feat(frontend): implement view, edit and delete actions for admin jobs
This commit is contained in:
Tiago Yamamoto
parent
8aada931b5
commit
fd59bfacb2
2 changed files with 153 additions and 8 deletions
|
|
@ -29,7 +29,11 @@ type AdminJobRow = ReturnType<typeof transformApiJobToFrontend> & {
|
|||
export default function AdminJobsPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [jobs, setJobs] = useState<AdminJob[]>([])
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
|
||||
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||||
const [selectedJob, setSelectedJob] = useState<AdminJobRow | null>(null)
|
||||
const [editForm, setEditForm] = useState<Partial<AdminJob>>({})
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||
|
||||
|
|
@ -97,8 +101,54 @@ export default function AdminJobsPage() {
|
|||
[jobRows],
|
||||
)
|
||||
|
||||
const handleDeleteJob = (id: string) => {
|
||||
setJobs((prevJobs) => prevJobs.filter((job) => String(job.id) !== id))
|
||||
const handleViewJob = (job: AdminJobRow) => {
|
||||
setSelectedJob(job)
|
||||
setIsViewDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEditJob = (job: AdminJobRow) => {
|
||||
setSelectedJob(job)
|
||||
// Find original admin job to populate edit form correctly if needed, or just use row data
|
||||
// Converting row data back to partial AdminJob for editing
|
||||
setEditForm({
|
||||
title: job.title,
|
||||
description: job.description,
|
||||
// Add other fields as necessary
|
||||
})
|
||||
setIsEditDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleDeleteJob = async (idStr: string) => {
|
||||
if (!confirm("Are you sure you want to delete this job?")) return
|
||||
|
||||
const id = parseInt(idStr)
|
||||
if (isNaN(id)) return
|
||||
|
||||
try {
|
||||
await adminJobsApi.delete(id)
|
||||
setJobs((prevJobs) => prevJobs.filter((job) => job.id !== id))
|
||||
} catch (error) {
|
||||
console.error("Failed to delete job:", error)
|
||||
alert("Failed to delete job")
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveEdit = async () => {
|
||||
if (!selectedJob) return
|
||||
const id = parseInt(selectedJob.id)
|
||||
if (isNaN(id)) return
|
||||
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const updated = await adminJobsApi.update(id, editForm)
|
||||
setJobs((prev) => prev.map((j) => (j.id === id ? updated : j)))
|
||||
setIsEditDialogOpen(false)
|
||||
} catch (error) {
|
||||
console.error("Failed to update job:", error)
|
||||
alert("Failed to update job")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -109,7 +159,7 @@ export default function AdminJobsPage() {
|
|||
<h1 className="text-3xl font-bold text-foreground">Job management</h1>
|
||||
<p className="text-muted-foreground mt-1">Manage all jobs posted on the platform</p>
|
||||
</div>
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
|
|
@ -190,10 +240,92 @@ export default function AdminJobsPage() {
|
|||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => setIsDialogOpen(false)}>Publish job</Button>
|
||||
<Button onClick={() => setIsCreateDialogOpen(false)}>Publish job</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* View Job Dialog */}
|
||||
<Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Job Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedJob && (
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Title</Label>
|
||||
<p className="font-medium">{selectedJob.title}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Company</Label>
|
||||
<p className="font-medium">{selectedJob.company}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Location</Label>
|
||||
<p className="font-medium">{selectedJob.location}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Type</Label>
|
||||
<p><Badge variant="outline">{selectedJob.type}</Badge></p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Status</Label>
|
||||
<p><Badge>{selectedJob.status}</Badge></p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Applications</Label>
|
||||
<p className="font-medium">{selectedJob.applicationsCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">Description</Label>
|
||||
<div className="mt-1 p-3 bg-muted rounded-md text-sm whitespace-pre-wrap max-h-60 overflow-y-auto">
|
||||
{selectedJob.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button onClick={() => setIsViewDialogOpen(false)}>Close</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit Job Dialog */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Job</DialogTitle>
|
||||
<DialogDescription>Update job details</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="edit-title">Job title</Label>
|
||||
<Input
|
||||
id="edit-title"
|
||||
value={editForm.title || ""}
|
||||
onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="edit-description">Description</Label>
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
rows={4}
|
||||
value={editForm.description || ""}
|
||||
onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
{/* Add more fields as needed for full editing capability */}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSaveEdit}>Save Changes</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
|
@ -291,10 +423,10 @@ export default function AdminJobsPage() {
|
|||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Button variant="ghost" size="icon" onClick={() => handleViewJob(job)}>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Button variant="ghost" size="icon" onClick={() => handleEditJob(job)}>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDeleteJob(job.id)}>
|
||||
|
|
|
|||
|
|
@ -368,6 +368,19 @@ export const adminJobsApi = {
|
|||
const queryStr = query.toString();
|
||||
return apiRequest<PaginatedResponse<AdminJob>>(`/api/v1/admin/jobs${queryStr ? `?${queryStr}` : ""}`);
|
||||
},
|
||||
update: (id: number, data: Partial<AdminJob>) => {
|
||||
logCrudAction("update", "admin/jobs", { id, ...data });
|
||||
return apiRequest<AdminJob>(`/api/v1/admin/jobs/${id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
delete: (id: number) => {
|
||||
logCrudAction("delete", "admin/jobs", { id });
|
||||
return apiRequest<void>(`/api/v1/admin/jobs/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
updateStatus: (id: number, status: string) => {
|
||||
logCrudAction("update", "admin/jobs/status", { id, status });
|
||||
return apiRequest<AdminJob>(`/api/v1/admin/jobs/${id}/status`, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue