feat: add projects selector to analytics page
This commit is contained in:
@@ -796,6 +796,7 @@ export default function ProjectsAnalyticsPage() {
|
||||
from: subDays(new Date(), 29),
|
||||
to: new Date(),
|
||||
}));
|
||||
const [tableProjectIds, setTableProjectIds] = useState<string[]>([]);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
@@ -866,12 +867,13 @@ export default function ProjectsAnalyticsPage() {
|
||||
// Load table data
|
||||
useEffect(() => {
|
||||
loadTableData();
|
||||
}, [workspaceId, tableGrouping, tableDateGrouping, tableDateRange]);
|
||||
}, [workspaceId, tableGrouping, tableDateGrouping, tableDateRange, tableProjectIds]);
|
||||
|
||||
const loadTableData = async () => {
|
||||
try {
|
||||
setTableLoading(true);
|
||||
const response = await demoAwareAnalyticsApi.projects(workspaceId, {
|
||||
project_ids: tableProjectIds.length > 0 ? tableProjectIds : undefined,
|
||||
date_from: tableDateRange?.from
|
||||
? startOfDay(tableDateRange.from).toISOString()
|
||||
: undefined,
|
||||
@@ -1025,6 +1027,59 @@ export default function ProjectsAnalyticsPage() {
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="w-[200px] justify-start">
|
||||
{tableProjectIds.length === 0
|
||||
? "Все проекты"
|
||||
: tableProjectIds.length === 1
|
||||
? projects.find((p) => p.id === tableProjectIds[0])?.title || "Проект"
|
||||
: `${tableProjectIds.length} проекта`}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-64 p-2" align="start">
|
||||
<div className="flex gap-2 mb-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="flex-1 text-xs"
|
||||
onClick={() => setTableProjectIds([])}
|
||||
disabled={tableProjectIds.length === 0}
|
||||
>
|
||||
Все
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="flex-1 text-xs"
|
||||
onClick={() => setTableProjectIds(projects.map((p) => p.id))}
|
||||
disabled={tableProjectIds.length === projects.length}
|
||||
>
|
||||
Сбросить
|
||||
</Button>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto border rounded-md p-1">
|
||||
{projects.map((project) => {
|
||||
const isSelected = tableProjectIds.includes(project.id);
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer"
|
||||
onClick={() => {
|
||||
const newIds = isSelected
|
||||
? tableProjectIds.filter((id) => id !== project.id)
|
||||
: [...tableProjectIds, project.id];
|
||||
setTableProjectIds(newIds);
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={isSelected} />
|
||||
<span className="text-sm truncate">{project.title}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Select
|
||||
value={tableGrouping}
|
||||
onValueChange={(value) =>
|
||||
|
||||
Reference in New Issue
Block a user