use template component for list/content views

Signed-off-by: Paul Tirk <paultirk@paultirk.com>

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;