|
@@ -1,12 +1,54 @@
|
|
|
<template>
|
|
|
- <component-debug :component="this" />
|
|
|
+ <div class="h-100 position-absolute overflow-auto">
|
|
|
+ <div v-for="(parents, char) in orderedParents" :key="char">
|
|
|
+ <h3>{{ char }}</h3>
|
|
|
+ <b-card-group deck>
|
|
|
+ <text-mini-card
|
|
|
+ v-for="parent in parents" :key="parent.id"
|
|
|
+ :id="parent.id"
|
|
|
+ :text-data="parent"
|
|
|
+ @click.native="$emit('open', parent.id)"
|
|
|
+ />
|
|
|
+ </b-card-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+import TextMiniCard from '@/components/text/TextMiniCard'
|
|
|
+
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'CardList'
|
|
|
+ name: 'CardList',
|
|
|
+
|
|
|
+ components: {
|
|
|
+ TextMiniCard
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['orderedParents'])
|
|
|
+ },
|
|
|
+
|
|
|
+ created () {
|
|
|
+ this.$store.dispatch('GET_TEXTS_DEPART')
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.card-deck {
|
|
|
+ .card {
|
|
|
+ flex-basis: auto;
|
|
|
+ @include media-breakpoint-up(md) {
|
|
|
+ flex-basis: 50%;
|
|
|
+ max-width: calc(50% - 30px);
|
|
|
+ }
|
|
|
+ @include media-breakpoint-up(lg) {
|
|
|
+ flex-basis: 33%;
|
|
|
+ max-width: calc(33.3% - 30px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|