Tasks

index.jsx 339 lines

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Page,
  Header,
  Button,
  Input,
  Row,
  EmptyState,
  Toast,
  useToast,
} from "../../shared/ui.jsx";
import { RecordForm, ConfirmDelete } from "../../shared/forms.jsx";
import { useStore, inserted, fieldsOf, localDate } from "../../shared/data.js";
const L = window.lattice;
const details = [
  "id",
  "title",
  "description",
  "priority",
  "due_date",
  "category",
];
const fields = [
  { name: "title", label: "Title", required: true },
  { name: "description", label: "Details", multiline: true },
  {
    name: "priority",
    label: "Priority",
    options: ["low", "medium", "high"],
    defaultValue: "medium",
  },
  { name: "due_date", label: "Due date", type: "date" },
  { name: "category", label: "Category" },
];
async function add(data) {
  if (!data?.title) return;
  const row = await inserted(
    "tasks",
    "INSERT INTO tasks (title,description,priority,due_date,category) VALUES (?,?,?,?,?)",
    [
      data.title,
      data.description || "",
      data.priority || "medium",
      data.due_date || "",
      data.category || "",
    ],
  );
  await L.events.emit("task-created", fieldsOf(row, details));
}
function App() {
  const [search, setSearch] = useState(""),
    [filter, setFilter] = useState("all"),
    [category, setCategory] = useState(""),
    [sort, setSort] = useState("due");
  const [editing, setEditing] = useState(null),
    [deleting, setDeleting] = useState(null);
  const { toast, notify, dismissToast } = useToast();
  const store = useStore({
    setup: () =>
      L.db.exec(
        `CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT, priority TEXT DEFAULT 'medium', due_date TEXT, completed INTEGER DEFAULT 0, completed_at TEXT, category TEXT, created_at TEXT DEFAULT (datetime('now')))`,
      ),
    load: () => L.db.query("SELECT * FROM tasks ORDER BY id DESC"),
    listeners: { "add-task": add },
  });
  const today = localDate(),
    query = search.trim().toLowerCase(),
    completed = store.rows.filter((row) => row.completed).length;
  const overdue = (row) =>
    !row.completed && row.due_date && row.due_date < today;
  const rank = (row) => ({ high: 0, medium: 1, low: 2 })[row.priority] ?? 1;
  const filtered = store.rows
    .filter(
      (row) =>
        (filter === "all" ||
          (filter === "active" && !row.completed) ||
          (filter === "completed" && row.completed) ||
          (filter === "overdue" && overdue(row))) &&
        (!category || row.category === category) &&
        ["title", "description", "category"].some((key) =>
          String(row[key] || "")
            .toLowerCase()
            .includes(query),
        ),
    )
    .sort(
      (a, b) =>
        a.completed - b.completed ||
        (sort === "title"
          ? a.title.localeCompare(b.title)
          : sort === "priority"
            ? rank(a) - rank(b) || b.id - a.id
            : sort === "newest"
              ? b.id - a.id
              : (a.due_date || "9999").localeCompare(b.due_date || "9999") ||
                rank(a) - rank(b) ||
                b.id - a.id),
    );
  async function toggle(row) {
    await store.act(async () => {
      const completedAt = row.completed ? null : new Date().toISOString();
      await L.db.exec(
        "UPDATE tasks SET completed=?,completed_at=? WHERE id=?",
        [row.completed ? 0 : 1, completedAt, row.id],
      );
      if (!row.completed)
        await L.events.emit("task-completed", {
          id: row.id,
          title: row.title,
          completed_at: completedAt,
        });
    });
  }
  async function save(form) {
    if (!form.title) return;
    const ok = await store.act(async () => {
      if (editing === "new") await add(form);
      else {
        await L.db.exec(
          "UPDATE tasks SET title=?,description=?,priority=?,due_date=?,category=? WHERE id=?",
          [...details.slice(1).map((key) => form[key]), editing.id],
        );
        await L.events.emit("task-updated", { id: editing.id, ...form });
      }
    });
    if (ok) {
      setEditing(null);
      notify("Task saved");
    }
  }
  return (
    <Page>
      <Header
        title="Tasks"
        subtitle={`${store.rows.length - completed} open · ${completed} completed`}
        actions={
          <Button variant="primary" onClick={() => setEditing("new")}>
            New task
          </Button>
        }
      />
      <div className="ui-toolbar" role="group" aria-label="Task status">
        {["all", "active", "completed", "overdue"].map((value) => (
          <Button
            key={value}
            variant={filter === value ? "primary" : "ghost"}
            aria-pressed={filter === value}
            onClick={() => setFilter(value)}
          >
            {value[0].toUpperCase() + value.slice(1)}
            {value === "overdue" && store.rows.some(overdue)
              ? ` (${store.rows.filter(overdue).length})`
              : ""}
          </Button>
        ))}
      </div>
      <div className="ui-toolbar">
        <Input
          type="search"
          aria-label="Search tasks"
          placeholder="Search tasks"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <select
          aria-label="Filter by category"
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        >
          <option value="">All categories</option>
          {[...new Set(store.rows.map((row) => row.category).filter(Boolean))]
            .sort()
            .map((value) => (
              <option key={value}>{value}</option>
            ))}
        </select>
        <select
          aria-label="Sort tasks"
          value={sort}
          onChange={(e) => setSort(e.target.value)}
        >
          <option value="due">Due date</option>
          <option value="priority">Priority</option>
          <option value="title">Title A–Z</option>
          <option value="newest">Newest first</option>
        </select>
      </div>
      {store.error && (
        <p role="alert" className="ui-error-text">
          {store.error}{" "}
          <Button onClick={() => store.act(async () => {})}>Retry</Button>
        </p>
      )}
      <div className="ui-panel">
        {!store.ready ? (
          <EmptyState
            title={store.error ? "Tasks could not be loaded" : "Loading tasks…"}
          />
        ) : !filtered.length ? (
          <EmptyState
            title={store.rows.length ? "No matching tasks" : "No tasks yet"}
            action={
              <Button
                onClick={() => {
                  setSearch("");
                  setFilter("all");
                  setCategory("");
                  if (!store.rows.length) setEditing("new");
                }}
              >
                {store.rows.length ? "Clear filters" : "New task"}
              </Button>
            }
          />
        ) : (
          filtered.map((task) => (
            <Row
              key={task.id}
              leading={
                <input
                  type="checkbox"
                  aria-label={`Complete ${task.title}`}
                  checked={!!task.completed}
                  disabled={store.busy}
                  onChange={() => toggle(task)}
                  style={{
                    accentColor: "var(--accent)",
                    width: 17,
                    height: 17,
                    minHeight: 0,
                  }}
                />
              }
              title={
                <button
                  onClick={() => setEditing(task)}
                  style={{
                    textDecoration: task.completed ? "line-through" : undefined,
                    color: task.completed ? "var(--text-secondary)" : undefined,
                  }}
                >
                  {task.title}
                </button>
              }
              actions={
                <>
                  <Button
                    variant="ghost"
                    aria-label={`Edit ${task.title}`}
                    onClick={() => setEditing(task)}
                  >
                    Edit
                  </Button>
                  <Button
                    variant="ghost"
                    aria-label={`Delete ${task.title}`}
                    onClick={() => setDeleting(task)}
                  >
                    Delete
                  </Button>
                </>
              }
            >
              {task.description && (
                <p className="ui-muted" style={{ marginTop: 4 }}>
                  {task.description}
                </p>
              )}
              <div className="ui-actions" style={{ marginTop: 7 }}>
                <span
                  className={`ui-badge ${task.priority === "high" && !task.completed ? "ui-badge-danger" : ""}`}
                >
                  {["high", "medium", "low"].includes(task.priority)
                    ? task.priority
                    : "medium"}{" "}
                  priority
                </span>
                {task.due_date && (
                  <span
                    className={`ui-badge ${overdue(task) ? "ui-badge-danger" : ""}`}
                  >
                    {overdue(task)
                      ? "Overdue · "
                      : task.due_date === today
                        ? "Today · "
                        : ""}
                    {task.due_date}
                  </span>
                )}
                {task.category && (
                  <span className="ui-badge">{task.category}</span>
                )}
              </div>
            </Row>
          ))
        )}
      </div>
      {editing && (
        <RecordForm
          title={editing === "new" ? "New task" : "Edit task"}
          record={editing}
          fields={fields}
          onSave={save}
          onClose={() => setEditing(null)}
          busy={store.busy}
          error={store.error}
          validate={(form) => (!form.title ? "Enter a title." : "")}
        />
      )}
      {deleting && (
        <ConfirmDelete
          title="Delete task?"
          onClose={() => setDeleting(null)}
          busy={store.busy}
          error={store.error}
          onConfirm={async () => {
            if (
              await store.act(async () => {
                await L.db.exec("DELETE FROM tasks WHERE id=?", [deleting.id]);
                await L.events.emit(
                  "task-removed",
                  fieldsOf(deleting, ["id", "title"]),
                );
              })
            ) {
              setDeleting(null);
              notify("Task deleted");
            }
          }}
        >
          {deleting.title} will be permanently deleted.
        </ConfirmDelete>
      )}
      <Toast message={toast} onDismiss={dismissToast} />
    </Page>
  );
}
createRoot(document.getElementById("root")).render(<App />);