ouatterrir-app/src/components/editable/ImageEditable.vue

<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 ContentEditable from '@components/editable/ContentEditable.vue';

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiTrashCanOutline } from '@mdi/js';
import { mdiImagePlus } from '@mdi/js';

export default {
  props: {
    can_update: Boolean,
    image: Object,
    data: Object
  },
  emits: ['updated'],
  data(){
    return {
      mdiTrashCanOutline_path: mdiTrashCanOutline,
      mdiImagePlus_path: mdiImagePlus
    }
  },
  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,
    ContentEditable
  }
}
</script>

<template>
  <div class="editable-image">
    <!-- with img -->
    <template v-if="image.length">
      <figure>
        <img :src="image[0].url" :alt="image[0].alt"/>
        <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" />
      </div>
    </template>
    <!-- with out img -->
    <template v-else-if="can_update">
      <div @click="addImage" class="btn">
        <svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
        <!-- <span>ajouter une image</span> -->
      </div>
      <input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
    </template>
    
  </div>
</template>