traxxx/assets/components/search/search.vue

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

		<div v-if="!loading && actors.length > 0">
			<span
				v-if="!loading"
				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>
		</div>

		<div v-if="!loading && actors.length > 0">
			<span
				v-if="!loading"
				class="summary"
			>Found {{ releases.length }} releases for '{{ query }}'</span>

			<Releases :releases="releases" />
		</div>
	</div>
</template>

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

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

	this.loading = false;

	if (results) {
		this.actors = results.actors;
		this.releases = results.releases;
	}
}

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';

.summary {
    display: block;
    margin: 0 0 1rem 0;
    color: $shadow;
    font-weight: bold;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-gap: 0 .5rem;
    flex-grow: 1;
	margin: 0 0 1rem 0;
}
</style>