Address all QA review warnings and suggestions for entity pages
Warnings fixed: - 3.1: _compute_display_name stale-data bug on all-names-clear - 3.3: Location getValue unsafe type cast replaced with typed helper - 3.5: Explicit updated_at timestamp refresh in locations router - 3.6: Drop deprecated relationship column (migration 021, model, schema, TS type) Suggestions fixed: - 4.1: CategoryAutocomplete keyboard navigation (ArrowUp/Down, Enter, Escape) - 4.2: Mobile detail panel backdrop click-to-close on both pages - 4.3: PersonCreate whitespace bypass in require_some_name validator - 4.5/4.6: Extract SortIcon, DataRow, SectionHeader from EntityTable render body - 4.8: PersonForm sends null instead of empty string for birthday - 4.10: Remove unnecessary executeDelete wrapper in EntityDetailPanel Also includes previously completed fixes from prior session: - 2.1: Remove Z suffix from naive timestamp in formatUpdatedAt - 3.2: Drag-then-click conflict prevention in SortableCategoryChip - 3.4: localStorage JSON shape validation in useCategoryOrder - 4.4: Category chip styling consistency (both pages use inline hsl styles) - 4.9: restrictToHorizontalAxis modifier on CategoryFilterBar drag Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
1231c4b36d
commit
1806e15487
@ -0,0 +1,21 @@
|
||||
"""Drop deprecated relationship column from people table
|
||||
|
||||
Revision ID: 021
|
||||
Revises: 020
|
||||
Create Date: 2026-02-25
|
||||
"""
|
||||
from alembic import op
|
||||
import sqlalchemy as sa
|
||||
|
||||
revision = '021'
|
||||
down_revision = '020'
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade() -> None:
|
||||
op.drop_column('people', 'relationship')
|
||||
|
||||
|
||||
def downgrade() -> None:
|
||||
op.add_column('people', sa.Column('relationship', sa.String(100), nullable=True))
|
||||
@ -1,5 +1,5 @@
|
||||
from sqlalchemy import String, Text, Date, Boolean, func, text
|
||||
from sqlalchemy.orm import Mapped, mapped_column, relationship as sa_relationship
|
||||
from sqlalchemy.orm import Mapped, mapped_column, relationship
|
||||
from datetime import datetime, date
|
||||
from typing import Optional, List
|
||||
from app.database import Base
|
||||
@ -14,7 +14,6 @@ class Person(Base):
|
||||
phone: Mapped[Optional[str]] = mapped_column(String(50), nullable=True)
|
||||
address: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
|
||||
birthday: Mapped[Optional[date]] = mapped_column(Date, nullable=True)
|
||||
relationship: Mapped[Optional[str]] = mapped_column(String(100), nullable=True)
|
||||
notes: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
|
||||
# Extended fields
|
||||
first_name: Mapped[Optional[str]] = mapped_column(String(100), nullable=True)
|
||||
@ -29,4 +28,4 @@ class Person(Base):
|
||||
updated_at: Mapped[datetime] = mapped_column(default=func.now(), onupdate=func.now())
|
||||
|
||||
# Relationships
|
||||
assigned_tasks: Mapped[List["ProjectTask"]] = sa_relationship(back_populates="person")
|
||||
assigned_tasks: Mapped[List["ProjectTask"]] = relationship(back_populates="person")
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
from fastapi import APIRouter, Depends, HTTPException, Query
|
||||
from sqlalchemy.ext.asyncio import AsyncSession
|
||||
from sqlalchemy import select, or_
|
||||
from datetime import datetime, timezone
|
||||
from typing import Optional, List
|
||||
import asyncio
|
||||
import json
|
||||
@ -151,6 +152,9 @@ async def update_location(
|
||||
for key, value in update_data.items():
|
||||
setattr(location, key, value)
|
||||
|
||||
# Guarantee timestamp refresh regardless of DB driver behaviour
|
||||
location.updated_at = datetime.now(timezone.utc).replace(tzinfo=None)
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(location)
|
||||
|
||||
|
||||
@ -19,13 +19,14 @@ def _compute_display_name(
|
||||
nickname: Optional[str],
|
||||
name: Optional[str],
|
||||
) -> str:
|
||||
"""Denormalise a display name. Nickname wins; else 'First Last'; else legacy name."""
|
||||
"""Denormalise a display name. Nickname wins; else 'First Last'; else legacy name; else empty."""
|
||||
if nickname:
|
||||
return nickname
|
||||
full = ((first_name or '') + ' ' + (last_name or '')).strip()
|
||||
if full:
|
||||
return full
|
||||
return name or ''
|
||||
# Don't fall back to stale `name` if all fields were explicitly cleared
|
||||
return (name or '').strip() if name else ''
|
||||
|
||||
|
||||
@router.get("/", response_model=List[PersonResponse])
|
||||
|
||||
@ -24,7 +24,12 @@ class PersonCreate(BaseModel):
|
||||
|
||||
@model_validator(mode='after')
|
||||
def require_some_name(self) -> 'PersonCreate':
|
||||
if not any([self.name, self.first_name, self.last_name, self.nickname]):
|
||||
if not any([
|
||||
self.name and self.name.strip(),
|
||||
self.first_name and self.first_name.strip(),
|
||||
self.last_name and self.last_name.strip(),
|
||||
self.nickname and self.nickname.strip(),
|
||||
]):
|
||||
raise ValueError('At least one name field is required')
|
||||
return self
|
||||
|
||||
@ -72,7 +77,6 @@ class PersonResponse(BaseModel):
|
||||
address: Optional[str]
|
||||
birthday: Optional[date]
|
||||
category: Optional[str]
|
||||
relationship: Optional[str] # deprecated — kept for legacy calendar/birthday compat, will be removed
|
||||
is_favourite: bool
|
||||
company: Optional[str]
|
||||
job_title: Optional[str]
|
||||
|
||||
77
frontend/package-lock.json
generated
77
frontend/package-lock.json
generated
@ -8,6 +8,10 @@
|
||||
"name": "umbra",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/react": "^6.1.15",
|
||||
@ -330,6 +334,73 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/accessibility": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
|
||||
"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/core": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
|
||||
"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/accessibility": "^3.1.1",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/modifiers": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
|
||||
"integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@dnd-kit/core": "^6.3.0",
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/sortable": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
|
||||
"integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@dnd-kit/utilities": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
|
||||
"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
|
||||
@ -3055,6 +3126,12 @@
|
||||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
|
||||
@ -9,24 +9,25 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/react": "^6.1.15",
|
||||
"@fullcalendar/timegrid": "^6.1.15",
|
||||
"@tanstack/react-query": "^5.62.0",
|
||||
"axios": "^1.7.9",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"lucide-react": "^0.468.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.0",
|
||||
"@tanstack/react-query": "^5.62.0",
|
||||
"axios": "^1.7.9",
|
||||
"@fullcalendar/react": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/timegrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"lucide-react": "^0.468.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"sonner": "^1.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@dnd-kit/sortable": "^8.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2"
|
||||
"tailwind-merge": "^2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.12",
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
type PanelField,
|
||||
} from '@/components/shared';
|
||||
import { useTableVisibility } from '@/hooks/useTableVisibility';
|
||||
import { useCategoryOrder } from '@/hooks/useCategoryOrder';
|
||||
import LocationForm from './LocationForm';
|
||||
|
||||
export default function LocationsPage() {
|
||||
@ -74,6 +75,8 @@ export default function LocationsPage() {
|
||||
[locations]
|
||||
);
|
||||
|
||||
const { orderedCategories, reorder: reorderCategories } = useCategoryOrder('locations', allCategories);
|
||||
|
||||
const sortedLocations = useMemo(() => {
|
||||
return [...locations].sort((a, b) => {
|
||||
const aVal = String(a[sortKey as keyof Location] ?? '');
|
||||
@ -107,19 +110,20 @@ export default function LocationsPage() {
|
||||
[sortedLocations, activeFilters, search, showPinned]
|
||||
);
|
||||
|
||||
// Build row groups for the table
|
||||
// Build row groups for the table — ordered by custom category order
|
||||
const groups = useMemo(() => {
|
||||
if (activeFilters.length <= 1) {
|
||||
const label = activeFilters.length === 1 ? activeFilters[0] : 'All';
|
||||
return [{ label, rows: filteredLocations }];
|
||||
}
|
||||
return activeFilters
|
||||
return orderedCategories
|
||||
.filter((cat) => activeFilters.includes(cat))
|
||||
.map((cat) => ({
|
||||
label: cat,
|
||||
rows: filteredLocations.filter((l) => l.category === cat),
|
||||
}))
|
||||
.filter((g) => g.rows.length > 0);
|
||||
}, [activeFilters, filteredLocations]);
|
||||
}, [activeFilters, filteredLocations, orderedCategories]);
|
||||
|
||||
const selectedLocation = useMemo(
|
||||
() => locations.find((l) => l.id === selectedLocationId) ?? null,
|
||||
@ -165,6 +169,10 @@ export default function LocationsPage() {
|
||||
prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
|
||||
);
|
||||
};
|
||||
const selectAllCategories = () => {
|
||||
const allSelected = orderedCategories.every((c) => activeFilters.includes(c));
|
||||
setActiveFilters(allSelected ? [] : [...orderedCategories]);
|
||||
};
|
||||
|
||||
const columns: ColumnDef<Location>[] = [
|
||||
{
|
||||
@ -262,9 +270,12 @@ export default function LocationsPage() {
|
||||
</div>
|
||||
)}
|
||||
getUpdatedAt={(l) => l.updated_at}
|
||||
getValue={(l, key) =>
|
||||
(l[key as keyof Location] as string | undefined) ?? undefined
|
||||
}
|
||||
getValue={(l, key) => {
|
||||
const val = l[key as keyof Location];
|
||||
if (val == null || val === '') return undefined;
|
||||
if (typeof val === 'boolean') return undefined;
|
||||
return String(val);
|
||||
}}
|
||||
isFavourite={selectedLocation?.is_frequent}
|
||||
onToggleFavourite={() => selectedLocation && toggleFrequentMutation.mutate(selectedLocation)}
|
||||
favouriteLabel="frequent"
|
||||
@ -279,13 +290,15 @@ export default function LocationsPage() {
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<CategoryFilterBar
|
||||
categories={allCategories}
|
||||
categories={orderedCategories}
|
||||
activeFilters={activeFilters}
|
||||
pinnedLabel="Frequent"
|
||||
showPinned={showPinned}
|
||||
onToggleAll={() => setActiveFilters([])}
|
||||
onTogglePinned={() => setShowPinned((v) => !v)}
|
||||
onToggleCategory={handleToggleCategory}
|
||||
onSelectAllCategories={selectAllCategories}
|
||||
onReorderCategories={reorderCategories}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
/>
|
||||
@ -362,8 +375,14 @@ export default function LocationsPage() {
|
||||
|
||||
{/* Mobile detail panel overlay */}
|
||||
{panelOpen && selectedLocation && (
|
||||
<div className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
|
||||
<div className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg">
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
|
||||
onClick={() => setSelectedLocationId(null)}
|
||||
>
|
||||
<div
|
||||
className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{renderPanel()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@ import {
|
||||
getDaysUntilBirthday,
|
||||
} from '@/components/shared/utils';
|
||||
import { useTableVisibility } from '@/hooks/useTableVisibility';
|
||||
import { useCategoryOrder } from '@/hooks/useCategoryOrder';
|
||||
import PersonForm from './PersonForm';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@ -150,7 +151,13 @@ const columns: ColumnDef<Person>[] = [
|
||||
visibilityLevel: 'all',
|
||||
render: (p) =>
|
||||
p.category ? (
|
||||
<span className="px-2 py-0.5 text-xs rounded bg-accent/10 text-accent">
|
||||
<span
|
||||
className="px-2 py-0.5 text-xs rounded"
|
||||
style={{
|
||||
backgroundColor: 'hsl(var(--accent-color) / 0.1)',
|
||||
color: 'hsl(var(--accent-color))',
|
||||
}}
|
||||
>
|
||||
{p.category}
|
||||
</span>
|
||||
) : (
|
||||
@ -207,6 +214,8 @@ export default function PeoplePage() {
|
||||
return Array.from(cats).sort();
|
||||
}, [people]);
|
||||
|
||||
const { orderedCategories, reorder: reorderCategories } = useCategoryOrder('people', allCategories);
|
||||
|
||||
// Favourites (pinned section) — sorted
|
||||
const favourites = useMemo(
|
||||
() => sortPeople(people.filter((p) => p.is_favourite), sortKey, sortDir),
|
||||
@ -239,19 +248,21 @@ export default function PeoplePage() {
|
||||
return sortPeople(list, sortKey, sortDir);
|
||||
}, [people, showPinned, activeFilters, search, sortKey, sortDir]);
|
||||
|
||||
// Build row groups for the table
|
||||
// Build row groups for the table — ordered by custom category order
|
||||
const groups = useMemo(() => {
|
||||
if (activeFilters.length <= 1) {
|
||||
const label = activeFilters.length === 1 ? activeFilters[0] : 'All';
|
||||
return [{ label, rows: filteredPeople }];
|
||||
}
|
||||
return activeFilters
|
||||
// Use orderedCategories to control section order, filtered to active only
|
||||
return orderedCategories
|
||||
.filter((cat) => activeFilters.includes(cat))
|
||||
.map((cat) => ({
|
||||
label: cat,
|
||||
rows: filteredPeople.filter((p) => p.category === cat),
|
||||
}))
|
||||
.filter((g) => g.rows.length > 0);
|
||||
}, [activeFilters, filteredPeople]);
|
||||
}, [activeFilters, filteredPeople, orderedCategories]);
|
||||
|
||||
// Stats
|
||||
const totalCount = people.length;
|
||||
@ -288,6 +299,10 @@ export default function PeoplePage() {
|
||||
prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
|
||||
);
|
||||
};
|
||||
const selectAllCategories = () => {
|
||||
const allSelected = orderedCategories.every((c) => activeFilters.includes(c));
|
||||
setActiveFilters(allSelected ? [] : [...orderedCategories]);
|
||||
};
|
||||
|
||||
// Delete mutation
|
||||
const deleteMutation = useMutation({
|
||||
@ -393,10 +408,12 @@ export default function PeoplePage() {
|
||||
activeFilters={activeFilters}
|
||||
pinnedLabel="Favourites"
|
||||
showPinned={showPinned}
|
||||
categories={allCategories}
|
||||
categories={orderedCategories}
|
||||
onToggleAll={toggleAll}
|
||||
onTogglePinned={togglePinned}
|
||||
onToggleCategory={toggleCategory}
|
||||
onSelectAllCategories={selectAllCategories}
|
||||
onReorderCategories={reorderCategories}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
/>
|
||||
@ -517,8 +534,14 @@ export default function PeoplePage() {
|
||||
|
||||
{/* Mobile detail panel overlay */}
|
||||
{panelOpen && selectedPerson && (
|
||||
<div className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
|
||||
<div className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg">
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
|
||||
onClick={() => setSelectedPersonId(null)}
|
||||
>
|
||||
<div
|
||||
className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{renderPanel()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -89,7 +89,7 @@ export default function PersonForm({ person, categories, onClose }: PersonFormPr
|
||||
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
mutation.mutate(formData);
|
||||
mutation.mutate({ ...formData, birthday: formData.birthday || null } as typeof formData);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -17,12 +17,19 @@ export default function CategoryAutocomplete({
|
||||
id,
|
||||
}: CategoryAutocompleteProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeIndex, setActiveIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
const filtered = categories.filter(
|
||||
(c) => c.toLowerCase().includes(value.toLowerCase()) && c.toLowerCase() !== value.toLowerCase()
|
||||
);
|
||||
|
||||
// Reset active index when filtered list changes
|
||||
useEffect(() => {
|
||||
setActiveIndex(-1);
|
||||
}, [filtered.length, value]);
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
@ -34,6 +41,14 @@ export default function CategoryAutocomplete({
|
||||
return () => document.removeEventListener('mousedown', handleMouseDown);
|
||||
}, []);
|
||||
|
||||
// Scroll active item into view
|
||||
useEffect(() => {
|
||||
if (activeIndex >= 0 && listRef.current) {
|
||||
const item = listRef.current.children[activeIndex] as HTMLElement | undefined;
|
||||
item?.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
}, [activeIndex]);
|
||||
|
||||
const handleBlur = () => {
|
||||
const match = categories.find((c) => c.toLowerCase() === value.toLowerCase());
|
||||
if (match && match !== value) onChange(match);
|
||||
@ -43,8 +58,37 @@ export default function CategoryAutocomplete({
|
||||
const handleSelect = (cat: string) => {
|
||||
onChange(cat);
|
||||
setOpen(false);
|
||||
setActiveIndex(-1);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (!open || filtered.length === 0) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setActiveIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : 0));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setActiveIndex((prev) => (prev > 0 ? prev - 1 : filtered.length - 1));
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (activeIndex >= 0 && activeIndex < filtered.length) {
|
||||
handleSelect(filtered[activeIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
setOpen(false);
|
||||
setActiveIndex(-1);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const activeDescendantId = activeIndex >= 0 ? `${id || 'cat'}-option-${activeIndex}` : undefined;
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative">
|
||||
<Input
|
||||
@ -57,25 +101,36 @@ export default function CategoryAutocomplete({
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
autoComplete="off"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open && filtered.length > 0}
|
||||
aria-controls={open && filtered.length > 0 ? `${id || 'cat'}-listbox` : undefined}
|
||||
aria-activedescendant={activeDescendantId}
|
||||
/>
|
||||
{open && filtered.length > 0 && (
|
||||
<ul
|
||||
ref={listRef}
|
||||
id={`${id || 'cat'}-listbox`}
|
||||
role="listbox"
|
||||
className="absolute z-10 mt-1 w-full bg-card border border-border rounded-md shadow-lg max-h-40 overflow-y-auto"
|
||||
>
|
||||
{filtered.map((cat) => (
|
||||
{filtered.map((cat, idx) => (
|
||||
<li
|
||||
key={cat}
|
||||
id={`${id || 'cat'}-option-${idx}`}
|
||||
role="option"
|
||||
aria-selected={cat === value}
|
||||
aria-selected={idx === activeIndex}
|
||||
onPointerDown={(e) => {
|
||||
e.preventDefault();
|
||||
handleSelect(cat);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm hover:bg-card-elevated cursor-pointer transition-colors duration-150"
|
||||
className={`px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150 ${
|
||||
idx === activeIndex
|
||||
? 'bg-card-elevated text-foreground'
|
||||
: 'hover:bg-card-elevated'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</li>
|
||||
|
||||
@ -1,6 +1,22 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
|
||||
import {
|
||||
SortableContext,
|
||||
horizontalListSortingStrategy,
|
||||
useSortable,
|
||||
arrayMove,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
|
||||
interface CategoryFilterBarProps {
|
||||
activeFilters: string[];
|
||||
@ -10,6 +26,8 @@ interface CategoryFilterBarProps {
|
||||
onToggleAll: () => void;
|
||||
onTogglePinned: () => void;
|
||||
onToggleCategory: (cat: string) => void;
|
||||
onSelectAllCategories?: () => void;
|
||||
onReorderCategories?: (order: string[]) => void;
|
||||
searchValue: string;
|
||||
onSearchChange: (val: string) => void;
|
||||
}
|
||||
@ -22,6 +40,70 @@ const activePillStyle = {
|
||||
color: 'hsl(var(--accent-color))',
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SortableCategoryChip
|
||||
// ---------------------------------------------------------------------------
|
||||
function SortableCategoryChip({
|
||||
id,
|
||||
isActive,
|
||||
onToggle,
|
||||
}: {
|
||||
id: string;
|
||||
isActive: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id });
|
||||
|
||||
const wasDragging = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) wasDragging.current = true;
|
||||
}, [isDragging]);
|
||||
|
||||
const handleClick = () => {
|
||||
if (wasDragging.current) {
|
||||
wasDragging.current = false;
|
||||
return;
|
||||
}
|
||||
onToggle();
|
||||
};
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
...(isActive ? activePillStyle : {}),
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={setNodeRef}
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
aria-label={`Filter by ${id}`}
|
||||
className="px-2 py-1 text-xs font-medium rounded transition-colors duration-150 whitespace-nowrap shrink-0 touch-none cursor-grab active:cursor-grabbing"
|
||||
style={style}
|
||||
{...attributes}
|
||||
aria-pressed={isActive}
|
||||
{...listeners}
|
||||
>
|
||||
<span className={isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
|
||||
{id}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// CategoryFilterBar
|
||||
// ---------------------------------------------------------------------------
|
||||
export default function CategoryFilterBar({
|
||||
activeFilters,
|
||||
pinnedLabel,
|
||||
@ -30,6 +112,8 @@ export default function CategoryFilterBar({
|
||||
onToggleAll,
|
||||
onTogglePinned,
|
||||
onToggleCategory,
|
||||
onSelectAllCategories,
|
||||
onReorderCategories,
|
||||
searchValue,
|
||||
onSearchChange,
|
||||
}: CategoryFilterBarProps) {
|
||||
@ -38,6 +122,12 @@ export default function CategoryFilterBar({
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isAllActive = activeFilters.length === 0;
|
||||
const allCategoriesSelected =
|
||||
categories.length > 0 && categories.every((c) => activeFilters.includes(c));
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
);
|
||||
|
||||
// Collapse search if there are many categories
|
||||
useEffect(() => {
|
||||
@ -49,6 +139,15 @@ export default function CategoryFilterBar({
|
||||
setTimeout(() => searchInputRef.current?.focus(), 50);
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id || !onReorderCategories) return;
|
||||
const oldIndex = categories.indexOf(String(active.id));
|
||||
const newIndex = categories.indexOf(String(over.id));
|
||||
if (oldIndex === -1 || newIndex === -1) return;
|
||||
onReorderCategories(arrayMove(categories, oldIndex, newIndex));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 overflow-x-auto">
|
||||
{/* All pill */}
|
||||
@ -81,7 +180,7 @@ export default function CategoryFilterBar({
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Other pill + expandable chips */}
|
||||
{/* Categories pill + expandable chips */}
|
||||
{categories.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
@ -92,7 +191,7 @@ export default function CategoryFilterBar({
|
||||
style={otherOpen ? activePillStyle : undefined}
|
||||
>
|
||||
<span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
|
||||
Other
|
||||
Categories
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -104,28 +203,49 @@ export default function CategoryFilterBar({
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{categories.map((cat) => {
|
||||
const isActive = activeFilters.includes(cat);
|
||||
return (
|
||||
{/* "All" chip inside categories — non-draggable */}
|
||||
{onSelectAllCategories && (
|
||||
<button
|
||||
key={cat}
|
||||
type="button"
|
||||
onClick={() => onToggleCategory(cat)}
|
||||
aria-label={`Filter by ${cat}`}
|
||||
aria-pressed={isActive}
|
||||
onClick={onSelectAllCategories}
|
||||
aria-label="Select all categories"
|
||||
aria-pressed={allCategoriesSelected}
|
||||
className="px-2 py-1 text-xs font-medium rounded transition-colors duration-150 whitespace-nowrap shrink-0"
|
||||
style={
|
||||
isActive
|
||||
? activePillStyle
|
||||
: undefined
|
||||
style={allCategoriesSelected ? activePillStyle : undefined}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
allCategoriesSelected
|
||||
? ''
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}
|
||||
>
|
||||
<span className={isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
|
||||
{cat}
|
||||
All
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
|
||||
{/* Draggable category chips */}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
modifiers={[restrictToHorizontalAxis]}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={categories}
|
||||
strategy={horizontalListSortingStrategy}
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<SortableCategoryChip
|
||||
key={cat}
|
||||
id={cat}
|
||||
isActive={activeFilters.includes(cat)}
|
||||
onToggle={() => onToggleCategory(cat)}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useCallback } from 'react';
|
||||
import { X, Pencil, Trash2, Star, StarOff } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@ -43,8 +42,7 @@ export function EntityDetailPanel<T>({
|
||||
onToggleFavourite,
|
||||
favouriteLabel = 'favourite',
|
||||
}: EntityDetailPanelProps<T>) {
|
||||
const executeDelete = useCallback(() => onDelete(), [onDelete]);
|
||||
const { confirming, handleClick: handleDelete } = useConfirmAction(executeDelete);
|
||||
const { confirming, handleClick: handleDelete } = useConfirmAction(onDelete);
|
||||
|
||||
if (!item) return null;
|
||||
|
||||
|
||||
@ -48,34 +48,35 @@ function SkeletonRow({ colCount }: { colCount: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function EntityTable<T extends { id: number }>({
|
||||
columns,
|
||||
groups,
|
||||
pinnedRows,
|
||||
pinnedLabel,
|
||||
showPinned,
|
||||
selectedId,
|
||||
onRowClick,
|
||||
function SortIcon({
|
||||
sortKey,
|
||||
sortDir,
|
||||
onSort,
|
||||
visibilityMode,
|
||||
loading = false,
|
||||
}: EntityTableProps<T>) {
|
||||
const visibleColumns = columns.filter((col) => isVisible(col.visibilityLevel, visibilityMode));
|
||||
const colCount = visibleColumns.length;
|
||||
const showPinnedSection = showPinned && pinnedRows.length > 0;
|
||||
|
||||
const SortIcon = ({ colKey }: { colKey: string }) => {
|
||||
colKey,
|
||||
}: {
|
||||
sortKey: string;
|
||||
sortDir: 'asc' | 'desc';
|
||||
colKey: string;
|
||||
}) {
|
||||
if (sortKey !== colKey) return <ArrowUpDown className="h-3.5 w-3.5 ml-1 opacity-40" />;
|
||||
return sortDir === 'asc' ? (
|
||||
<ArrowUp className="h-3.5 w-3.5 ml-1" />
|
||||
) : (
|
||||
<ArrowDown className="h-3.5 w-3.5 ml-1" />
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const DataRow = ({ item }: { item: T }) => (
|
||||
function DataRow<T extends { id: number }>({
|
||||
item,
|
||||
visibleColumns,
|
||||
selectedId,
|
||||
onRowClick,
|
||||
}: {
|
||||
item: T;
|
||||
visibleColumns: ColumnDef<T>[];
|
||||
selectedId: number | null;
|
||||
onRowClick: (id: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<tr
|
||||
className={`border-b border-border/50 cursor-pointer hover:bg-card-elevated transition-colors duration-150 outline-none focus-visible:ring-1 focus-visible:ring-ring ${
|
||||
selectedId === item.id ? 'bg-accent/10' : ''
|
||||
@ -98,8 +99,10 @@ export function EntityTable<T extends { id: number }>({
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const SectionHeader = ({ label }: { label: string }) => (
|
||||
function SectionHeader({ label, colCount }: { label: string; colCount: number }) {
|
||||
return (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={colCount}
|
||||
@ -109,6 +112,25 @@ export function EntityTable<T extends { id: number }>({
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export function EntityTable<T extends { id: number }>({
|
||||
columns,
|
||||
groups,
|
||||
pinnedRows,
|
||||
pinnedLabel,
|
||||
showPinned,
|
||||
selectedId,
|
||||
onRowClick,
|
||||
sortKey,
|
||||
sortDir,
|
||||
onSort,
|
||||
visibilityMode,
|
||||
loading = false,
|
||||
}: EntityTableProps<T>) {
|
||||
const visibleColumns = columns.filter((col) => isVisible(col.visibilityLevel, visibilityMode));
|
||||
const colCount = visibleColumns.length;
|
||||
const showPinnedSection = showPinned && pinnedRows.length > 0;
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
@ -128,7 +150,7 @@ export function EntityTable<T extends { id: number }>({
|
||||
className="flex items-center hover:text-foreground transition-colors duration-150"
|
||||
>
|
||||
{col.label}
|
||||
<SortIcon colKey={col.key} />
|
||||
<SortIcon sortKey={sortKey} sortDir={sortDir} colKey={col.key} />
|
||||
</button>
|
||||
) : (
|
||||
col.label
|
||||
@ -144,9 +166,15 @@ export function EntityTable<T extends { id: number }>({
|
||||
<>
|
||||
{showPinnedSection && (
|
||||
<>
|
||||
<SectionHeader label={pinnedLabel} />
|
||||
<SectionHeader label={pinnedLabel} colCount={colCount} />
|
||||
{pinnedRows.map((item) => (
|
||||
<DataRow key={item.id} item={item} />
|
||||
<DataRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
visibleColumns={visibleColumns}
|
||||
selectedId={selectedId}
|
||||
onRowClick={onRowClick}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
@ -154,9 +182,15 @@ export function EntityTable<T extends { id: number }>({
|
||||
<React.Fragment key={group.label}>
|
||||
{group.rows.length > 0 && (
|
||||
<>
|
||||
<SectionHeader label={group.label} />
|
||||
<SectionHeader label={group.label} colCount={colCount} />
|
||||
{group.rows.map((item) => (
|
||||
<DataRow key={item.id} item={item} />
|
||||
<DataRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
visibleColumns={visibleColumns}
|
||||
selectedId={selectedId}
|
||||
onRowClick={onRowClick}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -29,9 +29,7 @@ export function getAvatarColor(name: string): string {
|
||||
|
||||
export function formatUpdatedAt(updatedAt: string): string {
|
||||
try {
|
||||
// Backend stores naive UTC timestamps — append Z so date-fns treats as UTC
|
||||
const utcString = updatedAt.endsWith('Z') ? updatedAt : updatedAt + 'Z';
|
||||
return `Updated ${formatDistanceToNow(parseISO(utcString), { addSuffix: true })}`;
|
||||
return `Updated ${formatDistanceToNow(parseISO(updatedAt), { addSuffix: true })}`;
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
|
||||
41
frontend/src/hooks/useCategoryOrder.ts
Normal file
41
frontend/src/hooks/useCategoryOrder.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { useState, useCallback, useMemo } from 'react';
|
||||
|
||||
const STORAGE_PREFIX = 'umbra-';
|
||||
|
||||
export function useCategoryOrder(key: string, categories: string[]) {
|
||||
const storageKey = `${STORAGE_PREFIX}${key}-category-order`;
|
||||
|
||||
const [savedOrder, setSavedOrder] = useState<string[]>(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw);
|
||||
return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
const orderedCategories = useMemo(() => {
|
||||
const catSet = new Set(categories);
|
||||
// Keep saved items that still exist, in saved order
|
||||
const ordered = savedOrder.filter((c) => catSet.has(c));
|
||||
// Append any new categories not in saved order
|
||||
const remaining = categories.filter((c) => !savedOrder.includes(c));
|
||||
return [...ordered, ...remaining];
|
||||
}, [categories, savedOrder]);
|
||||
|
||||
const reorder = useCallback(
|
||||
(newOrder: string[]) => {
|
||||
setSavedOrder(newOrder);
|
||||
try {
|
||||
localStorage.setItem(storageKey, JSON.stringify(newOrder));
|
||||
} catch {
|
||||
// localStorage full — silently ignore
|
||||
}
|
||||
},
|
||||
[storageKey],
|
||||
);
|
||||
|
||||
return { orderedCategories, reorder };
|
||||
}
|
||||
@ -151,7 +151,6 @@ export interface Person {
|
||||
address?: string;
|
||||
birthday?: string;
|
||||
category?: string;
|
||||
relationship?: string;
|
||||
is_favourite: boolean;
|
||||
company?: string;
|
||||
job_title?: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user