[Vue Rewrite] Sidebar Feed/Folder Actions

.eslintrc.js

@@ -42,5 +42,11 @@ module.exports = {
 				'@typescript-eslint/no-explicit-any': 'off',
 			},
 		},
+		{
+			files: ['src/store/*.ts'],
+			rules: {
+				'function-paren-newline': ['error', 'multiline'],
+			},
+		},
 	 ],
 }

package.json

@@ -141,7 +141,7 @@
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1",
       "^Components/(.*)$": "<rootDir>/src/components/$1",
-      "^.+\\.(css|less)$": "<rootDir>/tests/javascript/helpers/CSSStub.js"
+      "^.+\\.(css|less|svg)$": "<rootDir>/tests/javascript/helpers/CSSStub.js"
     },
     "testEnvironment": "jsdom",
     "transform": {

src/App.vue

@@ -22,8 +22,11 @@ export default Vue.extend({
 		NcAppContent,
 	},
 	async created() {
+		// fetch folders and feeds to build side bar
 		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
 		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
+		// fetch starred to get starred count
+		await this.$store.dispatch(ACTIONS.FETCH_STARRED)
 	},
 })
 </script>

src/components/Sidebar.vue

@@ -4,25 +4,25 @@
 		<NcAppNavigationNew :text="t('news', 'Subscribe')"
 			button-id="new-feed-button"
 			button-class="icon-add"
-			:icon="true"
+			:icon="''"
 			@click="showShowAddFeed()">
 			<template #icon>
 				<PlusIcon />
 			</template>
 		</NcAppNavigationNew>
 		<template #list>
 			<NcAppNavigationNewItem :title="t('news', 'New folder')"
-				:icon="true"
+				:icon="''"
 				@new-item="newFolder">
 				<template #icon>
 					<FolderPlusIcon />
 				</template>
 			</NcAppNavigationNewItem>
 
-			<NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss" :to="{ name: ROUTES.UNREAD }">
+			<NcAppNavigationItem :name="t('news', 'Unread articles')" icon="icon-rss" :to="{ name: ROUTES.UNREAD }">
 				<template #actions>
-					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')">
-						t('news','Mark read')
+					<NcActionButton icon="icon-checkmark" @click="markAllRead()">
+						{{ t('news','Mark read') }}
 					</NcActionButton>
 				</template>
 				<template #icon>
@@ -32,88 +32,41 @@
 					<NcCounterBubble>{{ items.unreadCount }}</NcCounterBubble>
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss" :to="{ name: ROUTES.ALL }">
-				<template #actions>
-					<ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')">
-						t('news','Mark read')
-					</ActionButton>
-				</template>
+			<NcAppNavigationItem :name="t('news', 'All articles')" icon="icon-rss" :to="{ name: ROUTES.ALL }">
 				<template #icon>
 					<RssIcon />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
+			<NcAppNavigationItem :name="t('news', 'Starred')" icon="icon-starred" :to="{ name: ROUTES.STARRED }">
 				<template #counter>
 					<NcCounterBubble>{{ items.starredCount }}</NcCounterBubble>
 				</template>
 			</NcAppNavigationItem>
 
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
 				:key="topLevelItem.name || topLevelItem.title"
-				:title="topLevelItem.name || topLevelItem.title"
-				:icon="true"
+				:name="topLevelItem.name || topLevelItem.title"
+				:icon="''"
 				:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
 				:allow-collapse="true">
 				<template #default>
 					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
 						:key="feed.name"
-						:title="feed.title"
-						:icon="true"
-						:to="{ name: ROUTES.FEED, params: { feedId: feed.id } }">
+						:name="feed.title"
+						:icon="''"
+						:to="{ name: ROUTES.FEED, params: { feedId: feed.id.toString() } }">
 						<template #icon>
 							<RssIcon v-if="!feed.faviconLink" />
 							<span v-if="feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
 						</template>
+						<template #counter>
+							<NcCounterBubble v-if="feed.unreadCount > 0">
+								{{ feed.unreadCount }}
+							</NcCounterBubble>
+						</template>
 
 						<template #actions>
-							<NcActionButton icon="icon-checkmark"
-								@click="alert('TODO: Mark read')">
-								{{ t("news", "Mark read") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-pinned"
-								@click="alert('TODO: Unpin from top')">
-								{{ t("news", "Unpin from top") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-caret-dark"
-								@click="alert('TODO: Newest First')">
-								{{ t("news", "Newest first") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-caret-dark"
-								@click="alert('TODO: Oldest first')">
-								{{ t("news", "Oldest first") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-caret-dark"
-								@click="alert('TODO: Default Order')">
-								{{ t("news", "Default order") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-full-text-disabled"
-								@click="alert('TODO: Enable Full Text')">
-								{{ t("news", "Enable full text") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-full-text-enabled"
-								@click="alert('TODO: DIsable Full Text')">
-								{{ t("news", "Disable full text") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-updatemode-default"
-								@click="alert('TODO: Unread Updated')">
-								{{ t("news", "Unread updated") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-updatemode-unread"
-								@click="alert('TOODO: Ignore UPdated')">
-								{{ t("news", "Ignore updated") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-icon-rss"
-								@click="alert('TODO: Open Feed URL')">
-								{{ t("news", "Open feed URL") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-icon-rename"
-								@click="alert('TODO: Rename')">
-								{{ t("news", "Rename") }}
-							</NcActionButton>
-							<NcActionButton icon="icon-delete"
-								@click="alert('TODO: Delete Feed')">
-								{{ t("news", "Delete") }}
-							</NcActionButton>
+							<SidebarFeedLinkActions :feed-id="feed.id" />
 						</template>
 					</NcAppNavigationItem>
 				</template>
@@ -131,10 +84,12 @@
 					</NcCounterBubble>
 				</template>
 				<template #actions>
-					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')">
+					<SidebarFeedLinkActions v-if="topLevelItem.name === undefined" :feed-id="topLevelItem.id" />
+
+					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-checkmark" @click="markFolderRead(topLevelItem)">
 						{{ t("news", "Mark read") }}
 					</NcActionButton>
-					<NcActionButton icon="icon-rename" @click="alert('TODO: Rename')">
+					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-rename" @click="renameFolder(topLevelItem)">
 						{{ t("news", "Rename") }}
 					</NcActionButton>
 					<NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)">
@@ -143,7 +98,7 @@
 				</template>
 			</NcAppNavigationItem>
 
-			<NcAppNavigationItem :title="t('news', 'Explore')"
+			<NcAppNavigationItem :name="t('news', 'Explore')"
 				icon="true"
 				:to="{ name: ROUTES.EXPLORE }">
 				<template #counter>
@@ -193,7 +148,15 @@ const SideBarState = {
 		})
 		navItems = navItems.concat(state.folders)
 
-		return navItems
+		// bring pinned items to the top
+		return navItems.sort((item, item2) => {
+			if ((item as Feed).pinned && !(item2 as Feed).pinned) {
+				return -1
+			} else if ((item2 as Feed).pinned && !(item as Feed).pinned) {
+				return 1
+			}
+			return 0
+		})
 	},
 }
 
@@ -229,6 +192,35 @@ export default Vue.extend({
 			const folder = { name: folderName }
 			this.$store.dispatch(ACTIONS.ADD_FOLDERS, { folder })
 		},
+		markAllRead() {
+			const shouldMarkRead = window.confirm(t('news', 'Are you sure you want to mark all read?'))
+
+			if (shouldMarkRead) {
+				this.$store.getters.feeds.forEach((feed: Feed) => {
+					this.$store.dispatch(ACTIONS.FEED_MARK_READ, { feed })
+				})
+			}
+		},
+		markFolderRead(folder: Folder) {
+			const shouldMarkRead = window.confirm(t('news', 'Are you sure you want to mark all read?'))
+
+			if (shouldMarkRead) {
+				const feeds = this.$store.getters.feeds.filter((feed: Feed) => {
+					return feed.folderId === folder.id
+				})
+				feeds.forEach((feed: Feed) => {
+					this.$store.dispatch(ACTIONS.FEED_MARK_READ, { feed })
+				})
+			}
+		},
+		renameFolder(folder: Folder) {
+			const name = window.prompt(t('news', 'Rename Folder'), folder.name)
+
+			// null when user presses escape (do nothing)
+			if (name !== null) {
+				this.$store.dispatch(ACTIONS.FOLDER_SET_NAME, { folder, name })
+			}
+		},
 		deleteFolder(folder: Folder) {
 			this.$store.dispatch(ACTIONS.DELETE_FOLDER, { folder })
 		},
@@ -238,9 +230,6 @@ export default Vue.extend({
 		closeShowAddFeed() {
 			this.showAddFeed = false
 		},
-		alert(msg: string) {
-			window.alert(msg)
-		},
 		isFolder(item: Feed | Folder) {
 			return (item as Folder).name !== undefined
 		},