displaying slider for revisions with right data #2203

src/components/contents/TerrainDeVie.vue

@@ -9,18 +9,14 @@ import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 import Entite from '@components/contents/Entite.vue';
 
 import VueSlider from 'vue-slider-component'
-import 'vue-slider-component/theme/antd.css'
+import 'vue-slider-component/theme/default.css'
 
 export default {
   props: ['id', 'eid', 'entite'],
   data(){
     return {
       history_value: 0,
-      history_slider_ops: {
-        dotSize:10,
-        min: 0,
-        max: 100,
-      }
+      history_slider_ops: null
     }
   },
   computed: {
@@ -45,6 +41,37 @@ export default {
   },
   created () {
     console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
+
+    // revisions
+    if (!this.opened_concernement.revisons) {
+      this.loadConcernementsRevisions(this.id).then(()=>{
+        console.log('Terrain de vie revisions loaded', this.opened_concernement.revisions);
+        if (this.opened_concernement.revisions.length > 1) {
+          let data=[];
+          this.opened_concernement.revisions.forEach(rev => {
+            let d = new Date(rev.changed);
+            data.push({
+              'id': rev.revision_id,
+              'changed': d.toLocaleDateString("fr-FR")
+            })
+            this.history_value = Math.max(this.history_value, parseInt(rev.revision_id));
+          });
+          this.history_slider_ops = {
+            dotSize:10,
+            data: data,
+            'data-value': 'id',
+            'data-label': 'changed',
+            adsorb: true,
+            'hide-label': true
+          }
+        } else {
+          this.history_slider_ops = null;
+        }
+      });
+    }
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['loadConcernementsRevisions'])
   },
   components: {
     CartoucheLayout,
@@ -95,15 +122,18 @@ export default {
           <div class="changed"><span>mise à jour le</span> {{ changed }}</div>
           <div class="recit-colophon" v-if="opened_concernement.recit_colophon" v-html="opened_concernement.recit_colophon"/>
       </section>
-        
-      <!-- <section class="historique">
-        <label>Historique</label>
-        <vue-slider
-          ref="slider"
-          v-model="history_value"
-          v-bind="history_slider_ops"
-        ></vue-slider>
-      </section> -->
+      
+      <section class="sliders"  v-if="history_slider_ops">
+        <section class="historique" v-if="history_slider_ops">
+          <label>Historique</label>
+          <!-- <h3>{{ history_value }}</h3> -->
+          <vue-slider
+            ref="slider"
+            v-model="history_value"
+            v-bind="history_slider_ops"
+          ></vue-slider>
+        </section>
+      </section>
     </template>
   </CartoucheLayout>