traxxx/assets/components/search/search.vue

<template>
	<div class="content-inner">
		<span
			v-if="loading"
			class="summary"
		>Searching...</span>

		<template v-if="actors.length > 0">
			<span class="summary">Found {{ actors.length }} actors for '{{ query }}'</span>

			<div class="tiles">
				<Actor
					v-for="actor in actors"
					:key="`actor-${actor.id}`"
					:actor="actor.aliasFor || actor"
					:alias="actor.aliasFor && actor"
				/>
			</div>
		</template>

		<template v-if="releases.length > 0">
			<span class="summary">Found {{ releases.length }} releases for '{{ query }}'</span>

			<Releases
				class="embedded"
				:releases="releases"
			/>
		</template>

		<span
			v-if="error"
			class="error summary"
		>{{ error }}</span>

		<span
			v-else-if="!loading && actors.length === 0 && releases.length === 0"
			class="summary"
		>No results</span>
	</div>
</template>

<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';

async function search() {
	try {
		const results = await this.$store.dispatch('search', {
			query: this.query,
			limit: 10,
		});

		this.loading = false;

		if (results) {
			this.actors = results.actors;
			this.releases = results.releases;
		}
	} catch (error) {
		this.loading = false;
		this.error = 'Failed to retrieve search results, sorry about that.';

		console.error(error);
	}
}

function query() {
	return this.$route.query.query || this.$route.query.q;
}

async function mounted() {
	await this.search();
}

async function watchQuery() {
	await this.search();
}

export default {
	components: {
		Actor,
		Releases,
	},
	data() {
		return {
			loading: true,
			actors: [],
			releases: [],
		};
	},
	computed: {
		query,
	},
	watch: {
		query: watchQuery,
	},
	mounted,
	methods: {
		search,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.content-inner {
	padding: 1rem;
}

.summary {
    display: block;
    margin: 0 0 1rem 0;
    color: var(--shadow);
    font-weight: bold;

	&.error {
		color: var(--error);
	}
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    grid-gap: 0 .5rem;
	margin: 0 0 1rem 0;
}

@media(max-width: $breakpoint0) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }
}
</style>