From ced1d9c3542b82bc8c11b795dd75490c757aa5a1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 24 Feb 2021 22:13:02 +0100
Subject: [PATCH] add nodes style based on text props

---
 src/components/NodeMap.vue | 24 ++++++++++++++++++------
 src/pages/Home.vue         |  4 ++--
 src/store/index.js         | 15 ++++++++++-----
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/components/NodeMap.vue b/src/components/NodeMap.vue
index 755373b..f3faa6d 100644
--- a/src/components/NodeMap.vue
+++ b/src/components/NodeMap.vue
@@ -12,8 +12,8 @@
       :key="index"
       :cx="node.x"
       :cy="node.y"
-      :fill="getNodeFill(node)"
-      :r="5"
+      :class="node.data.class"
+      :r="node.children ? 7 : 5"
     >
       <title>{{ node.data.name }}</title>
     </circle>
@@ -107,10 +107,6 @@ export default {
         .force('center', forceCenter(this.width * 0.5, this.height * 0.5))
     },
 
-    getNodeFill (node) {
-      return node.data.type === 'textref' ? 'red' : 'black'
-    },
-
     // DRAG EVENT HANDLER
 
     onNodeDragStart (e, node) {
@@ -142,4 +138,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+path {
+  stroke: grey;
+}
+
+@each $id in map-keys($families){
+  .family-#{$id} {
+    fill: setColorFromId($id);
+    @if $id == 9 {
+      stroke: black;
+    }
+  }
+}
+
+.first {
+  stroke-width: 2px;
+}
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index f592d57..50c2d05 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -15,8 +15,8 @@ export default {
   },
 
   created () {
-    this.$store.dispatch('GET_TEXT', 1).then(({ data }) => {
-      this.text = data.data.textref
+    this.$store.dispatch('GET_TEXT', { id: 1 }).then(data => {
+      this.text = data.textref
     })
   }
 }
diff --git a/src/store/index.js b/src/store/index.js
index 3b03edd..30c50d7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -27,26 +27,31 @@ export default new Vuex.Store({
 
     'GET_TREE' ({ dispatch }, id) {
       return api.post('', { query: print(TextdepartRecursive), variables: { id } }).then(({ data }) => {
-        return parse(data.data.textref)
+        const text = data.data.textref
+        return parse(text, text.id)
       })
     }
   }
 })
 
 // Temp data processing
-function parse (d) {
+function parse (d, originalId) {
   const child = {
     name: d.title,
-    type: d.__typename.toLowerCase()
+    type: d.__typename.toLowerCase(),
+    class: 'family-' + d.familles[0].id
+  }
+  if (d.id === originalId) {
+    child.class += ' first'
   }
   let children = []
   for (const key of ['text_en_rebond', 'text_produits']) {
     if (d[key]) {
-      children = [...children, ...d[key].map(text => parse(text))]
+      children = [...children, ...d[key].filter(text => text.id !== originalId)]
     }
   }
   if (children.length) {
-    child.children = children
+    child.children = children.map(child => parse(child, originalId))
   }
   return child
 }