more editable fields, created CheckboxEditable

src/api/gql/entite.fragment.gql

@@ -1,7 +1,9 @@
 fragment EntiteFields on Entite {
+  id
   action
   menacemaintien
   title
+  can_update
   image {
     alt
     url

src/assets/main.scss

@@ -1042,24 +1042,17 @@ body{
   }
 }
 
-button.edit-btn,
+.editable{
-button.save-btn{
+  background: #eee;
-  background-color: #444;
+  border: #eee 2px solid;
-  color: #fff;
+  border-radius: 5px;
-  border: none;
+  padding: 0.3em!important;
-  border-radius: 6px;
+  margin-bottom: 1em;
-  $size: 25px;
+  font-size: 0.756em;
-  width: $size; height:$size;
+  &>*{ 
-  
+    display: inline-block!important;
-  display: inline;
+    padding: 0!important;
-
+    cursor: pointer;
-  >svg{
-    width:100%;
-    height:100%;
-  }
-  transition: all 0.2s ease-in-out;
-  &:hover{
-    cursor:pointer;
-    opacity: 0.7;
   }
+  
 }

src/components/contents/Entite.vue

@@ -3,6 +3,8 @@
 import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 
+import ContentEditable from '@components/editable/ContentEditable.vue';
+import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
 export default {
   props: ['concernement', 'entite', 'eid'],
   data() {
@@ -36,25 +38,63 @@ export default {
     
   },
   components: {
+    ContentEditable,
+    CheckboxEditable
   }
 }
 </script>
 
 <template>
   <section class="entite">
+    <!-- <section v-if="entite.can_update" class="editable">
+      <label><input type="checkbox" name="action"> Entité action</label>
+    </section> -->
+    <CheckboxEditable 
+      v-if="entite.can_update"
+      label="Entité action" 
+      :data="{
+        entitytype: 'node',
+        bundle: 'entite',
+        nid: this.entite.id,
+        field: 'field_entite_agissante'
+      }" />
+
     <section v-if="entite.image.length" class="image">
       <figure>
         <img :src="entite.image[0].url" :alt="entite.image[0].alt"/>
         <figcaption>{{ entite.image[0].alt }}</figcaption>
       </figure>
+      <!-- TODO admin add image -->
     </section>
     <section v-if="entite.action" class="action">
         <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
-        <p>{{ entite.action }}</p>
+        <!-- <p>{{ entite.action }}</p> -->
+        <ContentEditable 
+          tag="p"
+          :value="entite.action"
+          :contenteditable="entite.can_update"
+          :data="{
+            entitytype: 'node',
+            bundle: 'entite',
+            nid: this.entite.id,
+            field: 'field_action'
+          }" />
+          
     </section>
     <section v-if="entite.menacemaintien" class="menace-maintien">
         <label v-if="ct_entite">{{ field_menace_maintien_label }}</label>
-        <p>{{ entite.menacemaintien }}</p>
+        <!-- <p>{{ entite.menacemaintien }}</p> -->
+        <ContentEditable 
+          tag="p"
+          :value="entite.menacemaintien"
+          :contenteditable="entite.can_update"
+          :data="{
+            entitytype: 'node',
+            bundle: 'entite',
+            nid: this.entite.id,
+            field: 'field_menace_maintien'
+          }" />
+        
     </section>
     <!-- SOURCES (experiences vecues) -->
     <section

src/components/contents/TerrainDeVie.vue

@@ -21,7 +21,7 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
 
-import ContentEditable from '@components/misc/ContentEditable.vue';
+import ContentEditable from '@components/editable/ContentEditable.vue';
 
 export default {
   props: ['cid', 'eid'],
@@ -233,7 +233,20 @@ export default {
       <div class="entite">
         <!-- TODO update entite with revisions -->
         <label v-if="entite" class="menacemaintient" :class="{ hidden: headerreduced}">{{ entity_title_label }}</label>
-        <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
+        <!-- <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3> -->
+        <ContentEditable 
+          v-if="entite"
+          tag="h3"
+          :value="entite.title" 
+          class="entite-title" 
+          :contenteditable="entite.can_update"
+          :data="{
+            entitytype: 'node',
+            bundle: 'entite',
+            nid: this.entite.id,
+            field: 'title'
+          }" />
+          
       </div>
     </template>
     

src/components/editable/CheckboxEditable.vue

@@ -0,0 +1,64 @@
+<script>
+
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { UserStore } from '@stores/user'
+
+
+export default {
+  props: {
+    label: String, 
+    data: Object
+  },
+  // emits: ['returned'],
+  data(){
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ContentEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    onInput(e){
+      // console.log('onInput checkbox e', e);
+      let checked  = e.target.checked;
+      // console.log('onInput checkbox checked', checked);
+      this.save(checked)
+    },
+    save(checked){
+      // console.log('save csrf_token', this.csrf_token);
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: checked}
+      };
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+      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 patch node ${this.data.bundle}`, error)
+          Promise.reject(error)
+        })
+    }
+  },
+}
+</script>
+
+<template>
+  <section class="editable">
+    <label><input type="checkbox" @input="onInput"> {{ label }}</label>
+  </section>
+</template>

src/components/editable/ContentEditable.vue

@@ -1,12 +1,6 @@
 <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'
@@ -50,27 +44,22 @@ export default {
       this.save(new_field_content)
     },
     save(content){
-      console.log('save csrf_token', this.csrf_token);
+      // 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: {
+        headers: {'X-CSRF-Token': this.csrf_token}
-          '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)
+          console.warn(`Issue with patch node ${this.data.bundle}`, error)
           Promise.reject(error)
         })
     }

src/components/layout/CartoucheLayout.vue

@@ -6,7 +6,7 @@ import { ConcernementsStore } from '@stores/concernements'
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiHeadphones } from '@mdi/js';
 
-import ContentEditable from '@components/misc/ContentEditable.vue';
+import ContentEditable from '@components/editable/ContentEditable.vue';
 
 export default {
   props: ['cid'],