🎛️ 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 --> <!-- API Version & Settings Controls -->
<div v-if="apiKey" class="section controls-section"> <div v-if="apiKey" class="section controls-section">
<div class="controls-grid"> <div class="controls-grid">
<!-- API Version Selector --> <!-- API Version Selector Component -->
<div class="control-group"> <ApiVersionSelector
<label class="control-label">API Version:</label> v-model="apiVersion"
<div class="radio-group"> v-model:per-page="perPage"
<label class="radio-option"> v-model:scope="tournamentScope"
<input type="radio" v-model="apiVersion" value="v1" /> :show-per-page="true"
<span>v1 (Legacy)</span> :show-scope="true"
</label> @update:per-page="changePerPage"
<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 Key Configuration --> <!-- API Key Configuration -->
<div class="control-group collapsible-group"> <div class="control-group collapsible-group">
@@ -402,14 +358,12 @@ import { ref, computed, watch, onMounted } from 'vue';
import { useChallongeApiKey } from '../composables/useChallongeApiKey.js'; import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
import { useChallongeOAuth } from '../composables/useChallongeOAuth.js'; import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js'; import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
import { useAsyncState } from '../composables/useAsyncState.js'; import { useChallongeClient } from '../composables/useChallongeClient.js';
import { import { useChallongeTests } from '../composables/useChallongeTests.js';
createChallongeV1Client, import ApiVersionSelector from '../components/challonge/ApiVersionSelector.vue';
createChallongeV2Client, import TournamentGrid from '../components/challonge/TournamentGrid.vue';
AuthType, import TournamentDetail from '../components/challonge/TournamentDetail.vue';
ScopeType import { ScopeType } from '../services/challonge.service.js';
} from '../services/challonge.service.js';
import { queryAllTournaments } from '../utilities/tournament-query.js';
const { getApiKey } = useChallongeApiKey(); const { getApiKey } = useChallongeApiKey();
const { const {