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

@@ -4776,8 +4776,9 @@ ORDER BY r.id`,
const character = falukantUser.character; const character = falukantUser.character;
const firstName = character.definedFirstName?.name ?? ''; const firstName = character.definedFirstName?.name ?? '';
const lastName = character.definedLastName?.name ?? ''; const lastName = character.definedLastName?.name ?? '';
const title = character.nobleTitle?.labelTr ?? ''; const titleLabelTr = character.nobleTitle?.labelTr ?? '';
const characterName = [title, firstName, lastName].filter(Boolean).join(' ') || '—'; const nameWithoutTitle = [firstName, lastName].filter(Boolean).join(' ') || '—';
const characterName = titleLabelTr ? [titleLabelTr, firstName, lastName].filter(Boolean).join(' ') : nameWithoutTitle;
const age = character.birthdate ? calcAge(character.birthdate) : null; const age = character.birthdate ? calcAge(character.birthdate) : null;
const [unreadNotificationsCount, childrenCount] = await Promise.all([ const [unreadNotificationsCount, childrenCount] = await Promise.all([
@@ -4794,6 +4795,8 @@ ORDER BY r.id`,
return { return {
characterName, characterName,
titleLabelTr: titleLabelTr || null,
nameWithoutTitle,
gender: character.gender ?? null, gender: character.gender ?? null,
age, age,
money: Number(falukantUser.money ?? 0), money: Number(falukantUser.money ?? 0),

View File

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