admin front create new doleance

src/assets/main.scss

@@ -721,7 +721,7 @@ div.loading{
         font-weight: 400;
         font-size: 1.1em;
       }
-      section>div, p{
+      section>div:not(.btn), p{
         // font-size: 1em;
         // font-weight: 300;
         // line-height: 1.40;
@@ -1329,3 +1329,8 @@ div.add-besoin-btn{
 div.add-ressource-btn{
   @include add-btn();
 }
+
+div.add-cerclepo-btn{
+  @include add-btn();
+  margin: 0 0 1em;
+}

src/components/ConcernementMapItem.vue

@@ -377,6 +377,24 @@ export default {
       },
       deep: true
     },
+    'concernement.doleances': {
+      handler (n, o) {
+        console.log(`${this.id} watch concernement.doleances o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer") {
+          this.setPaperDoleances(true); // true for update=true
+        }
+      },
+      deep: true
+    },
+    'concernement.doleances.length': {
+      handler (n, o){
+        console.log(`${this.id} watch concernement.doleances.length o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer" && o != null && n !== o) {
+          this.resetPaperContents();
+        }
+      },
+      deep: true
+    },
     wait: {
       handler (n, o){
         // when we are reloading entites par exemple
@@ -915,9 +933,12 @@ export default {
             this.paper_main_object.addChild(this.setPaperAgissantes());
             break;
           case 'doleancer':
+            if (this.concernement.doleances.length) {
               this.addNewPaperSymbolInstance('doleance_bg');
               this.paper_main_object.addChild(this.setPaperDoleances());
+            }
             break;
+            
         }
         this.paperContentsIsSet = true;  
       }
@@ -1659,23 +1680,55 @@ export default {
     //     }
     //   }
     // },
-    setPaperDoleances(){
+    setPaperDoleances(update){
-      let g = new paper.Group({
+      console.log(`setPaperDoleances cid:${this.concernement.id}, update: ${update}`);
+      let g;
+      if (update) {
+        g = this.paper_main_object.children['doleances'];
+        console.log('REUSING doleances group', g);
+      } else{
+        g = new paper.Group({
           pivot: new paper.Point({x:0,y:0}),
           name: `doleances`
         });
+      }
+
+      if (!g) {
+        console.warn('no doleances group created nor found')
+        return;
+      }
+
       this.concernement.doleances.forEach((d) => {
-        g.addChild(this.setPaperDoleanceSteps(d))
+        let doleance_group;
+        if (update) {
+          doleance_group = this.paper_main_object.children['doleances'][`doleance_${d.id}`];
+          if (doleance_group) {
+            this.setPaperDoleanceSteps(d, doleance_group);
+          }else{
+            g.addChild(this.setPaperDoleanceSteps(d));  
+          }
+        }else{
+          g.addChild(this.setPaperDoleanceSteps(d));
+        }
       });
       return g;
     },
-    setPaperDoleanceSteps(doleance){
+    setPaperDoleanceSteps(doleance, groupToUpdate){
-      let g = new paper.Group({
+      console.log(`setPaperDoleanceSteps doleance`, doleance);
+      console.log(`setPaperDoleanceSteps groupToUpdate`, groupToUpdate);
+      
+      let g;
+      if (groupToUpdate) {
+        g = groupToUpdate;
+        g.removeChildren();
+      } else {
+        g = new paper.Group({
           pivot: new paper.Point({x:0,y:0}),
           name: `doleance_${doleance.id}`,
           doleance_id: doleance.id,
           visible: false
         });
+      }
       // let doleance = this.concernement.doleances[0];
       let all_fields = [
         [

src/components/MapConcernements.vue

@@ -1614,8 +1614,9 @@ export default {
       <li>
         <a 
           title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance, active: map_mode === 'doleancer'}"
+          :class="{ active: map_mode === 'doleancer'}"
         >
+        <!-- disabled: opened_concernement && !opened_concernement.has_doleance,  -->
           <span class="icon doleancer"/> <span class="label"> cercle politique</span>
         </a>
       </li>

src/components/contents/Doleancer.vue

@@ -5,11 +5,22 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
 import { CommonStore } from '@/stores/common'
 
+import REST from '@api/rest-axios'
+
+// import { print } from 'graphql/language/printer'
+// import gql from 'graphql-tag'
+// import GQL from '@api/graphql-axios'
+// import EntiteFields from '@api/gql/entite.fragment.gql'
+
+
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiArrowLeft } from '@mdi/js';
 import { mdiArrowRight } from '@mdi/js';
+import { mdiStickerPlusOutline } from '@mdi/js';
+
+
 
 import ContentEditable from '@components/editable/ContentEditable.vue';
 // import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
@@ -24,7 +35,9 @@ export default {
       doleance_selected: null,
       doleance_index: null,
       arrowleft_path: mdiArrowLeft,
-      arrowright_path: mdiArrowRight
+      arrowright_path: mdiArrowRight,
+      mdiStickerPlusOutline_path: mdiStickerPlusOutline,
+      reloading_concernements: false
     }
   },
   computed: {
@@ -39,6 +52,10 @@ export default {
                                     'p_reception_application_decision',
                                     'reloadConcernementCerclePol'
                                   ]),
+    ...mapState(UserStore,['name',
+                           'csrf_token',
+                           'isloggedin',
+                           'user_entites']),
     ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
@@ -53,15 +70,40 @@ export default {
     
   },
   mounted() {
+    if(this.concernement && this.concernement.doleances.length){
       if (this.doleance_index > 0) 
         this.$refs.prevDoleanceBTN.classList.add('visible');
 
       if (this.doleance_index < this.concernement.doleances.length-1)
         this.$refs.nextDoleanceBTN.classList.add('visible'); 
+    }
   },
   unmounted() {
+    if(this.concernement && this.concernement.doleances.length){
       this.setOpenedDoleance(parseInt(this.cid), this.concernement.doleances[0].id);
 
+    }
+
+  },
+  watch: {
+    opened_concernement: {
+      handler (n, o) {
+        console.log(`${this.cid} watch opened_concernement o, n`, o, n);
+        if (!n) { // if there is no opened concernement
+          
+        } else {
+          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;
+            }
+          });
+        }
+      },
+      deep: true
+    }
   },
   methods: {
     ...mapActions(ConcernementsStore,['setOpenedDoleance']),
@@ -92,6 +134,88 @@ export default {
           that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1); 
         };
       }(this)), 2000)
+    },
+    addCerclePo(e){
+      console.log('add cerclepo');
+      this.reloading_concernements = true;
+      // 1 create entite node
+      this.createCerclepoNode()
+        .then((cerclepo) => {
+          console.log('createCerclepoNode then node', cerclepo);
+          // 2 record on concernement field_entites
+          this.recordConcernementDoleancerField(cerclepo)
+                .then((concernement) => {
+                  console.log('concernement', concernement);
+                  // reload the map item
+                  this.reloadConcernementCerclePol(concernement.nid[0].value)
+                    .then(() => {
+                      this.reloading_concernements = false;
+                    });
+                })
+        })
+
+    },
+    createCerclepoNode(){
+      return new Promise((resolve, reject) => {
+        // 1 create entite node
+        const params_node_cerclepo = {
+          type: 'cercle_politique',
+          title: [{value:'Titre à personaliser'}]
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/node?_format=json`, params_node_cerclepo, configs)
+          .then(({ data }) => {
+            console.log('REST post new node cercle_politique', data);
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with post new node cercle_politique`, error)
+            reject(error)
+          })
+      })
+    },
+    recordConcernementDoleancerField(node){
+      return new Promise((resolve, reject) => {
+        // 2 record concernement field_doleancer
+
+        // get all the field_entite values, we don't want to ersae everything
+        let doleances = [];
+        this.concernement.doleances.forEach((doleance) =>{
+          doleances.push({
+            target_id: doleance.id
+          })
+        })
+        // add the new field value
+        doleances.push({
+          target_id: node.nid[0].value
+        })
+        console.log('doleances', doleances);
+        
+        const params_node = {
+          type: 'concernement',
+          nid: [{value: this.cid}],
+          'field_doleancer': doleances
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.patch(`/node/${this.cid}?_format=json`, params_node, configs)
+          .then(({ data }) => {
+            console.log('REST patch node new field_doleancer', data)
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with patch node field_doleancer`, error)
+            reject(error)
+          })
+        // resolve('test')
+      })
     }
   },
   components: {
@@ -117,13 +241,23 @@ export default {
       <section
         class="content-doleances">
         
-      <template v-if="opened_concernement.opened_doleance.id === doleance.id">
+        <template v-if="opened_concernement.opened_doleance && opened_concernement.opened_doleance.id === doleance.id">
-            <h3 class="doleance-title">{{ doleance.title }}</h3>
+          <ContentEditable
+            tag="h3"
+            :value="doleance.title" 
+            class="doleance-title" 
+            :contenteditable="opened_concernement.can_update"
+            :data="{
+              entitytype: 'node',
+              bundle: 'cercle_politique',
+              id: doleance.id,
+              field: {field_name: 'title', value:'value'}
+            }"
+            v-on:updated="reloadConcernementCerclePol(cid)"/>
           <section
             v-if="opened_concernement.opened_doleance.field === 'leprobleme' ||  !opened_concernement.opened_doleance.field">
             <span class="date">{{ doleance.date_leprobleme.start }}</span>
             <h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
-              <!-- <h4 name="leprobleme">{{ doleance.leprobleme }}</h4> -->
             <ContentEditable
               tag="h4"
               :value="doleance.leprobleme" 
@@ -325,6 +459,17 @@ export default {
     </template>
 
     <template v-slot:footer>
+      <template v-if="concernement.can_update">
+          <div v-if="!reloading_concernements" @click="addCerclePo" class="add-cerclepo-btn btn">
+            <span>Ajouter un crecle politique</span>
+            <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+          </div>
+          <div v-else class="add-cerclepo-btn btn">
+            <div class="loading">Chargement</div>
+          </div>
+        </template>
+
+
       <!-- <vue-plyr>
         <div class="plyr__video-embed"> -->
           <iframe

src/components/contents/TerrainDeVie.vue

@@ -308,7 +308,7 @@ export default {
             resolve(data)
           })
           .catch(error => {
-            console.warn(`Issue with post new paragraph source`, error)
+            console.warn(`Issue with post new node cercle_politique`, error)
             reject(error)
           })
       })

src/stores/concernements.js

@@ -637,6 +637,19 @@ export const ConcernementsStore = defineStore({
             let tmp_conc = this.concernementsByID[concernement.id];
             // merge old concernement entites with new once
             _assign(tmp_conc.doleances, concernement.doleances);
+
+            // redefine opened doleance if needed
+            tmp_conc.has_doleance = tmp_conc.doleances.length ? true : false;
+            if (tmp_conc.has_doleance) {
+              // console.log('concernement has doleance', tmp_conc.doleances);
+              if (!tmp_conc.opened_doleance) {
+                tmp_conc.opened_doleance = {
+                  id: tmp_conc.doleances[0].id
+                };
+              }
+            }
+
+            // resolve
             resolve(concernement);
           })
           .catch(error => {