🎨 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' }}
|
{{ loading ? 'Loading...' : 'List My Tournaments' }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div v-if="error" class="error-box">
|
<div v-if="error" class="error-message">{{ error }}</div>
|
||||||
<strong>Errors:</strong>
|
<div v-if="paginationInfo" class="pagination-info">
|
||||||
<ul class="error-list">
|
{{ paginationInfo }}
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div v-if="tournaments" class="results">
|
<!-- Tournament Grid Component -->
|
||||||
<div class="results-header">
|
<TournamentGrid
|
||||||
<h3>✅ Success!</h3>
|
:tournaments="tournaments"
|
||||||
<p class="pagination-info">{{ paginationInfo }}</p>
|
:loading="loading"
|
||||||
</div>
|
:loading-more="loadingMore"
|
||||||
|
:error="error"
|
||||||
<div v-if="tournaments.length === 0" class="info-box">
|
v-model:search-query="searchQuery"
|
||||||
No tournaments found. Create one at
|
:filtered-tournaments="filteredTournaments"
|
||||||
<a href="https://challonge.com" target="_blank">Challonge.com</a>
|
:expanded-tournament-id="expandedTournamentId"
|
||||||
</div>
|
:has-next-page="hasNextPage"
|
||||||
|
:api-version="apiVersion"
|
||||||
<div v-else>
|
@load-more="loadMoreTournaments"
|
||||||
<!-- Search Filter -->
|
@toggle-details="toggleTournamentDetails"
|
||||||
<div class="search-box">
|
>
|
||||||
<input
|
<template #tournament-details="{ tournament, isExpanded }">
|
||||||
v-model="searchQuery"
|
<TournamentDetail
|
||||||
type="text"
|
:tournament-details="tournamentDetails"
|
||||||
placeholder="🔍 Search tournaments by name (client-side)..."
|
:loading="tournamentDetailsState.isLoading.value"
|
||||||
class="search-input"
|
:error="tournamentDetailsState.error.value"
|
||||||
/>
|
:is-expanded="isExpanded"
|
||||||
<span v-if="searchQuery" class="search-info">
|
/>
|
||||||
Showing {{ filteredTournaments.length }} of
|
</template>
|
||||||
{{ tournaments.length }} tournaments
|
</TournamentGrid>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Configuration Instructions -->
|
<!-- Configuration Instructions -->
|
||||||
|
|||||||
Reference in New Issue
Block a user