traxxx/assets/components/entities/entity.vue

<template>
	<div
		v-if="entity"
		class="entity content"
	>
		<div class="info">
			<a
				:href="entity.url"
				target="_blank"
				rel="noopener"
				class="link link-child"
			>
				<template v-if="entity.hasLogo">
					<img
						v-if="$route.name === 'network'"
						class="logo logo-child"
						:src="`/img/logos/${entity.slug}/thumbs/network.png`"
					>

					<img
						v-else-if="entity.parent && !entity.independent"
						class="logo logo-child"
						:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
					>

					<img
						v-else
						class="logo logo-child"
						:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
					>
				</template>

				<h2
					v-else
					class="name"
				>{{ entity.name }}</h2>

				<Icon
					v-if="entity.url"
					icon="share2"
				/>
			</a>

			<ul
				v-if="entity.tags.length > 0"
				class="tags"
			>
				<li
					v-for="tag in entity.tags"
					:key="`tag-${tag.slug}`"
				>{{ tag.name }}</li>
			</ul>

			<router-link
				v-if="entity.parent"
				:to="`/${entity.parent.type}/${entity.parent.slug}`"
				class="link link-parent"
			>
				<img
					v-if="entity.parent.hasLogo"
					class="logo logo-parent"
					:src="`/img/logos/${entity.parent.slug}/thumbs/network.png`"
				>

				<img
					v-if="entity.parent.hasLogo"
					class="favicon"
					:src="`/img/logos/${entity.parent.slug}/favicon.png`"
				>

				<h3
					v-else
					class="name parent-name"
				>{{ entity.parent.name }}</h3>
			</router-link>
		</div>

		<div
			class="content-inner"
			@scroll="events.emit('scroll', $event)"
		>
			<Scroll
				v-if="entity.children.length > 0"
				v-slot="scroll"
				:expandable="true"
				:expanded="expanded"
				class="scroll-light"
				@expand="(state) => expanded = state"
			>
				<Children
					:entity="entity"
					:class="{ expanded }"
					@load="scroll.loaded"
				/>
			</Scroll>

			<FilterBar
				ref="filter"
				:fetch-releases="fetchEntity"
				:items-total="totalCount"
				:items-per-page="limit"
			/>

			<div class="releases">
				<Releases :releases="entity.releases" />

				<Pagination
					:items-total="totalCount"
					:items-per-page="limit"
					class="pagination-top"
				/>
			</div>

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

<script>
import FilterBar from '../filters/filter-bar.vue';
import Pagination from '../pagination/pagination.vue';
import Releases from '../releases/releases.vue';
import Children from './children.vue';
import Scroll from '../scroll/scroll.vue';

async function fetchEntity(scroll = true) {
	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
		entitySlug: this.$route.params.entitySlug,
		entityType: this.$route.name,
		limit: this.limit,
		range: this.$route.params.range,
		pageNumber: Number(this.$route.params.pageNumber),
	});

	this.entity = entity;
	this.totalCount = totalCount;

	this.pageTitle = entity.name;

	if (scroll && this.$refs.filter?.$el) {
		this.$refs.filter.$el.scrollIntoView();
	}
}

async function mounted() {
	await this.fetchEntity();
}

async function route(to) {
	if (to.name === 'channel' || to.name === 'network' || to.name === 'studio') {
		await this.fetchEntity();
		this.expanded = false;
	}
}

export default {
	components: {
		FilterBar,
		Pagination,
		Children,
		Releases,
		Scroll,
	},
	data() {
		return {
			entity: null,
			pageTitle: null,
			totalCount: null,
			limit: Number(this.$route.query.limit) || 20,
			expanded: false,
		};
	},
	watch: {
		$route: route,
		'$store.state.ui.tagFilter': fetchEntity,
	},
	mounted,
	methods: {
		fetchEntity,
	},
};
</script>

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

.info {
	display: flex;
	justify-content: space-between;
	background: var(--profile);
	border-bottom: solid 1px var(--lighten-hint);
}

.link {
	max-width: 20rem;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 1rem;
	text-decoration: none;
}

.link-child {
	.icon {
		fill: var(--lighten);
		margin: 0 0 0 1rem;
	}

	&:hover .icon {
		fill: var(--text-light);
	}
}

.link-parent {
	flex-direction: row-reverse;
	margin: 0 0 0 3rem;
}

.logo {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.logo-child {
	height: 2rem;
}

.logo-parent {
	height: 1.5rem;
}

.favicon {
	height: 1rem;
}

.content-inner {
	display: flex;
	flex-direction: column;
}

.scroll {
	background: var(--profile);
}

.releases {
	flex-grow: 1;
}

.name {
	color: var(--text-light);
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	font-size: 1.5rem;
}

.favicon {
	display: none;
}

@media(max-width: $breakpoint) {
	.tags {
		display: none;
	}
}

@media(max-width: $breakpoint-micro) {
	.logo-parent {
		display: none;
	}

	.favicon {
		display: inline-block;
	}
}

@media(max-width: $breakpoint-nano) {
	.link-child .icon {
		display: none;
	}
}
</style>