mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
258 lines
12 KiB
React
258 lines
12 KiB
React
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { useAdminTask } from '@/contexts/AdminTaskContext';
|
|
import GroupMultiSelect from '@/components/generic/GroupMultiSelect';
|
|
import api from '@/utils/api.util';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ArrowLeft, ChevronRight, ChevronLeft, Check, FileText, Users, ClipboardList } from 'lucide-react';
|
|
|
|
// ─── Steps ────────────────────────────────────────────────────────────────────
|
|
const STEPS = [
|
|
{ id: 0, label: 'Details', icon: FileText },
|
|
{ id: 1, label: 'Assign Groups', icon: Users },
|
|
{ id: 2, label: 'Review', icon: ClipboardList },
|
|
];
|
|
|
|
// ─── Summary row ──────────────────────────────────────────────────────────────
|
|
function SummaryRow({ label, value }) {
|
|
if (!value) return null;
|
|
return (
|
|
<div className="flex justify-between py-1.5 text-sm gap-4">
|
|
<span className="text-muted-foreground min-w-[120px] shrink-0">{label}</span>
|
|
<span className="text-foreground text-right">{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CreateTaskList() {
|
|
const navigate = useNavigate();
|
|
const { createTaskList, assignGroups, loading } = useAdminTask();
|
|
|
|
const [step, setStep] = useState(0);
|
|
const [form, setForm] = useState({ name: '', description: '' });
|
|
const [selectedGroupIds, setSelectedGroupIds] = useState([]);
|
|
const [allGroups, setAllGroups] = useState([]);
|
|
const [errors, setErrors] = useState({});
|
|
|
|
// Fetch groups for the review step's summary (names, not just ids)
|
|
useEffect(() => {
|
|
api.get('/admin/groups', { params: { limit: 500 } })
|
|
.then((res) => setAllGroups(res.data?.data?.data ?? res.data?.data ?? []))
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const validateDetails = () => {
|
|
const e = {};
|
|
if (!form.name.trim()) e.name = 'Task list name is required.';
|
|
setErrors(e);
|
|
return Object.keys(e).length === 0;
|
|
};
|
|
|
|
const handleNext = () => {
|
|
if (step === 0 && !validateDetails()) return;
|
|
setStep((s) => s + 1);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (step === 0) navigate('/admin/taskList');
|
|
else setStep((s) => s - 1);
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
if (!validateDetails()) { setStep(0); return; }
|
|
|
|
const created = await createTaskList({
|
|
name: form.name.trim(),
|
|
description: form.description.trim() || null,
|
|
});
|
|
|
|
if (!created) return; // createTaskList already toasts on error
|
|
|
|
// Assign selected groups if any — non-blocking: navigate regardless
|
|
if (selectedGroupIds.length > 0) {
|
|
await assignGroups(created.task_list_id, selectedGroupIds);
|
|
}
|
|
|
|
navigate(`/admin/taskList/${created.task_list_id}/view`);
|
|
};
|
|
|
|
const selectedGroupNames = allGroups
|
|
.filter((g) => selectedGroupIds.includes(g.group_id))
|
|
.map((g) => g.name);
|
|
|
|
return (
|
|
// ← plain div, no <form> — prevents any accidental submit on button clicks
|
|
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
|
|
<div className="mx-auto w-full lg:w-2xl space-y-6">
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3">
|
|
<Button type="button" variant="ghost" size="icon" onClick={() => navigate('/admin/taskList')}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-xl font-semibold">Create Task List</h1>
|
|
<p className="text-sm text-muted-foreground">View course information.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stepper */}
|
|
<div className="flex items-center gap-0">
|
|
{STEPS.map((s, i) => {
|
|
const Icon = s.icon;
|
|
const isActive = step === i;
|
|
const isDone = step > i;
|
|
|
|
return (
|
|
<div key={s.id} className="flex items-center flex-1 last:flex-none">
|
|
<div className="flex flex-col items-center gap-1">
|
|
<div className={cn(
|
|
'h-8 w-8 rounded-full flex items-center justify-center border transition-colors',
|
|
isDone && 'bg-emerald-600 border-emerald-600 text-white',
|
|
isActive && 'border-primary bg-primary text-primary-foreground',
|
|
!isActive && !isDone && 'border-border bg-background text-muted-foreground'
|
|
)}>
|
|
{isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
|
|
</div>
|
|
<span className={cn(
|
|
'text-[11px] font-medium whitespace-nowrap hidden sm:block',
|
|
isActive ? 'text-foreground' : 'text-muted-foreground',
|
|
isDone ? 'text-emerald-600' : ''
|
|
)}>
|
|
{s.label}
|
|
</span>
|
|
</div>
|
|
{i < STEPS.length - 1 && (
|
|
<div className={cn(
|
|
'flex-1 h-px mx-2 mb-4 transition-colors',
|
|
step > i ? 'bg-emerald-600' : 'bg-border'
|
|
)} />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Step content */}
|
|
<Card>
|
|
<CardContent className="space-y-4 min-h-[280px]">
|
|
<h2 className="text-base font-medium">{STEPS[step].label}</h2>
|
|
|
|
{/* ── Step 1: Details ── */}
|
|
{step === 0 && (
|
|
<div className="space-y-4">
|
|
<div className="space-y-3">
|
|
<Label htmlFor="name">Name *</Label>
|
|
<Input
|
|
id="name"
|
|
value={form.name}
|
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
|
placeholder="e.g. Onboarding Tasks"
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-xs text-destructive">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={form.description}
|
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
|
placeholder="Optional description"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Step 2: Assign Groups ── */}
|
|
{step === 1 && (
|
|
<div className="space-y-3">
|
|
<Label>
|
|
Assign to Groups
|
|
<span className="ml-1.5 text-xs text-muted-foreground font-normal">
|
|
(optional)
|
|
</span>
|
|
</Label>
|
|
<GroupMultiSelect
|
|
value={selectedGroupIds}
|
|
onChange={setSelectedGroupIds}
|
|
disabled={loading}
|
|
placeholder="Select groups to assign…"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Members of selected groups will be able to see and complete this task list.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Step 3: Review ── */}
|
|
{step === 2 && (
|
|
<div className="space-y-4">
|
|
<div className="border border-border rounded-lg p-4 space-y-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Task List Details</span>
|
|
</div>
|
|
<SummaryRow label="Name" value={form.name || '—'} />
|
|
<SummaryRow label="Description" value={form.description || '—'} />
|
|
</div>
|
|
|
|
<div className="border border-border rounded-lg p-4 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Assigned Groups</span>
|
|
</div>
|
|
{selectedGroupNames.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1.5 pt-1">
|
|
{selectedGroupNames.map((name) => (
|
|
<Badge key={name} variant="secondary" className="text-xs">{name}</Badge>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">No groups assigned — task list will not be visible to any users yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex items-center justify-between">
|
|
<Button type="button" variant="outline" onClick={handleBack}>
|
|
<ChevronLeft className="h-4 w-4 mr-1" />
|
|
{step === 0 ? 'Cancel' : 'Back'}
|
|
</Button>
|
|
|
|
{step < STEPS.length - 1 ? (
|
|
<Button type="button" onClick={handleNext}>
|
|
Next
|
|
<ChevronRight className="h-4 w-4 ml-1" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button" // ← type="button", not "submit"
|
|
disabled={loading}
|
|
onClick={handleCreate} // ← called manually
|
|
>
|
|
{loading ? 'Creating…' : 'Create Task List'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|