ouatterrir-app/src/components/misc/ContentEditable.vue

<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>