🎨 Update TournamentGrid component styling and layout
This commit is contained in:
@@ -0,0 +1,401 @@
|
||||
<!--
|
||||
TournamentGrid Component
|
||||
|
||||
Displays a grid of tournaments with search, filtering, and pagination.
|
||||
|
||||
Features:
|
||||
- Tournament card display with state badges
|
||||
- Client-side search filtering
|
||||
- Pagination support (v2.1 only)
|
||||
- Click-to-expand details
|
||||
- Empty state messaging
|
||||
|
||||
Props:
|
||||
- tournaments: Array of tournament objects
|
||||
- loading: Boolean for loading state
|
||||
- loadingMore: Boolean for pagination loading
|
||||
- searchQuery: String for search input (v-model)
|
||||
- filteredTournaments: Computed array of filtered results
|
||||
- expandedTournamentId: ID of currently expanded tournament
|
||||
- hasNextPage: Boolean for pagination availability (v2.1)
|
||||
- apiVersion: String ('v1' or 'v2.1')
|
||||
|
||||
Events:
|
||||
- update:searchQuery: Emitted when search input changes
|
||||
- load-more: Emitted when "Load More" button clicked
|
||||
- toggle-details: Emitted when tournament details button clicked
|
||||
-->
|
||||
<template>
|
||||
<div class="tournament-grid">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="status loading">⏳ Loading tournaments...</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="status error">
|
||||
❌ Error: {{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="!tournaments || tournaments.length === 0" class="status empty">
|
||||
No tournaments found. Create one at
|
||||
<a href="https://challonge.com" target="_blank">Challonge.com</a>
|
||||
</div>
|
||||
|
||||
<!-- Tournament List -->
|
||||
<div v-else>
|
||||
<!-- Search Filter -->
|
||||
<div class="search-box">
|
||||
<input
|
||||
:value="searchQuery"
|
||||
@input="$emit('update:searchQuery', $event.target.value)"
|
||||
type="text"
|
||||
placeholder="🔍 Search tournaments by name (client-side)..."
|
||||
class="search-input"
|
||||
/>
|
||||
<span v-if="searchQuery" class="search-info">
|
||||
Showing {{ filteredTournaments.length }} of
|
||||
{{ tournaments.length }} tournaments
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Tournament Cards -->
|
||||
<div class="tournament-list">
|
||||
<div
|
||||
v-for="tournament in filteredTournaments"
|
||||
:key="getTournamentId(tournament)"
|
||||
class="tournament-card"
|
||||
>
|
||||
<div class="tournament-header">
|
||||
<h4>{{ getTournamentName(tournament) }}</h4>
|
||||
<span
|
||||
class="tournament-state"
|
||||
:class="getTournamentProp(tournament, 'state')"
|
||||
>
|
||||
{{ getTournamentProp(tournament, 'state') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tournament-details">
|
||||
<p>
|
||||
<strong>URL:</strong>
|
||||
{{ getTournamentProp(tournament, 'url') }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Type:</strong>
|
||||
{{ getTournamentProp(tournament, 'tournament_type') }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Participants:</strong>
|
||||
{{ getTournamentProp(tournament, 'participants_count') }}
|
||||
</p>
|
||||
<p v-if="getTournamentProp(tournament, 'started_at')">
|
||||
<strong>Started:</strong>
|
||||
{{ formatDate(getTournamentProp(tournament, 'started_at')) }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="$emit('toggle-details', getTournamentId(tournament))"
|
||||
class="btn btn-small"
|
||||
:class="{
|
||||
'btn-active': expandedTournamentId === getTournamentId(tournament)
|
||||
}"
|
||||
>
|
||||
{{
|
||||
expandedTournamentId === getTournamentId(tournament)
|
||||
? 'Hide Details'
|
||||
: 'Load Details'
|
||||
}}
|
||||
</button>
|
||||
|
||||
<!-- Details Slot for expanded content -->
|
||||
<slot
|
||||
name="tournament-details"
|
||||
:tournament="tournament"
|
||||
:is-expanded="expandedTournamentId === getTournamentId(tournament)"
|
||||
></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load More Button (v2.1 only) -->
|
||||
<div
|
||||
v-if="apiVersion === 'v2.1' && hasNextPage"
|
||||
class="load-more-section"
|
||||
>
|
||||
<button
|
||||
@click="$emit('load-more')"
|
||||
:disabled="loadingMore"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
{{ loadingMore ? 'Loading...' : 'Load More Tournaments' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* Props for TournamentGrid component
|
||||
*/
|
||||
const props = defineProps({
|
||||
tournaments: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingMore: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
searchQuery: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
filteredTournaments: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
expandedTournamentId: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
hasNextPage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
apiVersion: {
|
||||
type: String,
|
||||
default: 'v2.1'
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Events emitted by TournamentGrid
|
||||
*/
|
||||
defineEmits(['update:searchQuery', 'load-more', 'toggle-details']);
|
||||
|
||||
/**
|
||||
* Helper to get tournament name (handles both v1 and v2.1 response structures)
|
||||
*/
|
||||
function getTournamentName(tournament) {
|
||||
return tournament.tournament?.name || tournament.name || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to get tournament ID
|
||||
*/
|
||||
function getTournamentId(tournament) {
|
||||
return tournament.tournament?.id || tournament.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to get tournament property
|
||||
*/
|
||||
function getTournamentProp(tournament, prop) {
|
||||
return tournament.tournament?.[prop] || tournament[prop];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format date string
|
||||
*/
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toLocaleString();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tournament-grid {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.status.loading {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status.empty {
|
||||
background: #f5f5f5;
|
||||
color: #616161;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status a {
|
||||
color: #667eea;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.search-info {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tournament-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.tournament-card {
|
||||
background: white;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tournament-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.tournament-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.tournament-header h4 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.25rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tournament-state {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tournament-state.pending {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.tournament-state.underway,
|
||||
.tournament-state.in_progress {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.tournament-state.complete,
|
||||
.tournament-state.ended {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.tournament-details {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tournament-details p {
|
||||
margin: 0.5rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tournament-details strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-small.btn-active {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.btn-small.btn-active:hover {
|
||||
background: #653c8a;
|
||||
}
|
||||
|
||||
.load-more-section {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #5a6268;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
background: #adb5bd;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user