Refactor ReputationView component to streamline action display and remove deprecated tab
- Added a new section for displaying reputation actions, including daily limits and action details. - Removed the 'actions' tab from the navigation and adjusted the logic to reflect this change. - Enhanced the user interface for executing reputation actions with improved button states and translations.
This commit is contained in:
@@ -16,6 +16,45 @@
|
|||||||
{{ $t('falukant.reputation.overview.current') }}:
|
{{ $t('falukant.reputation.overview.current') }}:
|
||||||
<strong>{{ reputationDisplay }}</strong>
|
<strong>{{ reputationDisplay }}</strong>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="separator-class">
|
||||||
|
<h3>{{ $t('falukant.reputation.actions.title') }}</h3>
|
||||||
|
<p>
|
||||||
|
{{ $t('falukant.reputation.actions.description') }}
|
||||||
|
</p>
|
||||||
|
<p v-if="reputationActionsDailyCap != null" class="reputation-actions-daily">
|
||||||
|
{{ $t('falukant.reputation.actions.dailyLimit', { remaining: reputationActionsDailyRemaining, cap: reputationActionsDailyCap }) }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<table v-if="reputationActions.length">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{{ $t('falukant.reputation.actions.action') }}</th>
|
||||||
|
<th>{{ $t('falukant.reputation.actions.cost') }}</th>
|
||||||
|
<th>{{ $t('falukant.reputation.actions.gain') }}</th>
|
||||||
|
<th>{{ $t('falukant.reputation.actions.timesUsed') }}</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="a in reputationActions" :key="a.id">
|
||||||
|
<td>{{ $t('falukant.reputation.actions.type.' + a.tr) }}</td>
|
||||||
|
<td>{{ Number(a.cost || 0).toLocaleString($i18n.locale) }}</td>
|
||||||
|
<td>+{{ Number(a.currentGain || 0) }}</td>
|
||||||
|
<td>{{ Number(a.timesUsed || 0) }}</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" :disabled="runningActionId === a.id"
|
||||||
|
@click.prevent="executeReputationAction(a)">
|
||||||
|
{{ runningActionId === a.id ? $t('falukant.reputation.actions.running') : $t('falukant.reputation.actions.execute') }}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p v-else>
|
||||||
|
{{ $t('falukant.reputation.actions.none') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="activeTab === 'party'">
|
<div v-else-if="activeTab === 'party'">
|
||||||
@@ -143,43 +182,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="activeTab === 'actions'">
|
|
||||||
<p>
|
|
||||||
{{ $t('falukant.reputation.actions.description') }}
|
|
||||||
</p>
|
|
||||||
<p v-if="reputationActionsDailyCap != null" class="reputation-actions-daily">
|
|
||||||
{{ $t('falukant.reputation.actions.dailyLimit', { remaining: reputationActionsDailyRemaining, cap: reputationActionsDailyCap }) }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table v-if="reputationActions.length">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>{{ $t('falukant.reputation.actions.action') }}</th>
|
|
||||||
<th>{{ $t('falukant.reputation.actions.cost') }}</th>
|
|
||||||
<th>{{ $t('falukant.reputation.actions.gain') }}</th>
|
|
||||||
<th>{{ $t('falukant.reputation.actions.timesUsed') }}</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="a in reputationActions" :key="a.id">
|
|
||||||
<td>{{ $t('falukant.reputation.actions.type.' + a.tr) }}</td>
|
|
||||||
<td>{{ Number(a.cost || 0).toLocaleString($i18n.locale) }}</td>
|
|
||||||
<td>+{{ Number(a.currentGain || 0) }}</td>
|
|
||||||
<td>{{ Number(a.timesUsed || 0) }}</td>
|
|
||||||
<td>
|
|
||||||
<button type="button" :disabled="runningActionId === a.id"
|
|
||||||
@click.prevent="executeReputationAction(a)">
|
|
||||||
{{ runningActionId === a.id ? $t('falukant.reputation.actions.running') : $t('falukant.reputation.actions.execute') }}
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<p v-else>
|
|
||||||
{{ $t('falukant.reputation.actions.none') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -197,8 +199,7 @@ export default {
|
|||||||
activeTab: 'overview',
|
activeTab: 'overview',
|
||||||
tabs: [
|
tabs: [
|
||||||
{ value: 'overview', label: 'falukant.reputation.overview.title' },
|
{ value: 'overview', label: 'falukant.reputation.overview.title' },
|
||||||
{ value: 'party', label: 'falukant.reputation.party.title' },
|
{ value: 'party', label: 'falukant.reputation.party.title' }
|
||||||
{ value: 'actions', label: 'falukant.reputation.actions.title' }
|
|
||||||
],
|
],
|
||||||
newPartyView: false,
|
newPartyView: false,
|
||||||
newPartyTypeId: null,
|
newPartyTypeId: null,
|
||||||
@@ -335,7 +336,7 @@ export default {
|
|||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
const tabFromQuery = this.$route?.query?.tab;
|
const tabFromQuery = this.$route?.query?.tab;
|
||||||
if (['overview','party','actions'].includes(tabFromQuery)) {
|
if (['overview','party'].includes(tabFromQuery)) {
|
||||||
this.activeTab = tabFromQuery;
|
this.activeTab = tabFromQuery;
|
||||||
}
|
}
|
||||||
await this.loadPartyTypes();
|
await this.loadPartyTypes();
|
||||||
|
|||||||
Reference in New Issue
Block a user