TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 21:44:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Time change feature completed

Browse Source
This commit is contained in:
Wissarut Kanasub 2023-11-28 19:13:12 +07:00
parent d49cae6965
commit 23bd2ddf37
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/kanbanBoard/taskDetailModal.jsx
View File

@ -29,13 +29,13 @@ export function TaskDetailModal({
const [endDateEnabled, setEndDateEnabled] = useState(false); const [endDateEnabled, setEndDateEnabled] = useState(false);
const [isTaskComplete, setTaskComplete] = useState(completed); const [isTaskComplete, setTaskComplete] = useState(completed);
const [starteventValue, setStartEventValue] = useState("10:00 PM"); const [starteventValue, setStartEventValue] = useState("10:00 PM");
const [endeventValue, setEndEventValue] = useState("11:00 AM"); const [endeventValue, setEndEventValue] = useState("10:00 AM");
const [subtaskText, setSubtaskText] = useState(""); const [subtaskText, setSubtaskText] = useState("");
const [subtasks, setSubtasks] = useState([]); const [subtasks, setSubtasks] = useState([]);
const [currentTitle, setTitle] = useState(title); const [currentTitle, setTitle] = useState(title);
const [isTitleEditing, setTitleEditing] = useState(false); const [isTitleEditing, setTitleEditing] = useState(false);
const [isCheckboxChecked, setCheckboxChecked] = useState(false); const [isCheckboxStartTimeChecked, setCheckboxStartTimeChecked] = useState(false);
const [isCheckboxEndTimeChecked, setCheckboxEndTimeChecked] = useState(false);
const handleTitleChange = async () => { const handleTitleChange = async () => {
const data = { const data = {
@ -45,8 +45,12 @@ export function TaskDetailModal({
setTitleEditing(false); setTitleEditing(false);
}; };
const handleCheckboxChange = () => { const handleCheckboxStartTimeChange = () => {
setCheckboxChecked(!isCheckboxChecked); setCheckboxStartTimeChecked(!isCheckboxStartTimeChecked);
};
const handleCheckboxEndTimeChange = () => {
setCheckboxEndTimeChecked(!isCheckboxEndTimeChecked);
}; };
const handleStartEventTimeChange = async (timeValue) => { const handleStartEventTimeChange = async (timeValue) => {
@ -337,16 +341,16 @@ export function TaskDetailModal({
{/* handleStartEventTimeChange */} {/* handleStartEventTimeChange */}
<input <input
type="checkbox" type="checkbox"
checked={isCheckboxChecked} checked={isCheckboxStartTimeChecked}
className="checkbox checkbox-xs bg-gray-400 mr-2" className="checkbox checkbox-xs bg-gray-400 mr-2"
onChange={handleCheckboxChange} onChange={handleCheckboxStartTimeChange}
/> />
<input <input
type="text" type="text"
placeholder="10:00 AM" placeholder={starteventValue}
className="input input-bordered w-full max-w-xs" className="input input-bordered w-full max-w-xs"
onClick={() => handleStartEventTimeChange(dateStart)} onClick={() => handleStartEventTimeChange(dateStart)}
disabled={!isCheckboxChecked} disabled={!isCheckboxStartTimeChecked}
/> />
<div className="rounded mx-2"> <div className="rounded mx-2">
<button className="btn btn-sm" onClick={() => handleStartEventTimeChange(dateStart)}> <button className="btn btn-sm" onClick={() => handleStartEventTimeChange(dateStart)}>
@ -380,7 +384,27 @@ export function TaskDetailModal({
<DatePicker selected={dateEnd} onChange={handleEndDateValueChange} disabled={!endDateEnabled} /> <DatePicker selected={dateEnd} onChange={handleEndDateValueChange} disabled={!endDateEnabled} />
</div> </div>
{/* End event time picker */} {/* End event time picker */}
<div className="rounded p-2 shadow border-2">this is time picker</div> <div className="rounded mx-2 flex flex-row items-center">
{/* handleEndEventTimeChange */}
<input
type="checkbox"
checked={isCheckboxEndTimeChecked}
className="checkbox checkbox-xs bg-gray-400 mr-2"
onChange={handleCheckboxEndTimeChange}
/>
<input
type="text"
placeholder={endeventValue}
className="input input-bordered w-full max-w-xs"
onClick={() => handleEndEventTimeChange(dateEnd)}
disabled={!isCheckboxEndTimeChecked}
/>
<div className="rounded mx-2">
<button className="btn btn-sm" onClick={() => handleEndEventTimeChange(dateEnd)}>
Update Time
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>