🎛️ Replace inline API version and settings controls with reusable ApiVersionSelector component and update imports accordingly

This commit is contained in:
2026-01-29 06:26:45 +00:00
parent 0316fad26b
commit a848110dec

View File

@@ -12,59 +12,15 @@
<!-- API Version & Settings Controls -->
<div v-if="apiKey" class="section controls-section">
<div class="controls-grid">
<!-- API Version Selector -->
<div class="control-group">
<label class="control-label">API Version:</label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" v-model="apiVersion" value="v1" />
<span>v1 (Legacy)</span>
</label>
<label class="radio-option">
<input type="radio" v-model="apiVersion" value="v2.1" />
<span>v2.1 (Current)</span>
</label>
</div>
<span
class="version-badge"
:class="'badge-' + apiVersion.replace('.', '-')"
>
Using API {{ apiVersion }}
</span>
</div>
<!-- Results Per Page (v2.1 only) -->
<div v-if="apiVersion === 'v2.1'" class="control-group">
<label class="control-label">Results per page:</label>
<select
v-model.number="perPage"
@change="changePerPage(perPage)"
class="select-input"
>
<option :value="10">10</option>
<option :value="25">25</option>
<option :value="50">50</option>
<option :value="100">100</option>
</select>
</div>
<!-- Tournament Scope (v2.1 only) -->
<div v-if="apiVersion === 'v2.1'" class="control-group">
<label class="control-label">Tournament scope:</label>
<select v-model="tournamentScope" class="select-input">
<option :value="ScopeType.USER">User (default)</option>
<option :value="ScopeType.APPLICATION">
Application (requires application:manage token)
</option>
</select>
<div class="info-badge" v-if="tournamentScope === ScopeType.USER">
USER scope - tournaments you created or administer
</div>
<div class="info-badge warning" v-else>
APPLICATION scope requires a client-credentials token with
application:manage
</div>
</div>
<!-- API Version Selector Component -->
<ApiVersionSelector
v-model="apiVersion"
v-model:per-page="perPage"
v-model:scope="tournamentScope"
:show-per-page="true"
:show-scope="true"
@update:per-page="changePerPage"
/>
<!-- API Key Configuration -->
<div class="control-group collapsible-group">
@@ -402,14 +358,12 @@ import { ref, computed, watch, onMounted } from 'vue';
import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
import { useAsyncState } from '../composables/useAsyncState.js';
import {
createChallongeV1Client,
createChallongeV2Client,
AuthType,
ScopeType
} from '../services/challonge.service.js';
import { queryAllTournaments } from '../utilities/tournament-query.js';
import { useChallongeClient } from '../composables/useChallongeClient.js';
import { useChallongeTests } from '../composables/useChallongeTests.js';
import ApiVersionSelector from '../components/challonge/ApiVersionSelector.vue';
import TournamentGrid from '../components/challonge/TournamentGrid.vue';
import TournamentDetail from '../components/challonge/TournamentDetail.vue';
import { ScopeType } from '../services/challonge.service.js';
const { getApiKey } = useChallongeApiKey();
const {