mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
242 lines
11 KiB
React
242 lines
11 KiB
React
/***********************************************************************************************************************************************************************
|
|
* 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}
|
|
</>
|
|
);
|
|
}
|