diff options
author | Devlin Junker <devlin.junker@gmail.com> | 2022-11-28 17:04:14 -1000 |
---|---|---|
committer | Benjamin Brahmer <info@b-brahmer.de> | 2022-12-06 14:57:20 +0100 |
commit | 83fe713c052ee2ccc419be58eb9e83ba23a95b65 (patch) | |
tree | cfac0dbf192a573b08ac1e70064c6c5623da8cf1 /src | |
parent | 604e4e0f1bc8829558dd9b91c94d5776b0ac67be (diff) |
split store into multiple files
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AddFeed.vue | 6 | ||||
-rw-r--r-- | src/components/Explore.vue | 5 | ||||
-rw-r--r-- | src/components/Sidebar.vue | 251 | ||||
-rw-r--r-- | src/store/feed.ts | 74 | ||||
-rw-r--r-- | src/store/folder.ts | 70 | ||||
-rw-r--r-- | src/store/index.ts | 148 | ||||
-rw-r--r-- | src/types/Feed.ts | 9 | ||||
-rw-r--r-- | src/types/Feed.vue | 6 | ||||
-rw-r--r-- | src/types/Folder.ts (renamed from src/types/Folder.vue) | 4 |
9 files changed, 309 insertions, 264 deletions
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue index cd5e60fe2..2284f7d07 100644 --- a/src/components/AddFeed.vue +++ b/src/components/AddFeed.vue @@ -111,8 +111,10 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' -import { Folder } from '../types/Folder.vue' -import { Feed } from '../types/Feed.vue' +// eslint-disable-next-line +import { Folder } from '../types/Folder' +// eslint-disable-next-line +import { Feed } from '../types/Feed' type AddFeedState = { folder: Folder; diff --git a/src/components/Explore.vue b/src/components/Explore.vue index 20b9106ff..28adf38ca 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -38,7 +38,8 @@ import axios from '@nextcloud/axios' import AddFeed from './AddFeed.vue' import * as router from '@nextcloud/router' import { ExploreSite } from '../types/ExploreSite.vue' -import { Feed } from '../types/Feed.vue' +// eslint-disable-next-line +import { Feed } from '../types/Feed' const ExploreComponent = Vue.extend({ components: { @@ -47,7 +48,7 @@ const ExploreComponent = Vue.extend({ }, data: () => { const exploreSites: ExploreSite[] = [] - const feed: Feed = {} + const feed: Feed = {} as any const showAddFeed = false return { diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 95ace9064..2e91c115d 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -6,125 +6,123 @@ button-class="icon-add" @click="showShowAddFeed()" /> - <ul id="locations" class="with-icon"> - <NcAppNavigationNewItem :title="t('news', 'New folder')" - icon="icon-add-folder" - @new-item="newFolder" /> + <NcAppNavigationNewItem :title="t('news', 'New folder')" + icon="icon-add-folder" + @new-item="newFolder" /> - <NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss"> - <template #actions> - <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')"> - t('news','Mark read') - </NcActionButton> - </template> - <template #counter> - <CounterBubble>5</CounterBubble> - </template> - </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss"> - <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')"> - t('news','Mark read') - </ActionButton> - </template> - </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> - <template #counter> - <NcCounterBubble>35</NcCounterBubble> - </template> - </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss"> + <template #actions> + <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')"> + t('news','Mark read') + </NcActionButton> + </template> + <template #counter> + <CounterBubble>5</CounterBubble> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss"> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')"> + t('news','Mark read') + </ActionButton> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> + <template #counter> + <NcCounterBubble>35</NcCounterBubble> + </template> + </NcAppNavigationItem> - <NcAppNavigationItem v-for="topLevelItem in topLevelNav" - :key="topLevelItem.name" - :title="topLevelItem.name" - icon="icon-folder" - :allow-collapse="true"> - <template #default> - <NcAppNavigationItem v-for="feed in topLevelItem.feeds" - :key="feed.name" - :title="feed.title"> - <template #icon> - <img v-if="feed.faviconLink" - :src="feed.faviconLink" - alt="feedIcon"> - <div v-if="!feed.faviconLink" class="icon-rss" /> - </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> - </template> - </NcAppNavigationItem> - </template> - <template v-if="topLevelItem.feedCount > 0" #counter> - <CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble> - </template> - <template #actions> - <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')"> - {{ t("news", "Mark read") }} - </NcActionButton> - <NcActionButton icon="icon-rename" @click="alert('TODO: Rename')"> - {{ t("news", "Rename") }} - </NcActionButton> - <NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)"> - {{ t("news", "Delete") }} - </NcActionButton> - </template> - </NcAppNavigationItem> + <NcAppNavigationItem v-for="topLevelItem in topLevelNav" + :key="topLevelItem.name" + :title="topLevelItem.name" + icon="icon-folder" + :allow-collapse="true"> + <template #default> + <NcAppNavigationItem v-for="feed in topLevelItem.feeds" + :key="feed.name" + :title="feed.title"> + <template #icon> + <img v-if="feed.faviconLink" + :src="feed.faviconLink" + alt="feedIcon"> + <div v-if="!feed.faviconLink" class="icon-rss" /> + </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> + </template> + </NcAppNavigationItem> + </template> + <template v-if="topLevelItem.feedCount > 0" #counter> + <CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble> + </template> + <template #actions> + <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')"> + {{ t("news", "Mark read") }} + </NcActionButton> + <NcActionButton icon="icon-rename" @click="alert('TODO: Rename')"> + {{ t("news", "Rename") }} + </NcActionButton> + <NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)"> + {{ t("news", "Delete") }} + </NcActionButton> + </template> + </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'Explore')" - icon="icon-link" - :to="{ name: 'explore' }"> - <template #counter> - <NcCounterBubble>35</NcCounterBubble> - </template> - </NcAppNavigationItem> - </ul> + <NcAppNavigationItem :title="t('news', 'Explore')" + icon="icon-link" + :to="{ name: 'explore' }"> + <template #counter> + <NcCounterBubble>35</NcCounterBubble> + </template> + </NcAppNavigationItem> </NcAppNavigation> </template> @@ -132,6 +130,7 @@ import Vuex from 'vuex' import Vue from 'vue' + import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js' import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js' import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' @@ -139,21 +138,23 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati // import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import AddFeed from './AddFeed.vue' -import { Folder } from '../types/Folder.vue' -import { Feed } from '../types/Feed.vue' // import { ROUTES } from '../routes.js' -import { ACTIONS, AppState } from '../store/index.ts' + +import AddFeed from './AddFeed.vue' + +import { ACTIONS, AppState } from '../store/index' +import { Folder } from '../types/Folder' +import { Feed } from '../types/Feed' const SideBarState: any = { - topLevelNav(state: AppState) { - const navItems = state.feeds.filter((feed: Feed) => { + topLevelNav(state: AppState): any[] { + const navItems: any[] = state.feeds.filter((feed: Feed) => { return feed.folderId === undefined || feed.folderId === null - }).concat(state.folders) + }) + navItems.concat(state.folders) - console.log(navItems); - return navItems; + return navItems }, } diff --git a/src/store/feed.ts b/src/store/feed.ts new file mode 100644 index 000000000..aaf9a96f0 --- /dev/null +++ b/src/store/feed.ts @@ -0,0 +1,74 @@ +import axios from "@nextcloud/axios"; +import { generateUrl } from "@nextcloud/router"; + +import { ActionParams, AppState } from 'src/store' +import { Feed } from '../types/Feed' + +export const FEED_MUTATION_TYPES = { + SET_FEEDS: 'SET_FEEDS', +} + +export const FEED_ACTION_TYPES = { + ADD_FEED: 'ADD_FEED', + FETCH_FEEDS: 'FETCH_FEEDS', +} + +const feedUrl = generateUrl("/apps/news/feeds") + +export const FEED_ACTIONS = { + async [FEED_ACTION_TYPES.FETCH_FEEDS] ({ commit }: ActionParams) { + const feeds = await axios.get( + generateUrl("/apps/news/feeds") + ); + + commit(FEED_MUTATION_TYPES.SET_FEEDS, feeds.data.feeds); + }, + [FEED_ACTION_TYPES.ADD_FEED] ({ commit }: ActionParams, { feedReq }: { feedReq: { url: string; folder?: { id: number } } }) { + console.log(feedReq) + let url = feedReq.url.trim(); + if (!url.startsWith('http')) { + url = 'https://' + url; + } + + /** + if (title !== undefined) { + title = title.trim(); + } + */ + + let feed: Feed = { + url: url, + folderId: feedReq.folder?.id || 0, + title: undefined, + unreadCount: 0, + autoDiscover: undefined // TODO + }; + + // this.add(feed); + // this.updateFolderCache(); + + axios.post(feedUrl, { + url: feed.url, + parentFolderId: feed.folderId, + title: null, + user: null, + password: null, + fullDiscover: feed.autoDiscover + }).then(() => { + commit('addFeed', feed) + }); + } +} + +export const FEED_MUTATIONS = { + [FEED_MUTATION_TYPES.SET_FEEDS] (state: AppState, feeds: Feed[]) { + feeds.forEach(it => { + state.feeds.push(it) + const folder = state.folders.find(folder => folder.id === it.folderId) + if (folder) { + folder.feeds.push(it) + folder.feedCount += it.unreadCount + } + }) + }, +}
\ No newline at end of file diff --git a/src/store/folder.ts b/src/store/folder.ts new file mode 100644 index 000000000..735676ea0 --- /dev/null +++ b/src/store/folder.ts @@ -0,0 +1,70 @@ +import axios from "@nextcloud/axios"; +import { generateUrl } from "@nextcloud/router"; + +import { AppState, ActionParams } from 'src/store' +import { Folder } from '../types/Folder' + +export const FOLDER_MUTATION_TYPES = { + SET_FOLDERS: 'SET_FOLDERS', + DELETE_FOLDER: 'DELETE_FOLDER' +} + +export const FOLDER_ACTION_TYPES = { + FETCH_FOLDERS: 'FETCH_FOLDERS', + ADD_FOLDERS: 'ADD_FOLDER', + DELETE_FOLDER: 'DELETE_FOLDER' +} + +const folderUrl = generateUrl("/apps/news/folders") + +export const FOLDER_ACTIONS = { + + async [FOLDER_ACTION_TYPES.FETCH_FOLDERS] ({ commit }: ActionParams) { + const folders = await axios.get( + generateUrl("/apps/news/folders") + ); + + commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, folders.data.folders); + }, + [FOLDER_ACTION_TYPES.ADD_FOLDERS] ({ commit }: ActionParams, { folder }: { folder: Folder}) { + console.log(folder) + axios.post(folderUrl, {folderName: folder.name}).then( + response => commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders) + ); + }, + [FOLDER_ACTION_TYPES.DELETE_FOLDER] ({ commit }: ActionParams, { folder }: { folder: Folder}) { + /** + this.getByFolderId(folderId).forEach(function (feed) { + promises.push(self.reversiblyDelete(feed.id, false, true)); + }); + this.updateUnreadCache(); + */ + axios.delete(folderUrl + '/' + folder.id).then(() => commit(FOLDER_MUTATION_TYPES.DELETE_FOLDER, folder)) + }, + // loadFolder({commit}) { + // console.log('loading folders') + // axios.get(folderUrl).then( + // response => { + // commit('addFolders', response.data.folders); + // axios.get(feedUrl).then( + // response => commit('addFeeds', response.data.feeds) + // ) + // } + // ) + // }, +} + + +export const FOLDER_MUTATIONS = { + [FOLDER_MUTATION_TYPES.SET_FOLDERS] (state: AppState, folders: Folder[]) { + folders.forEach(it => { + it.feedCount = 0 + it.feeds = [] + state.folders.push(it) + }) + }, + [FOLDER_MUTATION_TYPES.DELETE_FOLDER] (state: AppState, folder: Folder) { + const index = state.folders.indexOf(folder); + state.folders.splice(index, 1); + } +}
\ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index 3d1c5948c..177e23a94 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,35 +1,24 @@ -import axios from "@nextcloud/axios"; -import { generateUrl } from "@nextcloud/router"; import { Commit } from "vuex"; +import { Folder } from '../types/Folder' +import { Feed } from '../types/Feed' +import { FEED_MUTATION_TYPES, FEED_ACTION_TYPES, FEED_MUTATIONS, FEED_ACTIONS } from "./feed"; +import { FOLDER_MUTATION_TYPES, FOLDER_ACTION_TYPES, FOLDER_MUTATIONS, FOLDER_ACTIONS } from "./folder"; + export const MUTATIONS = { - SET_FEEDS: 'SET_FEEDS', - SET_FOLDERS: 'SET_FOLDERS' + ... FEED_MUTATION_TYPES, + ... FOLDER_MUTATION_TYPES } export const ACTIONS = { - FETCH_FEEDS: 'FETCH_FEEDS', - FETCH_FOLDERS: 'FETCH_FOLDERS' -} - -type Feed = { - folderId?: number; - unreadCount: number; - url: string; - title?: string; - autoDiscover?: boolean; - faviconLink?: string; + ... FEED_ACTION_TYPES, + ... FOLDER_ACTION_TYPES } -type Folder = { - feeds: any[]; - feedCount: number; - name: string; - id: number; -} +export type ActionParams = { commit: Commit }; export type AppState = { - feeds: any[]; + feeds: Feed[]; folders: Folder[]; items: any[]; } @@ -40,111 +29,6 @@ const state: AppState = { items: [] } as AppState -const mutations = { - [MUTATIONS.SET_FEEDS] (state: AppState, feeds: Feed[]) { - feeds.forEach(it => { - state.feeds.push(it) - const folder = state.folders.find(folder => folder.id === it.folderId) - if (folder) { - folder.feeds.push(it) - folder.feedCount += it.unreadCount - } - }) - }, - [MUTATIONS.SET_FOLDERS] (state: AppState, folders: Folder[]) { - folders.forEach(it => { - it.feedCount = 0 - it.feeds = [] - state.folders.push(it) - }) - }, -} - - -const feedUrl = generateUrl("/apps/news/feeds") -const folderUrl = generateUrl("/apps/news/folders") - - -type ActionParams = { commit: Commit }; - -const actions = { - async [ACTIONS.FETCH_FEEDS] ({ commit }: ActionParams) { - const feeds = await axios.get( - generateUrl("/apps/news/feeds") - ); - - commit(MUTATIONS.SET_FEEDS, feeds.data.feeds); - }, - async [ACTIONS.FETCH_FOLDERS] ({ commit }: ActionParams) { - const folders = await axios.get( - generateUrl("/apps/news/folders") - ); - - commit(MUTATIONS.SET_FOLDERS, folders.data.folders); - }, - addFolder({ commit }: ActionParams, { folder }: { folder: Folder}) { - console.log(folder) - axios.post(folderUrl, {folderName: folder.name}).then( - response => commit(MUTATIONS.SET_FOLDERS, response.data.folders) - ); - }, - deleteFolder({ commit }: ActionParams, { folder }: { folder: Folder}) { - /** - this.getByFolderId(folderId).forEach(function (feed) { - promises.push(self.reversiblyDelete(feed.id, false, true)); - }); - this.updateUnreadCache(); - */ - axios.delete(folderUrl + '/' + folder.id).then() - }, - // loadFolder({commit}) { - // console.log('loading folders') - // axios.get(folderUrl).then( - // response => { - // commit('addFolders', response.data.folders); - // axios.get(feedUrl).then( - // response => commit('addFeeds', response.data.feeds) - // ) - // } - // ) - // }, - addFeed({ commit }: ActionParams, { feedReq }: { feedReq: { url: string; folder?: { id: number } } }) { - console.log(feedReq) - let url = feedReq.url.trim(); - if (!url.startsWith('http')) { - url = 'https://' + url; - } - - /** - if (title !== undefined) { - title = title.trim(); - } - */ - - let feed: Feed = { - url: url, - folderId: feedReq.folder?.id || 0, - title: undefined, - unreadCount: 0, - autoDiscover: undefined // TODO - }; - - // this.add(feed); - // this.updateFolderCache(); - - axios.post(feedUrl, { - url: feed.url, - parentFolderId: feed.folderId, - title: null, - user: null, - password: null, - fullDiscover: feed.autoDiscover - }).then(() => { - commit('addFeed', feed) - }); - } -} - const getters = { feeds (state: AppState) { return state.feeds; @@ -154,6 +38,16 @@ const getters = { }, } +const mutations = { + ... FEED_MUTATIONS, + ... FOLDER_MUTATIONS +} + +const actions = { + ... FEED_ACTIONS, + ... FOLDER_ACTIONS +} + export default { state, mutations, diff --git a/src/types/Feed.ts b/src/types/Feed.ts new file mode 100644 index 000000000..d03ce5e0b --- /dev/null +++ b/src/types/Feed.ts @@ -0,0 +1,9 @@ +export type Feed = { + folderId?: number; + unreadCount: number; + url: string; + title?: string; + autoDiscover?: boolean; + faviconLink?: string; +} + diff --git a/src/types/Feed.vue b/src/types/Feed.vue deleted file mode 100644 index ece4a569e..000000000 --- a/src/types/Feed.vue +++ /dev/null @@ -1,6 +0,0 @@ -<script lang="ts"> -export type Feed = { - url?: string; - folderId?: number; -} -</script> diff --git a/src/types/Folder.vue b/src/types/Folder.ts index 254b4a20f..02b25cb8d 100644 --- a/src/types/Folder.vue +++ b/src/types/Folder.ts @@ -1,8 +1,8 @@ -<script lang="ts"> + export type Folder = { feeds: any[]; feedCount: number; name: string; id: number; } -</script> + |