image alt field

src/api/gql/entite.fragment.gql

@@ -9,12 +9,14 @@ fragment EntiteFields on Entite {
   image {
     alt
     url
+    id
   }
   sources {
     description
     images {
       alt
       url
+      id
     }
     liens {
       title

src/components/contents/Entite.vue

@@ -82,7 +82,7 @@ export default {
             entitytype: 'node',
             bundle: 'entite',
             nid: this.entite.id,
-            field: 'field_action'
+            field: {field_name: 'field_action', value:'value'}
           }"
           v-on:updated="reloadEntite" />
           
@@ -98,7 +98,7 @@ export default {
             entitytype: 'node',
             bundle: 'entite',
             nid: this.entite.id,
-            field: 'field_menace_maintien'
+            field: {field_name: 'field_menace_maintien', value:'value'}
           }"
           v-on:updated="reloadEntite" />
         

src/components/contents/TerrainDeVie.vue

@@ -248,7 +248,7 @@ export default {
             entitytype: 'node',
             bundle: 'entite',
             nid: this.entite.id,
-            field: 'title'
+            field: {field_name: 'title', value:'value'}
           }" />
 
         <CheckboxEditable 
@@ -297,7 +297,7 @@ export default {
                 entitytype: 'node',
                 bundle: 'concernement',
                 nid: this.concernement.id,
-                field: 'field_description'
+                field: {field_name: 'field_description', value:'value'}
               }" />
 
         </section>
@@ -313,7 +313,7 @@ export default {
                 entitytype: 'node',
                 bundle: 'concernement',
                 nid: this.concernement.id,
-                field: 'field_caillou'
+                field: {field_name: 'field_caillou', value:'value'}
               }" />
 
         </section>

src/components/editable/ContentEditable.vue

@@ -50,12 +50,21 @@ export default {
       const params = {
         type: this.data.bundle,
         nid: [{"value":this.data.nid}],
-        [this.data.field]: {value: content}
+        [this.data.field.field_name]: [{[this.data.field.value]: content}]
       };
+      // we need additional values for image alt for example
+      // console.log('additional_values', this.data.field.additional_values);
+      if (this.data.field.additional_values) {
+        for (const key in this.data.field.additional_values) {
+          if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
+            params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
+          }
+        }
+      }
       const configs = {
         headers: {'X-CSRF-Token': this.csrf_token}
       };
-      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+      REST.patch(`/${this.data.entitytype}/${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 

src/components/editable/ImageEditable.vue

@@ -7,6 +7,8 @@ import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
+import ContentEditable from '@components/editable/ContentEditable.vue';
+
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiTrashCanOutline } from '@mdi/js';
 import { mdiImagePlus } from '@mdi/js';
@@ -112,6 +114,7 @@ export default {
   },
   components: {
     SvgIcon,
+    ContentEditable
   }
 }
 </script>
@@ -122,7 +125,23 @@ export default {
     <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>
+        <figcaption 
+          :contenteditable="can_update"
+          v-if="image[0].alt || can_update"
+        >
+          {{ image[0].alt }}
+        </figcaption>
+        <ContentEditable 
+          tag="figcaption"
+          :value="image[0].alt"
+          :contenteditable="can_update"
+          :data="{
+            entitytype: data.entitytype,
+            bundle: data.bundle,
+            nid: data.nid,
+            field: {field_name: data.field, value:'alt', additional_values:{target_id:image[0].id}}
+          }" />
+
       </figure>
       <div v-if="can_update" @click="onDeleteImg" class="delete-btn">
         <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />

src/components/layout/CartoucheLayout.vue

@@ -77,7 +77,7 @@ export default {
           entitytype: 'node',
           bundle: 'concernement',
           nid: this.concernement.id,
-          field: 'title'
+          field: {field_name: 'title', value:'value'}
         }" />