diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/Explore.vue | 58 | ||||
| -rw-r--r-- | src/components/Sidebar.vue | 38 | ||||
| -rw-r--r-- | src/main.js | 21 | ||||
| -rw-r--r-- | src/shims-tsx.d.ts | 18 | ||||
| -rw-r--r-- | src/shims-vue.d.ts | 11 |
6 files changed, 85 insertions, 62 deletions
diff --git a/src/App.vue b/src/App.vue index 2dbcd70fe..a5b4034ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,6 +21,5 @@ export default { created() { this.$store.dispatch('loadFolder') }, - } </script> diff --git a/src/components/Explore.vue b/src/components/Explore.vue index e37f66aa7..11c370ce8 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -2,15 +2,15 @@ <div id="explore"> <AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" /> <div class="grid-container"> - <div v-for="entry in explorableSites" + <div v-for="entry in exploreSites" :key="entry.title" class="explore-feed grid-item"> <h2 v-if="entry.favicon" class="explore-title" :style="{ backgroundImage: 'url(' + entry.favicon + ')' }"> - <a target="_blank" rel="noreferrer" :href="entry.url">{{ - entry.title - }}</a> + <a target="_blank" rel="noreferrer" :href="entry.url"> + {{ entry.title }} + </a> </h2> <h2 v-if="!entry.favicon" class="icon-rss explore-title"> {{ entry.title }} @@ -30,58 +30,56 @@ </div> </template> -<script> -/* eslint-disable vue/require-prop-type-constructor */ - -// import Modal from '@nextcloud/vue/dist/Components/Modal' +<script lang="ts"> +import Vue from 'vue' import Button from '@nextcloud/vue/dist/Components/Button' import axios from '@nextcloud/axios' -import AddFeed from './AddFeed' +import AddFeed from './AddFeed.vue' import { generateUrl } from '@nextcloud/router' -export default { +const ExploreComponent = Vue.extend({ components: { - // Modal, Button, AddFeed, }, - props: { - feed: '', - }, - data() { + data: () => { + const exploreSites: any[] = [] + const feed: any = {} + const showAddFeed = false + return { - explorableSites: [], - showAddFeed: false, + exploreSites, + feed, + showAddFeed, } }, created() { this.sites() }, + methods: { async sites() { - const settings = await axios.get( - generateUrl('/apps/news/settings') - ) - // console.log(settings.data) - // console.log(settings.data.settings.exploreUrl) + const settings = await axios.get(generateUrl('/apps/news/settings')) - const exploreUrl - = settings.data.settings.exploreUrl + 'feeds.en.json' + const exploreUrl = settings.data.settings.exploreUrl + 'feeds.en.json' const explore = await axios.get(exploreUrl) Object.keys(explore.data).forEach((key) => - explore.data[key].forEach((value) => - this.explorableSites.push(value) - ) + explore.data[key].forEach((value: any) => + this.exploreSites.push(value), + ), ) }, - async subscribe(feed) { - // this.feed = feed + async subscribe(feed: any) { + this.feed = feed this.showAddFeed = true }, closeShowAddFeed() { this.showAddFeed = false }, }, -} +}) + +export default ExploreComponent + </script> diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index e73719fff..c0a141230 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -11,8 +11,7 @@ icon="icon-add-folder" @new-item="newFolder" /> - <AppNavigationItem :title="t('news', 'Unread articles')" - icon="icon-rss"> + <AppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss"> <template #actions> <ActionButton icon="icon-checkmark" @click="alert('Edit')"> t('news','Mark read') @@ -22,16 +21,14 @@ <CounterBubble>5</CounterBubble> </template> </AppNavigationItem> - <AppNavigationItem :title="t('news', 'All articles')" - icon="icon-rss"> + <AppNavigationItem :title="t('news', 'All articles')" icon="icon-rss"> <template #actions> <ActionButton icon="icon-checkmark" @click="alert('Edit')"> t('news','Mark read') </ActionButton> </template> </AppNavigationItem> - <AppNavigationItem :title="t('news', 'Starred')" - icon="icon-starred"> + <AppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> <template #counter> <CounterBubble>35</CounterBubble> </template> @@ -53,12 +50,10 @@ <div v-if="!feed.faviconLink" class="icon-rss" /> </template> <template #actions> - <ActionButton icon="icon-checkmark" - @click="alert('Mark read')"> + <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> {{ t("news", "Mark read") }} </ActionButton> - <ActionButton icon="icon-pinned" - @click="alert('Rename')"> + <ActionButton icon="icon-pinned" @click="alert('Rename')"> {{ t("news", "Unpin from top") }} </ActionButton> <ActionButton icon="icon-caret-dark" @@ -89,16 +84,14 @@ @click="deleteFolder(folder)"> {{ t("news", "Ignore updated") }} </ActionButton> - <ActionButton icon="icon-icon-rss" - @click="deleteFolder(folder)"> + <ActionButton icon="icon-icon-rss" @click="deleteFolder(folder)"> {{ t("news", "Open feed URL") }} </ActionButton> <ActionButton icon="icon-icon-rename" @click="deleteFolder(folder)"> {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" - @click="deleteFolder(folder)"> + <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> {{ t("news", "Delete") }} </ActionButton> </template> @@ -108,15 +101,13 @@ <CounterBubble>{{ folder.feedCount }}</CounterBubble> </template> <template #actions> - <ActionButton icon="icon-checkmark" - @click="alert('Mark read')"> + <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> {{ t("news", "Mark read") }} </ActionButton> <ActionButton icon="icon-rename" @click="alert('Rename')"> {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" - @click="deleteFolder(folder)"> + <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> {{ t("news", "Delete") }} </ActionButton> </template> @@ -142,7 +133,7 @@ import AppNavigationNewItem from '@nextcloud/vue/dist/Components/AppNavigationNe // import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' -import AddFeed from './AddFeed' +import AddFeed from './AddFeed.vue' export default { components: { @@ -155,7 +146,7 @@ export default { ActionButton, AddFeed, }, - data() { + data: () => { return { showAddFeed: false, } @@ -165,7 +156,9 @@ export default { return this.$store.state.folders }, }, - created() {}, + created() { + // TODO? + }, methods: { newFolder(value) { const folderName = value.trim() @@ -182,6 +175,9 @@ export default { closeShowAddFeed() { this.showAddFeed = false }, + alert(msg) { + window.alert(msg) + }, }, } </script> diff --git a/src/main.js b/src/main.js index 54fecf3d9..befe02f56 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,10 @@ import Vue from 'vue' -import App from './App' +import App from './App.vue' import VueRouter from 'vue-router' -import Explore from './components/Explore' +import Explore from './components/Explore.vue' import { generateUrl } from '@nextcloud/router' -import Vuex from 'vuex' +import Vuex, { Store } from 'vuex' import axios from '@nextcloud/axios' import { Tooltip } from '@nextcloud/vue' @@ -36,7 +36,7 @@ const router = new VueRouter({ routes, }) -const store = new Vuex.Store({ +const store = new Store({ state: { folders: [], feeds: [], @@ -52,10 +52,12 @@ const store = new Vuex.Store({ feeds.forEach((it) => { state.feeds.push(it) const folder = state.folders.find( - (folder) => folder.id === it.folderId + (folder) => folder.id === it.folderId, ) - folder.feeds.push(it) - folder.feedCount += it.unreadCount + if (folder) { + folder.feeds.push(it) + folder.feedCount += it.unreadCount + } }) }, }, @@ -64,7 +66,7 @@ const store = new Vuex.Store({ axios .post(folderUrl, { folderName: folder.name }) .then((response) => - commit('addFolders', response.data.folders) + commit('addFolders', response.data.folders), ) }, deleteFolder({ commit }, { folder }) { @@ -72,7 +74,6 @@ const store = new Vuex.Store({ this.getByFolderId(folderId).forEach(function (feed) { promises.push(self.reversiblyDelete(feed.id, false, true)); }); - this.updateUnreadCache(); */ axios.delete(folderUrl + '/' + folder.id).then() @@ -83,7 +84,7 @@ const store = new Vuex.Store({ axios .get(feedUrl) .then((response) => - commit('addFeeds', response.data.feeds) + commit('addFeeds', response.data.feeds), ) }) }, diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts new file mode 100644 index 000000000..717575332 --- /dev/null +++ b/src/shims-tsx.d.ts @@ -0,0 +1,18 @@ +/** + * Initially copied from typescript+vue2 project generated by @vue/cli-plugin v5.0.0 + */ +import Vue, { VNode } from "vue"; + +declare global { + namespace JSX { + interface Element extends VNode { } + interface ElementClass extends Vue { } + interface IntrinsicElements { + [elem: string]: any; + } + } + t; + n; + OC; + OCA; +};
\ No newline at end of file diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts new file mode 100644 index 000000000..037b2a2d1 --- /dev/null +++ b/src/shims-vue.d.ts @@ -0,0 +1,11 @@ +/** + * Initially copied from typescript+vue2 project generated by @vue/cli-plugin v5.0.0 + */ +declare module '*.vue' { + import Vue from 'vue'; + export default Vue; +}; + +declare module '@nextcloud/vue/dist/Components/Button' { + +};
\ No newline at end of file |