🎛️ Replace inline API version and settings controls with reusable ApiVersionSelector component and update imports accordingly
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user