add ability to query a textDepart in tree-map mode

src/pages/library/LibraryOptions.vue

@@ -7,8 +7,8 @@
       <b-form-radio-group
         id="mode-select"
         v-model="currentMode" :options="modes"
-        name="mode-select" :aria-describedby="ariaDescribedby" buttons
+        name="mode-select" :aria-describedby="ariaDescribedby"
-        size="sm"
+        buttons button-variant="outline-dark"
       />
     </b-form-group>
 
@@ -23,6 +23,7 @@
         <multiple-tags-select
           id="tags-select" :button-text="$t('options.filters.choices.tags')"
           v-model="selectedTags" :options="tags"
+          :disabled="true"
         />
       </b-form-group>
 
@@ -34,22 +35,41 @@
           id="strangeness-input"
           type="range" min="0" max="5"
           v-model="strangeness"
+          :disabled="true"
         />
       </b-form-group>
     </b-form-group>
+    <b-form-group
+      label="Texte de départ :"
+      label-for="text-depart-select"
+      class="w-25"
+    >
+      <b-form-select
+        id="text-depart-select"
+        v-model="textDepartId"
+        :options="textsDepartOptions"
+        class="border"
+      />
+    </b-form-group>
+
 
     <b-form-group
       :label="$t('options.search.title')"
       label-for="search-input"
     >
-      <b-input-group size="sm" append="search-icon">
+      <b-input-group append="search-icon">
-        <b-form-input v-model="search" id="search-input" trim />
+        <b-form-input
+          v-model="search" id="search-input" trim
+          :disabled="true"
+        />
       </b-input-group>
     </b-form-group>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'
 
 export default {
@@ -75,14 +95,30 @@ export default {
       currentMode: this.mode,
       selectedTags: [],
       strangeness: 0,
+      textDepartId: undefined,
       search: ''
     }
   },
 
+  computed: {
+    ...mapGetters(['textsDepartOptions'])
+  },
+
   watch: {
     currentMode (mode) {
       this.$router.push({ query: { mode } })
+    },
+
+    textDepartId (id) {
+      console.log('textDepartId changed', id)
+      this.$store.dispatch('GET_TREE_WITH_DEPTH', { id })
     }
+  },
+
+  created () {
+    this.$store.dispatch('GET_TEXTS_DEPART').then(data => {
+      this.textDepartId = data[0].id
+    })
   }
 }
 </script>

src/pages/library/TreeMap.vue

@@ -3,13 +3,14 @@
     <node-map
       v-if="!loading"
       v-bind="mapData"
-      :show-id="true"
       v-on="$listeners"
     />
   </b-overlay>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import NodeMap from '@/components/NodeMap'
 import { toManyManyData } from '@/helpers/d3Data'
 
@@ -21,24 +22,27 @@ export default {
     NodeMap
   },
 
-  props: {
-    id: { type: Number, default: 1 }
-  },
-
   data () {
     return {
       loading: true,
-      depth: 3,
+      mapData: undefined
-      mapData: { nodes: null, links: null }
     }
   },
 
-  created () {
+  computed: {
-    const { id, depth } = this
+    ...mapGetters(['textDepart'])
-    this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
+  },
-      this.mapData = toManyManyData(data)
+
-      this.loading = false
+  watch: {
-    })
+    textDepart (text) {
+      if (text) {
+        this.mapData = toManyManyData(this.textDepart)
+        this.loading = false
+      } else {
+        this.mapData = undefined
+        this.loading = true
+      }
+    }
   }
 }
 </script>

src/store/modules/texts.js

@@ -1,4 +1,5 @@
 import api from '@/api'
+import { formatData } from '@/helpers/formatter'
 import { print } from 'graphql/language/printer'
 import {
   TextsDepart, TextCard, TextdepartRecursive
@@ -7,34 +8,39 @@ import TextdepartRecursiveWithDepth from '@/api/queries/TextdepartRecursiveWithD
 
 export default {
   state: {
-    textsDepart: undefined
+    textsDepart: undefined,
+    textDepart: undefined
   },
 
   mutations: {
     'SET_TEXTS_DEPART' (state, texts) {
       state.textsDepart = texts
+    },
+
+    'SET_TEXT_DEPART' (state, text) {
+      state.textDepart = text
     }
   },
 
   actions: {
     'GET_TEXTS_DEPART' ({ state, commit }) {
       return api.post('', { query: print(TextsDepart) }).then(({ data }) => {
-        commit('SET_TEXTS_DEPART', data.data.textsdepart)
+        commit('SET_TEXTS_DEPART', formatData(data.data.textsdepart))
         return state.textsDepart
       })
     },
 
     'GET_TEXT' (store, { id }) {
       return api.post('', { query: print(TextCard), variables: { id } })
-        .then(data => (data.data.data.text))
+        .then(data => formatData(data.data.data.text, true))
     },
 
     'GET_TREE' (store, id) {
       return api.post('', { query: print(TextdepartRecursive), variables: { id } })
-        .then(({ data }) => (data.data.textref))
+        .then(({ data }) => formatData(data.data.textref))
     },
 
-    'GET_TREE_WITH_DEPTH' (store, { id, depth }) {
+    'GET_TREE_WITH_DEPTH' ({ state, commit }, { id, depth = 4 }) {
       const baseQuery = print(TextdepartRecursiveWithDepth)
       function formatQuery (str, depth) {
         if (depth > 0) {
@@ -46,14 +52,20 @@ export default {
           return str.replace('INPUT', '...TextrefTreeFields')
         }
       }
-      return api.post('', { query: formatQuery(baseQuery, depth), variables: { id } })
+      commit('SET_TEXT_DEPART', undefined)
-        .then(({ data }) => (data.data.textref))
+      return api.post('', { query: formatQuery(baseQuery, depth), variables: { id } }).then(({ data }) => {
+        console.log(data.data)
+        commit('SET_TEXT_DEPART', formatData(data.data.textref))
+        return state.textDepart
+      })
     }
   },
 
   getters: {
     textsDepart: state => state.textsDepart,
 
+    textDepart: state => state.textDepart,
+
     textsDepartOptions: state => {
       if (!state.textsDepart) return undefined
       return state.textsDepart.map(({ id, title }) => ({
@@ -68,11 +80,11 @@ export default {
       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].last_name < b.authors[0].last_name) return -1
-        if (a.authors[0].name > b.authors[0].name) return 1
+        if (a.authors[0].last_name > b.authors[0].last_name) return 1
         return 0
       }).reduce((dict, text) => {
-        const firstChar = text.authors ? text.authors[0].name[0] : '&'
+        const firstChar = text.authors ? text.authors[0].last_name[0] : 'Pas de noms'
         if (!(firstChar in dict)) dict[firstChar] = []
         dict[firstChar].push(text)
         return dict