traxxx/assets/components/networks/networks.vue

145 lines
2.3 KiB
Vue
Raw Normal View History

<template>
<div class="networks">
<div class="content-inner">
<SearchBar
:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
:eager="true"
/>
<span
v-if="done && entities.length === 0"
class="empty"
>No results for "{{ $route.query.query }}"</span>
<div
v-else
class="entity-tiles"
>
<Entity
v-for="entity in entities"
:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
:entity="entity"
/>
</div>
</div>
2020-08-15 17:04:33 +00:00
<Footer />
</div>
</template>
<script>
import Entity from '../entities/tile.vue';
import SearchBar from '../search/bar.vue';
async function fetchEntities() {
if (this.$route.query.query) {
await this.searchEntities();
return;
}
this.done = false;
this.entities = await this.$store.dispatch('fetchEntities', {
type: 'network',
entitySlugs: [],
});
this.done = true;
}
async function searchEntities() {
this.done = false;
this.entities = await this.$store.dispatch('searchEntities', {
query: this.$route.query.query,
limit: 20,
});
this.done = true;
}
async function mounted() {
this.pageTitle = 'Channels';
await this.fetchEntities();
}
function channelCount() {
return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}
export default {
components: {
Entity,
SearchBar,
},
data() {
return {
done: false,
pageTitle: null,
entities: [],
};
},
computed: {
channelCount,
},
watch: {
$route: fetchEntities,
},
mounted,
methods: {
fetchEntities,
searchEntities,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.networks {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.content-inner {
padding: 0 1rem;
}
.search {
margin: 1rem 0 0 0;
}
.entity-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: .5rem;
padding: 1rem 0;
.tile {
height: 6rem;
}
}
.empty {
display: block;
margin: 1rem 0;
color: var(--shadow);
font-size: 1.25rem;
font-weight: bold;
}
@media(max-width: $breakpoint2) {
.entity-tiles {
grid-gap: .5rem;
}
}
@media(max-width: $breakpoint0) {
.entity-tiles {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
</style>