diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AddFeed.vue | 148 | ||||
| -rw-r--r-- | src/components/Explore.vue | 81 | ||||
| -rw-r--r-- | src/components/Sidebar.vue | 155 |
3 files changed, 219 insertions, 165 deletions
diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue index 2adacd8ad..a07125d3a 100644 --- a/src/components/AddFeed.vue +++ b/src/components/AddFeed.vue @@ -1,41 +1,45 @@ <template> <Modal @close="$emit('close')"> <div id="new-feed" news-add-feed="Navigation.feed"> - <form ng-submit="Navigation.createFeed(Navigation.feed)" - ng-init="Navigation.feed.autoDiscover=true" - name="feedform"> + ng-init="Navigation.feed.autoDiscover=true" + name="feedform"> <fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px"> <input type="text" - :value="feed" - ng-model="Navigation.feed.url" - ng-class="{'ng-invalid': + :value="feed" + ng-model="Navigation.feed.url" + ng-class="{'ng-invalid': !Navigation.addingFeed && Navigation.feedUrlExists(Navigation.feed.url) }" - :placeholder="t('news','Web address')" - name="address" - pattern="[^\s]+" - required - autofocus> + :placeholder="t('news', 'Web address')" + name="address" + pattern="[^\s]+" + required + autofocus /> <p class="error" - ng-show="!Navigation.addingFeed && + ng-show="!Navigation.addingFeed && Navigation.feedUrlExists(Navigation.feed.url)"> - {{ t('news', 'Feed exists already!') }} + {{ t("news", "Feed exists already!") }} </p> <!-- select a folder --> <CheckboxRadioSwitch :checked.sync="createNewFolder" type="switch"> - {{ t('news', 'New folder') }}? + {{ t("news", "New folder") }}? </CheckboxRadioSwitch> - <Multiselect v-if="!createNewFolder" v-model="folder" :options="folders" track-by="id" label="name"/> + <Multiselect v-if="!createNewFolder" + v-model="folder" + :options="folders" + track-by="id" + label="name" /> <!-- add a folder --> - <input type="text" - ng-model="Navigation.feed.newFolder" - ng-class="{'ng-invalid': + <input v-if="createNewFolder" + type="text" + ng-model="Navigation.feed.newFolder" + ng-class="{'ng-invalid': !Navigation.addingFeed && !Navigation.addingFeed && Navigation.showNewFolder && @@ -43,52 +47,59 @@ Navigation.feed.newFolder ) }" - :placeholder="t('news','Folder name')" - name="folderName" - v-if="createNewFolder" - style="width: 90%" - required> - + :placeholder="t('news', 'Folder name')" + name="folderName" + style="width: 90%" + required /> - <p class="error" ng-show="!Navigation.addingFeed && + <p class="error" + ng-show="!Navigation.addingFeed && Navigation.folderNameExists(Navigation.feed.newFolder)"> - {{ t('news', 'Folder exists already!') }} + {{ t("news", "Folder exists already!") }} </p> <!-- basic auth --> <CheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch"> - {{ t('news', 'Credentials') }}? + {{ t("news", "Credentials") }}? </CheckboxRadioSwitch> <div v-if="withBasicAuth" class="add-feed-basicauth"> - <p class="warning">{{ - t('news', - 'HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!') - }}></p> + <p class="warning"> + {{ + t( + "news", + "HTTP Basic Auth credentials must be stored unencrypted! Everyone with access to the server or database will be able to access them!" + ) + }}> + </p> <input type="text" - ng-model="Navigation.feed.user" - :placeholder="t('news','Username')" - name="user" - autofocus> + ng-model="Navigation.feed.user" + :placeholder="t('news', 'Username')" + name="user" + autofocus /> <input type="password" - ng-model="Navigation.feed.password" - :placeholder="t('news','Password')" - name="password" autocomplete="new-password"> + ng-model="Navigation.feed.password" + :placeholder="t('news', 'Password')" + name="password" + autocomplete="new-password" /> </div> <CheckboxRadioSwitch :checked.sync="autoDiscover" type="switch"> - {{ t('news', 'Auto discover Feed') }}? + {{ t("news", "Auto discover Feed") }}? </CheckboxRadioSwitch> - <Button :wide="true" type="primary" @click="addFeed()" ng-disabled=" + <Button :wide="true" + type="primary" + ng-disabled=" Navigation.feedUrlExists(Navigation.feed.url) || ( Navigation.showNewFolder && Navigation.folderNameExists(folder.name) - )"> - {{t('news','Subscribe')}} + )" + @click="addFeed()"> + {{ t("news", "Subscribe") }} </Button> </fieldset> </form> @@ -97,6 +108,8 @@ </template> <script> +/* eslint-disable vue/require-prop-type-constructor */ + import Modal from '@nextcloud/vue/dist/Components/Modal' import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch' import Button from '@nextcloud/vue/dist/Components/Button' @@ -107,42 +120,51 @@ export default { Modal, CheckboxRadioSwitch, Button, - Multiselect + Multiselect, + }, + props: { + feed: '', + }, + emits: ['close'], + data() { + return { + folder: {}, + autoDiscover: true, + createNewFolder: false, + withBasicAuth: false, + } }, computed: { folders() { return this.$store.state.folders - } + }, }, methods: { newFolder() { - this.createNewFolder = true; + this.createNewFolder = true }, abortNewFolder() { - this.createNewFolder = false; + this.createNewFolder = false }, addFeed() { - this.$store.dispatch('addFeed', {feedReq: { url: this.feed, folder: this.folder, autoDiscover: true}}) - } - }, - props: { - feed: '', - folder: {}, - autoDiscover: true, - withBasicAuth: false, - createNewFolder: false + this.$store.dispatch('addFeed', { + feedReq: { + url: this.feed, + folder: this.folder, + autoDiscover: true, + }, + }) + }, }, - emits: ['close'] } </script> <style scoped> +input { + width: 100% +} - input { - width: 100%; - } - .multiselect { - width: 100%; - } - +.multiselect { + width: 100% +} </style> diff --git a/src/components/Explore.vue b/src/components/Explore.vue index 5738649cf..e37f66aa7 100644 --- a/src/components/Explore.vue +++ b/src/components/Explore.vue @@ -1,13 +1,18 @@ <template> <div id="explore"> - <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" :feed="feed"></AddFeed> + <AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" /> <div class="grid-container"> - <div v-for="entry in explorableSites" class="explore-feed grid-item"> - <h2 class="explore-title" v-if="entry.favicon" - :style="{ backgroundImage: 'url(' + entry.favicon + ')'}"> - <a target="_blank" rel="noreferrer" :href="entry.url">{{ entry.title }}</a> + <div v-for="entry in explorableSites" + :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> </h2> - <h2 class="icon-rss explore-title" v-if="!entry.favicon"> + <h2 v-if="!entry.favicon" class="icon-rss explore-title"> {{ entry.title }} </h2> <div class="explore-content"> @@ -18,7 +23,7 @@ </div> </div> <Button @click="subscribe(entry.feed)"> - {{ t('news', 'Subscribe to') }} {{ entry.title }} + {{ t("news", "Subscribe to") }} {{ entry.title }} </Button> </div> </div> @@ -26,53 +31,57 @@ </template> <script> -import Modal from '@nextcloud/vue/dist/Components/Modal' +/* eslint-disable vue/require-prop-type-constructor */ + +// import Modal from '@nextcloud/vue/dist/Components/Modal' import Button from '@nextcloud/vue/dist/Components/Button' -import axios from "@nextcloud/axios"; -import AddFeed from "./AddFeed"; -import {generateUrl} from "@nextcloud/router"; +import axios from '@nextcloud/axios' +import AddFeed from './AddFeed' +import { generateUrl } from '@nextcloud/router' export default { components: { - Modal, + // Modal, Button, - AddFeed + AddFeed, }, props: { - explorableSites: { - type: Array, - default: () => [], - required: true, - }, - showAddFeed: false, - feed: '' + feed: '', + }, + data() { + return { + explorableSites: [], + showAddFeed: false, + } + }, + 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') + ) + // console.log(settings.data) + // console.log(settings.data.settings.exploreUrl) - const exploreUrl = settings.data.settings.exploreUrl + 'feeds.en.json'; - const explore = await axios.get(exploreUrl); - console.log(explore.data); + 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 => + Object.keys(explore.data).forEach((key) => + explore.data[key].forEach((value) => this.explorableSites.push(value) ) - ); + ) }, async subscribe(feed) { - this.feed = feed; - this.showAddFeed = true; + // this.feed = feed + this.showAddFeed = true }, closeShowAddFeed() { - this.showAddFeed = false; - } + this.showAddFeed = false + }, }, - created() { - this.sites(); - } } </script> diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 33923f89b..e73719fff 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -1,20 +1,18 @@ <template> <AppNavigation> - <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()"></AddFeed> - <AppNavigationNew - :text="t('news','Subscribe')" + <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" /> + <AppNavigationNew :text="t('news', 'Subscribe')" button-id="new-feed-button" button-class="icon-add" - @click="showShowAddFeed()"/> + @click="showShowAddFeed()" /> <ul id="locations" class="with-icon"> + <AppNavigationNewItem :title="t('news', 'New folder')" + icon="icon-add-folder" + @new-item="newFolder" /> - <AppNavigationNewItem :title="t('news','New folder')" - icon="icon-add-folder" - @new-item="newFolder"> - </AppNavigationNewItem> - - <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') @@ -24,86 +22,109 @@ <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> </AppNavigationItem> - <AppNavigationItem v-for="folder in folders" :title="folder.name" icon="icon-folder" - :allowCollapse="true"> + <AppNavigationItem v-for="folder in folders" + :key="folder.name" + :title="folder.name" + icon="icon-folder" + :allow-collapse="true"> <template #default> - <AppNavigationItem v-for="feed in folder.feeds" :title="feed.title" > + <AppNavigationItem v-for="feed in folder.feeds" + :key="feed.name" + :title="feed.title"> <template #icon> - <img :src="feed.faviconLink" v-if="feed.faviconLink" alt="feedIcon"> - <div class="icon-rss" v-if="!feed.faviconLink"></div> + <img v-if="feed.faviconLink" + :src="feed.faviconLink" + alt="feedIcon"> + <div v-if="!feed.faviconLink" class="icon-rss" /> </template> <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> - {{ t('news', 'Mark read') }} + <ActionButton icon="icon-checkmark" + @click="alert('Mark read')"> + {{ t("news", "Mark read") }} </ActionButton> - <ActionButton icon="icon-pinned" @click="alert('Rename')"> - {{ t('news', 'Unpin from top') }} + <ActionButton icon="icon-pinned" + @click="alert('Rename')"> + {{ t("news", "Unpin from top") }} </ActionButton> - <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> - {{ t('news', 'Newest first') }} + <ActionButton icon="icon-caret-dark" + @click="deleteFolder(folder)"> + {{ t("news", "Newest first") }} </ActionButton> - <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> - {{ t('news', 'Oldest first') }} + <ActionButton icon="icon-caret-dark" + @click="deleteFolder(folder)"> + {{ t("news", "Oldest first") }} </ActionButton> - <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> - {{ t('news', 'Default order') }} + <ActionButton icon="icon-caret-dark" + @click="deleteFolder(folder)"> + {{ t("news", "Default order") }} </ActionButton> - <ActionButton icon="icon-full-text-disabled" @click="deleteFolder(folder)"> - {{ t('news', 'Enable full text') }} + <ActionButton icon="icon-full-text-disabled" + @click="deleteFolder(folder)"> + {{ t("news", "Enable full text") }} </ActionButton> - <ActionButton icon="icon-full-text-enabled" @click="deleteFolder(folder)"> - {{ t('news', 'Disable full text') }} + <ActionButton icon="icon-full-text-enabled" + @click="deleteFolder(folder)"> + {{ t("news", "Disable full text") }} </ActionButton> - <ActionButton icon="icon-updatemode-default" @click="deleteFolder(folder)"> - {{ t('news', 'Unread updated') }} + <ActionButton icon="icon-updatemode-default" + @click="deleteFolder(folder)"> + {{ t("news", "Unread updated") }} </ActionButton> - <ActionButton icon="icon-updatemode-unread" @click="deleteFolder(folder)"> - {{ t('news', 'Ignore updated') }} + <ActionButton icon="icon-updatemode-unread" + @click="deleteFolder(folder)"> + {{ t("news", "Ignore updated") }} </ActionButton> - <ActionButton icon="icon-icon-rss" @click="deleteFolder(folder)"> - {{ t('news', 'Open feed URL') }} + <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 icon="icon-icon-rename" + @click="deleteFolder(folder)"> + {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> - {{ t('news', 'Delete') }} + <ActionButton icon="icon-delete" + @click="deleteFolder(folder)"> + {{ t("news", "Delete") }} </ActionButton> </template> </AppNavigationItem> </template> - <template #counter v-if="folder.feedCount > 0"> + <template v-if="folder.feedCount > 0" #counter> <CounterBubble>{{ folder.feedCount }}</CounterBubble> </template> <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> - {{ t('news', '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') }} + {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> - {{ t('news', 'Delete') }} + <ActionButton icon="icon-delete" + @click="deleteFolder(folder)"> + {{ t("news", "Delete") }} </ActionButton> </template> </AppNavigationItem> - <AppNavigationItem :title="t('news','Explore')" - icon="icon-link" - :to="{ name: 'explore' }"> + <AppNavigationItem :title="t('news', 'Explore')" + icon="icon-link" + :to="{ name: 'explore' }"> <template #counter> <CounterBubble>35</CounterBubble> </template> @@ -113,14 +134,15 @@ </template> <script> + import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew' import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' import AppNavigationNewItem from '@nextcloud/vue/dist/Components/AppNavigationNewItem' -import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' +// 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' export default { components: { @@ -128,37 +150,38 @@ export default { AppNavigationNew, AppNavigationItem, AppNavigationNewItem, - AppNavigationCounter, + // AppNavigationCounter, CounterBubble, ActionButton, - AddFeed + AddFeed, }, - props: { - showAddFeed: false, + data() { + return { + showAddFeed: false, + } }, computed: { folders() { return this.$store.state.folders }, }, + created() {}, methods: { newFolder(value) { - const folderName = value.trim(); - const folder = {name: folderName}; - this.$store.dispatch('addFolder', {folder}) + const folderName = value.trim() + const folder = { name: folderName } + this.$store.dispatch('addFolder', { folder }) }, deleteFolder(folder) { - this.$store.dispatch('deleteFolder', {folder}) - window.location.reload(true); + this.$store.dispatch('deleteFolder', { folder }) + window.location.reload(true) }, showShowAddFeed() { - this.showAddFeed = true; + this.showAddFeed = true }, closeShowAddFeed() { - this.showAddFeed = false; - } + this.showAddFeed = false + }, }, - created() { - } } </script> |