add ability to query a text tree with a depth variable

src/api/queries/TextdepartRecursiveWithDepth.gql

@@ -0,0 +1,7 @@
+#import "../fragments/TextrefTreeFields.gql"
+
+query TextdepartRecursive($id: Int!) {
+  textref(id: $id) {
+INPUT
+  }
+}

src/pages/Map.vue

@@ -3,24 +3,24 @@
     <div id="maps">
       <div>
         <h4>Carte avec duplication</h4>
-        <node-map
-          v-if="data"
-          v-bind="mapSingle"
-          :key="data.id + '-single'"
-          class="node-map"
-          :show-id="showId"
-        />
+        <div class="node-map">
+          <node-map
+            v-if="data"
+            v-bind="mapSingle"
+            :show-id="showId"
+          />
+        </div>
       </div>
       <div>
         <h4>Carte avec liens multiples</h4>
-        <node-map
-          v-if="data"
-          v-bind="mapMany"
-          :key="data.id + '-many'"
-          class="node-map"
-          :show-id="showId"
-          id="map-2"
-        />
+        <div class="node-map">
+          <node-map
+            v-if="data"
+            v-bind="mapMany"
+            :show-id="showId"
+            id="map-2"
+            />
+        </div>
       </div>
     </div>
 
@@ -28,10 +28,20 @@
       <b-form-group label="Texte de départ :" label-cols="2" class="mb-2">
         <b-form-select
           v-model="textId"
+          @input="query"
           :options="textsDepartOptions"
         />
       </b-form-group>
 
+      <b-form-group label="Profondeur :" label-cols="2" class="mb-2">
+        <b-form-spinbutton
+          v-model="depth"
+          @input="query"
+          min="0" max="6"
+          inline
+        />
+      </b-form-group>
+
       <b-form-checkbox v-model="showId" name="check-button" switch>
         Afficher les numéros
       </b-form-checkbox>
@@ -57,6 +67,7 @@ export default {
     return {
       textId: undefined,
       showId: true,
+      depth: 3,
       data: null,
       mapSingle: { nodes: null, links: null },
       mapMany: { nodes: null, links: null }
@@ -67,9 +78,11 @@ export default {
     ...mapGetters(['textsDepartOptions'])
   },
 
-  watch: {
-    textId (id) {
-      this.$store.dispatch('GET_TREE', id).then((data) => {
+  methods: {
+    query () {
+      const { textId: id, depth } = this
+      this.data = null
+      this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
         this.mapSingle = toSingleManyData(data)
         this.mapMany = toManyManyData(data)
         this.data = data
@@ -102,7 +115,12 @@ export default {
   }
 
   .node-map {
+    height: 100%;
     border: 1px solid grey;
   }
+
+}
+.col > * {
+  width: auto;
 }
 </style>

src/store/modules/texts.js

@@ -3,7 +3,7 @@ import { print } from 'graphql/language/printer'
 import {
   TextsDepart, TextRef, TextdepartRecursive
 } from '@/api/queries'
-
+import TextdepartRecursiveWithDepth from '@/api/queries/TextdepartRecursiveWithDepth.gql'
 
 export default {
   state: {
@@ -24,14 +24,30 @@ export default {
       })
     },
 
-    'GET_TEXT' ({ state }, { id }) {
+    'GET_TEXT' (store, { id }) {
       return api.post('', { query: print(TextRef), variables: { id } })
         .then(data => (data.data.data))
     },
 
-    'GET_TREE' ({ dispatch }, id) {
+    'GET_TREE' (store, id) {
       return api.post('', { query: print(TextdepartRecursive), variables: { id } })
         .then(({ data }) => (data.data.textref))
+    },
+
+    'GET_TREE_WITH_DEPTH' (store, { id, depth }) {
+      const baseQuery = print(TextdepartRecursiveWithDepth)
+      function formatQuery (str, depth) {
+        if (depth > 0) {
+          return formatQuery(
+            str.replace('INPUT', '...TextrefTreeFields\ntext_en_rebond {\nINPUT\n}'),
+            --depth
+          )
+        } else {
+          return str.replace('INPUT', '...TextrefTreeFields')
+        }
+      }
+      return api.post('', { query: formatQuery(baseQuery, depth), variables: { id } })
+        .then(({ data }) => (data.data.textref))
     }
   },