add feed pretty much works

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

4 files changed, 162 insertions, 111 deletions

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index af5d75937..5bf0c7389 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -6,83 +6,85 @@
 				name="feedform">
 				<fieldset ng-disabled="Navigation.addingFeed" style="padding: 16px">
 					<input type="text"
-						:value="feed"
-						ng-model="Navigation.feed.url"
-						ng-class="{'ng-invalid':
-												!Navigation.addingFeed &&
-												Navigation.feedUrlExists(Navigation.feed.url)
-											}"
+						v-model="feedUrl"
 						:placeholder="t('news', 'Web address')"
 						name="address"
 						pattern="[^\s]+"
 						required
-						autofocus>
+						autofocus
+                        style="width: 90%;">
 
-					<p class="error"
-						ng-show="!Navigation.addingFeed &&
-											Navigation.feedUrlExists(Navigation.feed.url)">
+					<p class="error" v-if="feedUrlExists()">
 						{{ t("news", "Feed exists already!") }}
 					</p>
+                    
 
 					<!-- select a folder -->
-					<NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
-						{{ t("news", "New folder") }}?
-					</NcCheckboxRadioSwitch>
-
-					<NcMultiselect v-if="!createNewFolder && folders"
-						v-model="folder"
-						:options="folders"
-						track-by="id"
-						label="name" />
-
-					<!-- add a folder -->
-					<input v-if="createNewFolder"
-						type="text"
-						ng-model="Navigation.feed.newFolder"
-						ng-class="{'ng-invalid':
-														!Navigation.addingFeed &&
-														!Navigation.addingFeed &&
-														Navigation.showNewFolder &&
-														Navigation.folderNameExists(Navigation.feed.newFolder)
-											}"
-						:placeholder="t('news', 'Folder name')"
-						name="folderName"
-						style="width: 90%"
-						required>
-
-					<p class="error"
-						ng-show="!Navigation.addingFeed &&
-											Navigation.folderNameExists(Navigation.feed.newFolder)">
-						{{ t("news", "Folder exists already!") }}
-					</p>
+                    <div style="display:flex;">
+                        <NcSelect v-if="!createNewFolder && folders"
+                            v-model="folder"
+                            :options="folders.folders"
+                            :placeholder="'-- ' + t('news', 'No folder') + ' --'"
+                            track-by="id"
+                            label="name"
+                            style="flex-grow: 1;" />
+
+                        <!-- add a folder -->
+                        <input v-if="createNewFolder"
+                            type="text"
+                            v-model="newFolderName"
+                            ng-class="{'ng-invalid':
+                                                            !Navigation.addingFeed &&
+                                                            !Navigation.addingFeed &&
+                                                            Navigation.showNewFolder &&
+                                                            Navigation.folderNameExists(Navigation.feed.newFolder)
+                                                }"
+                            :placeholder="t('news', 'Folder name')"
+                            name="folderName"
+                            style="flex-grow: 1; padding: 22px 12px; margin: 0px;"
+                            required>
+
+                        <NcCheckboxRadioSwitch :checked.sync="createNewFolder" type="switch">
+                            {{ t("news", "New folder") }}?
+                        </NcCheckboxRadioSwitch>
+                    </div>
+
+                    <p class="error"
+                        v-if="folderNameExists()">
+                        {{ t("news", "Folder exists already!") }}
+                    </p>
 
 					<!-- basic auth -->
-
-					<NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch">
-						{{ t("news", "Credentials") }}?
-					</NcCheckboxRadioSwitch>
-
-					<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>
-						<input type="text"
-							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">
-					</div>
+                    <p v-if="withBasicAuth" 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>
+
+                    <div style="display: flex">
+                        <NcCheckboxRadioSwitch :checked.sync="withBasicAuth" type="switch" style="flex-grow: 1;">
+                            {{ t("news", "Credentials") }}?
+                        </NcCheckboxRadioSwitch>
+
+                        <div v-if="withBasicAuth" class="add-feed-basicauth" style="flex-grow: 1;  display: flex;">
+                            <input type="text"
+                                ng-model="Navigation.feed.user"
+                                :placeholder="t('news', 'Username')"
+                                name="user"
+                                autofocus
+                                style="flex-grow: 1">
+
+                            <input type="password"
+                                ng-model="Navigation.feed.password"
+                                :placeholder="t('news', 'Password')"
+                                name="password"
+                                autocomplete="new-password"
+                                style="flex-grow: 1">
+                        </div>
+                    </div>
 
 					<NcCheckboxRadioSwitch :checked.sync="autoDiscover" type="switch">
 						{{ t("news", "Auto discover Feed") }}?
@@ -90,11 +92,7 @@
 
 					<NcButton :wide="true"
 						type="primary"
-						ng-disabled="Navigation.feedUrlExists(Navigation.feed.url) ||
-													(
-														Navigation.showNewFolder &&
-														Navigation.folderNameExists(folder.name)
-													)"
+						:disabled="disableAddFeed"
 						@click="addFeed()">
 						{{ t("news", "Subscribe") }}
 					</NcButton>
@@ -112,19 +110,25 @@ 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 NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 import { ACTIONS } from '../store'
+import { mapState } from 'vuex'
+import axios from 'axios'
 
 type AddFeedState = {
-	folder: Folder;
+	folder?: Folder;
+    newFolderName: String;
+
 	autoDiscover: boolean;
 	createNewFolder: boolean;
 	withBasicAuth: boolean;
+    // feedUrlExists: boolean;
 
 	// from props
-	feed?: Feed;
+	feedUrl?: String;
 };
 
 export default Vue.extend({
@@ -133,53 +137,75 @@ export default Vue.extend({
 		NcCheckboxRadioSwitch,
 		NcButton,
 		NcMultiselect,
+        NcSelect
 	},
-	props: {
-		feed: {
-			type: String,
-			default: '',
-		},
-	},
+	// props: {
+	// 	feed: {
+	// 		type: String,
+	// 		default: '',
+	// 	},
+	// },
 	data: (): AddFeedState => {
 		return {
-			folder: { name: '' } as Folder,
+			folder: undefined,
+            newFolderName: '',
+
 			autoDiscover: true,
 			createNewFolder: false,
 			withBasicAuth: false,
+
+            feedUrl: ''
 		}
 	},
 	computed: {
+        // ...mapState(['folders']),
 		folders(): Folder[] {
 			return this.$store.state.folders
 		},
+        disableAddFeed(): boolean {
+            return this.feed === "" || this.feedUrlExists() || (this.createNewFolder && this.newFolderName === "" || this.folderNameExists())
+        }
 	},
 	methods: {
-		newFolder() {
-			this.createNewFolder = true
-		},
-		abortNewFolder() {
-			this.createNewFolder = false
-		},
-		addFeed() {
+        created() {
+
+        },
+
+		async addFeed() {
+            let url = this.feedUrl;
+
 			this.$store.dispatch(ACTIONS.ADD_FEED, {
 				feedReq: {
-					url: this.feed,
-					folder: this.folder,
-					autoDiscover: true,
+					url: this.feedUrl,
+					folder: this.createNewFolder ? { name: this.newFolderName } : this.folder,
+					autoDiscover: this.autoDiscover,
 				},
-			})
+			});
+            this.$emit('close');
 		},
+
+        feedUrlExists(): boolean {
+            // TODO: check feed url
+            console.log(this.feedUrl);
+
+            return false;
+        },
+        folderNameExists(): boolean {
+            // TODO: check folder name
+            console.log(this.newFolderName)
+            return false;
+        }
 	},
 })
 
 </script>
 
 <style scoped>
-input {
+/* input {
     width: 100%
 }
 
 .multiselect {
-    width: 100%
-}
+    width: 100% 
+}*/
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 7e88d97ff..00ee93311 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -33,10 +33,11 @@
 				</template>
 			</NcAppNavigationItem>
 
+            
 			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
-				:key="topLevelItem.name"
-				:title="topLevelItem.name"
-				icon="icon-folder"
+				:key="topLevelItem.name || topLevelItem.title"
+				:title="topLevelItem.name || topLevelItem.title"
+				:icon="topLevelItem.name !== undefined ? 'icon-folder': ''"
 				:allow-collapse="true">
 				<template #default>
 					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
diff --git a/src/store/feed.ts b/src/store/feed.ts
index fde3c1d28..646c4a22d 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -10,6 +10,7 @@ export const FEED_ACTION_TYPES = {
 }
 
 export const FEED_MUTATION_TYPES = {
+	ADD_FEED: 'ADD_FEED',
 	SET_FEEDS: 'SET_FEEDS',
 }
 
@@ -53,16 +54,23 @@ export const actions = {
 			autoDiscover: undefined, // TODO: autodiscover?
 		}
 
-		await axios.post(feedUrl, {
-			url: feed.url,
-			parentFolderId: feed.folderId,
-			title: null,
-			user: null,
-			password: null,
-			fullDiscover: feed.autoDiscover,
-		})
+		// Check that url is resolvable
+		try {
+			const response = await axios.post(feedUrl, {
+				url: feed.url,
+				parentFolderId: feed.folderId,
+				title: null,
+				user: null,
+				password: null,
+				fullDiscover: feed.autoDiscover,
+			})
 
-		commit('addFeed', feed)
+			commit(FEED_MUTATION_TYPES.ADD_FEED, response.data.feeds[0])
+		} catch(e) {
+				// TODO: show error to user if failure
+				console.log(e);
+				return;
+		}
 	},
 }
 
@@ -70,13 +78,11 @@ export const 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
-			}
 		})
 	},
+	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
+		state.feeds.push(feed);
+	}
 }
 
 export default {
diff --git a/src/store/folder.ts b/src/store/folder.ts
index 8787101af..140d8b602 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -1,8 +1,10 @@
+import { Feed } from '@/types/Feed'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 import { AppState, ActionParams } from '../store'
 import { Folder } from '../types/Folder'
+import { FEED_MUTATION_TYPES } from './feed'
 
 export const FOLDER_ACTION_TYPES = {
 	FETCH_FOLDERS: 'FETCH_FOLDERS',
@@ -63,6 +65,22 @@ export const mutations = {
 		const index = state.folders.indexOf(folder)
 		state.folders.splice(index, 1)
 	},
+	[FEED_MUTATION_TYPES.SET_FEEDS](state: AppState, feeds: Feed[]) {
+		feeds.forEach(it => {
+			const folder = state.folders.find(folder => folder.id === it.folderId)
+			if (folder) {
+				folder.feeds.push(it)
+				folder.feedCount += it.unreadCount
+			}
+		});
+	},
+	[FEED_MUTATION_TYPES.ADD_FEED](state: AppState, feed: Feed) {
+		const folder = state.folders.find(folder => folder.id === feed.folderId)
+		if (folder) {
+			folder.feeds.push(feed)
+			folder.feedCount += feed.unreadCount
+		}
+	}
 }
 
 export default {