Enhance character name display in DashboardWidget: Refactor character name construction logic in FalukantService to include title handling and create a new computed property for display name in DashboardWidget. Update styles for gender display and ensure proper localization for age representation.

This commit is contained in:
Torsten Schulz (local)
2026-01-29 17:28:58 +01:00
parent 8ec7db031b
commit 39ac149430
2 changed files with 22 additions and 5 deletions

View File

@@ -25,7 +25,7 @@
<template v-else-if="falukantData">
<dl class="dashboard-widget__falukant">
<dt>{{ $t('falukant.overview.metadata.name') }}</dt>
<dd>{{ falukantData.characterName }}</dd>
<dd>{{ falukantDisplayName }}</dd>
<dt>{{ $t('falukant.create.gender') }}</dt>
<dd class="falukant-gender">{{ falukantGenderLabel }}</dd>
<dt>{{ $t('falukant.overview.metadata.age') }}</dt>
@@ -94,6 +94,20 @@ export default {
if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
return null;
},
/** Anzeigename: Adelstitel aus falukant.titles.{gender}.{titleLabelTr} + Name. */
falukantDisplayName() {
const d = this.falukantData;
if (!d) return '—';
const titleKey = d.titleLabelTr;
const gender = d.gender;
const nameWithoutTitle = d.nameWithoutTitle ?? d.characterName;
if (titleKey && gender) {
const key = `falukant.titles.${gender}.${titleKey}`;
const translatedTitle = this.$t(key);
if (translatedTitle !== key) return `${translatedTitle} ${nameWithoutTitle}`.trim();
}
return d.characterName || nameWithoutTitle || '—';
},
falukantGenderLabel() {
const g = this.falukantData?.gender;
if (g == null || g === '') return '—';
@@ -105,7 +119,7 @@ export default {
const days = this.falukantData?.age;
if (days == null) return '—';
const years = Math.floor(Number(days) / 365);
return `${years} ${this.$t('admin.createNPCs.years')}`;
return `${years} ${this.$t('admin.createNPC.years')}`;
},
dataList() {
if (!Array.isArray(this.data) || this.data.length === 0) return [];
@@ -322,7 +336,7 @@ export default {
}
.dashboard-widget__falukant dd.falukant-gender {
color: #0d6efd;
color: var(--color-text-secondary);
font-weight: 600;
}