torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor ReputationView component to streamline action display and remove deprecated tab

Browse Source 
- 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:
Torsten Schulz (local)
2025-12-21 21:37:22 +01:00
parent 4f8b1e33fa
commit 560a9efc69
1 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/views/falukant/ReputationView.vue
View File

@@ -16,6 +16,45 @@
{{ $t('falukant.reputation.overview.current') }}:
<strong>{{ reputationDisplay }}</strong>
</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 v-else-if="activeTab === 'party'">
@@ -143,43 +182,6 @@
</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>
</template>
@@ -197,8 +199,7 @@ export default {
activeTab: 'overview',
tabs: [
{ value: 'overview', label: 'falukant.reputation.overview.title' },
{ value: 'party', label: 'falukant.reputation.party.title' },
{ value: 'actions', label: 'falukant.reputation.actions.title' }
{ value: 'party', label: 'falukant.reputation.party.title' }
],
newPartyView: false,
newPartyTypeId: null,
@@ -335,7 +336,7 @@ export default {
},
async mounted() {
const tabFromQuery = this.$route?.query?.tab;
if (['overview','party','actions'].includes(tabFromQuery)) {
if (['overview','party'].includes(tabFromQuery)) {
this.activeTab = tabFromQuery;
}
await this.loadPartyTypes();