task list working

This commit is contained in:
rgrgogu
2026-07-16 19:04:02 +08:00
parent ac2ba33e24
commit 5b9f174718
7 changed files with 93 additions and 44 deletions
+2 -2
View File
@@ -332,7 +332,7 @@ export function AdminTaskProvider({ children }) {
request(async () => {
const res = await api.post(`${BASE}/${taskListId}/tasks`, payload);
toast('Task created.');
return res.data?.data?.data ?? null;
return res.data?.data ?? null;
}),
[request]
);
@@ -342,7 +342,7 @@ export function AdminTaskProvider({ children }) {
request(async () => {
const res = await api.patch(`${BASE}/${taskListId}/tasks/${taskId}`, payload);
toast('Task updated.');
return res.data?.data?.data ?? null;
return res.data?.data ?? null;
}),
[request]
);
@@ -1,6 +1,7 @@
// config/columns.config.jsx
// Column definitions and pinning config for the Users table.
// Column definitions and pinning config for the Archived Tasks table.
import { format } from "date-fns";
import { buildColumns } from "@/utils/table.util";
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
@@ -10,8 +11,21 @@ export const columnPinning = {
left: [],
};
// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
deadline: (info) => {
const value = info.getValue();
if (!value) return <span className="text-muted-foreground/40">-</span>;
return (
<span className="text-xs text-muted-foreground">
{format(new Date(value), "MMMM d, yyyy: h:mma")}
</span>
);
},
};
/**
* Builds the full column array for the Users table.
* Builds the full column array for the Archived Tasks table.
*
* @param {Array} attributes Field definitions from the server (drives data columns)
* @param {Array} rowActions Row-level kebab action definitions
@@ -22,7 +36,7 @@ export function buildDataColumns(attributes, rowActions) {
return [
buildSelectionColumn(),
...buildColumns(visibleAttributes),
buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
...buildColumns(visibleAttributes, { cellOverrides }),
buildRowActionsColumn(rowActions, { dropdownLabel: "Task Actions" }),
];
}
@@ -1,6 +1,7 @@
// config/columns.config.jsx
// Column definitions and pinning config for the Users table.
// Column definitions and pinning config for the Tasks table.
import { format } from "date-fns";
import { buildColumns } from "@/utils/table.util";
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
@@ -10,8 +11,21 @@ export const columnPinning = {
left: [],
};
// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
deadline: (info) => {
const value = info.getValue();
if (!value) return <span className="text-muted-foreground/40">-</span>;
return (
<span className="text-xs text-muted-foreground">
{format(new Date(value), "MMMM d, yyyy: h:mma")}
</span>
);
},
};
/**
* Builds the full column array for the Users table.
* Builds the full column array for the Tasks table.
*
* @param {Array} attributes Field definitions from the server (drives data columns)
* @param {Array} rowActions Row-level kebab action definitions
@@ -22,7 +36,7 @@ export function buildDataColumns(attributes, rowActions) {
return [
buildSelectionColumn(),
...buildColumns(visibleAttributes),
buildRowActionsColumn(rowActions, { dropdownLabel: "User Actions" }),
...buildColumns(visibleAttributes, { cellOverrides }),
buildRowActionsColumn(rowActions, { dropdownLabel: "Task Actions" }),
];
}
@@ -22,6 +22,7 @@ export function buildRowActions({ navigate, onArchive, onRestore, onMoveUp, onMo
icon: <ArrowUp className="size-4" />,
onClick: (row) => onMoveUp(row),
hidden: () => showArchived,
separator: true,
disabled: (row) => tasks.findIndex((t) => t.task_id === row.task_id) <= 0,
},
{
@@ -30,7 +31,6 @@ export function buildRowActions({ navigate, onArchive, onRestore, onMoveUp, onMo
icon: <ArrowDown className="size-4" />,
onClick: (row) => onMoveDown(row),
hidden: () => showArchived,
separator: true,
disabled: (row) => tasks.findIndex((t) => t.task_id === row.task_id) >= tasks.length - 1,
},
{
@@ -14,6 +14,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Skeleton } from '@/components/ui/skeleton';
import DeadlinePicker from '@/components/generic/DeadlinePicker';
import {
AlertDialog, AlertDialogAction, AlertDialogCancel,
AlertDialogContent, AlertDialogDescription,
@@ -51,9 +52,7 @@ export default function EditTask() {
setForm({
name: data.name ?? '',
description: data.description ?? '',
deadline: data.deadline
? new Date(data.deadline).toISOString().slice(0, 16)
: '',
deadline: data.deadline ?? '',
status: data.status ?? 'pending',
is_required: data.is_required ?? true,
requirements: reqs,
@@ -185,16 +184,15 @@ export default function EditTask() {
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1">
<Label htmlFor="deadline">Deadline</Label>
<Input
id="deadline"
type="datetime-local"
<div className="space-y-3">
<Label>Deadline</Label>
<DeadlinePicker
value={form.deadline}
onChange={(e) => setForm({ ...form, deadline: e.target.value })}
onChange={(iso) => setForm({ ...form, deadline: iso })}
disabled={loading}
/>
</div>
<div className="space-y-1">
<Label>Status</Label>
<Select
@@ -211,7 +209,6 @@ export default function EditTask() {
</SelectContent>
</Select>
</div>
</div>
<div className="flex items-center justify-between rounded-md border px-3 py-2.5">
<div>
@@ -12,6 +12,7 @@ import {
ArrowLeft, Pencil, FileText, CalendarClock,
Link2, Upload, BookOpen, BookMarked, FileCheck2,
Info, GitPullRequest, Tag, Globe, Copy, File, Bookmark,
ClipboardCheck,
} from 'lucide-react';
// ─── Same config as ViewTaskList — label, icon only, all styling via shadcn tokens
@@ -128,8 +129,8 @@ function TaskRequirementsSection({ requirements = [] }) {
export default function ViewTask() {
const navigate = useNavigate();
const { taskListId, taskId } = useParams();
const { fetchTask } = useAdminTask();
const { fmtDate } = useDateFormat();
const { fetchTask, fetchCompletions, completionPagination, completionLoading } = useAdminTask();
const { fmtDateTime } = useDateFormat();
const [task, setTask] = useState(null);
@@ -138,6 +139,7 @@ export default function ViewTask() {
if (!data) return;
setTask(data);
});
fetchCompletions(taskListId, taskId, { page: 1, limit: 1 });
}, [taskListId, taskId]);
if (!task) return (
@@ -202,7 +204,7 @@ export default function ViewTask() {
<span className="text-sm">
Deadline:{' '}
<span className="text-foreground font-medium">
{fmtDate(task.deadline)}
{fmtDateTime(task.deadline)}
</span>
</span>
</div>
@@ -224,6 +226,28 @@ export default function ViewTask() {
</>
)}
{/* Completions */}
<Separator />
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<ClipboardCheck className="size-4" /> Completions
</div>
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-foreground">
{completionLoading
? '…'
: `${completionPagination.totalRecords} submission${completionPagination.totalRecords === 1 ? '' : 's'}`}
</span>
<Button
variant="outline"
size="sm"
onClick={() => navigate(`/admin/taskList/${taskListId}/tasks/${taskId}/completions`)}
>
View
</Button>
</div>
</div>
<Separator />
{/* Requirements */}
@@ -16,7 +16,7 @@ function normalizeLinkUrl(url) {
export const requirementSchema = z.object({
type: z.string(),
reference_id: z.string().optional(),
reference_id: z.string().nullable().optional(),
duration_seconds: z.number().optional(),
}).passthrough().superRefine((req, ctx) => {
if (!READ_TYPES.includes(req.type)) return;