torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor DashboardWidget and LoggedInView: Update DashboardWidget to display a single news article instead of a list, enhancing user experience. Remove logout button and related functionality from LoggedInView to streamline the interface.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-29 17:26:43 +01:00
parent 25b5b91a19
commit 8ec7db031b
2 changed files with 38 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/DashboardWidget.vue
View File

@@ -14,15 +14,13 @@
<div v-else-if="error" class="dashboard-widget__state dashboard-widget__error">{{ error }}</div>
<div v-else class="dashboard-widget__body">
<slot :data="data">
<template v-if="newsDataResults.length">
<ul class="dashboard-widget__list">
<li v-for="(item, i) in newsDataResults" :key="item.article_id || i" class="dashboard-widget__list-item">
<a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer" class="dashboard-widget__news-title">{{ item.title || '—' }}</a>
<span v-else class="dashboard-widget__title-text">{{ item.title || '—' }}</span>
<span v-if="item.pubDate" class="dashboard-widget__date">{{ formatNewsDate(item.pubDate) }}</span>
<p v-if="item.description" class="dashboard-widget__desc">{{ item.description }}</p>
</li>
</ul>
<template v-if="newsDataSingleItem">
<article class="dashboard-widget__news-single">
<a v-if="newsDataSingleItem.link" :href="newsDataSingleItem.link" target="_blank" rel="noopener noreferrer" class="dashboard-widget__news-title">{{ newsDataSingleItem.title || '—' }}</a>
<span v-else class="dashboard-widget__title-text">{{ newsDataSingleItem.title || '—' }}</span>
<span v-if="newsDataSingleItem.pubDate" class="dashboard-widget__date">{{ formatNewsDate(newsDataSingleItem.pubDate) }}</span>
<p v-if="newsDataSingleItem.description" class="dashboard-widget__desc">{{ newsDataSingleItem.description }}</p>
</article>
</template>
<template v-else-if="falukantData">
<dl class="dashboard-widget__falukant">
@@ -86,6 +84,11 @@ export default {
if (d && typeof d === 'object' && Array.isArray(d.results)) return d.results;
return [];
},
/** Pro News-Widget wird nur ein Artikel angezeigt (erster der Seite; Counter sorgt für unterschiedliche Seiten). */
newsDataSingleItem() {
const list = this.newsDataResults;
return list.length ? list[0] : null;
},
falukantData() {
const d = this.data;
if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
@@ -203,11 +206,11 @@ export default {
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--dashboard-widget-title-bg, #f1f3f5);
border-bottom: 1px solid var(--dashboard-widget-border, #dee2e6);
background: var(--color-primary-orange-light, #fff8e1);
border-bottom: 1px solid var(--color-text-secondary, #dee2e6);
font-weight: 600;
font-size: 0.95rem;
color: var(--dashboard-widget-title-color, #333);
color: var(--color-text-primary);
}
.dashboard-widget__drag-handle {
@@ -227,6 +230,7 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-primary);
}
.dashboard-widget__frame {
@@ -276,13 +280,18 @@ export default {
color: #333;
}
.dashboard-widget__news-single {
margin: 0;
}
.dashboard-widget__news-title {
font-weight: 600;
color: #0d6efd;
color: var(--color-primary-orange);
text-decoration: none;
}
.dashboard-widget__news-title:hover {
text-decoration: underline;
color: var(--color-text-secondary);
}
.dashboard-widget__desc {

58
frontend/src/views/home/LoggedInView.vue
View File

@@ -33,9 +33,6 @@
Fertig
</button>
</template>
<button type="button" class="logout-btn" @click="handleLogout">
Logout
</button>
</div>
</header>
@@ -107,7 +104,6 @@
</template>
<script>
import { mapActions } from 'vuex';
import apiClient from '@/utils/axios.js';
import DashboardWidget from '@/components/DashboardWidget.vue';
@@ -143,7 +139,6 @@ export default {
this.loadAvailableWidgets();
},
methods: {
...mapActions(['logout']),
/** Counter für EP: wievieltes Widget mit gleichem Endpoint (0, 1, 2, …), damit z. B. News nicht doppelt. */
widgetRequestCounter(index) {
const endpoint = this.widgets[index]?.endpoint;
@@ -154,9 +149,6 @@ export default {
}
return count;
},
handleLogout() {
this.logout();
},
async loadAvailableWidgets() {
try {
const { data } = await apiClient.get('/api/dashboard/widgets');
@@ -285,20 +277,21 @@ export default {
}
.btn-edit,
.btn-add,
.btn-done {
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #ced4da;
background: #fff;
color: #495057;
border-radius: 4px;
border: 1px solid transparent;
background: var(--color-primary-orange);
color: var(--color-text-on-orange);
cursor: pointer;
font-size: 0.9rem;
}
.btn-edit:hover,
.btn-done:hover {
background: #f1f3f5;
background: var(--color-primary-orange-light);
color: var(--color-text-secondary);
border-color: var(--color-text-secondary);
}
.widget-add-row {
@@ -308,34 +301,14 @@ export default {
.widget-type-select {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ced4da;
border-radius: 4px;
border: 1px solid var(--color-text-secondary);
background: #fff;
color: #495057;
color: var(--color-text-primary);
font-size: 0.9rem;
min-width: 180px;
}
.btn-done {
border-color: #198754;
color: #198754;
}
.logout-btn {
margin-left: auto;
background: #dc3545;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
}
.logout-btn:hover {
background: #c82333;
}
.dashboard-message {
padding: 16px;
border-radius: 8px;
@@ -396,17 +369,18 @@ export default {
.btn-remove {
align-self: flex-start;
padding: 6px 12px;
border: 1px solid #dc3545;
background: #fff;
color: #dc3545;
border: 1px solid transparent;
background: var(--color-primary-orange);
color: var(--color-text-on-orange);
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
}
.btn-remove:hover {
background: #dc3545;
color: #fff;
background: var(--color-primary-orange-light);
color: var(--color-text-secondary);
border-color: var(--color-text-secondary);
}
.dashboard-empty {