Billy Marcello
357 lines
11 KiB
TypeScript
357 lines
11 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import SidebarAdmin from "../Layout/SidebarAdmin";
|
|
import NavbarAdmin from "../Layout/NavbarAdmin";
|
|
import "froala-editor/js/plugins.pkgd.min.js";
|
|
import "froala-editor/css/froala_editor.pkgd.min.css";
|
|
import "froala-editor/css/froala_style.min.css";
|
|
import FroalaEditor from "react-froala-wysiwyg";
|
|
import axios from "axios";
|
|
|
|
type LowonganDetail = {
|
|
id: number;
|
|
posisi: string;
|
|
kelompok_peminatan: string;
|
|
lokasi: string;
|
|
paid: "paid" | "unpaid" | string;
|
|
durasi_awal: string;
|
|
durasi_akhir: string;
|
|
jobdesk: string;
|
|
image?: string;
|
|
};
|
|
|
|
const EditLowongan = () => {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
const [posisi, setPosisi] = useState("");
|
|
const [kelompok, setKelompok] = useState("");
|
|
const [kelompokOptions, setKelompokOptions] = useState<string[]>([]);
|
|
const [lokasi, setLokasi] = useState("");
|
|
const [paid, setPaid] = useState("paid");
|
|
const [durasiAwal, setDurasiAwal] = useState("");
|
|
const [durasiAkhir, setDurasiAkhir] = useState("");
|
|
const [jobdesk, setJobdesk] = useState<string>("");
|
|
const [image, setImage] = useState<File | null>(null);
|
|
|
|
const [isCustomKelompok, setIsCustomKelompok] = useState(false);
|
|
const [customKelompok, setCustomKelompok] = useState("");
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [froalaReady, setFroalaReady] = useState(false);
|
|
|
|
const token = document.cookie
|
|
.split("; ")
|
|
.find((row) => row.startsWith("token="))
|
|
?.split("=")[1];
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get(
|
|
`${
|
|
import.meta.env.VITE_API_BASE_URL
|
|
}/lowongan-magang-api/get/kelompok-all`
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.data || [];
|
|
setKelompokOptions(data);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Gagal memuat kelompok peminatan:", err);
|
|
setKelompokOptions([]);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchDetail = async () => {
|
|
if (!id) {
|
|
alert("ID lowongan tidak ditemukan.");
|
|
navigate("/lowongan-list");
|
|
return;
|
|
}
|
|
|
|
if (!token) {
|
|
alert("Token tidak ditemukan.");
|
|
navigate("/humic-20242025-2");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
setFroalaReady(false);
|
|
|
|
const res = await axios.get(
|
|
`${import.meta.env.VITE_API_BASE_URL}/lowongan-magang-api/get/id/${id}`,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
const data: LowonganDetail = res.data.data;
|
|
|
|
setPosisi(data.posisi ?? "");
|
|
setLokasi(data.lokasi ?? "");
|
|
setPaid((data.paid ?? "paid") as string);
|
|
setDurasiAwal((data.durasi_awal ?? "").slice(0, 10));
|
|
setDurasiAkhir((data.durasi_akhir ?? "").slice(0, 10));
|
|
setJobdesk(String(data.jobdesk ?? ""));
|
|
|
|
const kp = data.kelompok_peminatan ?? "";
|
|
setKelompok(kp);
|
|
setCustomKelompok(kp);
|
|
} catch (err) {
|
|
console.error("Gagal memuat detail lowongan:", err);
|
|
alert("Gagal memuat detail lowongan.");
|
|
navigate("/lowongan-list");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchDetail();
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (!isLoading) {
|
|
const t = setTimeout(() => setFroalaReady(true), 0);
|
|
return () => clearTimeout(t);
|
|
}
|
|
}, [isLoading]);
|
|
|
|
useEffect(() => {
|
|
if (!kelompok) return;
|
|
|
|
if (kelompokOptions.length === 0) {
|
|
setIsCustomKelompok(true);
|
|
setCustomKelompok(kelompok);
|
|
return;
|
|
}
|
|
|
|
const exists = kelompokOptions.includes(kelompok);
|
|
if (exists) {
|
|
setIsCustomKelompok(false);
|
|
setCustomKelompok("");
|
|
} else {
|
|
setIsCustomKelompok(true);
|
|
setCustomKelompok(kelompok);
|
|
}
|
|
}, [kelompokOptions, kelompok]);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!id) {
|
|
alert("ID lowongan tidak ditemukan.");
|
|
return;
|
|
}
|
|
|
|
if (!token) {
|
|
alert("Token tidak ditemukan.");
|
|
return;
|
|
}
|
|
|
|
const finalKelompok =
|
|
isCustomKelompok || kelompokOptions.length === 0
|
|
? customKelompok
|
|
: kelompok;
|
|
|
|
if (!finalKelompok.trim()) {
|
|
alert("Kategori internship wajib diisi.");
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append("posisi", posisi);
|
|
formData.append("kelompok_peminatan", finalKelompok);
|
|
formData.append("lokasi", lokasi);
|
|
formData.append("jobdesk", jobdesk);
|
|
formData.append("durasi_awal", durasiAwal);
|
|
formData.append("durasi_akhir", durasiAkhir);
|
|
formData.append("paid", paid);
|
|
|
|
if (image) formData.append("image", image);
|
|
|
|
try {
|
|
await axios.patch(
|
|
`${import.meta.env.VITE_API_BASE_URL}/lowongan-magang-api/update/${id}`,
|
|
formData,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
}
|
|
);
|
|
|
|
alert("Lowongan berhasil diperbarui!");
|
|
navigate("/lowongan-list");
|
|
} catch (error) {
|
|
console.error("Error updating internship:", error);
|
|
alert("Gagal memperbarui lowongan.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen w-full overflow-hidden">
|
|
<NavbarAdmin />
|
|
<div className="flex flex-row">
|
|
<SidebarAdmin />
|
|
<div className="p-10 bg-white flex-col flex-wrap w-full">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h2 className="text-xl font-semibold">Edit Lowongan</h2>
|
|
<button
|
|
className="bg-[#1F4A92] hover:bg-[#677c9f] cursor-pointer text-white px-6 py-2 rounded-md font-medium"
|
|
onClick={handleSubmit}
|
|
disabled={isLoading}
|
|
title={isLoading ? "Memuat data..." : "Submit"}
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
|
|
<form className="flex flex-col gap-6 max-w-full">
|
|
{/* Internship Fields Only */}
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">
|
|
Kategori Internship
|
|
</label>
|
|
|
|
{kelompokOptions.length > 0 && (
|
|
<select
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={isCustomKelompok ? "lainnya" : kelompok}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "lainnya") {
|
|
setIsCustomKelompok(true);
|
|
setCustomKelompok("");
|
|
} else {
|
|
setKelompok(value);
|
|
setIsCustomKelompok(false);
|
|
setCustomKelompok("");
|
|
}
|
|
}}
|
|
>
|
|
{kelompokOptions.map((option) => (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
))}
|
|
<option value="lainnya">Lainnya (masukan manual)</option>
|
|
</select>
|
|
)}
|
|
|
|
{(isCustomKelompok || kelompokOptions.length === 0) && (
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded-lg p-3 mt-2"
|
|
placeholder="Tulis kategori internship baru"
|
|
value={customKelompok}
|
|
onChange={(e) => setCustomKelompok(e.target.value)}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Paid</label>
|
|
<select
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={paid}
|
|
onChange={(e) => setPaid(e.target.value)}
|
|
>
|
|
<option value="paid">Paid</option>
|
|
<option value="unpaid">Unpaid</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Lokasi</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={lokasi}
|
|
onChange={(e) => setLokasi(e.target.value)}
|
|
placeholder="Onsite,Jakarta"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Nama Internship</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={posisi}
|
|
onChange={(e) => setPosisi(e.target.value)}
|
|
placeholder="UI/UX Designer"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">
|
|
Tanggal Mulai Oprec
|
|
</label>
|
|
<input
|
|
type="date"
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={durasiAwal}
|
|
onChange={(e) => setDurasiAwal(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">
|
|
Tanggal Akhir Oprec
|
|
</label>
|
|
<input
|
|
type="date"
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
value={durasiAkhir}
|
|
onChange={(e) => setDurasiAkhir(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 col-span-2">
|
|
<label className="text-sm font-medium">Thumbnail / Image</label>
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) =>
|
|
setImage(e.target.files ? e.target.files[0] : null)
|
|
}
|
|
className="border border-gray-300 rounded-lg p-3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Isi Konten */}
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Isi Konten</label>
|
|
|
|
{froalaReady ? (
|
|
<FroalaEditor
|
|
key={id}
|
|
tag="textarea"
|
|
model={jobdesk || ""}
|
|
onModelChange={(model: any) => setJobdesk(model || "")}
|
|
config={{
|
|
placeholderText: "Tulis deskripsi lowongan...",
|
|
charCounterCount: true,
|
|
toolbarSticky: true,
|
|
heightMin: 200,
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className="border border-gray-300 rounded-lg p-3 h-[200px]" />
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditLowongan;
|