Improved actor scraping and display.

assets/components/search/search.vue

@@ -1,47 +1,89 @@
 <template>
-    <div class="content-inner">
-        <span
-            v-if="!loading"
-            class="summary"
-        >Found {{ releases.length }} results for '{{ query }}'</span>
+	<div class="content-inner">
+		<span
+			v-if="loading"
+			class="summary"
+		>Searching...</span>
 
-        <span
-            v-else
-            class="summary"
-        >Searching...</span>
+		<div v-if="!loading && actors.length > 0">
+			<span
+				v-if="!loading"
+				class="summary"
+			>Found {{ actors.length }} actors for '{{ query }}'</span>
 
-        <Releases :releases="releases" />
-    </div>
+			<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() {
-    const results = await this.$store.dispatch('searchReleases', {
-        query: this.query,
-        limit: 100,
-    });
+	await this.search();
+}
 
-    this.loading = false;
-
-    if (results) {
-        this.releases = results;
-    }
+async function watchQuery() {
+	await this.search();
 }
 
 export default {
-    components: {
-        Releases,
-    },
-    data() {
-        return {
-            loading: true,
-            releases: [],
-            query: this.$route.query.query || this.$route.query.q,
-        };
-    },
-    mounted,
+	components: {
+		Actor,
+		Releases,
+	},
+	data() {
+		return {
+			loading: true,
+			actors: [],
+			releases: [],
+		};
+	},
+	computed: {
+		query,
+	},
+	watch: {
+		query: watchQuery,
+	},
+	mounted,
+	methods: {
+		search,
+	},
 };
 </script>
 
@@ -54,4 +96,12 @@ export default {
     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>