this repo has no description
feat: toggle priority from task
+46
-16
+24
-2
mast-react-vite/src/App.tsx
+24
-2
mast-react-vite/src/App.tsx
···
255
255
}
256
256
};
257
257
258
+
// Callback to toggle task priority
259
+
const handleTogglePriority = (taskId: number) => {
260
+
const sqlQuery = `
261
+
UPDATE todos
262
+
SET priority = CASE
263
+
WHEN priority = 1 THEN 0
264
+
ELSE 1
265
+
END
266
+
WHERE id = ?
267
+
`;
268
+
269
+
ctx.db.exec(sqlQuery, [taskId]);
270
+
271
+
// Trigger sync with small delay to ensure changes are committed
272
+
setTimeout(() => {
273
+
syncWorker.postMessage({
274
+
type: 'SYNC_CHANGES',
275
+
dbname
276
+
});
277
+
}, 100);
278
+
};
279
+
258
280
// Use previewTodos if available, otherwise use regular todos
259
281
const displayTodos = previewTodos.length > 0 ? previewTodos : todos;
260
282
···
476
498
/>
477
499
<div className="h-2" />
478
500
<div className="flex-1 w-full">
479
-
<DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
501
+
<DataTable data={displayTodos} onMarkDone={handleMarkDone} onTogglePriority={handleTogglePriority} scrollToPreviewIndex={scrollToPreviewIndex} />
480
502
</div>
481
503
</section>
482
504
</div>
···
516
538
/>
517
539
<div className="h-2" />
518
540
<div className="flex-1 w-full h-full">
519
-
<DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
541
+
<DataTable data={displayTodos} onMarkDone={handleMarkDone} onTogglePriority={handleTogglePriority} scrollToPreviewIndex={scrollToPreviewIndex} />
520
542
</div>
521
543
</section>
522
544
</div>
+4
-3
mast-react-vite/src/components/ui/data-table.tsx
+4
-3
mast-react-vite/src/components/ui/data-table.tsx
···
13
13
interface DataTableProps<TData> {
14
14
data: TData[];
15
15
onMarkDone?: (selectedIds: number[]) => void;
16
+
onTogglePriority?: (taskId: number) => void;
16
17
scrollToPreviewIndex?: number; // Index of item to scroll to (for preview positioning)
17
18
}
18
19
19
-
export function DataTable<TData>({ data, onMarkDone, scrollToPreviewIndex }: DataTableProps<TData>) {
20
+
export function DataTable<TData>({ data, onMarkDone, onTogglePriority, scrollToPreviewIndex }: DataTableProps<TData>) {
20
21
const desktopScrollRef = useRef<HTMLDivElement>(null);
21
22
const mobileScrollRef = useRef<HTMLDivElement>(null);
22
23
···
49
50
<div className="hidden md:flex flex-col w-full">
50
51
<ScrollArea ref={desktopScrollRef} className="h-[calc(100vh-12rem)] rounded-md border">
51
52
{data.length ? (
52
-
data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
53
+
data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} onTogglePriority={onTogglePriority} />)
53
54
) : (
54
55
<div className="text-center py-4 text-muted-foreground">
55
56
No results.
···
62
63
<div className="md:hidden">
63
64
<ScrollArea ref={mobileScrollRef} className="min-h-[120%] h-[calc(100vh)] border">
64
65
{data.length ? (
65
-
data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
66
+
data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} onTogglePriority={onTogglePriority} />)
66
67
) : (
67
68
<div className="text-center py-4 text-muted-foreground">
68
69
No results.
+18
-11
mast-react-vite/src/components/ui/task.tsx
+18
-11
mast-react-vite/src/components/ui/task.tsx
···
14
14
data: any;
15
15
index?: number;
16
16
onMarkDone?: (selectedIds: number[]) => void; // Callback to mark tasks as done
17
+
onTogglePriority?: (taskId: number) => void; // Callback to toggle task priority
17
18
}
18
19
19
-
export function Task({ selected, onSelect, data, onMarkDone }: TaskProps) {
20
+
export function Task({ selected, onSelect, data, onMarkDone, onTogglePriority }: TaskProps) {
20
21
// Track whether this task should be visible or exit-animating
21
22
const [isVisible, setIsVisible] = React.useState(true);
22
23
const { isSelected, toggleSelection, selectItem, sharedDragX, selectedItems, clearSelection} = useSelection();
···
192
193
<div className="flex items-start gap-4 relative">
193
194
<div className="flex-1 min-w-0">
194
195
{/* Priority flag icon in top right */}
195
-
{displayPriority && (
196
-
<div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-red-500'}`} title="Priority task">
197
-
<Flag className="w-4 h-4" fill="currentColor" />
198
-
</div>
199
-
)}
200
-
{!displayPriority && (
201
-
<div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-gray-300'}`} title="Normal priority">
202
-
<Flag className="w-4 h-4" />
203
-
</div>
204
-
)}
196
+
<button
197
+
className={`absolute -top-2 -right-2 cursor-pointer p-1 rounded z-10 ${
198
+
data.completed === 2 || isPreviewPriority
199
+
? 'text-yellow-600'
200
+
: displayPriority
201
+
? 'text-red-500'
202
+
: 'text-gray-300'
203
+
}`}
204
+
title={`${displayPriority ? 'Priority' : ''} task (click to toggle)`}
205
+
onClick={(e) => {
206
+
e.stopPropagation();
207
+
onTogglePriority?.(data.id);
208
+
}}
209
+
>
210
+
<Flag className="w-4 h-4" fill={displayPriority ? "currentColor" : "none"} />
211
+
</button>
205
212
206
213
{/* Display due date in bottom right */}
207
214
{(data.due || (hasPreview && data.preview.due)) && (