diff options
author | Paul Tirk <paultirk@paultirk.com> | 2023-10-26 21:45:39 +0200 |
---|---|---|
committer | Sean Molenaar <SMillerDev@users.noreply.github.com> | 2023-11-07 20:01:54 +0100 |
commit | fb7b121103eecf5e9c4109b5f1690b40f02643c2 (patch) | |
tree | 502fa940032f1583da19d1641b7aff2aef5ab777 | |
parent | fba58d4658f77b2d872dd8b26c48ddcd65c245e9 (diff) |
use template component for list/content views
Signed-off-by: Paul Tirk <paultirk@paultirk.com>
-rw-r--r-- | src/components/ContentTemplate.vue | 68 | ||||
-rw-r--r-- | src/components/routes/All.vue | 42 | ||||
-rw-r--r-- | src/components/routes/Feed.vue | 46 | ||||
-rw-r--r-- | src/components/routes/Folder.vue | 46 | ||||
-rw-r--r-- | src/components/routes/Starred.vue | 50 | ||||
-rw-r--r-- | src/components/routes/Unread.vue | 51 |
6 files changed, 133 insertions, 170 deletions
diff --git a/src/components/ContentTemplate.vue b/src/components/ContentTemplate.vue new file mode 100644 index 000000000..47af3404a --- /dev/null +++ b/src/components/ContentTemplate.vue @@ -0,0 +1,68 @@ +<template> + <NcAppContent> + <template #list> + <div class="header"> + <slot name="header"></slot> + </div> + + <FeedItemDisplayList + :items="items" + :fetch-key="fetchKey" + :config="config" + @load-more="emit('load-more')" + /> + </template> + + <div> + <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> + </div> + </NcAppContent> +</template> + +<script setup lang="ts"> + + import { PropType, computed } from 'vue'; + + import itemStore from '../store/item'; + + import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'; + + import {FeedItem} from '../types/FeedItem'; + + import FeedItemDisplayList from './feed-display/FeedItemDisplayList.vue'; + import FeedItemDisplay from './feed-display/FeedItemDisplay.vue'; + + defineProps({ + items: { + type: Array as PropType<Array<FeedItem>>, + required: true + }, + fetchKey: { + type: String, + required: true + }, + config: { + type: Object + } + }) + + const emit = defineEmits<{ + (event: 'load-more'): void + }>(); + + const selectedFeedItem = computed(() => { + return itemStore.getters.selected(itemStore.state); + }) + +</script> + +<style scoped> + +.header { + padding-left: 50px; + position: absolute; + top: 1em; + font-weight: 700; +} + +</style> diff --git a/src/components/routes/All.vue b/src/components/routes/All.vue index 4bf95e3f6..fda92d593 100644 --- a/src/components/routes/All.vue +++ b/src/components/routes/All.vue @@ -1,38 +1,27 @@ <template> - <NcAppContent> - <template #list> - <div class="header"> - {{ t('news', 'All Articles') }} - </div> - - <FeedItemDisplayList :items="allItems" - :fetch-key="'all'" - @load-more="fetchMore()" /> + <ContentTemplate + :items="allItems" + :fetch-key="'all'" + @load-more="fetchMore()" + > + <template #header> + {{ t('news', 'All Articles') }} </template> - - <div> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - </div> - </NcAppContent> + </ContentTemplate> </template> <script lang="ts"> import Vue from 'vue' import { mapState } from 'vuex' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' - -import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue' -import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue' +import ContentTemplate from '../ContentTemplate.vue' import { FeedItem } from '../../types/FeedItem' import { ACTIONS, MUTATIONS } from '../../store' export default Vue.extend({ components: { - NcAppContent, - FeedItemDisplayList, - FeedItemDisplay + ContentTemplate, }, computed: { ...mapState(['items']), @@ -40,9 +29,6 @@ export default Vue.extend({ allItems(): FeedItem[] { return this.$store.getters.allItems }, - selectedFeedItem(): FeedItem | undefined { - return this.$store.getters.selected - }, }, created() { this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined }) @@ -58,14 +44,6 @@ export default Vue.extend({ </script> <style scoped> - - .header { - padding-left: 50px; - position: absolute; - top: 1em; - font-weight: 700; - } - .counter-bubble { display: inline-block; vertical-align: sub; diff --git a/src/components/routes/Feed.vue b/src/components/routes/Feed.vue index fd0a7cf35..389b38da6 100644 --- a/src/components/routes/Feed.vue +++ b/src/components/routes/Feed.vue @@ -1,31 +1,25 @@ <template> - <NcAppContent> - <template #list> - <div class="header"> - {{ feed ? feed.title : '' }} - <NcCounterBubble v-if="feed" class="counter-bubble"> - {{ feed.unreadCount }} - </NcCounterBubble> - </div> - - <FeedItemDisplayList :items="items" :fetch-key="'feed-'+feedId" @load-more="fetchMore()" /> + <ContentTemplate + :items="items" + :fetch-key="'feed-' + feedId" + @load-more="fetchMore()" + > + <template #header> + {{ feed ? feed.title : '' }} + <NcCounterBubble v-if="feed" class="counter-bubble"> + {{ feed.unreadCount }} + </NcCounterBubble> </template> - - <div> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - </div> - </NcAppContent> + </ContentTemplate> </template> <script lang="ts"> import Vue from 'vue' import { mapState } from 'vuex' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue' -import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue' +import ContentTemplate from '../ContentTemplate.vue' import { FeedItem } from '../../types/FeedItem' import { ACTIONS, MUTATIONS } from '../../store' @@ -33,10 +27,8 @@ import { Feed } from '../../types/Feed' export default Vue.extend({ components: { - NcAppContent, + ContentTemplate, NcCounterBubble, - FeedItemDisplayList, - FeedItemDisplay }, props: { feedId: { @@ -57,9 +49,6 @@ export default Vue.extend({ id(): number { return Number(this.feedId) }, - selectedFeedItem(): FeedItem | undefined { - return this.$store.getters.selected - }, }, created() { this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined }) @@ -77,18 +66,9 @@ export default Vue.extend({ </script> <style scoped> - -.header { - padding-left: 50px; - position: absolute; - top: 1em; - font-weight: 700; -} - .counter-bubble { display: inline-block; vertical-align: sub; margin-left: 10px; } - </style> diff --git a/src/components/routes/Folder.vue b/src/components/routes/Folder.vue index 8a8bd01e6..1a537a6c6 100644 --- a/src/components/routes/Folder.vue +++ b/src/components/routes/Folder.vue @@ -1,31 +1,25 @@ <template> - <NcAppContent> - <template #list> - <div class="header"> - {{ folder ? folder.name : '' }} - <NcCounterBubble v-if="folder" class="counter-bubble"> - {{ unreadCount }} - </NcCounterBubble> - </div> - - <FeedItemDisplayList :items="items" :fetch-key="'folder-'+folderId" @load-more="fetchMore()" /> + <ContentTemplate + :items="items" + :fetch-key="'folder-' + folderId" + @load-more="fetchMore()" + > + <template #header> + {{ folder ? folder.name : '' }} + <NcCounterBubble v-if="folder" class="counter-bubble"> + {{ unreadCount }} + </NcCounterBubble> </template> - - <div> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - </div> - </NcAppContent> + </ContentTemplate> </template> <script lang="ts"> import Vue from 'vue' import { mapState } from 'vuex' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue' -import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue' +import ContentTemplate from '../ContentTemplate.vue' import { FeedItem } from '../../types/FeedItem' import { ACTIONS, MUTATIONS } from '../../store' @@ -34,10 +28,8 @@ import { Folder } from '../../types/Folder' export default Vue.extend({ components: { - NcAppContent, + ContentTemplate, NcCounterBubble, - FeedItemDisplayList, - FeedItemDisplay }, props: { folderId: { @@ -67,9 +59,6 @@ export default Vue.extend({ return totalUnread }, - selectedFeedItem(): FeedItem | undefined { - return this.$store.getters.selected - }, }, created() { this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined }) @@ -87,18 +76,9 @@ export default Vue.extend({ </script> <style scoped> - -.header { - padding-left: 50px; - position: absolute; - top: 1em; - font-weight: 700; -} - .counter-bubble { display: inline-block; vertical-align: sub; margin-left: 10px; } - </style> diff --git a/src/components/routes/Starred.vue b/src/components/routes/Starred.vue index 05d32c633..538804ad8 100644 --- a/src/components/routes/Starred.vue +++ b/src/components/routes/Starred.vue @@ -1,54 +1,40 @@ <template> - <NcAppContent> - <template #list> - <div class="header"> - {{ t('news', 'Starred') }} - <NcCounterBubble class="counter-bubble"> - {{ items.starredCount }} - </NcCounterBubble> - </div> - - <FeedItemDisplayList :items="starred" - :fetch-key="'starred'" - :config="{ starFilter: false }" - @load-more="fetchMore()" /> + <ContentTemplate + :items="starred" + :fetch-key="'starred'" + :config="{ starFilter: false }" + @load-more="fetchMore()" + > + <template #header> + {{ t('news', 'Starred') }} + <NcCounterBubble class="counter-bubble"> + {{ items.starredCount }} + </NcCounterBubble> </template> - - <div> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - </div> - </NcAppContent> + </ContentTemplate> </template> <script lang="ts"> import Vue from 'vue' import { mapState } from 'vuex' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue' -import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue' +import ContentTemplate from '../ContentTemplate.vue' import { FeedItem } from '../../types/FeedItem' import { ACTIONS, MUTATIONS } from '../../store' export default Vue.extend({ components: { - NcAppContent, + ContentTemplate, NcCounterBubble, - FeedItemDisplayList, - FeedItemDisplay }, computed: { ...mapState(['items']), - starred(): FeedItem[] { return this.$store.getters.starred }, - selectedFeedItem(): FeedItem | undefined { - return this.$store.getters.selected - }, }, created() { this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined }) @@ -64,14 +50,6 @@ export default Vue.extend({ </script> <style scoped> - - .header { - padding-left: 50px; - position: absolute; - top: 1em; - font-weight: 700; - } - .counter-bubble { display: inline-block; vertical-align: sub; diff --git a/src/components/routes/Unread.vue b/src/components/routes/Unread.vue index ae10e6a28..a62f28d13 100644 --- a/src/components/routes/Unread.vue +++ b/src/components/routes/Unread.vue @@ -1,35 +1,26 @@ <template> - <NcAppContent> - <template #list> - <div class="header"> - {{ t('news', 'Unread Articles') }} - <NcCounterBubble class="counter-bubble"> - {{ items.unreadCount }} - </NcCounterBubble> - </div> - - <FeedItemDisplayList v-if="unread()" - :items="unread()" - :fetch-key="'unread'" - :config="{ unreadFilter: false }" - @load-more="fetchMore()" /> + <ContentTemplate + :items="unread()" + :fetch-key="'unread'" + :config="{ unreadFilter: false }" + @load-more="fetchMore()" + > + <template #header> + {{ t('news', 'Unread Articles') }} + <NcCounterBubble class="counter-bubble"> + {{ items.unreadCount }} + </NcCounterBubble> </template> - - <div> - <FeedItemDisplay v-if="selectedFeedItem" :item="selectedFeedItem" /> - </div> - </NcAppContent> + </ContentTemplate> </template> <script lang="ts"> import Vue from 'vue' import { mapState } from 'vuex' -import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' -import FeedItemDisplayList from '../feed-display/FeedItemDisplayList.vue' -import FeedItemDisplay from '../feed-display/FeedItemDisplay.vue' +import ContentTemplate from '../ContentTemplate.vue' import { FeedItem } from '../../types/FeedItem' import { ACTIONS, MUTATIONS } from '../../store' @@ -41,10 +32,8 @@ type UnreadItemState = { export default Vue.extend({ components: { - NcAppContent, - NcCounterBubble, - FeedItemDisplayList, - FeedItemDisplay + ContentTemplate, + NcCounterBubble }, data() { return { @@ -53,9 +42,6 @@ export default Vue.extend({ }, computed: { ...mapState(['items']), - selectedFeedItem(): FeedItem | undefined { - return this.$store.getters.selected - }, }, created() { this.$store.commit(MUTATIONS.SET_SELECTED_ITEM, { id: undefined }) @@ -89,13 +75,6 @@ export default Vue.extend({ </script> <style scoped> - .header { - padding-left: 50px; - position: absolute; - top: 1em; - font-weight: 700; - } - .counter-bubble { display: inline-block; vertical-align: sub; |