soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate status filters into event list
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-20 13:25:21 +01:00
parent 9d8f01d294
commit d7ba1880dc
1 changed files with 45 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
resources/js/admin/mobile/EventsPage.tsx
View File

@@ -264,66 +264,6 @@ function EventsList({
return ( return (
<YStack space="$3"> <YStack space="$3">
<Card
borderRadius={22}
borderWidth={2}
borderColor={border}
backgroundColor={surface}
padding="$3"
shadowColor={shadow}
shadowOpacity={0.14}
shadowRadius={14}
shadowOffset={{ width: 0, height: 8 }}
>
<YStack space="$2.5">
<XStack
alignItems="center"
paddingHorizontal="$3"
paddingVertical="$1.5"
borderRadius={999}
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
>
<Text fontSize="$xs" fontWeight="800" color={text}>
{t('events.workspace.fields.status')}
</Text>
</XStack>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<ToggleGroup
type="single"
value={statusFilter}
onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
>
<XStack space="$2" paddingVertical="$1">
{filters.map((filter) => {
const active = filter.key === statusFilter;
return (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius={999}
borderWidth={1}
borderColor={active ? activeBorder : border}
backgroundColor={active ? activeBg : surface}
paddingVertical="$2"
paddingHorizontal="$3"
>
<XStack alignItems="center" space="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
{filter.label}
</Text>
<PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
</XStack>
</ToggleGroup.Item>
);
})}
</XStack>
</ToggleGroup>
</ScrollView>
</YStack>
</Card>
{filteredEvents.length === 0 ? ( {filteredEvents.length === 0 ? (
<Card <Card
borderRadius={22} borderRadius={22}
@@ -357,12 +297,55 @@ function EventsList({
borderWidth={2} borderWidth={2}
borderColor={border} borderColor={border}
backgroundColor={surface} backgroundColor={surface}
padding="$2" padding="$2.5"
shadowColor={shadow} shadowColor={shadow}
shadowOpacity={0.14} shadowOpacity={0.14}
shadowRadius={14} shadowRadius={14}
shadowOffset={{ width: 0, height: 8 }} shadowOffset={{ width: 0, height: 8 }}
> >
<YStack space="$2.5">
<XStack alignItems="center" justifyContent="space-between">
<Text fontSize="$xs" fontWeight="800" color={text}>
{t('events.workspace.fields.status')}
</Text>
<Text fontSize="$xs" color={muted}>
{t('events.list.subtitle')}
</Text>
</XStack>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<ToggleGroup
type="single"
value={statusFilter}
onValueChange={(value) => value && onStatusChange(value as EventStatusKey)}
>
<XStack space="$2" paddingVertical="$1">
{filters.map((filter) => {
const active = filter.key === statusFilter;
return (
<ToggleGroup.Item
key={filter.key}
value={filter.key}
borderRadius={999}
borderWidth={1}
borderColor={active ? activeBorder : border}
backgroundColor={active ? activeBg : surface}
paddingVertical="$2"
paddingHorizontal="$3"
>
<XStack alignItems="center" space="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}>
{filter.label}
</Text>
<PillBadge tone={active ? 'success' : 'muted'}>{filter.count}</PillBadge>
</XStack>
</ToggleGroup.Item>
);
})}
</XStack>
</ToggleGroup>
</ScrollView>
</YStack>
<YGroup <YGroup
{...({ {...({
borderRadius: 18, borderRadius: 18,
@@ -371,6 +354,7 @@ function EventsList({
overflow: 'hidden', overflow: 'hidden',
backgroundColor: surface, backgroundColor: surface,
} as any)} } as any)}
marginTop="$2.5"
> >
{filteredEvents.map((event) => { {filteredEvents.map((event) => {
const statusKey = resolveEventStatusKey(event); const statusKey = resolveEventStatusKey(event);