feat: replace status dropdown with one-click toggle buttons

Replace <select> in side panel with 4 toggle buttons (To Do / Doing /
Pending / Done). Clicking a button immediately sends the PATCH status
API call. Active button is highlighted with status-specific colors and
shadow. saveTask now only handles title/description changes.
This commit is contained in:
Yuyao Huang
2026-05-09 16:16:58 +08:00
parent 43ca6b8462
commit 9c1d45506a
3 changed files with 93 additions and 13 deletions
+20 -6
View File
@@ -234,9 +234,12 @@ function selectTask(taskId) {
document.getElementById("edit-task-title").value = task.title;
document.getElementById("edit-task-desc").value = task.desc || "";
document.getElementById("edit-task-status").value = task.status;
document.getElementById("side-panel-error").textContent = "";
document.querySelectorAll(".status-btn").forEach(btn => {
btn.classList.toggle("active", btn.dataset.status === task.status);
});
const sidePanel = document.getElementById("side-panel");
if (!sidePanel.classList.contains("active")) {
sidePanel.classList.add("active");
@@ -257,7 +260,6 @@ async function saveTask() {
const title = document.getElementById("edit-task-title").value.trim();
const desc = document.getElementById("edit-task-desc").value;
const status = document.getElementById("edit-task-status").value;
if (!title) {
error.textContent = "Title is required";
@@ -266,12 +268,24 @@ async function saveTask() {
try {
await put(`/api/tasks/${selectedTaskId}`, { title, desc });
await loadTasks();
} catch (err) {
error.textContent = err.message;
}
}
const currentTask = tasks.find(t => t.id === selectedTaskId);
if (status !== currentTask?.status) {
await patch(`/api/tasks/${selectedTaskId}/status`, { status });
}
async function setTaskStatus(status) {
if (!selectedTaskId) return;
const error = document.getElementById("side-panel-error");
error.textContent = "";
document.querySelectorAll(".status-btn").forEach(btn => {
btn.classList.toggle("active", btn.dataset.status === status);
});
try {
await patch(`/api/tasks/${selectedTaskId}/status`, { status });
await loadTasks();
} catch (err) {
error.textContent = err.message;