admin front: puiisance dagir: updating besoin reponse is updating mapItem display

src/api/gql/concernement.fragment.gql

@@ -75,6 +75,7 @@ fragment ConcernementFields on Concernement {
     index
     confidentialite
     reponses {
+      can_update
       author
       avec
       id

src/components/ConcernementMapItem.vue

@@ -295,6 +295,16 @@ export default {
       },
       deep: true
     },
+    'concernement.besoins': {
+      handler (n, o){
+        console.log(`ConcernementMapItem ${this.id} watch concernement.besoins o, n`, o, n);
+        if (this.is_open && this.map_mode === "puissancedagir") {
+          // this.resetPaperBesoinReponsePos();
+          this.setPaperPuissanceagirBesoins(true); // true for update=true
+        }
+      },
+      deep: true
+    },
     'concernement.besoins.length': {
       handler (n, o){
         console.log(`ConcernementMapItem ${this.id} watch concernement.besoins.length o, n`, o, n);
@@ -1475,12 +1485,24 @@ export default {
     //   }
     //   return g;
     // },
-    setPaperPuissanceagirBesoins(){
-      console.log(`setPaperPuissanceagirBesoins cid:${this.concernement.id}`);
-      let g = new paper.Group({
-        pivot: new paper.Point(this.pos),
-        name: 'puissanceagir_besoins'
-      });
+    setPaperPuissanceagirBesoins(update){
+      console.log(`setPaperPuissanceagirBesoins cid:${this.concernement.id}, update: ${update}`);
+      let g;
+      if (update) {
+        g = this.paper_main_object.children['puissanceagir_besoins'];
+        console.log('REUSING puissanceagir_besoins group', g);
+      } else{
+        console.log('CREATING puissanceagir_besoins group');
+        g = new paper.Group({
+          pivot: new paper.Point(this.pos),
+          name: 'puissanceagir_besoins'
+        });
+      }
+
+      if (!g) {
+        console.warn('no puissanceagir_besoins group created nor found')
+        return;
+      }
 
       let res_fields = ['qui','quoi','ou','avec'];
       let arc = (360 / 16);               // unit arc
@@ -1494,17 +1516,31 @@ export default {
         let y = Math.sin(center_a*(Math.PI/180)) * br;
 
         // use paper symbol
-        let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
-        besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
-        besoin.scale(this.scale);
-        besoin.item_id = this.concernement.besoins[i].id;
-        besoin.item_cid = this.concernement.id;
-        besoin.item_type = 'besoin';
-        besoin.is_symbol_instance = true;
-
-        console.log(`paper besoin id:${besoin.id}`);
-        this.setBesoinPaperId(besoin.id, this.cid, this.concernement.besoins[i].id);
-        g.addChild(besoin)
+        let paper_besoin;
+        if (update) {
+          paper_besoin = this.paper_main_object.getItem({id: this.concernement.besoins[i].paper_id});
+          // console.log('REUSING besoin paper item', paper_besoin);
+        } else{
+          // console.log('CREATING besoin paper item');
+          paper_besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
+          paper_besoin.scale(this.scale);
+          paper_besoin.item_id = this.concernement.besoins[i].id;
+          paper_besoin.item_cid = this.concernement.id;
+          paper_besoin.item_type = 'besoin';
+          paper_besoin.is_symbol_instance = true;
+          g.addChild(paper_besoin)
+          // this is retriggering watch concernement and watch concernement.besoins
+          this.setBesoinPaperId(paper_besoin.id, this.cid, this.concernement.besoins[i].id);
+        }
+
+        console.log(`paper paper_besoin id:${paper_besoin.id}`);
+        
+        if (!paper_besoin) {
+          console.warn('no paper_besoin item created nor found')
+          return;
+        }
+        paper_besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
+
 
         let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
         for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
@@ -1518,16 +1554,31 @@ export default {
               let ry = Math.sin(res_a*(Math.PI/180)) * rr;
 
               // use paper symbol
-              let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
-              reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
-              reponse.scale(this.scale);
-              reponse.item_id = this.concernement.besoins[i].reponses[j].id;
-              reponse.item_bid = this.concernement.besoins[i].id;
-              reponse.item_cid = this.concernement.id;
-              reponse.item_type = 'reponse';
-              reponse.is_symbol_instance = true;
-              this.setBesoinPaperId(reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
-              g.addChild(reponse)
+              let paper_reponse;
+              let paper_reponse_id = this.concernement.besoins[i].reponses[j].paper_id;
+              if (update && paper_reponse_id) {
+                // console.log('paper_reponse_id', paper_reponse_id);
+                paper_reponse = this.paper_main_object.getItem({id: paper_reponse_id});
+                // console.log('REUSING reponse paper item', paper_reponse);
+              } else {
+                // console.log('CREATING reponse paper item', paper_reponse_id, this.concernement.besoins[i]);
+                // debugger;
+                paper_reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
+                paper_reponse.scale(this.scale);
+                paper_reponse.item_id = this.concernement.besoins[i].reponses[j].id;
+                paper_reponse.item_bid = this.concernement.besoins[i].id;
+                paper_reponse.item_cid = this.concernement.id;
+                paper_reponse.item_type = 'reponse';
+                paper_reponse.is_symbol_instance = true;
+                this.setBesoinPaperId(paper_reponse.id, this.cid, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
+                g.addChild(paper_reponse);
+              }
+
+              if (!paper_reponse) {
+                console.warn('no paper_reponse item created nor found')
+                return;
+              }
+              paper_reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
             }
           }
         }
@@ -1535,6 +1586,37 @@ export default {
 
       return g;
     },
+    // resetPaperBesoinReponsePos(){
+    //   console.log(`resetPaperBesoinReponsePos cid:${this.concernement.id}`);
+    //   let res_fields = ['qui','quoi','ou','avec'];
+    //   let arc = (360 / 16);               // unit arc
+    //   let r = (this.ray * this.scale)/5;  // unit ray
+
+    //   for (let i = 0; i < this.concernement.besoins.length; i++) {
+    //     let start_a = arc * i;
+    //     let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
+
+    //     for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
+    //       let res_a = start_a + res_arc * (j+1); // angle for response line
+        
+    //       for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled
+        
+    //         if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled
+    //           && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled
+    //           ){
+    //             let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
+    //             let rx = Math.cos(res_a*(Math.PI/180)) * rr;
+    //             let ry = Math.sin(res_a*(Math.PI/180)) * rr;
+    //             let paper_id = this.concernement.besoins[i].reponses[j].paper_id;
+    //             console.log('paper_id', paper_id);
+    //             let paper_reponse = this.paper_main_object.getItem({id: paper_id});
+    //             console.log('paper_reponse', paper_reponse);
+    //             paper_reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
+    //           }
+    //       }
+    //     }
+    //   }
+    // },
     setPaperDoleances(){
       let g = new paper.Group({
         pivot: new paper.Point({x:0,y:0}),

src/components/contents/PuissanceAgir.vue

@@ -336,24 +336,86 @@ export default {
                 :path="hover_elmt && hover_elmt.type === 'reponse' && hover_elmt.id === reponse.id ? rhombus_path : rhombusoutline_path"
                  />
                 Ressource</label>
-              <section v-if="reponse.qui">
+              <section v-if="reponse.qui || reponse.can_update">
                 <label for="reponse-qui">Qui</label>
-                <p name="reponse-qui" v-html="reponse.qui" />
+                <!-- <p name="reponse-qui" v-html="reponse.qui" /> -->
+                <ContentEditable 
+                  tag="p"
+                  :value="reponse.qui"
+                  :html="true"
+                  :contenteditable="reponse.can_update"
+                  placeholder="Ajouter un élement de réponse."
+                  :data="{
+                    entitytype: 'node',
+                    bundle: 'reponse',
+                    id: reponse.id,
+                    field: {field_name: 'field_qui', value:'value'}
+                  }"
+                  v-on:updated="reloadBesoins" />
               </section>
-              <section v-if="reponse.quoi">
+              <section v-if="reponse.quoi || reponse.can_update">
                 <label for="reponse-quoi">Quoi</label>
-                <p name="reponse-quoi" v-html="reponse.quoi" />
+                <!-- <p name="reponse-quoi" v-html="reponse.quoi" /> -->
+                <ContentEditable 
+                  tag="p"
+                  :value="reponse.quoi"
+                  :html="true"
+                  :contenteditable="reponse.can_update"
+                  placeholder="Ajouter un élement de réponse."
+                  :data="{
+                    entitytype: 'node',
+                    bundle: 'reponse',
+                    id: reponse.id,
+                    field: {field_name: 'field_quoi', value:'value'}
+                  }"
+                  v-on:updated="reloadBesoins" />
               </section>    
-              <section v-if="reponse.ou">
+              <section v-if="reponse.ou || reponse.can_update">
                 <label for="reponse-ou">Où</label>
-                <p name="reponse-ou" v-html="reponse.ou" />
+                <!-- <p name="reponse-ou" v-html="reponse.ou" /> -->
+                <ContentEditable 
+                  tag="p"
+                  :value="reponse.ou"
+                  :html="true"
+                  :contenteditable="reponse.can_update"
+                  placeholder="Ajouter un élement de réponse."
+                  :data="{
+                    entitytype: 'node',
+                    bundle: 'reponse',
+                    id: reponse.id,
+                    field: {field_name: 'field_ou', value:'value'}
+                  }"
+                  v-on:updated="reloadBesoins" />
               </section>    
-              <section v-if="reponse.avec">
+              <section v-if="reponse.avec || reponse.can_update">
                 <label for="reponse-avec">Avec</label>
-                <p name="reponse-avec" v-html="reponse.avec" />
+                <!-- <p name="reponse-avec" v-html="reponse.avec" /> -->
+                <ContentEditable 
+                  tag="p"
+                  :value="reponse.avec"
+                  :html="true"
+                  :contenteditable="reponse.can_update"
+                  placeholder="Ajouter un élement de réponse."
+                  :data="{
+                    entitytype: 'node',
+                    bundle: 'reponse',
+                    id: reponse.id,
+                    field: {field_name: 'field_avec', value:'value'}
+                  }"
+                  v-on:updated="reloadBesoins" />
               </section>    
             </li>      
-          
+            <li>
+              <template v-if="isloggedin && !opened_concernement.can_update">
+              <div v-if="!reloading_concernements" @click="addRessource(besoin.id)" class="add-ressource-btn">
+                <span>Proposer une ressource</span>
+                <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+              </div>
+              <div v-else class="add-ressource-btn">
+                <div class="loading">Chargement</div>
+              </div>
+            </template>
+            </li>
           </ul>
           <!-- <a 
               v-if="isloggedin && !opened_concernement.can_update"
@@ -363,15 +425,7 @@ export default {
               class="contribute-link mdi mdi-pencil-plus">
                 <svg-icon type="mdi" :path="pencilplusoutline_path" /> contribuer à ce besoin
             </a> -->
-            <template v-if="isloggedin && !opened_concernement.can_update">
-              <div v-if="!reloading_concernements" @click="addRessource(besoin.id)" class="add-ressource-btn">
-                <span>Proposer une ressource</span>
-                <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
-              </div>
-              <div v-else class="add-ressource-btn">
-                <div class="loading">Chargement</div>
-              </div>
-            </template>
+            
       
         </li>
       </ul>

src/components/editable/ContentEditable.vue

@@ -23,7 +23,11 @@ export default {
       type : [Boolean, String],
       default : false,
     }, 
-    data: Object
+    data: Object,
+    placeholder : {
+      type : String,
+      default : 'Ajouter du texte'
+    }
   },
   emits: ['updated'],
   data(){
@@ -46,11 +50,11 @@ export default {
           buttons: ['anchor'],
         },
         placeholder: {
-        /* This example includes the default options for placeholder,
-           if nothing is passed this is what it used */
-        text: 'Ajouter du text',
-        hideOnClick: true
-    }
+          /* This example includes the default options for placeholder,
+            if nothing is passed this is what it used */
+          text: this.placeholder,
+          hideOnClick: true
+        }
       });
     }
   },
@@ -62,6 +66,7 @@ export default {
       console.log('onContentEditableFocusOut', e);
       // console.log('onContentEditableFocusOut data', this.data);
       let new_field_content = this.html ? e.target.innerHTML : e.target.innerText;
+      new_field_content = new_field_content.replace(/<br>$/g, '');
       // console.log('onContentEditableFocusOut', new_field_content);
       this.$emit('focusout');
       if (this.data) {

src/stores/concernements.js

@@ -17,6 +17,8 @@ import ConcernementFields from '@api/gql/concernement.fragment.gql'
 // import EntityFields from '@api/gql/entitydef.fragment.gql'
 
 import _assign from 'lodash/assign';
+import _assignIn from 'lodash/assignIn';
+import _merge from 'lodash/merge';
 
 
 export const ConcernementsStore = defineStore({
@@ -433,6 +435,7 @@ export const ConcernementsStore = defineStore({
                 ou
                 qui
                 quoi
+                can_update
               }
             }
           }
@@ -442,14 +445,24 @@ export const ConcernementsStore = defineStore({
         .then(({ data : { data  : { concernement } } }) => {
           console.log(`reloadConcernementBesoins loaded len: ${concernement.besoins.length}`, concernement)
           let tmp_conc = this.concernementsByID[concernement.id];
+          // tmp_conc.besoins.forEach(besoin => {
+          //   besoin.reponses.forEach(reponse => {
+          //     console.log(`BEFORE _merge besoin id:${besoin.id} reponse id:${reponse.id}, paper_id:${reponse.paper_id}`);
+          //   });
+          // });
           // merge old concernement besoins with new once
-          _assign(tmp_conc.besoins, concernement.besoins);
+          _merge(tmp_conc.besoins, concernement.besoins);
+          // tmp_conc.besoins.forEach(besoin => {
+          //   besoin.reponses.forEach(reponse => {
+          //     console.log(`AFTER _merge besoin id:${besoin.id} reponse id:${reponse.id}, paper_id:${reponse.paper_id}`);
+          //   });
+          // });
           tmp_conc.has_puissancedagir = tmp_conc.besoins.length ? true : false;
           // records and/or merge into general object
           tmp_conc.besoins.forEach(besoin => {
             besoin.cid = tmp_conc.id;
             if (this.allBesoinsById[besoin.id]) {
-              _assign(this.allBesoinsById[besoin.id], besoin);
+              _merge(this.allBesoinsById[besoin.id], besoin);
             }else{
               this.allBesoinsById[besoin.id] = besoin;
             }
@@ -659,6 +672,7 @@ export const ConcernementsStore = defineStore({
       this.opened_entite_id = id;
     },
     setBesoinPaperId(paper_id, cid, bid, rid){
+      console.log(`setBesoinPaperId paper_id: ${paper_id}, cid: ${cid}, bid: ${bid}, rid: ${rid}`);
           this.concernementsByID[cid].besoins.forEach((b,j) => {
             if(b.id === bid) {
               if (!rid) {
@@ -667,6 +681,7 @@ export const ConcernementsStore = defineStore({
                 this.concernementsByID[cid].besoins[j].reponses.forEach((r,k) => {
                   if (r.id === rid) {
                     this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
+                    console.log(`this.concernementsByID[${cid}].besoins[${j}].reponses[${k}].paper_id`, this.concernementsByID[cid].besoins[j].reponses[k].paper_id);
                   }
                 })
               }