traxxx/assets/components/entities/entity.vue

198 lines
3.3 KiB
Vue
Raw Normal View History

2020-06-27 02:50:13 +00:00
<template>
<div
v-if="entity"
class="entity content"
>
<div class="info">
<img
v-if="$route.name === 'network'"
class="logo"
:src="`/img/logos/${entity.slug}/thumbs/network.png`"
>
<img
v-else-if="entity.parent"
2020-06-27 02:50:13 +00:00
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`"
>
2020-06-27 02:50:13 +00:00
<router-link
v-if="entity.parent"
:to="`/${entity.parent.type}/${entity.parent.slug}`"
2020-06-27 02:50:13 +00:00
>
<img
class="logo logo-parent"
2020-06-27 02:50:13 +00:00
:src="`/img/logos/${entity.parent.slug}/thumbs/network.png`"
>
</router-link>
</div>
<div class="content-inner">
<div
v-if="entity.children.length > 0"
class="children"
:class="{ expanded }"
>
<EntityTile
v-for="child in entity.children"
:key="`child-${child.id}`"
:entity="child"
/>
</div>
<div
v-if="entity.children.length > 1"
class="expand noselect"
@click="expanded = !expanded"
>
<Icon
v-show="expanded"
icon="arrow-up3"
/>
<Icon
v-show="!expanded"
icon="arrow-down3"
/>
</div>
<FilterBar
:fetch-releases="fetchEntity"
:items-total="totalCount"
:items-per-page="limit"
/>
<div class="releases">
<Releases :releases="entity.releases" />
</div>
</div>
</div>
</template>
<script>
import EntityTile from './tile.vue';
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.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;
}
async function mounted() {
await this.fetchEntity();
}
async function route() {
this.expanded = false;
await this.fetchEntity();
}
export default {
components: {
EntityTile,
FilterBar,
Releases,
},
data() {
return {
entity: null,
totalCount: null,
limit: 10,
expanded: false,
};
},
watch: {
$route: route,
},
mounted,
methods: {
fetchEntity,
},
};
</script>
<style lang="scss" scoped>
.info {
height: 2.5rem;
display: flex;
justify-content: space-between;
padding: 1rem;
background: var(--profile);
border-bottom: solid 1px var(--lighten-hint);
}
.logo {
height: 100%;
width: 100%;
2020-06-27 02:50:13 +00:00
max-width: 20rem;
object-fit: contain;
object-position: 0 50%;
}
.logo-parent {
object-position: 100% 50%;
2020-06-27 02:50:13 +00:00
}
.children {
display: flex;
box-sizing: border-box;
overflow-x: auto;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
background: var(--profile);
scrollbar-width: none;
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
&.expanded {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
.tile {
width: 100%;
}
}
&::-webkit-scrollbar {
display: none;
}
}
.expand {
background: var(--profile);
.icon {
fill: var(--lighten-weak);
}
&:hover {
background: var(--darken-strong);
.icon {
fill: var(--lighten-weak);
}
}
}
</style>