mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
course,tasklist,task and completed validation
Signed-off-by: rgrgogu <obsequio.rus@gmail.com>
This commit is contained in:
rgrgogu
@@ -0,0 +1,241 @@
|
||||
/***********************************************************************************************************************************************************************
|
||||
* File Name : TaskMultiSelect.jsx
|
||||
* Type : Reusable Component
|
||||
* Description : Searchable multi-select dropdown for sibling Tasks (used to pick
|
||||
* a task's prerequisite tasks). Cloned from GroupMultiSelect.jsx's
|
||||
* UI/UX — portal dropdown, badge + "+N" overflow, select all/clear —
|
||||
* but takes `tasks` directly from the caller instead of fetching its
|
||||
* own endpoint, since the parent page already has the sibling task
|
||||
* list loaded.
|
||||
*
|
||||
* Props:
|
||||
* value : string[] — selected task_ids
|
||||
* onChange : (ids: string[]) => void
|
||||
* tasks : { task_id, name }[] — candidate tasks (already excludes self)
|
||||
* disabled? : boolean
|
||||
* placeholder?: string
|
||||
***********************************************************************************************************************************************************************/
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Check, ChevronsUpDown, X, ListChecks } from 'lucide-react';
|
||||
|
||||
export default function TaskMultiSelect({
|
||||
value = [],
|
||||
onChange,
|
||||
tasks = [],
|
||||
disabled = false,
|
||||
placeholder = 'Select tasks…',
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const [dropdownStyle, setDropdownStyle] = useState({});
|
||||
|
||||
const triggerRef = useRef(null);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
// ── Position portal dropdown under trigger ────────────────────────────────
|
||||
useLayoutEffect(() => {
|
||||
if (!open || !triggerRef.current) return;
|
||||
|
||||
const reposition = () => {
|
||||
const rect = triggerRef.current.getBoundingClientRect();
|
||||
setDropdownStyle({
|
||||
position: 'fixed',
|
||||
top: rect.bottom + 4,
|
||||
left: rect.left,
|
||||
width: rect.width,
|
||||
zIndex: 9999,
|
||||
});
|
||||
};
|
||||
|
||||
reposition();
|
||||
window.addEventListener('scroll', reposition, true);
|
||||
window.addEventListener('resize', reposition);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', reposition, true);
|
||||
window.removeEventListener('resize', reposition);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
// ── Close on outside click ────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e) => {
|
||||
if (
|
||||
triggerRef.current?.contains(e.target) ||
|
||||
dropdownRef.current?.contains(e.target)
|
||||
) return;
|
||||
setOpen(false);
|
||||
setSearch('');
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [open]);
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||||
const filtered = tasks.filter((t) =>
|
||||
t.name.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
const selectedTasks = tasks.filter((t) => value.includes(t.task_id));
|
||||
const overflowCount = selectedTasks.length - 1;
|
||||
|
||||
// All currently visible (filtered) IDs — used for select-all scope
|
||||
const filteredIds = filtered.map((t) => t.task_id);
|
||||
const allFilteredSelected = filteredIds.length > 0 && filteredIds.every((id) => value.includes(id));
|
||||
|
||||
const toggle = (taskId) =>
|
||||
onChange(value.includes(taskId)
|
||||
? value.filter((id) => id !== taskId)
|
||||
: [...value, taskId]
|
||||
);
|
||||
|
||||
const remove = (e, taskId) => {
|
||||
e.stopPropagation();
|
||||
onChange(value.filter((id) => id !== taskId));
|
||||
};
|
||||
|
||||
// Select all visible (filtered) tasks
|
||||
const handleSelectAll = () => {
|
||||
const merged = Array.from(new Set([...value, ...filteredIds]));
|
||||
onChange(merged);
|
||||
};
|
||||
|
||||
// Clear all selections
|
||||
const handleClear = () => onChange([]);
|
||||
|
||||
// ── Portal dropdown ───────────────────────────────────────────────────────
|
||||
const dropdown = open && createPortal(
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
style={dropdownStyle}
|
||||
className="rounded-md border border-border bg-popover shadow-lg"
|
||||
>
|
||||
{/* Search row */}
|
||||
<div className="p-2 border-b border-border">
|
||||
<Input
|
||||
autoFocus
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search tasks…"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Select all / Clear row */}
|
||||
{tasks.length > 0 && (
|
||||
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/40">
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={allFilteredSelected ? handleClear : handleSelectAll}
|
||||
className="text-xs text-primary hover:underline underline-offset-2 font-medium"
|
||||
>
|
||||
{allFilteredSelected ? 'Deselect all' : 'Select all'}
|
||||
{search && ` (${filteredIds.length})`}
|
||||
</button>
|
||||
{value.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={handleClear}
|
||||
className="text-xs text-muted-foreground hover:text-destructive transition-colors"
|
||||
>
|
||||
Clear ({value.length})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Options */}
|
||||
<ul className="max-h-52 overflow-y-auto py-1">
|
||||
{filtered.length === 0 ? (
|
||||
<li className="px-3 py-6 text-center text-xs text-muted-foreground">
|
||||
No tasks found.
|
||||
</li>
|
||||
) : (
|
||||
filtered.map((t) => {
|
||||
const selected = value.includes(t.task_id);
|
||||
return (
|
||||
<li
|
||||
key={t.task_id}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => toggle(t.task_id)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-2 text-sm cursor-pointer select-none',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
selected && 'bg-accent/50'
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'h-4 w-4 rounded border flex items-center justify-center shrink-0',
|
||||
selected
|
||||
? 'bg-primary border-primary text-primary-foreground'
|
||||
: 'border-input'
|
||||
)}>
|
||||
{selected && <Check className="h-3 w-3" />}
|
||||
</div>
|
||||
<ListChecks className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
<span className="truncate">{t.name}</span>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</ul>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── Trigger button ───────────────────────────────────────────── */}
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => { setOpen((o) => !o); setSearch(''); }}
|
||||
className={cn(
|
||||
'w-full min-h-9 px-3 py-1.5 rounded-md border border-input bg-background text-sm',
|
||||
'flex items-center gap-1.5 text-left',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
open && 'ring-2 ring-ring ring-offset-1'
|
||||
)}
|
||||
>
|
||||
{selectedTasks.length === 0 ? (
|
||||
<span className="text-muted-foreground flex-1">{placeholder}</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1 flex-1 min-w-0">
|
||||
{/* Always show only the first selected task */}
|
||||
<Badge variant="secondary" className="gap-1 text-xs pr-1 shrink-0 max-w-[180px]">
|
||||
<ListChecks className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">{selectedTasks[0].name}</span>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => remove(e, selectedTasks[0].task_id)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && remove(e, selectedTasks[0].task_id)}
|
||||
className="ml-0.5 rounded-full hover:bg-muted-foreground/20 p-0.5 cursor-pointer shrink-0"
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</span>
|
||||
</Badge>
|
||||
|
||||
{/* +N overflow chip */}
|
||||
{overflowCount > 0 && (
|
||||
<Badge variant="outline" className="text-xs px-1.5 shrink-0">
|
||||
+{overflowCount}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<ChevronsUpDown className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-auto" />
|
||||
</button>
|
||||
|
||||
{/* ── Portalled dropdown ────────────────────────────────────────── */}
|
||||
{dropdown}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user