displaying slider for revisions with right data #2203

src/api/gql/concernement.fragment.gql

@@ -1,5 +1,6 @@
 fragment ConcernementFields on Concernement {
   id
+  revision_id
   description
   caillou
   title

src/assets/main.scss

@@ -373,6 +373,19 @@ body{
             }
           }
         }
+        section.sliders{
+          padding: 1em 0 0.5em;
+          section.historique{
+            >label{
+              padding:0;
+            }
+          }
+          .vue-slider-process{
+            background-color: #01ffe2;
+            height: 2px!important;
+            top:calc(50% - 1px)!important;
+          }
+        }
       }
       
       h3{

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> 
   

src/stores/concernements.js

@@ -293,6 +293,29 @@ export const ConcernementsStore = defineStore({
     setRecitPlayer (player) {
       console.log('concernement store setRecitPlayer', player);
       this.recit_plyr_player = player;
+    },
+    loadConcernementsRevisions (cid) {
+      console.log('concernements store loadConcernementsRevisions');
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernementrevisions(id: ${cid}) {
+            ...ConcernementFields
+          }
+        }
+        ${ConcernementFields}
+        `
+        // console.log('ast', ast);
+        GQL.post('', { query: print(ast) })
+          .then(({ data : { data  : { concernementrevisions } } }) => {
+            console.log('concernementsrevisions all loaded', concernementrevisions);
+            this.concernementsByID[cid].revisions = concernementrevisions;
+            resolve()
+          })
+          .catch(error => {
+            console.warn('Issue with loadConcernements revisions', error)
+            reject(error)
+          })
+      })
     }
   }
 })