🎨 Refactor tournament display logic by replacing inline components with reusable TournamentGrid and TournamentDetail components
This commit is contained in:
@@ -161,150 +161,34 @@
|
||||
{{ loading ? 'Loading...' : 'List My Tournaments' }}
|
||||
</button>
|
||||
|
||||
<div v-if="error" class="error-box">
|
||||
<strong>Errors:</strong>
|
||||
<ul class="error-list">
|
||||
<li
|
||||
v-for="(err, index) in Array.isArray(error) ? error : [error]"
|
||||
:key="index"
|
||||
>
|
||||
<span class="error-status">{{ err.status || 'Error' }}:</span>
|
||||
<span class="error-message">{{
|
||||
err.message || err.detail || err
|
||||
}}</span>
|
||||
<span v-if="err.field" class="error-field"
|
||||
>({{ err.field }})</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="help-text">
|
||||
<p>Common issues:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>401 Unauthorized:</strong> Invalid API key - check API
|
||||
Key Manager
|
||||
</li>
|
||||
<li><strong>403 Forbidden:</strong> Insufficient permissions</li>
|
||||
<li>
|
||||
<strong>404 Not Found:</strong> Tournament may have been deleted
|
||||
</li>
|
||||
<li>
|
||||
<strong>Network Error:</strong> Connection problems or CORS
|
||||
issues
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
<div v-if="paginationInfo" class="pagination-info">
|
||||
{{ paginationInfo }}
|
||||
</div>
|
||||
|
||||
<div v-if="tournaments" class="results">
|
||||
<div class="results-header">
|
||||
<h3>✅ Success!</h3>
|
||||
<p class="pagination-info">{{ paginationInfo }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="tournaments.length === 0" class="info-box">
|
||||
No tournaments found. Create one at
|
||||
<a href="https://challonge.com" target="_blank">Challonge.com</a>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- Search Filter -->
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
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>
|
||||
|
||||
<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="toggleTournamentDetails(getTournamentId(tournament))"
|
||||
class="btn btn-small"
|
||||
:class="{
|
||||
'btn-active':
|
||||
expandedTournamentId === getTournamentId(tournament)
|
||||
}"
|
||||
>
|
||||
{{
|
||||
expandedTournamentId === getTournamentId(tournament)
|
||||
? 'Hide Details'
|
||||
: 'Load Details'
|
||||
}}
|
||||
</button>
|
||||
|
||||
<!-- Collapsible Details Section -->
|
||||
<div
|
||||
v-if="
|
||||
expandedTournamentId === getTournamentId(tournament) &&
|
||||
tournamentDetails
|
||||
"
|
||||
class="tournament-details-inline"
|
||||
>
|
||||
<div class="details-header">
|
||||
<h4>Full Tournament Details</h4>
|
||||
</div>
|
||||
<pre class="details-content">{{
|
||||
JSON.stringify(tournamentDetails, null, 2)
|
||||
}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load More Button (v2.1 only) -->
|
||||
<div
|
||||
v-if="apiVersion === 'v2.1' && hasNextPage"
|
||||
class="load-more-section"
|
||||
>
|
||||
<button
|
||||
@click="loadMoreTournaments"
|
||||
:disabled="loadingMore"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
{{ loadingMore ? 'Loading...' : 'Load More Tournaments' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tournament Grid Component -->
|
||||
<TournamentGrid
|
||||
:tournaments="tournaments"
|
||||
:loading="loading"
|
||||
:loading-more="loadingMore"
|
||||
:error="error"
|
||||
v-model:search-query="searchQuery"
|
||||
:filtered-tournaments="filteredTournaments"
|
||||
:expanded-tournament-id="expandedTournamentId"
|
||||
:has-next-page="hasNextPage"
|
||||
:api-version="apiVersion"
|
||||
@load-more="loadMoreTournaments"
|
||||
@toggle-details="toggleTournamentDetails"
|
||||
>
|
||||
<template #tournament-details="{ tournament, isExpanded }">
|
||||
<TournamentDetail
|
||||
:tournament-details="tournamentDetails"
|
||||
:loading="tournamentDetailsState.isLoading.value"
|
||||
:error="tournamentDetailsState.error.value"
|
||||
:is-expanded="isExpanded"
|
||||
/>
|
||||
</template>
|
||||
</TournamentGrid>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Instructions -->
|
||||
|
||||
Reference in New Issue
Block a user