entite image is now editable, add, delete. remains the alt field

src/components/editable/CheckboxEditable.vue

@@ -3,15 +3,17 @@
 import REST from '@api/rest-axios'
 
 import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
 
 export default {
   props: {
+    checked: Boolean,
     label: String, 
     data: Object
   },
-  // emits: ['returned'],
+  emits: ['updated'],
   data(){
     return {
       
@@ -21,12 +23,13 @@ export default {
     ...mapState(UserStore,['csrf_token']),
   },
   created () {
-    console.log('ContentEditable created');
+    console.log('CheckboxEditable created');
   },
   mounted () {
 
   },
   methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
     onInput(e){
       // console.log('onInput checkbox e', e);
       let checked  = e.target.checked;
@@ -47,6 +50,8 @@ export default {
         .then(({ data }) => {
           console.log('user REST post node data', data)
           // TODO if success update the data in pinia 
+          // this.reloadConcernements();
+          this.$emit('updated');
         })
         .catch(error => {
           console.warn(`Issue with patch node ${this.data.bundle}`, error)
@@ -59,6 +64,6 @@ export default {
 
 <template>
   <section class="editable">
-    <label><input type="checkbox" @input="onInput"> {{ label }}</label>
+    <label><input type="checkbox" :checked="checked" @input="onInput"> {{ label }}</label>
   </section>
 </template>

src/components/editable/ContentEditable.vue

@@ -3,6 +3,7 @@
 import REST from '@api/rest-axios'
 
 import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
 
@@ -20,7 +21,7 @@ export default {
     }, 
     data: Object
   },
-  // emits: ['returned'],
+  emits: ['updated'],
   data(){
     return {
       
@@ -36,6 +37,7 @@ export default {
 
   },
   methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
     onContentEditableFocusOut(e){
       console.log('onContentEditableFocusOut', e);
       // console.log('onContentEditableFocusOut data', this.data);
@@ -57,6 +59,8 @@ export default {
         .then(({ data }) => {
           console.log('user REST post node data', data)
           // TODO if success update the data in pinia 
+          // this.reloadConcernements();
+          this.$emit('updated');
         })
         .catch(error => {
           console.warn(`Issue with patch node ${this.data.bundle}`, error)

src/components/editable/ImageEditable.vue

@@ -0,0 +1,136 @@
+<script>
+
+import JSONAPI from '@api/json-axios'
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@stores/user'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiTrashCanOutline } from '@mdi/js';
+
+export default {
+  props: {
+    image: Object,
+    data: Object
+  },
+  emits: ['updated'],
+  data(){
+    return {
+      mdiTrashCanOutline_path: mdiTrashCanOutline
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ImageEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
+    addImage(e){
+      console.log('addImage', this.$refs);
+      this.$refs.image_input.click();
+    },
+    onInput(e){
+      console.log('onFileInput', e);
+      let file = e.target.files[0];
+      console.log('onFileInput file', file);
+      this.save(file);
+    },
+    save(file){
+      const configs = {
+        headers: {
+          'X-CSRF-Token': this.csrf_token,
+          'Content-Type': 'application/octet-stream',
+          'Content-Disposition': `file; filename="${file.name}"`,
+        },
+      };
+
+      JSONAPI.post(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, file, configs)
+        .then(({ data : { data } }) => {
+          console.log('jsonapi post image', data)
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn('Issue with jsonapi post image', error)
+          Promise.reject(error)
+        })
+    },
+    onDeleteImg(e){
+      console.log('onDeleteImg', e);
+
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: null}
+      };
+      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 patch node ${this.data.bundle} ${this.data.field}`, data)
+          // TODO if success update the data in pinia 
+          // this.reloadConcernements();
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn(`Issue with patch node ${this.data.bundle} ${this.data.field}`, error)
+          Promise.reject(error)
+        })
+
+      // 405 JSONAPI operation not allowed, don't know why
+      
+      // const configs = {
+      //   headers: {
+      //     'X-CSRF-Token': this.csrf_token,
+      //     'Content-Type': 'application/octet-stream',
+      //     'Content-Disposition': `file; filename=""`,
+      //   },
+      // };
+
+      // JSONAPI.delete(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, {}, configs)
+      //   .then(({ data : { data } }) => {
+      //     console.log('jsonapi delete image', data)
+      //     this.$emit('updated');
+      //   })
+      //   .catch(error => {
+      //     console.warn('Issue with jsonapi post image', error)
+      //     Promise.reject(error)
+      //   })
+      // console.log('save csrf_token', this.csrf_token);
+
+    }
+  },
+  components: {
+    SvgIcon,
+  }
+}
+</script>
+
+<template>
+  <div class="editable-image">
+    <!-- with img -->
+    <template v-if="image.length">
+      <figure>
+        <img :src="image[0].url" :alt="image[0].alt"/>
+        <figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
+      </figure>
+      <svg-icon type="mdi" :path="mdiTrashCanOutline_path" @click="onDeleteImg" />
+    </template>
+    <!-- with out img -->
+    <template v-else>
+      <div @click="addImage" class="btn">
+
+        <span>ajouter une image</span>
+      </div>
+      <input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
+    </template>
+    
+  </div>
+</template>