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:
+20
-6
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user