doleancer added arrow btn to go to previous and next doleance #2303

src/assets/main.scss

@@ -123,14 +123,14 @@ body{
       }
     }
   }
-
+  $cartouch_width : 450px;
   #content{
     display: flex;
     gap: 0.5rem;
     @mixin main-cartouche{
       background-color: rgba(255, 255, 255, 0.9);
       box-sizing: border-box;
-      width:450px;
+      width:$cartouch_width;
       height: 100%;
       padding: 1rem 1rem 1rem;
       overflow-y: auto;
@@ -493,7 +493,6 @@ body{
         list-style: none;
       }
 
-      
      
     }
     section.search{
@@ -578,6 +577,22 @@ body{
         text-decoration: underline;
       }
     }
+
+    nav.doleance-switch{
+      div{
+        position: fixed;
+        top: calc(100vh * 0.49);
+        cursor: pointer;
+        
+        &.prev{
+          left: 1rem;
+        }
+        &.next{
+          right:calc($cartouch_width + 2rem);
+        }
+      }
+    }
+
   }
 
   #recit-player{

src/components/ConcernementMapItem.vue

@@ -69,12 +69,12 @@ export default {
                             'paper_symbol_definitions'])
   },
   created () {
-    console.log('ConcernementMapItem created', this.mapitem);
+    // console.log('ConcernementMapItem created', this.mapitem);
     // this.id = this.superposition_id ? `${this.cid}___${this.superposition_id}` : this.cid;
     this.id = this.mapitem.id;
     this.concernement = this.mapitem.concernement;
     this.cid = this.concernement.id;
-    console.log('mapitem this.cid', this.cid);
+    // console.log('mapitem this.cid', this.cid);
     this.active_revision = this.concernement.active_revision;
 
     // console.log(`ConcernementsMapItem ${this.id} created`);
@@ -198,7 +198,7 @@ export default {
     },
     active_revision: {
       handler (n, o) {
-        console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
+        // console.log(`concernementMapItem watch active_revision o:${o}, n:${n}`);
         if(o & n){ // do not trigger on first variable filling (if o is null)
           this.resetPaperActiveRevision();
         }
@@ -406,7 +406,7 @@ export default {
           }
         }
       }
-      console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
+      // console.log('superposedEntitesIDsList', this.superposedEntitesIDsList);
 
     },
     // MATTER BODY

src/components/contents/Doleancer.vue

@@ -7,21 +7,25 @@ import { CommonStore } from '@/stores/common'
 
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
-
-// import vSelect from 'vue-select';
-// import 'vue-select/dist/vue-select.css';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiArrowLeft } from '@mdi/js';
+import { mdiArrowRight } from '@mdi/js';
 
 export default {
   props: ['cid'],
   data(){
     return {
       doleance: null,
-      doleance_selected: null
+      doleance_selected: null,
+      doleance_index: null,
+      arrowleft_path: mdiArrowLeft,
+      arrowright_path: mdiArrowRight
     }
   },
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'opened_concernement',
+                                    'concernementsByID',
                                     'concernements_loaded',
                                     'ct_concernement',
                                     'ct_cercle_politique',
@@ -30,58 +34,37 @@ export default {
                                     'p_mise_en_oeuvre_decision',
                                     'p_reception_application_decision'
                                   ]),
-    ...mapState(CommonStore,['hover_elmt']),
-    // doleances_select_options () {
-    //   let os = [];
-    //   this.opened_concernement.doleances.forEach((doleance, index) => {
-    //     let o = {
-    //       label: doleance.leprobleme,
-    //       id: doleance.id
-    //     }
-    //     if (doleance.id === this.opened_concernement.opened_doleance.id) {
-    //       this.doleance_selected = o;
-    //     }
-    //     os.push(o);
-    //   })
-    //   return  os;
-    // },
-    // doleances_select_value () {
-    //   let value;
-    //   this.opened_concernement.doleances.forEach((doleance, index) => {
-    //     if (doleance.id === this.opened_concernement.opened_doleance.id) {
-    //       value = {
-    //         label: doleance.leprobleme,
-    //         id: doleance.id
-    //       }
-    //     }
-    //   });
-    //   return value;
-    // }
+    ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
-    console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
-    this.opened_concernement.doleances.forEach((doleance, index) => {
-      if (doleance.id === this.opened_concernement.opened_doleance.id) {
+    this.concernement = this.concernementsByID[this.cid];
+    console.log(`Doleancer content created, id: ${this.cid}, doleances:`,this.concernement.doleances);
+    this.concernement.doleances.forEach((doleance, index) => {
+      if (doleance.id === this.concernement.opened_doleance.id) {
         this.doleance = doleance;
+        this.doleance_index = index;
       }
     });
   },
   methods: {
     ...mapActions(ConcernementsStore,['setOpenedDoleance']),
-    onDoleanceSelected(option){
-      console.log('openDoleance', option);
-      this.setOpenedDoleance(parseInt(this.id), option.id)
-      
-      this.opened_concernement.doleances.forEach((doleance, index) => {
-      if (option.id === this.opened_concernement.opened_doleance.id) {
-        this.doleance = doleance;
-      }
-    });
+    nextDoleance(){
+      this.doleance_index ++;
+      this.openDoleance()
+    },
+    prevDoleance(){
+      this.doleance_index --;
+      this.openDoleance()
+    },
+    openDoleance(){
+      console.log('openDoleance');
+      this.doleance = this.concernement.doleances[this.doleance_index];
+      this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
     }
   },
   components: {
     CartoucheLayout,
-    // vSelect
+    SvgIcon
   }
 }
 
@@ -99,17 +82,6 @@ export default {
       <section
         class="content-doleances">
           
-          <!-- <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
-          <v-select 
-            :options="doleances_select_options"
-            item-value="id"
-            v-model="doleance_selected"
-            :clearable="false"
-            :searchable="false"
-            @option:selected="onDoleanceSelected"
-            >
-          </v-select> -->
-
           <main v-if="opened_concernement.opened_doleance.id === doleance.id && opened_concernement.opened_doleance.field">
             <section
               v-if="opened_concernement.opened_doleance.field === 'leprobleme'">
@@ -294,6 +266,32 @@ export default {
     </template>
   </CartoucheLayout> 
   
+  <nav v-if="map_mode === 'doleancer'" class="doleance-switch">
+    <div 
+      v-if="doleance_index > 0"
+      @click="prevDoleance"
+      class="prev">
+       <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+          <mask id="arrowMaskprev">
+            <rect x="0" y="0" width="24" height="24" fill="white"/>
+            <path :d="arrowleft_path" fill="black"/>
+          </mask>
+          <circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
+        </svg>  
+      </div>
+    <div
+      v-if="doleance_index < concernement.doleances.length-1"
+      @click="nextDoleance"
+      class="next">
+      <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+          <mask id="arrowMasknext">
+            <rect x="0" y="0" width="24" height="24" fill="white"/>
+            <path :d="arrowright_path" fill="black"/>
+          </mask>
+          <circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
+        </svg>  
+    </div>
+  </nav>
   
 </template>
 

src/stores/concernements.js

@@ -109,7 +109,7 @@ export const ConcernementsStore = defineStore({
                       for(let superposition of temp_allSuperpositions) { 
                         for(let superposition_item of superposition) {
                           if (superposition_item.eid === entite.entite.id && !superposition_item.cid) {
-                            console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
+                            // console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
                             already_recorded = true;
                             superposition_item.cid = concernement.id;
                             break;
@@ -121,7 +121,7 @@ export const ConcernementsStore = defineStore({
                       }
                       // if not already recorded, add it to the array. It is incomplete has it's missing one concernement id wich will be filled in next loops
                       if (!already_recorded) {
-                        console.log(`NOT already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
+                        // console.log(`NOT already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
                         let s = [
                           { 
                             cid: concernement.id, 
@@ -159,6 +159,7 @@ export const ConcernementsStore = defineStore({
               // doleance
               concernement.has_doleance = concernement.doleances.length ? true : false;
               if (concernement.has_doleance) {
+                console.log('concernement has doleance', concernement.doleances);
                 concernement.opened_doleance = {
                   id: concernement.doleances[0].id
                 };

src/views/Concernement.vue

@@ -161,8 +161,7 @@ export default {
   components: {
     TerrainDeVie,
     PuissanceAgir,
-    Doleancer,
-    SvgIcon
+    Doleancer
   }
 }
 
@@ -186,6 +185,7 @@ export default {
       <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
     </svg> 
   </nav>
+
 </template>
 
 <style lang="scss" scoped>