<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="!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() { 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; } } 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; } .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>