traxxx/assets/components/entities/entity.vue

<template>
	<div
		v-if="entity"
		class="entity content"
	>
		<div class="info">
			<template v-if="entity.hasLogo">
				<img
					v-if="$route.name === 'network'"
					class="logo"
					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
				>

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

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

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

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

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

		<div
			ref="content"
			class="content-inner"
		>
			<Scroll
				v-if="entity.children.length > 0"
				class="scroll-dark"
			>
				<Children :entity="entity" />

				<template v-slot:expanded>
					<Children
						class="expanded"
						:entity="entity"
					/>
				</template>
			</Scroll>

			<FilterBar
				: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>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';

import FilterBar from '../header/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() {
	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;

	Vue.nextTick(() => {
		this.$refs.content.scrollTop = 0;
	});
}

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

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

export default {
	components: {
		FilterBar,
		Pagination,
		Children,
		Releases,
		Scroll,
	},
	data() {
		return {
			entity: null,
			totalCount: null,
			limit: 20,
		};
	},
	watch: {
		$route: route,
	},
	mounted,
	methods: {
		fetchEntity,
	},
};
</script>

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

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

	.link {
		display: flex;
		align-items: center;
		text-decoration: none;
	}
}

.logo {
	height: 100%;
	width: 100%;
	max-width: 20rem;
	object-fit: contain;
	object-position: 0 50%;
}

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

.logo-parent {
	object-position: 100% 50%;
}
</style>