elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add sortable 'Added' column to admin table

Browse Source 
- Display upload date in German format (DD.MM.YYYY)
- Column is sortable by clicking header
- Uses existing createdAt field from database
This commit is contained in:
Hördle Bot
2025-11-21 14:46:59 +01:00
parent 8540c7be54
commit cbfd0c1798
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/admin/page.tsx
View File

@@ -11,7 +11,7 @@ interface Song {
activations: number; activations: number;
} }
type SortField = 'title' | 'artist'; type SortField = 'title' | 'artist' | 'createdAt';
type SortDirection = 'asc' | 'desc'; type SortDirection = 'asc' | 'desc';
export default function AdminPage() { export default function AdminPage() {
@@ -229,6 +229,12 @@ export default function AdminPage() {
> >
Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')} Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
</th> </th>
<th
style={{ padding: '0.75rem', cursor: 'pointer', userSelect: 'none' }}
onClick={() => handleSort('createdAt')}
>
Added {sortField === 'createdAt' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th style={{ padding: '0.75rem' }}>Activations</th> <th style={{ padding: '0.75rem' }}>Activations</th>
<th style={{ padding: '0.75rem' }}>Actions</th> <th style={{ padding: '0.75rem' }}>Actions</th>
</tr> </tr>
@@ -258,6 +264,9 @@ export default function AdminPage() {
style={{ padding: '0.25rem' }} style={{ padding: '0.25rem' }}
/> />
</td> </td>
<td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
{new Date(song.createdAt).toLocaleDateString('de-DE')}
</td>
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td> <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
<td style={{ padding: '0.75rem' }}> <td style={{ padding: '0.75rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}> <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -282,6 +291,9 @@ export default function AdminPage() {
<> <>
<td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td> <td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td>
<td style={{ padding: '0.75rem' }}>{song.artist}</td> <td style={{ padding: '0.75rem' }}>{song.artist}</td>
<td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
{new Date(song.createdAt).toLocaleDateString('de-DE')}
</td>
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td> <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
<td style={{ padding: '0.75rem' }}> <td style={{ padding: '0.75rem' }}>
<div style={{ display: 'flex', gap: '0.5rem' }}> <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -307,7 +319,7 @@ export default function AdminPage() {
))} ))}
{paginatedSongs.length === 0 && ( {paginatedSongs.length === 0 && (
<tr> <tr>
<td colSpan={5} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}> <td colSpan={6} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
{searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'} {searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'}
</td> </td>
</tr> </tr>