Skip to content

Commit c985ecb

Browse files
wofferlwofferl
committed
feat: add an information list for feeds that displays data such as last or next update dates
Signed-off-by: Wolfgang <[email protected]>
1 parent b52c26a commit c985ecb

File tree

3 files changed

+213
-0
lines changed

3 files changed

+213
-0
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
77
# Unreleased
88
## [25.x.x]
99
### Changed
10+
- add an information list for feeds that displays data such as last or next update dates
1011

1112
### Fixed
1213
- OPML import use text field for title if title field is missing (#3016)

‎src/components/Sidebar.vue

+10
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,10 @@
158158
{{ t('news', 'Keyboard shortcuts') }}
159159
</NcButton>
160160
<HelpModal v-if="showHelp" @close="showHelp=false" />
161+
<NcButton @click="showFeedInfoTable = true">
162+
{{ t('news', 'Article feed information') }}
163+
</NcButton>
164+
<FeedInfoTable v-if="showFeedInfoTable" @close="showFeedInfoTable = false" />
161165
<div>
162166
<div class="select-container">
163167
<label>
@@ -289,6 +293,7 @@ import MoveFeed from './MoveFeed.vue'
289293
import SidebarFeedLinkActions from './SidebarFeedLinkActions.vue'
290294
291295
import HelpModal from './modals/HelpModal.vue'
296+
import FeedInfoTable from './modals/FeedInfoTable.vue'
292297
import { Folder } from '../types/Folder'
293298
import { Feed } from '../types/Feed'
294299
@@ -315,6 +320,7 @@ export default Vue.extend({
315320
DownloadIcon,
316321
SidebarFeedLinkActions,
317322
HelpModal,
323+
FeedInfoTable,
318324
},
319325
data: () => {
320326
return {
@@ -323,6 +329,7 @@ export default Vue.extend({
323329
feedToMove: undefined,
324330
ROUTES,
325331
showHelp: false,
332+
showFeedInfoTable: false,
326333
polling: null,
327334
uploadStatus: null,
328335
selectedFile: null,
@@ -475,6 +482,9 @@ export default Vue.extend({
475482
subscribe('news:global:toggle-help-dialog', () => {
476483
this.showHelp = !this.showHelp
477484
})
485+
subscribe('news:global:toggle-feed-info', () => {
486+
this.showFeedInfoTable = !this.showFeedInfoTable
487+
})
478488
},
479489
beforeDestroy() {
480490
clearInterval(this.polling)

‎src/components/modals/FeedInfoTable.vue

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud News
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
<template>
6+
<NcModal size="large"
7+
@close="$emit('close')">
8+
<div class="table-modal">
9+
<h2>{{ t('news', 'Article feed information') }}</h2>
10+
<table>
11+
<thead>
12+
<tr>
13+
<th @click="sortBy('id')">
14+
<span class="column-title">
15+
ID
16+
<SortAscIcon v-if="sortKey === 'id' && sortOrder === 1" />
17+
<SortDescIcon v-if="sortKey === 'id' && sortOrder !== 1" />
18+
</span>
19+
</th>
20+
<th @click="sortBy('title')">
21+
<span class="column-title">
22+
{{ t('news', 'Title') }}
23+
<SortAscIcon v-if="sortKey === 'title' && sortOrder === 1" />
24+
<SortDescIcon v-if="sortKey === 'title' && sortOrder !== 1" />
25+
</span>
26+
</th>
27+
<th @click="sortBy('lastModified')">
28+
<span class="column-title">
29+
{{ t('news', 'Last update') }}
30+
<SortAscIcon v-if="sortKey === 'lastModified' && sortOrder === 1" />
31+
<SortDescIcon v-if="sortKey === 'lastModified' && sortOrder !== 1" />
32+
</span>
33+
</th>
34+
<th @click="sortBy('nextUpdateTime')">
35+
<span class="column-title">
36+
{{ t('news', 'Next update') }}
37+
<SortAscIcon v-if="sortKey === 'nextUpdateTime' && sortOrder === 1" />
38+
<SortDescIcon v-if="sortKey === 'nextUpdateTime' && sortOrder !== 1" />
39+
</span>
40+
</th>
41+
<th :title="t('news', 'Articles per update')"
42+
@click="sortBy('articlesPerUpdate')">
43+
<span class="column-title">
44+
APU
45+
<SortAscIcon v-if="sortKey === 'articlesPerUpdate' && sortOrder === 1" />
46+
<SortDescIcon v-if="sortKey === 'articlesPerUpdate' && sortOrder !== 1" />
47+
</span>
48+
</th>
49+
<th :title="t('news', 'Error Count') "
50+
@click="sortBy('updateErrorCount')">
51+
<span class="column-title">
52+
EC
53+
<SortAscIcon v-if="sortKey === 'updateErrorCount' && sortOrder === 1" />
54+
<SortDescIcon v-if="sortKey === 'updateErrorCount' && sortOrder !== 1" />
55+
</span>
56+
</th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
<tr v-for="feed in sortedFeeds" :key="feed.id">
61+
<td>{{ feed.id }}</td>
62+
<td>{{ feed.title }}</td>
63+
<td>{{ formatDate(feed.lastModified/1000) }}</td>
64+
<td>{{ formatDate(feed.nextUpdateTime*1000) }}</td>
65+
<td>{{ feed.articlesPerUpdate }}</td>
66+
<td :title="feed.lastUpdateError">
67+
{{ feed.updateErrorCount }}
68+
</td>
69+
</tr>
70+
</tbody>
71+
</table>
72+
</div>
73+
</NcModal>
74+
</template>
75+
76+
<script>
77+
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
78+
import SortAscIcon from 'vue-material-design-icons/SortAscending.vue'
79+
import SortDescIcon from 'vue-material-design-icons/SortDescending.vue'
80+
import { mapState } from 'vuex'
81+
82+
export default {
83+
name: 'FeedInfoTable',
84+
components: {
85+
NcModal,
86+
SortAscIcon,
87+
SortDescIcon,
88+
},
89+
data() {
90+
return {
91+
sortKey: 'title',
92+
sortOrder: 1,
93+
}
94+
},
95+
computed: {
96+
...mapState({
97+
feeds: state => state.feeds.feeds,
98+
}),
99+
sortedFeeds() {
100+
const sorted = this.feeds
101+
if (this.sortKey) {
102+
sorted.sort((a, b) => {
103+
const valueA = a[this.sortKey]
104+
const valueB = b[this.sortKey]
105+
if (typeof valueA === 'string') {
106+
return valueA.localeCompare(valueB) * this.sortOrder
107+
} else {
108+
return (valueA - valueB) * this.sortOrder
109+
}
110+
})
111+
}
112+
return sorted
113+
},
114+
},
115+
methods: {
116+
formatDate(timestamp) {
117+
return new Date(timestamp).toLocaleDateString(undefined, {
118+
day: '2-digit',
119+
month: '2-digit',
120+
year: 'numeric',
121+
hour: '2-digit',
122+
minute: '2-digit',
123+
second: '2-digit',
124+
})
125+
},
126+
sortBy(key) {
127+
if (this.sortKey === key) {
128+
this.sortOrder *= -1
129+
} else {
130+
this.sortKey = key
131+
this.sortOrder = 1
132+
}
133+
},
134+
},
135+
}
136+
</script>
137+
138+
<style lang="scss" scoped>
139+
.table-modal {
140+
width: max-content;
141+
padding: 30px 40px 20px;
142+
143+
h2 {
144+
font-weight: bold;
145+
}
146+
}
147+
148+
table {
149+
margin-top: 24px;
150+
border-collapse: collapse;
151+
152+
tbody tr {
153+
&:hover, &:focus, &:active {
154+
background-color: transparent !important;
155+
}
156+
}
157+
158+
thead tr {
159+
border: none;
160+
}
161+
162+
th {
163+
cursor: pointer;
164+
font-weight: bold;
165+
padding: .75rem 1rem .75rem 0;
166+
border-bottom: 2px solid var(--color-background-darker);
167+
&:hover {
168+
background-color: var(--color-background-hover);
169+
}
170+
}
171+
172+
td {
173+
padding: .75rem 1rem .75rem 0;
174+
border-top: 1px solid var(--color-background-dark);
175+
border-bottom: unset;
176+
177+
&.noborder {
178+
border-top: unset;
179+
}
180+
181+
&.ellipsis_top {
182+
padding-bottom: 0;
183+
}
184+
185+
&.ellipsis {
186+
padding-top: 0;
187+
padding-bottom: 0;
188+
}
189+
190+
&.ellipsis_bottom {
191+
padding-top: 0;
192+
}
193+
}
194+
195+
.column-title {
196+
display: flex;
197+
align-items: center;
198+
gap: 4px;
199+
}
200+
201+
}
202+
</style>

0 commit comments

Comments
 (0)