Replaced alphabet index with search bar on actors page.

assets/components/networks/networks.vue

@@ -1,44 +1,23 @@
 <template>
 	<div class="networks">
-		<form
-			class="search"
-			@submit.prevent="searchEntities"
-		>
-			<input
-				v-model="query"
-				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
-				class="query"
-				@input="searchEntities"
+		<div class="content-inner">
+			<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
+
+			<span
+				v-if="done && entities.length === 0"
+				class="empty"
+			>No results for "{{ $route.query.query }}"</span>
+
+			<div
+				v-else
+				class="entity-tiles"
 			>
-
-			<button
-				type="submit"
-				class="search-button"
-			><Icon icon="search" /></button>
-		</form>
-
-		<div
-			v-if="query.length > 0"
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in searchResults"
-				:key="`${entity.type}-tile-${entity.slug}`"
-				:entity="entity"
-			/>
-
-			<span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
-		</div>
-
-		<div
-			v-else
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in entities"
-				:key="`entity-tile-${entity.slug}`"
-				:entity="entity"
-			/>
+				<Entity
+					v-for="entity in entities"
+					:key="`entity-tile-${entity.slug}`"
+					:entity="entity"
+				/>
+			</div>
 		</div>
 
 		<Footer />
@@ -47,21 +26,39 @@
 
 <script>
 import Entity from '../entities/tile.vue';
+import SearchBar from '../search/bar.vue';
 
-async function searchEntities() {
-	this.searchResults = await this.$store.dispatch('searchEntities', {
-		query: this.query,
-		limit: 50,
-	});
-}
+async function fetchEntities() {
+	if (this.$route.query.query) {
+		await this.searchEntities();
+		return;
+	}
+
+	this.done = false;
 
-async function mounted() {
 	this.entities = await this.$store.dispatch('fetchEntities', {
 		type: 'network',
 		entitySlugs: [],
 	});
 
-	this.pageTitle = 'Networks';
+	this.done = true;
+}
+
+async function searchEntities() {
+	this.done = false;
+
+	this.entities = await this.$store.dispatch('searchEntities', {
+		query: this.$route.query.query,
+		limit: 20,
+	});
+
+	this.done = true;
+}
+
+async function mounted() {
+	this.pageTitle = 'Channels';
+
+	await this.fetchEntities();
 }
 
 function channelCount() {
@@ -71,20 +68,24 @@ function channelCount() {
 export default {
 	components: {
 		Entity,
+		SearchBar,
 	},
 	data() {
 		return {
-			query: '',
+			done: false,
 			pageTitle: null,
 			entities: [],
-			searchResults: [],
 		};
 	},
 	computed: {
 		channelCount,
 	},
+	watch: {
+		$route: fetchEntities,
+	},
 	mounted,
 	methods: {
+		fetchEntities,
 		searchEntities,
 	},
 };
@@ -94,7 +95,13 @@ export default {
 @import 'theme';
 
 .networks {
-    padding: 0 1rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
+	padding: 0 1rem;
 }
 
 .search {
@@ -112,6 +119,14 @@ export default {
 	}
 }
 
+.empty {
+	display: block;
+	margin: 1rem 0;
+	color: var(--shadow);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
 @media(max-width: $breakpoint2) {
     .entity-tiles {
         grid-gap: .5rem;