pixelfed/resources/assets/js/components/SearchResults.vue

<template>
<div class="container">
	<div v-if="loading" class="pt-5 text-center">
		<div class="spinner-border" role="status">
			<span class="sr-only">Loading…</span>
		</div>
	</div>
	<div v-if="networkError" class="pt-5 text-center">
		<p class="lead font-weight-lighter">An error occured, results could not be loaded.<br> Please try again later.</p>
	</div>

	<div v-if="!loading && !networkError" class="mt-5 row">

		<div class="col-12 col-md-3 mb-4">
			<div v-if="results.hashtags || results.profiles || results.statuses">
				<p class="font-weight-bold">Filters</p>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="filter1" v-model="filters.hashtags">
					<label class="custom-control-label text-muted font-weight-light" for="filter1">Show Hashtags</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="filter2" v-model="filters.profiles">
					<label class="custom-control-label text-muted font-weight-light" for="filter2">Show Profiles</label>
				</div>
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="filter3" v-model="filters.statuses">
					<label class="custom-control-label text-muted font-weight-light" for="filter3">Show Statuses</label>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-9">
			<p class="h5 font-weight-bold">Showing results for <i>{{query}}</i></p>
			<hr>

			<div v-if="filters.hashtags && results.hashtags" class="row mb-4">
				<p class="col-12 font-weight-bold text-muted">Hashtags</p>
				<a v-for="(hashtag, index) in results.hashtags" class="col-12 col-md-3 mb-3" style="text-decoration: none;" :href="hashtag.url">
					<div class="card card-body text-center">
						<p class="lead mb-0 text-truncate text-dark" data-toggle="tooltip" :title="hashtag.value">
							#{{hashtag.value}}
						</p>
						<p class="lead mb-0 small font-weight-bold text-dark">
							{{hashtag.count}} posts
						</p>
					</div>
				</a>
			</div>

			<div v-if="filters.profiles && results.profiles" class="row mb-4">
				<p class="col-12 font-weight-bold text-muted">Profiles</p>
				<a v-for="(profile, index) in results.profiles" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="profile.url">
					<div class="card card-body text-center">
						<p class="text-center">
							<img :src="profile.entity.thumb" width="32px" height="32px" class="rounded-circle box-shadow">
						</p>
						<p class="font-weight-bold text-truncate text-dark">
							{{profile.value}}
						</p>
						<p class="mb-0 text-center">
							 <button :class="[profile.entity.following ? 'btn btn-secondary btn-sm py-1 font-weight-bold' : 'btn btn-primary btn-sm py-1 font-weight-bold']" v-on:click="followProfile(profile.entity.id)">
							 	{{profile.entity.following ? 'Unfollow' : 'Follow'}}
							 </button>
						</p>
					</div>
				</a>
			</div>

			<div v-if="filters.statuses && results.statuses" class="row mb-4">
				<p class="col-12 font-weight-bold text-muted">Statuses</p>
				<a v-for="(status, index) in results.statuses" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="status.url">
					<div class="card">
						<img class="card-img-top img-fluid" :src="status.thumb" style="height:180px;">
						<div class="card-body text-center ">
							<p class="mb-0 small text-truncate font-weight-bold text-muted" v-html="status.value">
							</p>
						</div>
					</div>
				</a>
			</div>

			<div v-if="!results.hashtags && !results.profiles && !results.statuses">
				<p class="text-center lead">No results found!</p>
			</div>

		</div>

	</div>

</div>
</template>

<style type="text/css" scoped>

</style>

<script type="text/javascript">
export default {
	props: ['query', 'profileId'],

	data() {
		return {
			loading: true,
			networkError: false,
			results: {
				hashtags: [],
				profiles: [],
				statuses: []
			},
			filters: {
				hashtags: true,
				profiles: true,
				statuses: true
			}
		}
	},
	beforeMount() {
		this.fetchSearchResults();
	},
	mounted() {
		$('.search-bar input').val(this.query);
	},
	updated() {

	},
	methods: {
		fetchSearchResults() {
			axios.get('/api/search', {
				params: {
					'q': this.query,
					'src': 'metro',
					'v': 1
				}
			}).then(res => {
				let results = res.data;
				this.results.hashtags = results.hashtags;
				this.results.profiles = results.profiles;
				this.results.statuses = results.posts;
				this.loading = false;
			}).catch(err => {
				this.loading = false;
				// this.networkError = true;
			})
		},

		followProfile(id) {
			// todo: finish AP Accept handling to enable remote follows
			axios.post('/i/follow', {
				item: id
			}).then(res => {
				window.location.href = window.location.href;
			});
		},
	}

}
</script>