update library views

src/messages/fr.json

@@ -9,6 +9,15 @@
     "gallery": "Créations numériques",
     "blog": "Blog"
   },
+  "variants": {
+    "depart": "Texte de départ",
+    "critique": "Texte critique",
+    "echo": "Constellation en écho",
+    "reflexion": "Réflexion théorique",
+    "lecture": "Lecture rapprochée",
+    "sensible": "Expérience sensible",
+    "kit": "Fiche-outil de désapprentisage"
+  },
   "options": {
     "display": {
       "title": "Gestion de l'affichage",

src/pages/Library.vue

@@ -28,7 +28,6 @@
             @close="closeText(parent.id, $event)"
             @click.native="onSubTextClick(i, j)"
           />
-          <!-- :class="{ 'text-blur': i !== parents.length - 1 || j !== parent.children.length - 1 }" -->
         </section>
       </section>
     </div>

src/pages/library/CardList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card-list">
     <div class="card-list-container">
-      <div v-for="(parents, char) in orderedParents" :key="char">
+      <div v-for="(parents, char) in orderedTextsDepart" :key="char">
         <h3>{{ char }}</h3>
         <div class="text-group">
           <text-mini-card
@@ -31,7 +31,11 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['orderedParents'])
+    ...mapGetters(['orderedTextsDepart'])
+  },
+
+  created () {
+    this.$store.dispatch('INIT_LIBRARY_LIST')
   }
 }
 </script>

src/pages/library/CardMap.vue

@@ -1,9 +1,8 @@
 <template>
-  <b-overlay :show="loading" class="h-100">
+  <b-overlay :show="texts === undefined" class="h-100">
     <svg
       width="100%" height="100%"
       ref="svg" id="vis"
-      v-if="textsDepart"
       :view-box.camel="viewBox"
     >
       <g id="cards">
@@ -14,8 +13,8 @@
           :transform="`rotate(${node.rotate})`"
         >
           <text-mini-card
-            :id="textsDepart[i].id"
-            :text-data="textsDepart[i]"
+            :id="texts[i].id"
+            :text-data="texts[i]"
           />
         </foreignObject>
       </g>
@@ -44,12 +43,12 @@ export default {
 
   data () {
     return {
-      loading: true,
       width: 100,
       height: 100,
-      nodes: new Array(20).fill().map((_, i) => ({ x: i, rotate: randomUniform(-25, 25)() })),
+      nodes: undefined,
       simulation: forceSimulation(),
-      viewBox: null
+      viewBox: null,
+      texts: undefined
     }
   },
 
@@ -65,8 +64,11 @@ export default {
   },
 
   created () {
-    this.$store.dispatch('GET_TEXTS_DEPART').then(() => {
-      this.loading = false
+    this.$store.dispatch('INIT_LIBRARY_MAP').then(data => {
+      this.texts = data
+      this.nodes = data.map((node, i) => {
+        return { x: i, rotate: randomUniform(-25, 25)() }
+      })
 
       this.$nextTick(() => {
         this.updateSize()

src/pages/library/LibraryOptions.vue

@@ -40,14 +40,15 @@
       </b-form-group>
     </b-form-group>
     <b-form-group
+      v-else
       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"
+        v-model="nodeDepartId"
+        :options="nodesDepartsOptions"
         class="border"
       />
     </b-form-group>
@@ -101,24 +102,22 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['textsDepartOptions'])
+    ...mapGetters(['nodesDepartsOptions']),
+
+    nodeDepartId: {
+      get () {
+        return this.$store.state.library.nodeDepartId
+      },
+      set (value) {
+        this.$store.dispatch('SET_NODE_DEPART_ID', value)
+      }
+    }
   },
 
   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

@@ -1,8 +1,8 @@
 <template>
-  <b-overlay :show="loading" class="h-100">
+  <b-overlay :show="nodeTree === undefined" class="h-100">
     <node-map
-      v-if="!loading"
-      v-bind="mapData"
+      v-if="nodeTree !== undefined"
+      v-bind="nodeTree"
       v-on="$listeners"
     />
   </b-overlay>
@@ -12,7 +12,6 @@
 import { mapGetters } from 'vuex'
 
 import NodeMap from '@/components/NodeMap'
-import { toManyManyData } from '@/helpers/d3Data'
 
 
 export default {
@@ -30,19 +29,11 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['textDepart'])
+    ...mapGetters(['nodeTree'])
   },
 
-  watch: {
-    textDepart (text) {
-      if (text) {
-        this.mapData = toManyManyData(this.textDepart)
-        this.loading = false
-      } else {
-        this.mapData = undefined
-        this.loading = true
-      }
-    }
+  created () {
+    this.$store.dispatch('INIT_LIBRARY_TREE')
   }
 }
 </script>