Refactor DashboardWidget to use dynamic widget components: Replace static slot content with a dynamic component rendering based on the endpoint prop. This change simplifies the widget structure and enhances flexibility by allowing different widget types to be displayed. Additionally, update error handling to provide more specific error messages.

2026-01-30 13:42:22 +01:00
parent 752686e3e1
commit 7d2a33b3ec
4 changed files with 295 additions and 204 deletions
--- a/frontend/src/components/widgets/FalukantWidget.vue
+++ b/frontend/src/components/widgets/FalukantWidget.vue
@@ -0,0 +1,98 @@
+<template>
+  <dl v-if="falukantData" class="dashboard-widget__falukant">
+    <dt>{{ $t('falukant.overview.metadata.name') }}</dt>
+    <dd>{{ falukantDisplayName }}</dd>
+    <dt>{{ $t('falukant.create.gender') }}</dt>
+    <dd class="falukant-gender">{{ falukantGenderLabel }}</dd>
+    <dt>{{ $t('falukant.overview.metadata.age') }}</dt>
+    <dd class="falukant-age">{{ falukantAgeLabel }}</dd>
+    <dt>{{ $t('falukant.overview.metadata.money') }}</dt>
+    <dd>{{ formatMoney(falukantData.money) }}</dd>
+    <dt>{{ $t('falukant.messages.title') }}</dt>
+    <dd>{{ falukantData.unreadNotificationsCount }}</dd>
+    <dt>{{ $t('falukant.statusbar.children') }}</dt>
+    <dd>{{ falukantData.childrenCount }}</dd>
+  </dl>
+  <span v-else>—</span>
+</template>
+
+<script>
+export default {
+  name: 'FalukantWidget',
+  props: {
+    data: { type: Object, default: null }
+  },
+  computed: {
+    falukantData() {
+      const d = this.data;
+      if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
+      return null;
+    },
+    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 '—';
+      const key = `falukant.create.${g}`;
+      const t = this.$t(key);
+      return t === key ? this.$t(`general.gender.${g}`) || g : t;
+    },
+    falukantAgeLabel() {
+      const ageValue = this.falukantData?.age;
+      if (ageValue == null) return '—';
+      const numAge = Number(ageValue);
+      return `${numAge} ${this.$t('falukant.overview.metadata.years')}`;
+    }
+  },
+  methods: {
+    formatMoney(value) {
+      const n = Number(value);
+      if (Number.isNaN(n)) return '—';
+      return n.toLocaleString('de-DE');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-widget__falukant {
+  margin: 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 16px;
+  align-items: baseline;
+}
+
+.dashboard-widget__falukant dt {
+  margin: 0;
+  font-weight: 600;
+  color: #555;
+  font-size: 0.85rem;
+}
+
+.dashboard-widget__falukant dd {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.dashboard-widget__falukant dd.falukant-gender {
+  color: var(--color-text-secondary);
+  font-weight: 600;
+}
+
+.dashboard-widget__falukant dd.falukant-age {
+  color: #198754;
+  font-weight: 600;
+}
+</style>