add api module

src/api/api.js

@@ -0,0 +1,92 @@
+import axios from 'axios'
+import { print } from 'graphql/language/printer'
+
+import { Node, Nodes, NodesTrees } from '@/api/queries'
+import * as nodesFragments from '@/api/fragments'
+
+
+const api = axios.create({
+  baseURL: window.location.origin + '/api/gql',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+
+export default {
+  getQueryString (query, levels) {
+    const FRAGMENTS_NAMES = ['NodeInitial', 'NodePartial', 'NodeFull']
+    const names = levels.map(level => FRAGMENTS_NAMES[level])
+    const fragments = names.map(name => '...' + name).join('\n')
+    const fragmentsDefs = names.map(name => print(nodesFragments[name])).join('\n')
+    return print(query).replace('FRAGMENTS', fragments) + fragmentsDefs
+  },
+
+  query (query, variables = {}) {
+    return api
+      .post('', { query: print(query), variables })
+      .then(response => {
+        return response.data.data
+      })
+  },
+
+  queryNodes (ids, levels) {
+    return api.post('', {
+      query: this.getQueryString(Nodes, levels),
+      variables: { ids }
+    }).then(response => response.data.data)
+  },
+
+  queryNode (id, levels) {
+    return api.post('', {
+      query: this.getQueryString(Node, levels),
+      variables: { id }
+    }).then(response => response.data.data)
+  },
+
+  queryRecursiveNodes (ids, depth = 4) {
+    const baseQuery = print(NodesTrees)
+    const prodFragment = `
+      ... on Textprod {
+        parents: text_de_depart {
+          id
+        }
+
+        siblings: text_en_rebond {
+          id
+          FRAGMENT_REF
+        }
+      }
+    `
+    const refFragment = `
+      ... on Textref {
+        siblings: text_en_rebond {
+          id
+          FRAGMENT_REF
+        }
+
+        children: text_produits {
+          id
+          FRAGMENT_PROD
+        }
+      }
+    `
+
+    function formatFragment (str, depth) {
+      if (depth > 0) {
+        return formatFragment(
+          str.replaceAll('FRAGMENT_REF', refFragment).replaceAll('FRAGMENT_PROD', prodFragment),
+          --depth
+        )
+      } else {
+        return str.replaceAll('FRAGMENT_REF', '').replaceAll('FRAGMENT_PROD', '')
+      }
+    }
+
+    return api.post('', {
+      query: baseQuery.replace('FRAGMENT', formatFragment(refFragment + prodFragment, depth)),
+      variables: { id: ids[0] }
+    }).then(response => response.data.data.node)
+  }
+}

src/api/index.js

@@ -1,9 +1,4 @@
-import axios from 'axios'
+import api from './api'
 
-export default axios.create({
-  baseURL: window.location.origin + '/api/gql',
-  headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json'
-  }
-})
+export default api
+export * from './queries'

src/pages/library/CardList.vue

@@ -4,11 +4,10 @@
       <div v-for="(parents, char) in orderedTextsDepart" :key="char">
         <h3>{{ char }}</h3>
         <div class="text-group">
-          <text-mini-card
+          <node-view
             v-for="parent in parents" :key="parent.id"
-            :id="parent.id"
-            :text-data="parent"
-            @open="$emit('open', $event)"
+            :node="parent"
+            mode="card"
           />
         </div>
       </div>
@@ -20,14 +19,14 @@
 // FIXME let events bubble
 import { mapGetters } from 'vuex'
 
-import TextMiniCard from '@/components/text/TextMiniCard'
+import { NodeView } from '@/components/nodes'
 
 
 export default {
   name: 'CardList',
 
   components: {
-    TextMiniCard
+    NodeView
   },
 
   computed: {
@@ -45,11 +44,6 @@ export default {
   overflow-y: auto;
   height: 100%;
 
-  &-container {
-    overflow-x: hidden;
-    padding: 0 1.5rem;
-  }
-
   h3 {
     font-family: $font-family-text;
     line-height: 1;

src/pages/library/CardMap.vue

@@ -12,9 +12,9 @@
           :x="node.x" :y="node.y"
           :transform="`rotate(${node.rotate})`"
         >
-          <text-mini-card
-            :id="texts[i].id"
-            :text-data="texts[i]"
+          <node-view
+            :node="texts[i]"
+            mode="card"
           />
         </foreignObject>
       </g>
@@ -31,14 +31,14 @@ import {
 } from 'd3-force'
 
 
-import TextMiniCard from '@/components/text/TextMiniCard'
+import { NodeView } from '@/components/nodes'
 
 
 export default {
   name: 'CardMap',
 
   components: {
-    TextMiniCard
+    NodeView
   },
 
   data () {