can patch node from editablecontent fields

src/components/ConcernementMapItem.vue

@@ -1985,7 +1985,7 @@ export default {
       }.bind(this);
 
       this.paper_main_object.onMouseMove = function(event){
-        console.log(`onmousemove ${this.id}`, this.cartouch_is_opened);
+        // console.log(`onmousemove ${this.id}`, this.cartouch_is_opened);
 
         // prevent hover map item mouse event if cartouch is opened
         if (this.cartouch_is_opened && this.map_mode !== "superposition") return;
@@ -2068,7 +2068,7 @@ export default {
           }
 
           let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
-          console.log('move result', result);
+          // console.log('move result', result);
           if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
             console.log('move has result', result);
             let new_hover_elmt = {

src/components/contents/TerrainDeVie.vue

@@ -21,6 +21,8 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
 
+import ContentEditable from '@components/misc/ContentEditable.vue';
+
 export default {
   props: ['cid', 'eid'],
   data(){
@@ -206,13 +208,20 @@ export default {
       } else {
         this.headerreduced = false;
       }
+    },
+    onContentEditableFocusOut(e){
+      console.log('onContentEditableFocusOut', e);
+      let new_field_content = e.target.innerText;
+      console.log('onContentEditableFocusOut', new_field_content);
+      console.log('onContentEditableFocusOut this.concernement.title', this.concernement.title);
     }
   },
   components: {
     CartoucheLayout,
     Entite,
     VueSlider,
-    SvgIcon
+    SvgIcon,
+    ContentEditable
   }
 }
 
@@ -233,13 +242,36 @@ export default {
       <template v-if="!entite">
         <section v-if="concernement.description" class="description">
             <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
-            <p v-html="concernement.description"/>
-            <!-- <p>{{ concernement.description }}</p> -->
+            
+            <ContentEditable 
+              tag="p"
+              :value="concernement.description"
+              :html="true" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'concernement',
+                nid: this.concernement.id,
+                field: 'field_description'
+              }" />
+
         </section>
         <section v-if="concernement.caillou" class="caillou">
             <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
-            <!-- <p v-html="concernement.caillou"/> -->
-            <p>{{ concernement.caillou }}</p>
+            
+            <ContentEditable 
+              tag="p"
+              :value="concernement.caillou" 
+              :class="{ ellipsed: headerreduced }" 
+              :contenteditable="concernement.can_update"
+              :data="{
+                entitytype: 'node',
+                bundle: 'concernement',
+                nid: this.concernement.id,
+                field: 'field_caillou'
+              }" />
+              
         </section>
       </template>
 

src/components/layout/CartoucheLayout.vue

@@ -6,6 +6,8 @@ import { ConcernementsStore } from '@stores/concernements'
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiHeadphones } from '@mdi/js';
 
+import ContentEditable from '@components/misc/ContentEditable.vue';
+
 export default {
   props: ['cid'],
   emits: ['main_scrolled'],
@@ -19,6 +21,7 @@ export default {
   created () {
     console.log('Cartouch layout created', this.cid);
     this.concernement = this.concernementsByID[this.cid];
+    console.log('can_update', this.concernement.can_update);
   },
   mounted () {
     // console.log('cartouche layout mounted', this);
@@ -44,16 +47,18 @@ export default {
         console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
         if (n) {
           this.concernement = this.concernementsByID[n];
+          console.log('can_update', this.concernement.can_update);
         }
       },
       deep: true
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore,['setMapMode'])
+    ...mapActions(ConcernementsStore,['setMapMode']),
   },
   components: {
-    SvgIcon
+    SvgIcon,
+    ContentEditable
   }
 }
 </script>
@@ -62,7 +67,20 @@ export default {
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
       <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
-      <h2 :class="{ ellipsed: headerreduced }">{{ concernement.title }}</h2>
+      
+      <ContentEditable 
+        tag="h2"
+        :value="concernement.title" 
+        :class="{ ellipsed: headerreduced }" 
+        :contenteditable="concernement.can_update"
+        :data="{
+          entitytype: 'node',
+          bundle: 'concernement',
+          nid: this.concernement.id,
+          field: 'title'
+        }" />
+
+
       <!-- <nav class="icons">
         <ul>
           <li v-if="concernement.has_recit" >

src/components/misc/ContentEditable.vue

@@ -0,0 +1,95 @@
+<script>
+
+import REST from '@api/rest-axios'
+// import JSONAPI from '@api/json-axios'
+// import qs from 'querystring-es3'
+
+// import { print } from 'graphql/language/printer'
+// import gql from 'graphql-tag'
+// import GQL from '@api/graphql-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { UserStore } from '@stores/user'
+
+
+export default {
+  props: {
+    tag: String, 
+    value: String, 
+    contenteditable : {
+      type : [Boolean, String],
+      default : true,
+    },
+    html : {
+      type : [Boolean, String],
+      default : false,
+    }, 
+    data: Object
+  },
+  // emits: ['returned'],
+  data(){
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ContentEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    onContentEditableFocusOut(e){
+      console.log('onContentEditableFocusOut', e);
+      // console.log('onContentEditableFocusOut data', this.data);
+      let new_field_content = this.html ? e.target.innerHTML : e.target.innerText;
+      // console.log('onContentEditableFocusOut', new_field_content);
+      this.save(new_field_content)
+    },
+    save(content){
+      console.log('save csrf_token', this.csrf_token);
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: content}
+      };
+      const configs = {
+        headers: {
+          'X-CSRF-Token': this.csrf_token,
+          // Authorization: `Bearer ${this.csrf_token}`,
+          // 'customheader': "bobobo"
+        }
+      };
+      console.log('REST', REST);
+      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log('user REST post node data', data)
+          // TODO if success update the data in pinia 
+        })
+        .catch(error => {
+          console.warn('Issue with post node', error)
+          Promise.reject(error)
+        })
+    }
+  },
+}
+</script>
+
+<template>
+  <component
+    v-if="!html" 
+    :is="tag"
+    :contenteditable="contenteditable"
+    @focusout="onContentEditableFocusOut"
+  >{{ value }}</component>
+  <component
+    v-else
+    :is="tag"
+    v-html="value"
+    :contenteditable="contenteditable"
+    @focusout="onContentEditableFocusOut"
+  />
+</template>