Update all hooks (Projects, Tasks, Certificates), implement backend for Projects. HomePage on Mentors
This commit is contained in:
Kemas M. Aryadary Rasyad
@@ -1,187 +1,112 @@
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { X, FileText, Link } from "lucide-react";
|
||||
import { useCreateTask } from '../../../../hooks/useTasks';
|
||||
import type { SubmissionType } from '../../../../types/task.types';
|
||||
|
||||
interface CreateTaskModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: string;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function CreateTaskModal({ isOpen, onClose }: CreateTaskModalProps) {
|
||||
export default function CreateTaskModal({ isOpen, onClose, projectId, onSuccess }: CreateTaskModalProps) {
|
||||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||||
const { create, loading } = useCreateTask(projectId);
|
||||
|
||||
// Form States
|
||||
const [taskTitle, setTaskTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [deadlineDate, setDeadlineDate] = useState("");
|
||||
const [specificTime, setSpecificTime] = useState("");
|
||||
const [submissionType, setSubmissionType] = useState<"file" | "url">("file");
|
||||
const [submissionType, setSubmissionType] = useState<SubmissionType>("file_upload");
|
||||
|
||||
useEffect(() => {
|
||||
const dialog = dialogRef.current;
|
||||
if (!dialog) return;
|
||||
|
||||
if (isOpen) {
|
||||
dialog.showModal();
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
dialog.close();
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
|
||||
const handleCancel = (e: Event) => {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (isOpen) { dialog.showModal(); document.body.style.overflow = "hidden"; }
|
||||
else { dialog.close(); document.body.style.overflow = "unset"; }
|
||||
const handleCancel = (e: Event) => { e.preventDefault(); onClose(); };
|
||||
dialog.addEventListener("cancel", handleCancel);
|
||||
return () => {
|
||||
dialog.removeEventListener("cancel", handleCancel);
|
||||
document.body.style.overflow = "unset";
|
||||
};
|
||||
return () => { dialog.removeEventListener("cancel", handleCancel); document.body.style.overflow = "unset"; };
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const payload = { taskTitle, description, deadlineDate, specificTime, submissionType };
|
||||
console.log("Saving Task:", payload);
|
||||
alert("Task Saved Successfully!");
|
||||
onClose();
|
||||
const result = await create({
|
||||
title: taskTitle,
|
||||
description,
|
||||
deadline_date: deadlineDate,
|
||||
specific_time: specificTime,
|
||||
submission_type: submissionType,
|
||||
});
|
||||
if (result) onSuccess();
|
||||
};
|
||||
|
||||
// JSX sama persis, hanya ganti handleSubmit dan tambah disabled pada button submit:
|
||||
return (
|
||||
<dialog
|
||||
ref={dialogRef}
|
||||
className="custom-dialog p-[1.5rem]"
|
||||
>
|
||||
{/* Header Modal */}
|
||||
<dialog ref={dialogRef} className="custom-dialog p-[1.5rem]">
|
||||
<div className="dialog-header">
|
||||
<div>
|
||||
<h2 className="text-[26px] font-bold text-[#B30000] tracking-tight">Create New Task</h2>
|
||||
<p className="text-xs text-gray-400 font-medium mt-0.5">
|
||||
Fill in the details for the next intern assignment.
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 font-medium mt-0.5">Fill in the details for the next intern assignment.</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-50 hover:text-gray-600 transition-colors">
|
||||
<X className="w-5 h-5 stroke-[2.5]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body Form Modal (Scrollable jika layar pendek) */}
|
||||
<form onSubmit={handleSubmit} className="px-6 space-y-4 overflow-y-auto flex-1">
|
||||
|
||||
{/* Task Title */}
|
||||
<div className="">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Task Title</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="e.g., Design High-Fidelity Prototypes"
|
||||
value={taskTitle}
|
||||
<input type="text" required placeholder="e.g., Design High-Fidelity Prototypes" value={taskTitle}
|
||||
onChange={(e) => setTaskTitle(e.target.value)}
|
||||
className="w-full px-3 py-4 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
|
||||
/>
|
||||
className="w-full px-3 py-4 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]" />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Description</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Outline the requirements and objectives..."
|
||||
value={description}
|
||||
<textarea rows={4} placeholder="Outline the requirements and objectives..." value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] resize-none leading-relaxed"
|
||||
/>
|
||||
className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000] resize-none leading-relaxed" />
|
||||
</div>
|
||||
|
||||
{/* Deadline Grid (Date & Time) */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Deadline Date</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
value={deadlineDate}
|
||||
onChange={(e) => setDeadlineDate(e.target.value)}
|
||||
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
|
||||
/>
|
||||
</div>
|
||||
<input type="date" required value={deadlineDate} onChange={(e) => setDeadlineDate(e.target.value)}
|
||||
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Specific Time (Jam)</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
required
|
||||
value={specificTime}
|
||||
onChange={(e) => setSpecificTime(e.target.value)}
|
||||
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]"
|
||||
/>
|
||||
</div>
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Specific Time</label>
|
||||
<input type="time" required value={specificTime} onChange={(e) => setSpecificTime(e.target.value)}
|
||||
className="w-full pl-3 pr-9 py-3 bg-white border border-gray-200 rounded-lg text-xs font-medium text-gray-800 focus:outline-none focus:border-[#B30000] focus:ring-1 focus:ring-[#B30000]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submission Type Card Radio */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-700 tracking-wide">Submission Type</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
|
||||
{/* Opsi 1: File Upload */}
|
||||
<div
|
||||
onClick={() => setSubmissionType("file")}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl border cursor-pointer transition-all ${
|
||||
submissionType === "file"
|
||||
? "border-[#B30000] bg-[#B30000] text-white font-semibold"
|
||||
: "border-gray-200 bg-white text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center ${submissionType === "file" ? "border-white bg-white" : "border-gray-300"}`}>
|
||||
{submissionType === "file" && <div className="w-1.5 h-1.5 bg-[#B30000] rounded-full" />}
|
||||
{(["file_upload", "url_link"] as SubmissionType[]).map((type) => (
|
||||
<div key={type} onClick={() => setSubmissionType(type)}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl border cursor-pointer transition-all ${
|
||||
submissionType === type ? "border-[#B30000] bg-[#B30000] text-white font-semibold" : "border-gray-200 bg-white text-gray-600 hover:bg-gray-50"
|
||||
}`}>
|
||||
<div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center ${submissionType === type ? "border-white bg-white" : "border-gray-300"}`}>
|
||||
{submissionType === type && <div className="w-1.5 h-1.5 bg-[#B30000] rounded-full" />}
|
||||
</div>
|
||||
{type === "file_upload" ? <FileText className="w-4 h-4" /> : <Link className="w-4 h-4" />}
|
||||
<span className="text-xs">{type === "file_upload" ? "File Upload" : "URL Link"}</span>
|
||||
</div>
|
||||
<FileText className="w-4 h-4" />
|
||||
<span className="text-xs">File Upload</span>
|
||||
</div>
|
||||
|
||||
{/* Opsi 2: URL Link */}
|
||||
<div
|
||||
onClick={() => setSubmissionType("url")}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl border cursor-pointer transition-all ${
|
||||
submissionType === "url"
|
||||
? "border-[#B30000] bg-[#B30000] text-white font-semibold"
|
||||
: "border-gray-200 bg-white text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<div className={`w-3.5 h-3.5 rounded-full border flex items-center justify-center ${submissionType === "url" ? "border-white bg-white" : "border-gray-300"}`}>
|
||||
{submissionType === "url" && <div className="w-1.5 h-1.5 bg-[#B30000] rounded-full" />}
|
||||
</div>
|
||||
<Link className="w-4 h-4" />
|
||||
<span className="text-xs">URL Link</span>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-gray-100 my-2" />
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center justify-end gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-3 border border-gray-200 rounded-xl text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<button type="button" onClick={onClose}
|
||||
className="p-3 border border-gray-200 rounded-xl text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="p-3 bg-[#B30000] hover:bg-[#990000] text-white text-xs font-bold rounded-xl transition-colors shadow-md"
|
||||
>
|
||||
Save Task
|
||||
<button type="submit" disabled={loading}
|
||||
className="p-3 bg-[#B30000] hover:bg-[#990000] text-white text-xs font-bold rounded-xl transition-colors shadow-md disabled:opacity-50">
|
||||
{loading ? "Saving..." : "Save Task"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user