mirror of
https://github.com/chylex/Nextcloud-News.git
synced 2025-02-22 20:46:04 +01:00
connect actions to backend
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
This commit is contained in:
parent
99a08b3c37
commit
4fa0a875d8
src
@ -33,7 +33,7 @@
|
||||
</template>
|
||||
<NcActionButton>
|
||||
<template #default>
|
||||
<!-- TODO: --> TODO
|
||||
<!-- TODO: Share Menu --> TODO
|
||||
</template>
|
||||
<template #icon>
|
||||
<ShareVariant />
|
||||
@ -64,7 +64,7 @@
|
||||
{{ t('news', 'by') }} {{ item.author }}
|
||||
</span>
|
||||
<span v-if="!item.sharedBy" class="source">{{ t('news', 'from') }}
|
||||
<!-- TODO: Fix this -->
|
||||
<!-- TODO: Fix link to feed -->
|
||||
<a :href="`#/items/feeds/${item.feedId}/`">
|
||||
{{ getFeed(item.feedId).title }}
|
||||
<img v-if="getFeed(item.feedId).faviconLink && isCompactView()" :src="getFeed(item.feedId).faviconLink" alt="favicon">
|
||||
@ -77,7 +77,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Test this -->
|
||||
<!-- TODO: Test audio/video -->
|
||||
<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
|
||||
<button @click="play(item)">
|
||||
{{ t('news', 'Play audio') }}
|
||||
@ -129,6 +129,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
|
||||
|
||||
import { Feed } from '../types/Feed'
|
||||
import { FeedItem } from '../types/FeedItem'
|
||||
import { ACTIONS, MUTATIONS } from '../store'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FeedItem',
|
||||
@ -199,26 +200,23 @@ export default Vue.extend({
|
||||
return this.$store.getters.feeds.find((feed: Feed) => feed.id === id)
|
||||
},
|
||||
getMediaType(mime: any): 'audio' | 'video' | false {
|
||||
// TODO: figure out how to check
|
||||
// TODO: figure out how to check media type
|
||||
return false
|
||||
},
|
||||
play(item: any) {
|
||||
// TODO: implement this
|
||||
// TODO: implement play audio/video
|
||||
},
|
||||
markRead(item: FeedItem): void {
|
||||
if (!this.keepUnread) {
|
||||
// TODO: update state
|
||||
item.unread = false
|
||||
this.$store.dispatch(ACTIONS.MARK_READ, { item })
|
||||
}
|
||||
},
|
||||
toggleKeepUnread(item: FeedItem): void {
|
||||
this.keepUnread = !this.keepUnread
|
||||
// TODO: update state
|
||||
item.unread = true
|
||||
this.$store.dispatch(ACTIONS.MARK_UNREAD, { item })
|
||||
},
|
||||
toggleStarred(item: FeedItem): void {
|
||||
// TODO: update state
|
||||
item.starred = !item.starred
|
||||
this.$store.dispatch(item.starred ? ACTIONS.UNSTAR_ITEM : ACTIONS.STAR_ITEM, { item })
|
||||
},
|
||||
},
|
||||
})
|
||||
|
@ -181,9 +181,6 @@ export default Vue.extend({
|
||||
...mapState(['feeds', 'folders', 'items']),
|
||||
...mapState(SideBarState),
|
||||
},
|
||||
created() {
|
||||
// TODO: init?
|
||||
},
|
||||
methods: {
|
||||
newFolder(value: string) {
|
||||
const folderName = value.trim()
|
||||
|
@ -7,9 +7,9 @@
|
||||
</NcCounterBubble>
|
||||
</div>
|
||||
<VirtualScroll :reached-end="reachedEnd" @load-more="fetchMore()">
|
||||
<template v-if="items.starredItems && items.starredItems.length > 0">
|
||||
<template v-for="item in items.starredItems">
|
||||
<FeedItem :key="item.id" :item="item" />
|
||||
<template v-if="starred && starred.length > 0">
|
||||
<template v-for="item in starred">
|
||||
<FeedItemComponent :key="item.id" :item="item" />
|
||||
</template>
|
||||
</template>
|
||||
</VirtualScroll>
|
||||
@ -23,13 +23,15 @@ import { mapState } from 'vuex'
|
||||
import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
|
||||
|
||||
import VirtualScroll from './VirtualScroll.vue'
|
||||
import FeedItem from './FeedItem.vue'
|
||||
import FeedItemComponent from './FeedItem.vue'
|
||||
|
||||
import { FeedItem } from '../types/FeedItem'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
NcCounterBubble,
|
||||
VirtualScroll,
|
||||
FeedItem,
|
||||
FeedItemComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -38,6 +40,9 @@ export default Vue.extend({
|
||||
},
|
||||
computed: {
|
||||
...mapState(['items']),
|
||||
starred(): FeedItem[] {
|
||||
return this.$store.getters.starred
|
||||
},
|
||||
reachedEnd(): boolean {
|
||||
return this.mounted && this.$store.state.items.starredLoaded
|
||||
},
|
||||
@ -47,7 +52,7 @@ export default Vue.extend({
|
||||
},
|
||||
methods: {
|
||||
async fetchMore() {
|
||||
// TODO
|
||||
// TODO: fetch more starred
|
||||
},
|
||||
},
|
||||
})
|
||||
|
@ -4,8 +4,6 @@
|
||||
- This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
|
||||
-->
|
||||
<script>
|
||||
import { h } from 'vue'
|
||||
|
||||
import ItemSkeleton from './ItemSkeleton.vue'
|
||||
|
||||
const GRID_ITEM_HEIGHT = 200 + 10
|
||||
|
@ -7,6 +7,10 @@ import { FeedItem } from '../types/FeedItem'
|
||||
|
||||
export const FEED_ITEM_ACTION_TYPES = {
|
||||
FETCH_STARRED: 'FETCH_STARRED',
|
||||
MARK_READ: 'MARK_READ',
|
||||
MARK_UNREAD: 'MARK_UNREAD',
|
||||
STAR_ITEM: 'STAR_ITEM',
|
||||
UNSTAR_ITEM: 'UNSTAR_ITEM',
|
||||
}
|
||||
|
||||
export type ItemState = {
|
||||
@ -16,7 +20,6 @@ export type ItemState = {
|
||||
starredCount: number;
|
||||
|
||||
allItems: FeedItem[];
|
||||
starredItems: FeedItem[];
|
||||
}
|
||||
|
||||
const state: ItemState = {
|
||||
@ -26,12 +29,11 @@ const state: ItemState = {
|
||||
starredCount: 0,
|
||||
|
||||
allItems: [],
|
||||
starredItems: [],
|
||||
}
|
||||
|
||||
const getters = {
|
||||
starred(state: ItemState) {
|
||||
return state.starredItems
|
||||
return state.allItems.filter((item) => item.starred)
|
||||
},
|
||||
}
|
||||
|
||||
@ -49,7 +51,7 @@ export const actions = {
|
||||
},
|
||||
})
|
||||
|
||||
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED, response.data.items)
|
||||
commit(FEED_ITEM_MUTATION_TYPES.SET_ITEMS, response.data.items)
|
||||
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, response.data.starred)
|
||||
|
||||
if (response.data.items.length < 40) {
|
||||
@ -57,18 +59,51 @@ export const actions = {
|
||||
}
|
||||
state.fetchingItems = false
|
||||
},
|
||||
[FEED_ITEM_ACTION_TYPES.MARK_READ]({ commit }: ActionParams, { item }: { item: FeedItem}) {
|
||||
axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
|
||||
isRead: true,
|
||||
})
|
||||
item.unread = false
|
||||
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
|
||||
},
|
||||
[FEED_ITEM_ACTION_TYPES.MARK_UNREAD]({ commit }: ActionParams, { item }: { item: FeedItem}) {
|
||||
axios.post(API_ROUTES.ITEMS + `/${item.id}/read`, {
|
||||
isRead: false,
|
||||
})
|
||||
item.unread = true
|
||||
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
|
||||
},
|
||||
[FEED_ITEM_ACTION_TYPES.STAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
|
||||
axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
|
||||
isStarred: true,
|
||||
})
|
||||
item.starred = true
|
||||
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
|
||||
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount + 1)
|
||||
},
|
||||
[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM]({ commit }: ActionParams, { item }: { item: FeedItem}) {
|
||||
axios.post(API_ROUTES.ITEMS + `/${item.feedId}/${item.guidHash}/star`, {
|
||||
isStarred: false,
|
||||
})
|
||||
item.starred = false
|
||||
commit(FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM, { item })
|
||||
commit(FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT, state.starredCount - 1)
|
||||
},
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
[FEED_ITEM_MUTATION_TYPES.SET_STARRED](state: ItemState, items: FeedItem[]) {
|
||||
[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
|
||||
items.forEach(it => {
|
||||
state.starredItems.push(it)
|
||||
state.allItems.push(it)
|
||||
})
|
||||
},
|
||||
[FEED_ITEM_MUTATION_TYPES.SET_STARRED_COUNT](state: ItemState, count: number) {
|
||||
state.starredCount = count
|
||||
},
|
||||
|
||||
[FEED_ITEM_MUTATION_TYPES.UPDATE_ITEM](state: ItemState, { item }: { item: FeedItem }) {
|
||||
const idx = state.allItems.findIndex((it) => it.id === item.id)
|
||||
state.allItems.splice(idx, 1, item)
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
@ -3,4 +3,6 @@ export type FeedItem = {
|
||||
title: string;
|
||||
unread: boolean;
|
||||
starred: boolean;
|
||||
feedId: number;
|
||||
guidHash: string;
|
||||
};
|
||||
|
@ -9,6 +9,7 @@ export const FOLDER_MUTATION_TYPES = {
|
||||
}
|
||||
|
||||
export const FEED_ITEM_MUTATION_TYPES = {
|
||||
SET_STARRED: 'SET_STARRED',
|
||||
SET_ITEMS: 'SET_ITEMS',
|
||||
SET_STARRED_COUNT: 'SET_STARRED_COUNT',
|
||||
UPDATE_ITEM: 'UPDATE_ITEM',
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user