traxxx/assets/components/networks/networks.vue

<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"
			>

			<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"
			/>
		</div>

		<Footer />
	</div>
</template>

<script>
import Entity from '../entities/tile.vue';

async function searchEntities() {
	this.searchResults = await this.$store.dispatch('searchEntities', {
		query: this.query,
		limit: 50,
	});
}

async function mounted() {
	this.entities = await this.$store.dispatch('fetchEntities', {
		type: 'network',
		entitySlugs: [],
	});

	this.pageTitle = 'Networks';
}

function channelCount() {
	return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}

export default {
	components: {
		Entity,
	},
	data() {
		return {
			query: '',
			pageTitle: null,
			entities: [],
			searchResults: [],
		};
	},
	computed: {
		channelCount,
	},
	mounted,
	methods: {
		searchEntities,
	},
};
</script>

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

.networks {
    padding: 0 1rem;
}

.search {
	margin: 1rem 0 0 0;
}

.entity-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: .5rem;
    padding: 1rem 0;

	.tile {
		height: 6rem;
	}
}

@media(max-width: $breakpoint2) {
    .entity-tiles {
        grid-gap: .5rem;
    }
}

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