93 lines
2.2 KiB
Vue
93 lines
2.2 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 ? 'Keine Einträge' : `(${this.data.length} Einträge)`;
|
|
}
|
|
if (typeof this.data === 'object') {
|
|
const keys = Object.keys(this.data);
|
|
return keys.length === 0 ? '—' : `(${keys.length} Felder)`;
|
|
}
|
|
return String(this.data);
|
|
}
|
|
},
|
|
methods: {
|
|
formatDatum(dateStr) {
|
|
if (!dateStr) return '';
|
|
const d = new Date(dateStr);
|
|
if (Number.isNaN(d.getTime())) return String(dateStr);
|
|
return d.toLocaleDateString('de-DE', {
|
|
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>
|