traxxx/assets/components/entities/entity.vue

187 lines
3.2 KiB
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>