Add global result frontend

Signed-off-by: Julius Härtl <jus@bitgrid.net>
2021-04-09 16:22:51 +02:00
parent 840c143b92
commit c960d21b37
11 changed files with 484 additions and 14 deletions
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -0,0 +1,199 @@
+<!--
+  - @copyright Copyright (c) 2021 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/>.
+  -
+  -->
+
+<template>
+	<div v-if="searchQuery!==''" class="global-search">
+		<h2><RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" /></h2>
+		<Actions>
+			<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+		</Actions>
+		<div class="search-wrapper">
+			<div v-if="loading || filteredResults.length > 0" class="search-results">
+				<CardItem v-for="card in filteredResults"
+					:id="card.id"
+					:key="card.id"
+					:standalone="true" />
+				<Placeholder v-if="loading" />
+				<InfiniteLoading :identifier="searchQuery" @infinite="infiniteHandler">
+					<div slot="spinner" />
+					<div slot="no-more" />
+					<div slot="no-results">
+						{{ t('deck', 'No results found') }}
+					</div>
+				</InfiniteLoading>
+			</div>
+			<div v-else>
+				<p>{{ t('deck', 'No results found') }}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import CardItem from '../cards/CardItem'
+import { mapState } from 'vuex'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import InfiniteLoading from 'vue-infinite-loading'
+import RichText from '@juliushaertl/vue-richtext'
+import Placeholder from './Placeholder'
+import { Actions, ActionButton } from '@nextcloud/vue'
+
+const createCancelToken = () => axios.CancelToken.source()
+
+function search({ query, cursor }) {
+	const cancelToken = createCancelToken()
+
+	const request = async() => axios.get(generateOcsUrl('apps/deck/api/v1.0', 2) + '/search', {
+		cancelToken: cancelToken.token,
+		params: {
+			term: query,
+			limit: 20,
+			cursor,
+		},
+	})
+
+	return {
+		request,
+		cancel: cancelToken.cancel,
+	}
+}
+
+export default {
+	name: 'GlobalSearchResults',
+	components: { CardItem, InfiniteLoading, RichText, Placeholder, Actions, ActionButton },
+	data() {
+		return {
+			results: [],
+			cancel: null,
+			loading: false,
+			cursor: null,
+		}
+	},
+	computed: {
+		...mapState({
+			searchQuery: state => state.searchQuery,
+		}),
+		filteredResults() {
+			const sortFn = (a, b) => a.archived - b.archived || b.lastModified - a.lastModified
+			if (this.$route.params.id) {
+				return this.results.filter((result) => result.relatedBoard.id.toString() !== this.$route.params.id.toString()).sort(sortFn)
+			}
+			return [...this.results].sort(sortFn)
+		},
+		queryStringArgs() {
+			return {
+				searchQuery: this.searchQuery,
+			}
+		},
+	},
+	watch: {
+		searchQuery() {
+			this.cursor = null
+			this.loading = true
+			this.search()
+		},
+	},
+	methods: {
+		infiniteHandler($state) {
+			this.loading = true
+			this.search().then((data) => {
+				if (data.length) {
+					$state.loaded()
+				} else {
+					$state.complete()
+				}
+				this.loading = false
+			})
+		},
+		async search() {
+			if (this.cancel) {
+				this.cancel()
+			}
+			const { request, cancel } = await search({ query: this.searchQuery, cursor: this.cursor })
+			this.cancel = cancel
+			const { data } = await request()
+
+			if (this.cursor === null) {
+				this.results = []
+			}
+			if (data.ocs.data.length > 0) {
+				data.ocs.data.forEach((card) => {
+					this.$store.dispatch('addCardData', card)
+				})
+				this.results = [...this.results, ...data.ocs.data]
+				this.cursor = data.ocs.data[data.ocs.data.length - 1].lastModified
+			}
+			return data.ocs.data
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../css/variables.scss';
+
+.global-search {
+	width: 100%;
+	padding: $board-spacing + $stack-spacing;
+	padding-bottom: 0;
+	overflow: hidden;
+	min-height: 35vh;
+	max-height: 50vh;
+	flex-shrink: 1;
+	flex-grow: 1;
+	border-top: 1px solid var(--color-border);
+	z-index: 1010;
+	position: relative;
+
+	.action-item.icon-close {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+	}
+	.search-wrapper {
+		overflow: scroll;
+		height: 100%;
+		position: relative;
+		padding: 10px;
+	}
+
+	h2::v-deep span {
+		background-color: var(--color-background-dark);
+		padding: 3px;
+		border-radius: var(--border-radius);
+	}
+
+	.search-results {
+		display: flex;
+		flex-wrap: wrap;
+
+		& > div {
+			flex-grow: 0;
+		}
+	}
+	&::v-deep .card {
+		width: $stack-width;
+		margin-right: $stack-spacing;
+	}
+}
+</style>