enfrancais-app/src/pages/library/LibraryList.vue

<template>
  <div class="library-list">
    <div class="library-list-container">
      <div v-for="(parents, char) in filteredNodes" :key="char">
        <h3>{{ char }}</h3>

        <div class="library-list-nodes-group">
          <node-view
            v-for="parent in parents" :key="parent.id"
            :node="parent"
            mode="card"
            @open-node="$emit('open-node', $event)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { searchInNode, tagsInNode } from '@/store/utils'
import { NodeView } from '@/components/nodes'


export default {
  name: 'LibraryList',

  components: {
    NodeView
  },

  computed: {
    ...mapGetters(['orderedTextsDepart', 'search', 'tags']),

    filteredNodes () {
      if (!this.orderedTextsDepart) return {}
      const nodesGroups = {}
      const search = this.search.toLowerCase()
      Object.entries(this.orderedTextsDepart).forEach(([char, nodes]) => {
        const filteredNodes = nodes
          .filter(node => tagsInNode(this.tags, node.tags))
          .filter(node => searchInNode(search, node))
        if (filteredNodes.length) {
          nodesGroups[char] = filteredNodes
        }
      })
      return nodesGroups
    }
  },

  created () {
    this.$store.dispatch('INIT_LIBRARY_LIST')
  }
}
</script>

<style lang="scss" scoped>
.library-list {
  overflow-y: auto;
  height: 100%;

  h3 {
    font-family: $font-family-text;
    line-height: 1;
    font-size: 16.5rem;
  }

  &-nodes-group {
    display: flex;
    flex-wrap: wrap;

    .node-view {
      margin-bottom: 3.4375rem;
      $marg: 4.6875rem;
      width: 100%;
      height: 20rem;

      @include media-breakpoint-only(md) {
        max-width: calc(50% - #{($marg / 2)});
        margin-right: $marg;

        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }

      @include media-breakpoint-up(lg) {
        margin-right: $marg;
        max-width: calc(33.33% - #{(($marg * 2) / 3)});

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

</style>