diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx index 93178e9..43d65cb 100644 --- a/ui/src/components/layout/PageHeader.tsx +++ b/ui/src/components/layout/PageHeader.tsx @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from 'react'; import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'; -import { Button, Tooltip } from '../ui'; +import { Avatar, Button, Tooltip } from '../ui'; import { Dropdown } from '../work-item'; import { useModulesFilter } from '../../contexts/ModulesFilterContext'; import { useWorkspaceViewsState } from '../../contexts/WorkspaceViewsStateContext'; @@ -11,6 +11,7 @@ import { CreateViewModal, ModuleFiltersPanel, } from '../workspace-views'; +import { CollapsibleSection } from '../workspace-views/WorkspaceViewsFiltersShared'; import { ProjectSavedViewDisplayDropdown } from '../project-saved-view/ProjectSavedViewDisplayDropdown'; import { ProjectSavedViewMoreMenu } from '../project-saved-view/ProjectSavedViewMoreMenu'; import { DateRangeModal } from '../workspace-views/DateRangeModal'; @@ -58,6 +59,7 @@ import { import { PROJECT_VIEWS_FILTER_EVENT } from '../../lib/projectViewsEvents'; import { slugify } from '../../lib/slug'; import { MODULE_WORK_ITEMS_COUNT_EVENT } from '../../lib/moduleWorkItemsPrefs'; +import { parseProjectsListSearchParams } from '../../lib/projectsListSearchParams'; import { ModuleDetailHeader } from './ModuleDetailHeader'; export type ProjectSection = 'issues' | 'cycles' | 'modules' | 'views' | 'pages'; @@ -285,6 +287,40 @@ const IconFilter = () => ( ); +const IconLock = () => ( + + + + +); +const IconGlobe = () => ( + + + + + + +); const IconPlus = () => ( (null); + const [projectsDateRangeModalOpen, setProjectsDateRangeModalOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(!!searchQuery); + const [projectsFiltersSearch, setProjectsFiltersSearch] = useState(''); + const [workspaceMembers, setWorkspaceMembers] = useState([]); + const [showAllLeads, setShowAllLeads] = useState(false); + const [showAllMembers, setShowAllMembers] = useState(false); + const [projectsFilterSectionOpen, setProjectsFilterSectionOpen] = useState({ + createdDate: true, + access: true, + lead: true, + members: true, + }); const baseUrl = `/${workspaceSlug}`; + const sortFieldLabelMap: Record = { + manual: 'Manual', + name: 'Name', + created_date: 'Created date', + member_count: 'Number of members', + }; + const activeFilterCount = + (favoritesOnly ? 1 : 0) + + (myProjectsOnly ? 1 : 0) + + (createdDateFilter ? 1 : 0) + + selectedAccess.length + + selectedLeadIds.length + + selectedMemberIds.length; + + useEffect(() => { + if (!workspaceSlug) return; + let cancelled = false; + workspaceService + .listMembers(workspaceSlug) + .then((members) => { + if (!cancelled) setWorkspaceMembers(members ?? []); + }) + .catch(() => { + if (!cancelled) setWorkspaceMembers([]); + }); + return () => { + cancelled = true; + }; + }, [workspaceSlug]); + + const updateParam = ( + key: + | 'q' + | 'sort' + | 'sortField' + | 'sortDir' + | 'filter' + | 'access' + | 'lead' + | 'members' + | 'myProjects' + | 'createdDate' + | 'createdAfter' + | 'createdBefore', + value?: string, + ) => { + const next = new URLSearchParams(searchParams); + if (!value) next.delete(key); + else next.set(key, value); + setSearchParams(next, { replace: true }); + }; + const updateParams = ( + updates: Partial< + Record< + | 'q' + | 'sort' + | 'sortField' + | 'sortDir' + | 'filter' + | 'access' + | 'lead' + | 'members' + | 'myProjects' + | 'createdDate' + | 'createdAfter' + | 'createdBefore', + string | undefined + > + >, + ) => { + const next = new URLSearchParams(searchParams); + Object.entries(updates).forEach(([key, value]) => { + if (!value) next.delete(key); + else next.set(key, value); + }); + setSearchParams(next, { replace: true }); + }; + const setCsvParam = (key: 'access' | 'lead' | 'members', values: string[]) => { + updateParam(key, values.length ? values.join(',') : undefined); + }; + const toggleCsvParam = (key: 'access' | 'lead' | 'members', value: string) => { + const current = + key === 'access' ? selectedAccess : key === 'lead' ? selectedLeadIds : selectedMemberIds; + setCsvParam( + key, + current.includes(value) ? current.filter((v) => v !== value) : [...current, value], + ); + }; + + const memberOptions = [ + ...(authUser + ? [{ id: authUser.id, label: 'You', avatarUrl: authUser.avatarUrl, sortLabel: 'You' }] + : []), + ...workspaceMembers + .filter((member) => member.member_id !== authUser?.id) + .map((member) => ({ + id: member.member_id, + label: + member.member_display_name?.trim() || + member.member_email?.trim() || + member.member_id.slice(0, 8), + avatarUrl: member.member_avatar ?? null, + sortLabel: + member.member_display_name?.trim() || member.member_email?.trim() || member.member_id, + })), + ].sort((a, b) => a.sortLabel.localeCompare(b.sortLabel)); + const normalizedFilterSearch = projectsFiltersSearch.trim().toLowerCase(); + const includeBySearch = (label: string) => + !normalizedFilterSearch || label.toLowerCase().includes(normalizedFilterSearch); + const visibleLeadOptions = memberOptions.filter((opt) => includeBySearch(opt.label)); + const visibleMemberOptions = memberOptions.filter((opt) => includeBySearch(opt.label)); + const leadOptionsToRender = showAllLeads ? visibleLeadOptions : visibleLeadOptions.slice(0, 5); + const memberOptionsToRender = showAllMembers + ? visibleMemberOptions + : visibleMemberOptions.slice(0, 5); return ( <> @@ -817,7 +993,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) { + + + {sortFieldLabelMap[sortField]} + {projectsDropdownOpen === 'projects-sort' ? : } + + } + triggerClassName="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)" > - - Created date - - - + ); + })} +
+ {[ + { value: 'asc', label: 'Ascending' }, + { value: 'desc', label: 'Descending' }, + ].map((opt) => { + const active = sortDir === opt.value; + const disabled = sortField === 'manual'; + return ( + + ); + })} + + } + displayValue={activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters'} + panelClassName="w-80 rounded-md border border-(--border-subtle) bg-(--bg-surface-1) py-1 shadow-(--shadow-raised)" + triggerContent={ + <> + + + + + {activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters'} + + {projectsDropdownOpen === 'projects-filters' ? ( + + ) : ( + + )} + + } + triggerClassName="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)" > - - Filters - - +
+
+ + + + setProjectsFiltersSearch(e.target.value)} + placeholder="Search" + className="min-w-0 flex-1 bg-transparent text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none" + aria-label="Search project filters" + /> +
+
+
+ + + + setProjectsFilterSectionOpen((prev) => ({ ...prev, access: !prev.access })) + } + > + {[ + { value: 'private' as const, label: 'Private', icon: }, + { value: 'public' as const, label: 'Public', icon: }, + ] + .filter((opt) => includeBySearch(opt.label)) + .map((opt) => ( + + ))} + + + setProjectsFilterSectionOpen((prev) => ({ ...prev, lead: !prev.lead })) + } + > + {leadOptionsToRender.map((opt) => ( + + ))} + {visibleLeadOptions.length > 5 && ( + + )} + + + setProjectsFilterSectionOpen((prev) => ({ ...prev, members: !prev.members })) + } + > + {memberOptionsToRender.map((opt) => ( + + ))} + {visibleMemberOptions.length > 5 && ( + + )} + + + setProjectsFilterSectionOpen((prev) => ({ + ...prev, + createdDate: !prev.createdDate, + })) + } + > + {[ + { value: 'today', label: 'Today' }, + { value: 'last7', label: 'Last 7 days' }, + { value: 'last30', label: 'Last 30 days' }, + { value: 'custom', label: 'Custom' }, + ] + .filter((opt) => includeBySearch(opt.label)) + .map((opt) => { + const active = createdDateFilter === opt.value; + return ( + + ); + })} + +
+
+ setProjectsDateRangeModalOpen(false)} + title="Created date range" + after={createdAfter} + before={createdBefore} + onApply={(after, before) => { + updateParams({ + createdDate: 'custom', + createdAfter: after, + createdBefore: before, + }); + setProjectsDateRangeModalOpen(false); + }} + /> ); } diff --git a/ui/src/lib/projectsListSearchParams.ts b/ui/src/lib/projectsListSearchParams.ts new file mode 100644 index 0000000..899218e --- /dev/null +++ b/ui/src/lib/projectsListSearchParams.ts @@ -0,0 +1,76 @@ +export type ProjectsSortField = 'manual' | 'name' | 'created_date' | 'member_count'; +export type ProjectsSortDir = 'asc' | 'desc'; +export type ProjectsCreatedDateFilter = '' | 'today' | 'last7' | 'last30' | 'custom'; + +export interface ProjectsListSearchParamsState { + searchQuery: string; + sortField: ProjectsSortField; + sortDir: ProjectsSortDir; + accessFilters: Array<'private' | 'public'>; + leadFilters: string[]; + memberFilters: string[]; + myProjectsOnly: boolean; + createdDateFilter: ProjectsCreatedDateFilter; + createdAfter: string | null; + createdBefore: string | null; + favoritesOnly: boolean; +} + +function parseCsvParam(searchParams: URLSearchParams, key: string): string[] { + return (searchParams.get(key) ?? '') + .split(',') + .map((value) => value.trim()) + .filter(Boolean); +} + +export function parseProjectsListSearchParams( + searchParams: URLSearchParams, +): ProjectsListSearchParamsState { + const sortFieldParam = searchParams.get('sortField'); + const sortDirParam = searchParams.get('sortDir'); + const legacySortParam = searchParams.get('sort'); + const createdDateParam = searchParams.get('createdDate'); + + const sortField: ProjectsSortField = + sortFieldParam === 'manual' || + sortFieldParam === 'name' || + sortFieldParam === 'created_date' || + sortFieldParam === 'member_count' + ? sortFieldParam + : legacySortParam === 'name_asc' || legacySortParam === 'name_desc' + ? 'name' + : 'created_date'; + + const sortDir: ProjectsSortDir = + sortDirParam === 'asc' || sortDirParam === 'desc' + ? sortDirParam + : legacySortParam === 'created_asc' || legacySortParam === 'name_asc' + ? 'asc' + : legacySortParam === 'created_desc' || legacySortParam === 'name_desc' + ? 'desc' + : 'asc'; + + const createdDateFilter: ProjectsCreatedDateFilter = + createdDateParam === 'today' || + createdDateParam === 'last7' || + createdDateParam === 'last30' || + createdDateParam === 'custom' + ? createdDateParam + : ''; + + return { + searchQuery: (searchParams.get('q') ?? '').toLowerCase().trim(), + sortField, + sortDir, + accessFilters: parseCsvParam(searchParams, 'access').filter( + (value): value is 'private' | 'public' => value === 'private' || value === 'public', + ), + leadFilters: parseCsvParam(searchParams, 'lead'), + memberFilters: parseCsvParam(searchParams, 'members'), + myProjectsOnly: searchParams.get('myProjects') === '1', + createdDateFilter, + createdAfter: searchParams.get('createdAfter'), + createdBefore: searchParams.get('createdBefore'), + favoritesOnly: searchParams.get('filter') === 'favorites', + }; +} diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx index 7427c8f..928d686 100644 --- a/ui/src/pages/ProjectsListPage.tsx +++ b/ui/src/pages/ProjectsListPage.tsx @@ -8,6 +8,9 @@ import { workspaceService } from '../services/workspaceService'; import { projectService } from '../services/projectService'; import { favoriteService } from '../services/favoriteService'; import { useFavorites } from '../contexts/FavoritesContext'; +import { useAuth } from '../contexts/AuthContext'; +import { parseISODateLocal } from '../lib/dateOnly'; +import { parseProjectsListSearchParams } from '../lib/projectsListSearchParams'; import type { WorkspaceApiResponse, ProjectApiResponse } from '../api/types'; const MAX_AVATARS = 3; @@ -55,8 +58,21 @@ function getCoverGradient(projectId: string): string { export function ProjectsListPage() { const { workspaceSlug } = useParams<{ workspaceSlug: string }>(); + const { user: authUser } = useAuth(); const [searchParams, setSearchParams] = useSearchParams(); - const searchQuery = (searchParams.get('q') ?? '').toLowerCase().trim(); + const { + searchQuery, + accessFilters, + leadFilters, + memberFilters, + myProjectsOnly, + sortField, + sortDir, + createdDateFilter, + createdAfter, + createdBefore, + favoritesOnly, + } = parseProjectsListSearchParams(searchParams); const [workspace, setWorkspace] = useState(null); const [allProjects, setAllProjects] = useState([]); const [membersByProject, setMembersByProject] = useState>({}); @@ -68,14 +84,9 @@ export function ProjectsListPage() { const createProjectOpen = searchParams.get('createProject') === '1'; const closeCreateModal = () => { - setSearchParams( - (prev) => { - const next = new URLSearchParams(prev); - next.delete('createProject'); - return next; - }, - { replace: true }, - ); + const next = new URLSearchParams(searchParams); + next.delete('createProject'); + setSearchParams(next, { replace: true }); }; useEffect(() => { @@ -180,14 +191,125 @@ export function ProjectsListPage() { }; }, [workspaceSlug, allProjects]); - const projects = searchQuery - ? allProjects.filter( - (p) => - p.name.toLowerCase().includes(searchQuery) || - p.identifier?.toLowerCase().includes(searchQuery) || - p.description?.toLowerCase().includes(searchQuery), - ) - : allProjects; + const projectOrderById = new Map(allProjects.map((p, index) => [p.id, index])); + + const filteredProjects = allProjects + .filter((p) => { + if (!searchQuery) return true; + return ( + p.name.toLowerCase().includes(searchQuery) || + p.identifier?.toLowerCase().includes(searchQuery) || + p.description?.toLowerCase().includes(searchQuery) + ); + }) + .filter((p) => (favoritesOnly ? favoriteProjectIds.includes(p.id) : true)) + .filter((p) => { + if (accessFilters.length === 0) return true; + const accessValue: 'private' | 'public' = p.guest_view_all_features ? 'public' : 'private'; + return accessFilters.includes(accessValue); + }) + .filter((p) => { + if (leadFilters.length === 0) return true; + return !!p.project_lead_id && leadFilters.includes(p.project_lead_id); + }) + .filter((p) => { + if (memberFilters.length === 0) return true; + if (!Object.prototype.hasOwnProperty.call(membersByProject, p.id)) return true; + const memberIds = membersByProject[p.id]; + return memberFilters.some( + (memberId) => memberIds.includes(memberId) || p.project_lead_id === memberId, + ); + }) + .filter((p) => { + if (!myProjectsOnly || !authUser) return true; + if (!Object.prototype.hasOwnProperty.call(membersByProject, p.id)) return true; + const memberIds = membersByProject[p.id]; + return memberIds.includes(authUser.id) || p.project_lead_id === authUser.id; + }) + .filter((p) => { + if (!createdDateFilter) return true; + const createdAtMs = Date.parse(p.created_at ?? ''); + if (!Number.isFinite(createdAtMs)) return false; + const now = new Date(); + if (createdDateFilter === 'today') { + const startOfDay = new Date(now); + startOfDay.setHours(0, 0, 0, 0); + return createdAtMs >= startOfDay.getTime(); + } + if (createdDateFilter === 'custom') { + const afterRaw = createdAfter?.trim() ?? ''; + const beforeRaw = createdBefore?.trim() ?? ''; + let afterMs: number | undefined; + let beforeMs: number | undefined; + if (afterRaw) { + const t = parseISODateLocal(afterRaw).getTime(); + if (!Number.isFinite(t)) return false; + afterMs = t; + } + if (beforeRaw) { + const beforeDate = parseISODateLocal(beforeRaw); + const t = beforeDate.getTime(); + if (!Number.isFinite(t)) return false; + beforeMs = new Date( + beforeDate.getFullYear(), + beforeDate.getMonth(), + beforeDate.getDate(), + 23, + 59, + 59, + 999, + ).getTime(); + } + if (afterMs === undefined && beforeMs === undefined) return true; + if (afterMs !== undefined && createdAtMs < afterMs) return false; + if (beforeMs !== undefined && createdAtMs > beforeMs) return false; + return true; + } + const days = createdDateFilter === 'last7' ? 7 : 30; + const threshold = now.getTime() - days * 24 * 60 * 60 * 1000; + return createdAtMs >= threshold; + }); + + const projects = filteredProjects + .map((project) => ({ + project, + createdAtMs: Date.parse(project.created_at ?? '') || 0, + membersCount: new Set([ + ...(membersByProject[project.id] ?? []), + ...(project.project_lead_id ? [project.project_lead_id] : []), + ]).size, + })) + .sort((a, b) => { + let result = 0; + switch (sortField) { + case 'name': + result = a.project.name.localeCompare(b.project.name); + break; + case 'member_count': + result = a.membersCount - b.membersCount; + break; + case 'manual': + result = + (projectOrderById.get(a.project.id) ?? 0) - (projectOrderById.get(b.project.id) ?? 0); + break; + case 'created_date': + default: + result = a.createdAtMs - b.createdAtMs; + break; + } + if (sortField === 'manual') return result; + return sortDir === 'desc' ? -result : result; + }) + .map(({ project }) => project); + + const hasActiveFiltersOrSearch = + !!searchQuery || + favoritesOnly || + accessFilters.length > 0 || + leadFilters.length > 0 || + memberFilters.length > 0 || + !!createdDateFilter || + myProjectsOnly; if (loading) { return ( @@ -327,7 +449,15 @@ export function ProjectsListPage() { ); })} - {projects.length === 0 &&

No projects yet.

} + {projects.length === 0 && ( +

+ {hasActiveFiltersOrSearch + ? searchQuery + ? 'No results match your search' + : 'No projects match the selected filters.' + : 'No projects yet.'} +

+ )} ); } diff --git a/ui/src/pages/SettingsPage.tsx b/ui/src/pages/SettingsPage.tsx index a47cbb1..cddd4d1 100644 --- a/ui/src/pages/SettingsPage.tsx +++ b/ui/src/pages/SettingsPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { Card, CardContent, Button, Avatar, Modal } from '../components/ui'; import { CoverImageModal } from '../components/CoverImageModal'; @@ -948,6 +948,52 @@ export function SettingsPage() { { id: number; email: string; role: 'member' | 'admin' }[] >([{ id: 0, email: '', role: 'member' }]); const [inviting, setInviting] = useState(false); + + const submitInviteModal = useCallback(async () => { + if (!workspaceSlug || inviting) return; + const rows = inviteRows + .map((r) => ({ email: r.email.trim(), role: r.role })) + .filter((r) => r.email.length > 0); + if (rows.length === 0) { + setInviteModalOpen(false); + setInviteTarget(null); + setInviteRows([{ id: 0, email: '', role: 'member' }]); + return; + } + setInviting(true); + try { + const roleNum = (r: { role: 'member' | 'admin' }) => (r.role === 'admin' ? 20 : 10); + if (inviteTarget === 'project' && selectedProjectId) { + await Promise.all( + rows.map((r) => + projectService.createInvite(workspaceSlug, selectedProjectId, { + email: r.email, + role: roleNum(r), + }), + ), + ); + const refreshed = await projectService.listInvites(workspaceSlug, selectedProjectId); + setProjectInvites(refreshed ?? []); + } else { + await Promise.all( + rows.map((r) => + workspaceService.createInvite(workspaceSlug, { + email: r.email, + role: roleNum(r), + }), + ), + ); + const refreshed = await workspaceService.listInvites(workspaceSlug); + setWorkspaceInvites(refreshed ?? []); + } + setInviteModalOpen(false); + setInviteTarget(null); + setInviteRows([{ id: 0, email: '', role: 'member' }]); + } finally { + setInviting(false); + } + }, [workspaceSlug, inviting, inviteRows, inviteTarget, selectedProjectId]); + const [profileSaveLoading, setProfileSaveLoading] = useState(false); const [profileError, setProfileError] = useState(null); const [preferencesSaveLoading, setPreferencesSaveLoading] = useState(false); @@ -3878,116 +3924,87 @@ export function SettingsPage() { > Cancel - } > -

- {inviteTarget === 'project' - ? 'Invite people to this project.' - : 'Invite people to collaborate on your workspace.'} -

-
- {inviteRows.map((row) => ( -
- - setInviteRows((prev) => - prev.map((r) => (r.id === row.id ? { ...r, email: e.target.value } : r)), - ) - } - placeholder="name@company.com" - className="min-w-[200px] flex-1 rounded-md border border-(--border-subtle) bg-(--bg-surface-1) px-3 py-2 text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none focus:border-(--border-strong)" - /> -
- setInviteRows((prev) => - prev.map((r) => - r.id === row.id ? { ...r, role: e.target.value as 'member' | 'admin' } : r, - ), + prev.map((r) => (r.id === row.id ? { ...r, email: e.target.value } : r)), ) } - className="w-full appearance-none rounded-md border border-(--border-subtle) bg-(--bg-surface-1) py-2 pl-2.5 pr-7 text-sm text-(--txt-primary) focus:outline-none focus:border-(--border-strong)" - > - - - - - - + onKeyDown={(e) => { + if (e.key !== 'Enter' || e.shiftKey) return; + e.preventDefault(); + void submitInviteModal(); + }} + placeholder="name@company.com" + className="min-w-[200px] flex-1 rounded-md border border-(--border-subtle) bg-(--bg-surface-1) px-3 py-2 text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none focus:border-(--border-strong)" + /> +
+ + + + +
-
- ))} - -
+ ))} + + + {/* Project state (workflow) add/edit modal */}