traxxx/assets/components/entities/entity.vue

283 lines
4.6 KiB
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
ref="content"
class="content-inner"
>
<Scroll
v-if="entity.children.length > 0"
v-slot="scroll"
:expanded="expanded"
class="scroll-dark"
@expand="(state) => expanded = state"
>
<Children
:entity="entity"
:class="{ expanded }"
@load="scroll.loaded"
/>
</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>
<Footer />
</div>
</div>
</template>
<script>
import { nextTick } from 'vue';
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() {
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;
nextTick(() => {
this.$refs.content.scrollTop = 0;
});
}
async function mounted() {
await this.fetchEntity();
}
async function route() {
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,
},
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>