Merge pull request #76 from nextcloud-gmbh/frontend/search-design

Improve user search design

8 files changed, 112 insertions, 40 deletions

diff --git a/src/App.vue b/src/App.vue
index d27f5c4d..8d1f4c34 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,6 +63,7 @@ import axios from 'nextcloud-axios'
 import TimelineEntry from './components/TimelineEntry'
 import ProfileInfo from './components/ProfileInfo'
 import Search from './components/Search'
+import currentuserMixin from './mixins/currentUserMixin'
 
 export default {
 	name: 'App',
@@ -75,6 +76,7 @@ export default {
 		ProfileInfo,
 		Search
 	},
+	mixins: [currentuserMixin],
 	data: function() {
 		return {
 			infoHidden: false,
@@ -84,21 +86,9 @@ export default {
 		}
 	},
 	computed: {
-		url: function() {
-			return OC.linkTo('social', 'img/nextcloud.png')
-		},
-		currentUser: function() {
-			return OC.getCurrentUser()
-		},
-		socialId: function() {
-			return '@' + OC.getCurrentUser().uid + '@' + OC.getHost()
-		},
 		timeline: function() {
 			return this.$store.getters.getTimeline
 		},
-		serverData: function() {
-			return this.$store.getters.getServerData
-		},
 		menu: function() {
 			let defaultCategories = [
 				{
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index f017ad23..3bcbf30c 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -28,7 +28,6 @@
 		<form class="new-post-form" @submit.prevent="createPost">
 			<div class="author currentUser">
 				{{ currentUser.displayName }}
-
 				<span class="social-id">{{ socialId }}</span>
 			</div>
 			<vue-tribute :options="tributeOptions">
diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index d1f2bd0c..6506e125 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -81,12 +81,14 @@
 <script>
 
 import { Avatar } from 'nextcloud-vue'
+import serverData from '../mixins/serverData'
 
 export default {
 	name: 'ProfileInfo',
 	components: {
 		Avatar
 	},
+	mixins: [serverData],
 	props: {
 		uid: {
 			type: String,
@@ -98,17 +100,12 @@ export default {
 			if (typeof this.accountInfo.displayname !== 'undefined') { return this.accountInfo.displayname.value || '' }
 			return this.uid
 		},
-		serverData: function() {
-			return this.$store.getters.getServerData
-		},
 		accountInfo: function() {
 			return this.$store.getters.getAccount(this.uid)
 		}
 	},
 	methods: {
-		follow() {
-			// TODO: implement following users
-		}
+
 	}
 }
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 0cecb528..be9165ff 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -22,15 +22,13 @@
 
 <template>
 	<div class="social__wrapper">
-		<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}"
-			class="">
-			<div class="icon-search" />
-			<h2>{{ t('social', 'No accounts found') }}</h2>
-			<p>No accounts found for {{ term }}</p>
+		<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}">
+			<div v-if="!loading" class="icon-search" />
+			<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>
+			<p v-if="!loading">No accounts found for {{ term }}</p>
 		</div>
 		<div v-if="match || results.length > 0">
 			<h3>{{ t('social', 'Search') }} {{ term }}</h3>
-			<UserEntry :item="match" />
 			<UserEntry v-for="result in results" :key="result.id" :item="result" />
 		</div>
 	</div>
@@ -65,20 +63,32 @@ export default {
 	},
 	watch: {
 		term(val) {
+			// TODO: debounce
+			this.search(val)
+		}
+	},
+	beforeMount() {
+		this.search(this.term)
+	},
+	methods: {
+		search(val) {
 			this.loading = true
-			this.accountSearch(val).then((response) => {
-				this.results = response.data.result.accounts
-				this.loading = false
-			})
 			const re = /@((\w+)(@[\w.]+)?)/g
 			if (val.match(re)) {
 				this.remoteSearch(val).then((response) => {
 					this.match = response.data.result.account
+					this.accountSearch(val).then((response) => {
+						this.results = response.data.result.accounts
+						this.loading = false
+					})
 				}).catch((e) => { this.match = null })
+			} else {
+				this.accountSearch(val).then((response) => {
+					this.results = response.data.result.accounts
+					this.loading = false
+				})
 			}
-		}
-	},
-	methods: {
+		},
 		accountSearch(term) {
 			this.loading = true
 			return axios.get(OC.generateUrl('apps/social/api/v1/accounts/search?search=' + term))
diff --git a/src/components/UserEntry.vue b/src/components/UserEntry.vue
index b615d23c..ecf6f3a7 100644
--- a/src/components/UserEntry.vue
+++ b/src/components/UserEntry.vue
@@ -21,40 +21,47 @@
   -->
 
 <template>
-	<div class="user-entry">
+	<div v-if="item" class="user-entry">
 		<div class="entry-content">
 			<div class="user-avatar">
 				<avatar v-if="item.local" :size="32" :user="item.preferredUsername" />
-				<avatar v-else url="" />
+				<avatar v-else :url="item.icon.url" />
 			</div>
 			<div class="user-details">
 				<router-link v-if="item.local" :to="{ name: 'profile', params: { account: item.account }}">
 					<span class="post-author">{{ item.preferredUsername }}</span>
 				</router-link>
 				<a v-else :href="item.id" target="_blank"
-					rel="noreferrer">{{ item.preferredUsername }}</a>
-				<p class="user-description">{{ item.account }}</p>
+					rel="noreferrer">{{ item.name }} <span class="user-description">{{ item.account }}</span></a>
+				<!-- TODO check where the html is coming from to avoid security issues -->
+				<p v-html="item.summary" />
 			</div>
-			<button v-if="item.following" class="icon-checkmark-color">Following</button>
-			<button v-else class="primary">Follow</button>
+			<button class="icon-checkmark-color" @click="unfollow()"
+				@mouseover="followingText=t('social', 'Unfollow')"
+				@mouseleave="followingText=t('social', 'Following')">{{ followingText }}</button>
+			<button class="primary" @click="follow">Follow</button>
 		</div>
 	</div>
 </template>
 
 <script>
 import { Avatar } from 'nextcloud-vue'
+import follow from '../mixins/follow'
 
 export default {
 	name: 'UserEntry',
 	components: {
 		Avatar
 	},
+	mixins: [
+		follow
+	],
 	props: {
 		item: { type: Object, default: () => {} }
 	},
 	data: function() {
 		return {
-
+			followingText: t('social', 'Following')
 		}
 	}
 }
diff --git a/src/mixins/currentUserMixin.js b/src/mixins/currentUserMixin.js
index 434aeac5..8bc5adfa 100644
--- a/src/mixins/currentUserMixin.js
+++ b/src/mixins/currentUserMixin.js
@@ -20,13 +20,19 @@
  *
  */
 
+import serverData from './serverData'
 export default {
+	mixins: [
+		serverData
+	],
 	computed: {
 		currentUser: function() {
 			return OC.getCurrentUser()
 		},
 		socialId: function() {
-			return '@' + OC.getCurrentUser().uid + '@' + OC.getHost()
+			const url = document.createElement('a')
+			url.setAttribute('href', this.serverData.cloudAddress)
+			return '@' + OC.getCurrentUser().uid + '@' + url.hostname
 		}
 	}
 }
diff --git a/src/mixins/follow.js b/src/mixins/follow.js
new file mode 100644
index 00000000..09fde974
--- /dev/null
+++ b/src/mixins/follow.js
@@ -0,0 +1,34 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import axios from 'nextcloud-axios'
+
+export default {
+	methods: {
+		follow() {
+			return axios.put(OC.generateUrl('/apps/social/api/v1/account/follow?account=' + this.item.account))
+		},
+		unfollow() {
+			return axios.delete(OC.generateUrl('/apps/social/api/v1/account/follow?account=' + this.item.account))
+		}
+	}
+}
diff --git a/src/mixins/serverData.js b/src/mixins/serverData.js
new file mode 100644
index 00000000..24783e3c
--- /dev/null
+++ b/src/mixins/serverData.js
@@ -0,0 +1,29 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default {
+	computed: {
+		serverData: function() {
+			return this.$store.getters.getServerData
+		}
+	}
+}