c50a6b3c35
- Added support for additional UI locales including Cebuano and Spanish, improving accessibility for a broader user base. - Updated language selection components in the AppHeader and SettingsWidget to reflect new language options, enhancing user experience. - Enhanced localization of various UI elements across components, ensuring consistent language representation and improved user engagement. - Implemented logic to synchronize user language preferences with backend settings, providing a seamless experience when changing languages.
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<ul v-if="items.length" class="dashboard-widget__list">
|
|
<li
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
class="dashboard-widget__list-item"
|
|
>
|
|
<span v-if="item.datum" class="dashboard-widget__date">{{ formatDatum(item.datum) }}</span>
|
|
<span v-if="item.titel" class="dashboard-widget__title-text">{{ item.titel }}</span>
|
|
<span v-else-if="item.label" class="dashboard-widget__title-text">{{ item.label }}</span>
|
|
<p v-if="item.beschreibung" class="dashboard-widget__desc">{{ item.beschreibung }}</p>
|
|
</li>
|
|
</ul>
|
|
<span v-else>{{ fallbackText }}</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ListWidget',
|
|
props: {
|
|
data: { type: [Array, Object], default: null }
|
|
},
|
|
computed: {
|
|
items() {
|
|
if (!Array.isArray(this.data) || this.data.length === 0) return [];
|
|
const first = this.data[0];
|
|
if (first !== null && typeof first === 'object') return this.data;
|
|
return [];
|
|
},
|
|
fallbackText() {
|
|
if (this.data == null) return '';
|
|
if (Array.isArray(this.data)) {
|
|
return this.data.length === 0
|
|
? this.$t('widgets.list.noEntries')
|
|
: this.$t('widgets.list.entriesCount', { count: this.data.length });
|
|
}
|
|
if (typeof this.data === 'object') {
|
|
const keys = Object.keys(this.data);
|
|
return keys.length === 0 ? '—' : this.$t('widgets.list.fieldsCount', { count: keys.length });
|
|
}
|
|
return String(this.data);
|
|
}
|
|
},
|
|
methods: {
|
|
getDateLocale() {
|
|
const locale = this.$i18n?.locale;
|
|
return {
|
|
de: 'de-DE',
|
|
en: 'en-GB',
|
|
es: 'es-ES',
|
|
ceb: 'fil-PH'
|
|
}[locale] || 'de-DE';
|
|
},
|
|
formatDatum(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
if (Number.isNaN(d.getTime())) return String(dateStr);
|
|
return d.toLocaleDateString(this.getDateLocale(), {
|
|
weekday: 'short',
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-widget__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dashboard-widget__list-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.dashboard-widget__list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dashboard-widget__date {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dashboard-widget__title-text {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.dashboard-widget__desc {
|
|
margin: 4px 0 0 0;
|
|
font-size: 0.85rem;
|
|
color: #555;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|