Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

task status implementation

Browse Source
This commit is contained in:
Timothy Cardoza
2026-02-17 17:00:00 -06:00
parent 3d6e29d2c0
commit b8f5db030c
5 changed files with 196 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StatusCircle.tsx
+67
View File
@@ -0,0 +1,67 @@
import { type Component } from "solid-js";
import { CheckCircle2 } from "lucide-solid";
import { cn } from "@/lib/utils";
interface StatusCircleProps {
status: number;
size?: number;
className?: string;
}
export const StatusCircle: Component<StatusCircleProps> = (props) => {
const size = () => props.size || 24;
const radius = () => (size() / 2) - 2; // Subtract stroke width/padding
const circumference = () => 2 * Math.PI * radius();
// Status 0: Empty Circle
// Status 10: CheckCircle2 (Green)
// Status 1-9: Progress Ring
const strokeDashoffset = () => {
// Invert to fill clockwise?
// Progress 1-9.
// 1 = 10%, 9 = 90%
const percentage = Math.max(0, Math.min(10, props.status)) / 10;
return circumference() * (1 - percentage);
};
return (
<div class={cn("relative flex items-center justify-center", props.className)} style={{ width: `${size()}px`, height: `${size()}px` }}>
{props.status >= 10 ? (
<CheckCircle2 size={size()} class="text-green-500" />
) : (
// Progress Circle
<div class="relative group">
{/* Background Circle (Ghost) */}
<svg width={size()} height={size()} class="rotate-[-90deg]">
<circle
cx={size() / 2}
cy={size() / 2}
r={radius()}
fill="transparent"
stroke="currentColor"
stroke-width="2"
class="text-muted-foreground/20"
/>
{/* Progress Arc */}
<circle
cx={size() / 2}
cy={size() / 2}
r={radius()}
fill="transparent"
stroke="currentColor"
stroke-width="2"
stroke-dasharray={circumference().toString()}
stroke-dashoffset={strokeDashoffset()}
stroke-linecap="round"
class="text-primary transition-all duration-300"
/>
</svg>
{/* Hover indicator (maybe show check on hover?)
User didn't ask for generic hover, just visual update.
*/}
</div>
)}
</div>
);
};
src/components/TaskCard.tsx
+35 -13
View File
@@ -1,11 +1,13 @@
import { type Component, createMemo } from "solid-js";
import { type Task, toggleTask, calculateUrgencyFromDate, setActiveTaskId, store, copyTask } from "@/store";
import { type Component, createMemo, For } from "solid-js";
import { type Task, calculateUrgencyFromDate, setActiveTaskId, store, copyTask, updateTask } from "@/store";
import { cn } from "@/lib/utils";
import { CheckCircle2, Circle, Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
import { Clock, ArrowUpCircle, Copy, Users2 } from "lucide-solid";
import { Badge } from "@/components/ui/badge";
import { For } from "solid-js";
import { useTheme } from "./ThemeProvider";
import { getThemeAdjustedColor } from "@/lib/colors";
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
import { STATUS_OPTIONS } from "@/lib/constants";
import { StatusCircle } from "./StatusCircle";
export const TaskCard: Component<{ task: Task }> = (props) => {
const { resolvedTheme } = useTheme();
@@ -32,16 +34,36 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
)}
onClick={() => setActiveTaskId(props.task.id)}
>
<button
onClick={(e) => { e.stopPropagation(); toggleTask(props.task.id); }}
class="mr-3 sm:mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
{/* Status Dropdown */}
<div class="mr-2 sm:mr-3 shrink-0" onClick={(e) => e.stopPropagation()}>
<Select<any>
value={(props.task.status ?? 0).toString()}
onChange={(val: any) => {
const value = typeof val === 'object' ? val?.value : val;
if (value) {
const s = parseInt(value);
if (!isNaN(s)) updateTask(props.task.id, { status: s });
}
}}
options={STATUS_OPTIONS}
optionValue="value"
optionTextValue="label"
placeholder="Status"
itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>}
>
{props.task.completed ? (
<CheckCircle2 class="text-green-500" size={22} />
) : (
<Circle size={22} />
)}
</button>
<SelectTrigger
class="h-9 w-9 p-0 bg-transparent border-transparent hover:bg-muted/50 data-[expanded]:bg-muted/50 shadow-none focus:ring-0 shrink-0 overflow-hidden flex items-center justify-center [&>svg]:hidden"
onDoubleClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
updateTask(props.task.id, { status: 10 });
}}
>
<StatusCircle status={props.task.status ?? 0} size={26} />
</SelectTrigger>
<SelectContent />
</Select>
</div>
<div class="flex-1 min-w-0 flex flex-col">
<h3 class={cn(
src/components/TaskDetail.tsx
+39 -2
View File
@@ -4,11 +4,12 @@ import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, sha
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy, MoreHorizontal, Gauge, Share2, UserMinus, GitBranch, Tag, Settings } from "lucide-solid";
import { StatusCircle } from "./StatusCircle";
import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
import { Button } from "./ui/button";
import { TagPicker } from "./TagPicker";
import { Badge } from "./ui/badge";
import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS } from "@/lib/constants";
import { PRIORITY_OPTIONS, URGENCY_OPTIONS, SIZE_OPTIONS, STATUS_OPTIONS } from "@/lib/constants";
import { store } from "@/store";
import { cn } from "@/lib/utils";
import { toast } from "solid-sonner";
@@ -72,6 +73,14 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
}
};
const updateStatus = (val: any) => {
const value = typeof val === 'object' ? val.value : val;
const s = parseInt(value);
if (!isNaN(s)) {
updateTask(props.task.id, { status: s });
}
};
const updateUrgency = (val: any) => {
const value = typeof val === 'object' ? val.value : val;
const u = parseInt(value);
@@ -119,6 +128,31 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
>
{/* Header Area */}
<div class="px-6 pt-6 pb-2 shrink-0">
<div class="flex items-start gap-4">
<div class="shrink-0 mt-0.5">
<Select<any>
value={(props.task.status ?? 0).toString()}
onChange={(val: string | null) => val && updateStatus(val)}
options={STATUS_OPTIONS}
optionValue="value"
optionTextValue="label"
placeholder="Status"
itemComponent={(props: any) => <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>}
>
<SelectTrigger
class="h-9 w-9 p-0 bg-transparent border-transparent hover:bg-muted/50 data-[expanded]:bg-muted/50 px-0 shadow-none focus:ring-0 shrink-0 overflow-hidden flex items-center justify-center [&>svg]:hidden"
onDoubleClick={(e: MouseEvent) => {
e.preventDefault();
e.stopPropagation();
updateStatus("10");
}}
>
<StatusCircle status={props.task.status ?? 0} size={28} />
</SelectTrigger>
<SelectContent />
</Select>
</div>
<textarea
id="task-detail-title"
name="task-title"
@@ -136,12 +170,15 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
}, 0);
}}
rows={1}
class="text-xl sm:text-2xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 w-full placeholder:text-muted-foreground/50 resize-none overflow-hidden leading-tight"
class="text-xl sm:text-2xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 w-full placeholder:text-muted-foreground/50 resize-none overflow-hidden leading-tight flex-1 min-w-0"
placeholder="Untitled Task"
/>
</div>
{/* Properties Bar */}
<div class="flex flex-wrap items-center gap-2 sm:gap-4 mt-2 text-sm">
{/* Priority */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
src/lib/constants.ts
+14
View File
@@ -54,3 +54,17 @@ export const SIZE_OPTIONS = [
{ value: "1", label: "1 - Five minutes" },
{ value: "0", label: "0 - Less than a minute" }
];
export const STATUS_OPTIONS = [
{ value: "10", label: "10 - Complete" },
{ value: "9", label: "9" },
{ value: "8", label: "8" },
{ value: "7", label: "7" },
{ value: "6", label: "6" },
{ value: "5", label: "5" },
{ value: "4", label: "4" },
{ value: "3", label: "3" },
{ value: "2", label: "2" },
{ value: "1", label: "1" },
{ value: "0", label: "0 - Not Yet Started" }
];
src/store/index.ts
+21 -4
View File
@@ -23,7 +23,8 @@ export interface Task {
startDate: string;
dueDate: string;
priority: number; // 1-10
completed: boolean;
status: number; // 0-10
completed: boolean; // Deprecated, kept for compat/computed from status = 10
tags: string[];
ownerId: string | null; // Add ownerId to interface
content?: string; // HTML content from Tiptap
@@ -46,7 +47,7 @@ export const checkRecurringTasks = () => {
const todayStr = nowObj.toLocaleDateString('en-CA'); // YYYY-MM-DD in local time
tasks.forEach(task => {
if (!task.completed || !task.recurrence) return;
if (task.status !== 10 || !task.recurrence) return;
// If deleted, we don't recurse?
if (task.deletedAt) return;
@@ -101,6 +102,7 @@ export const checkRecurringTasks = () => {
if (shouldReset) {
console.log(`Resetting recurring task: ${task.title}`);
updateTask(task.id, {
status: 0,
completed: false,
recurrence: {
...task.recurrence,
@@ -370,6 +372,13 @@ export const getCombinedScore = (task: Task): number => {
const sizeScore = ((task.size ?? 5) - 5) * -0.4;
baseScore += sizeScore;
// Status adjustment: 0-9 -> 0.0-2.0 weight
if (task.status < 10) {
// Map 0-9 to 0-2 range
const statusWeight = (task.status / 9) * 2.0;
baseScore += statusWeight;
}
return baseScore;
};
@@ -387,7 +396,8 @@ const mapRecordToTask = (r: any): Task => {
startDate: r.startDate,
dueDate: r.dueDate,
priority: r.priority,
completed: r.completed,
status: r.status ?? (r.completed ? 10 : 0),
completed: r.status === 10 || r.completed,
tags: tags,
ownerId: r.user || null,
content: r.content,
@@ -1013,6 +1023,7 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
startDate,
dueDate,
priority,
status: 0,
completed: false,
tags,
ownerId: pb.authStore.model?.id || "",
@@ -1032,6 +1043,7 @@ export const addTask = async (title: string, options?: { dueDate?: Date | string
startDate,
dueDate,
priority,
status: 0,
completed: false,
tags,
content,
@@ -1225,7 +1237,11 @@ export const setMatrixScaleDays = async (days: number) => {
export const toggleTask = (id: string) => {
const task = store.tasks.find(t => t.id === id);
if (task) {
updateTask(id, { completed: !task.completed });
const newCompleted = !task.completed;
updateTask(id, {
completed: newCompleted,
status: newCompleted ? 10 : 0
});
}
};
@@ -1672,6 +1688,7 @@ export const splitTask = async (taskId: string, userId: string) => {
tags: task.tags,
startDate: task.startDate,
dueDate: task.dueDate,
status: task.status,
completed: task.completed,
deletedAt: null,
sharedWith: [], // Start fresh with no shares