admin front: create new besoin on puissance d'agir is ok

src/assets/main.scss

@@ -1280,7 +1280,7 @@ section.editable-proximites{
   }
 }
 
-div.add-entite-btn{
+@mixin add-btn{
   border: #eee 2px solid;
   background-color: #eee;
   border-radius: 5px;
@@ -1303,4 +1303,12 @@ div.add-entite-btn{
   &:hover{
     border: #01ffe2 2px solid;
   }
+}
+
+div.add-entite-btn{
+  @include add-btn();
+}
+
+div.add-besoin-btn{
+  @include add-btn();
 }

src/components/ConcernementMapItem.vue

@@ -289,6 +289,10 @@ export default {
         //   // be aware that here o & n opened_doleance are already the same :( !?
         //   console.log(`concernementMapItem watch concernement o.opened_doleance:${o.opened_doleance.id}, n.opened_doleance:${n.opened_doleance.id}`);
         // }
+
+        if (this.is_open && this.map_mode === "puissancedagir") {
+          this.setPaperContents();
+        }
       },
       deep: true
     },

src/components/MapConcernements.vue

@@ -1526,7 +1526,9 @@ export default {
       <li>
         <a 
           title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir, active: map_mode === 'puissancedagir'}"
+          :class="{ 
+            disabled: opened_concernement && !opened_concernement.has_puissancedagir && !opened_concernement.can_update,
+            active: map_mode === 'puissancedagir'}"
         >
           <span class="icon puissancedagir"/> <span class="label"> puissance d'agir</span>
         </a>

src/components/contents/PuissanceAgir.vue

@@ -5,6 +5,8 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
 import { CommonStore } from '@/stores/common'
 
+import REST from '@api/rest-axios'
+
 import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
 
 import SvgIcon from '@jamescoyle/vue-icon';
@@ -14,6 +16,7 @@ import { mdiPencilPlus } from '@mdi/js';
 import { mdiPencilPlusOutline } from '@mdi/js';
 import { mdiRhombus } from '@mdi/js';
 import { mdiRhombusOutline } from '@mdi/js';
+import { mdiStickerPlusOutline } from '@mdi/js';
 
 
 export default {
@@ -26,11 +29,13 @@ export default {
       pencilplus_path: mdiPencilPlus,
       pencilplusoutline_path: mdiPencilPlusOutline,
       rhombus_path: mdiRhombus,
-      rhombusoutline_path: mdiRhombusOutline
+      rhombusoutline_path: mdiRhombusOutline,
+      mdiStickerPlusOutline_path: mdiStickerPlusOutline,
+      reloading_concernements: false,
     }
   },
   computed: {
-    ...mapState(UserStore,['isloggedin']),
+    ...mapState(UserStore,['isloggedin', 'csrf_token']),
     ...mapState(ConcernementsStore,['opened_concernement',
                                     'ct_concernement',
                                     'ct_entite'
@@ -45,6 +50,7 @@ export default {
   },
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
+    ...mapActions(ConcernementsStore, ['reloadConcernementBesoins']),
     onClickBesoin(id){
       console.log("onClickBesoin", id);
       this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
@@ -61,7 +67,89 @@ export default {
         bid: rid ? bid : null,
         no_popup: true
       });
-    }
+    },
+    addBesoin(e){
+      console.log('add besoin');
+      this.reloading_concernements = true;
+      // 1 create besoin node
+      this.createBesoinNode()
+        .then((besoin) => {
+          console.log('createBesoinNode then node', besoin);
+          // 2 record new besoin in concernement's field_besoin 
+          this.recordConcernementBesoinField(besoin)
+            .then((concernement) => {
+              console.log('concernement', concernement);
+              // reload the map item
+              this.reloadConcernementBesoins(concernement.nid[0].value)
+                .then(() => {
+                  this.reloading_concernements = false;
+                });
+            })
+        })
+    },
+    createBesoinNode(){
+      return new Promise((resolve, reject) => {
+        // 1 create entite node
+        const params_node_besoin = {
+          type: 'besoin',
+          body: [{value:'Description à personaliser'}],
+          field_confidentialite: [{value:'confidentialite_public'}]
+        };
+        
+        const configs = {
+          headers: {'X-CSRF-Token': this.csrf_token}
+        };
+
+        REST.post(`/node?_format=json`, params_node_besoin, configs)
+          .then(({ data }) => {
+            console.log('REST post new node besoin', data);
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with post new node besoin`, error)
+            reject(error)
+          })
+      })
+    },
+    recordConcernementBesoinField(new_besoin){
+      return new Promise((resolve, reject) => {
+        // 3 record concernement field_entite
+
+        // get all the field_entite values, we don't want to ersae everything
+        let besoins = [];
+        this.opened_concernement.besoins.forEach((besoin) =>{
+          besoins.push({
+            target_id: besoin.id
+          })
+        })
+        // add the new field value
+        besoins.push({
+          target_id: new_besoin.nid[0].value
+        })
+        console.log('besoins', besoins);
+        
+        const params_node = {
+          type: 'concernement',
+          nid: [{value: this.cid}],
+          'field_besoin': besoins
+        };
+        
+        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 entite new field_entite', data)
+            resolve(data)
+          })
+          .catch(error => {
+            console.warn(`Issue with patch node entite field_entite`, error)
+            reject(error)
+          })
+        // resolve('test')
+      })
+    },
   },
   components: {
     CartoucheLayout,
@@ -76,7 +164,9 @@ export default {
     <!-- <template v-slot:header>
     </template> -->
 
+    
     <template v-slot:main>
+
       <ul class="besoins">
         <li
           v-for="besoin in opened_concernement.besoins"
@@ -156,6 +246,15 @@ export default {
 
     <template v-slot:footer>
     
+      <template v-if="opened_concernement.can_update">
+        <div v-if="!reloading_concernements" @click="addBesoin" class="add-besoin-btn">
+          <span>Ajouter un besoin</span>
+          <svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
+        </div>
+        <div v-else class="add-besoin-btn">
+          <div class="loading">Chargement</div>
+        </div>
+      </template>
     </template>
 
   </CartoucheLayout>

src/stores/concernements.js

@@ -187,8 +187,11 @@ export const ConcernementsStore = defineStore({
 
         // puissance d'agir
         concernement.has_puissancedagir = concernement.besoins.length ? true : false;
+        // console.log('concernement.besoins', concernement.besoins);
         concernement.besoins.forEach(besoin => {
-          this.allBesoinsById[besoin.id] = besoin;
+          if (besoin) {
+            this.allBesoinsById[besoin.id] = besoin;
+          }
         });
 
         // doleance
@@ -369,7 +372,7 @@ export const ConcernementsStore = defineStore({
             let tmp_conc = this.concernementsByID[concernement.id];
             // merge old concernement entites with new once
             _assign(tmp_conc.entites, concernement.entites);
-            // records and/or merge into general object and on cpnernement entitites_byid
+            // records and/or merge into general object and on conernement entitites_byid
             tmp_conc.entites.forEach(entite => {
               entite.cid = tmp_conc.id;
               if (this.allEntitesById[entite.entite.id]) {
@@ -410,6 +413,55 @@ export const ConcernementsStore = defineStore({
           })
       })
     },
+    reloadConcernementBesoins(nid){
+      let tmp_conc = this.concernementsByID[nid];
+      console.log(`reloadConcernementEntites len: ${tmp_conc.entites.length} revision: ${tmp_conc.revision_id} nid: ${nid}`);
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernement(id:${nid}) {
+            id
+            besoins {
+              author
+              description
+              id
+              index
+              reponses {
+                author
+                avec
+                id
+                ou
+                qui
+                quoi
+              }
+            }
+          }
+        }
+        `
+        GQL.post('', { query: print(ast) })
+        .then(({ data : { data  : { concernement } } }) => {
+          console.log(`reloadConcernementBesoins loaded len: ${concernement.besoins.length}`, concernement)
+          let tmp_conc = this.concernementsByID[concernement.id];
+          // merge old concernement besoins with new once
+          _assign(tmp_conc.besoins, concernement.besoins);
+          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);
+            }else{
+              this.allBesoinsById[besoin.id] = besoin;
+            }
+          });
+          resolve(concernement);
+        })
+        .catch(error => {
+          console.warn('Issue with reloadConcernementBesoins', error)
+          reject(error);
+          Promise.reject(error)
+        })
+      });
+    },
     reloadProximites (entite_id) {
       console.log(`reloadProximites src_id:${entite_id}`);
       console.log('this.allEntitesById[entite_id]', this.allEntitesById[entite_id]);