add CardList cards & add temp ordered text by authors getter

src/pages/library/CardList.vue

@@ -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>

src/store/modules/texts.js

@@ -58,6 +58,23 @@ export default {
         value: id,
         text: `(${id}) ${title}`
       }))
+    },
+
+    orderedParents: state => {
+      // FIXME duplicates references if multiple authors ?
+      if (!state.textsDepart) return undefined
+      return state.textsDepart.sort((a, b) => {
+        if (!b.authors) return -1
+        if (!a.authors) return +1
+        if (a.authors[0].name < b.authors[0].name) return -1
+        if (a.authors[0].name > b.authors[0].name) return 1
+        return 0
+      }).reduce((dict, text) => {
+        const firstChar = text.authors ? text.authors[0].name[0] : '&'
+        if (!(firstChar in dict)) dict[firstChar] = []
+        dict[firstChar].push(text)
+        return dict
+      }, {})
     }
   }
 }