paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(gallery/filters): add Rated and Commented filters (UI + backend).\n\n- UI: add star (Rated) and message (Commented) buttons to feedback filter bars (desktop + mobile)\n- Backend: support filter=rated, commented, and combinations via aggregate counts/queries

Browse Source
This commit is contained in:
paul
2025-09-16 10:11:08 +02:00
parent 526dcd8dfc
commit b03760ab01
3 changed files with 90 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/routes/gallery.js
+29 -6
View File
@@ -110,12 +110,35 @@ router.get('/:slug/photos', verifyGalleryAccess, async (req, res) => {
// Apply filtering if requested (global, based on aggregate counts)
if (filter) {
const f = String(filter).toLowerCase();
if (f === 'liked') {
photos = photos.filter(p => (p.like_count || 0) > 0);
} else if (f === 'favorited') {
photos = photos.filter(p => (p.favorite_count || 0) > 0);
} else if (f === 'liked,favorited' || f === 'favorited,liked') {
photos = photos.filter(p => (p.like_count || 0) > 0 || (p.favorite_count || 0) > 0);
const parts = f.split(',').map(s => s.trim());
const include = new Set();
// Helper to include IDs for a predicate
const includeBy = (predicate) => {
photos.forEach(p => { if (predicate(p)) include.add(p.id); });
};
if (parts.includes('liked')) {
includeBy(p => (p.like_count || 0) > 0);
}
if (parts.includes('favorited')) {
includeBy(p => (p.favorite_count || 0) > 0);
}
if (parts.includes('rated')) {
includeBy(p => (p.average_rating || 0) > 0);
}
if (parts.includes('commented')) {
// Query commented photo IDs
const commented = await db('photo_feedback')
.where({ event_id: req.event.id, feedback_type: 'comment', is_approved: true, is_hidden: false })
.groupBy('photo_id')
.select('photo_id');
const commentedIds = new Set(commented.map(c => c.photo_id));
includeBy(p => commentedIds.has(p.id));
}
if (include.size > 0) {
photos = photos.filter(p => include.has(p.id));
}
}
frontend/src/components/gallery/GalleryFilter.tsx
+24 -4
View File
@@ -1,9 +1,9 @@
import React from 'react';
import { Heart, Star } from 'lucide-react';
import { Heart, Star, Bookmark, MessageSquare } from 'lucide-react';
import { Button } from '../common';
import { useTranslation } from 'react-i18next';
export type FilterType = 'all' | 'liked' | 'favorited';
export type FilterType = 'all' | 'liked' | 'favorited' | 'rated' | 'commented';
interface GalleryFilterProps {
currentFilter: FilterType;
@@ -150,14 +150,34 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
onClick={() => onFilterChange('favorited')}
className="text-xs sm:text-sm flex items-center gap-1"
>
<Star className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.favorited', 'Favorites')}</span>
<Bookmark className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.favorites', 'Favorites')}</span>
{favoriteCount > 0 && (
<span className="bg-primary-100 text-primary-700 px-1.5 rounded">
{favoriteCount}
</span>
)}
</Button>
<Button
variant={currentFilter === 'rated' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('rated')}
className="text-xs sm:text-sm flex items-center gap-1"
>
<Star className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.rated', 'Rated')}</span>
</Button>
<Button
variant={currentFilter === 'commented' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('commented')}
className="text-xs sm:text-sm flex items-center gap-1"
>
<MessageSquare className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.commented', 'Commented')}</span>
</Button>
</div>
</div>
)}
frontend/src/components/gallery/PhotoFilterBar.tsx
+37 -1
View File
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Search, SortAsc, Grid, Heart, Star } from 'lucide-react';
import { Search, SortAsc, Grid, Heart, Star, Bookmark, MessageSquare } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button, Input } from '../common';
import type { FilterType } from './GalleryFilter';
@@ -205,9 +205,27 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
onClick={() => onFilterChange('favorited')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('feedback.favorites', 'Favorites')}
>
<Bookmark className="w-3.5 h-3.5" />
</Button>
<Button
variant={currentFilter === 'rated' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('rated')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.rated', 'Rated')}
>
<Star className="w-3.5 h-3.5" />
</Button>
<Button
variant={currentFilter === 'commented' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('commented')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.commented', 'Commented')}
>
<MessageSquare className="w-3.5 h-3.5" />
</Button>
</div>
</div>
)}
@@ -249,9 +267,27 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
onClick={() => onFilterChange('favorited')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('feedback.favorites', 'Favorites')}
>
<Bookmark className="w-3.5 h-3.5" />
</Button>
<Button
variant={currentFilter === 'rated' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('rated')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.rated', 'Rated')}
>
<Star className="w-3.5 h-3.5" />
</Button>
<Button
variant={currentFilter === 'commented' ? 'primary' : 'outline'}
size="sm"
onClick={() => onFilterChange('commented')}
className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.commented', 'Commented')}
>
<MessageSquare className="w-3.5 h-3.5" />
</Button>
</div>
</div>
)}