122 lines
3.3 KiB
Vue
122 lines
3.3 KiB
Vue
<script>
|
|
|
|
import REST from '@api/rest-axios'
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { ConcernementsStore } from '@stores/concernements'
|
|
import { UserStore } from '@stores/user'
|
|
|
|
|
|
import MediumEditor from 'medium-editor-x'
|
|
import 'medium-editor-x/dist/css/medium-editor.css'
|
|
import 'medium-editor-x/dist/css/themes/beagle.css'
|
|
|
|
export default {
|
|
props: {
|
|
tag: String,
|
|
value: String,
|
|
contenteditable : {
|
|
type : [Boolean, String],
|
|
default : true,
|
|
},
|
|
html : {
|
|
type : [Boolean, String],
|
|
default : false,
|
|
},
|
|
data: Object
|
|
},
|
|
emits: ['updated'],
|
|
data(){
|
|
return {
|
|
editor: null,
|
|
spellcheck: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(UserStore,['csrf_token']),
|
|
},
|
|
created () {
|
|
console.log('ContentEditable created');
|
|
},
|
|
mounted () {
|
|
this.editor = new MediumEditor(this.$refs.html_editable, {
|
|
toolbar: {
|
|
allowMultiParagraphSelection: false,
|
|
buttons: ['anchor'],
|
|
}
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
},
|
|
methods: {
|
|
...mapActions(ConcernementsStore, ['reloadConcernements']),
|
|
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,
|
|
[this.data.field.field_name]: [{[this.data.field.value]: content}]
|
|
};
|
|
if (this.data.entitytype === 'node') {
|
|
params.nid = [{"value":this.data.id}];
|
|
} else {
|
|
params.id = [{"value":this.data.id}];
|
|
}
|
|
// 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}
|
|
};
|
|
|
|
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
|
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
|
.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)
|
|
Promise.reject(error)
|
|
})
|
|
}
|
|
},
|
|
components: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
v-if="!html"
|
|
:is="tag"
|
|
:contenteditable="contenteditable"
|
|
:spellcheck="speelcheck"
|
|
@focusout="onContentEditableFocusOut"
|
|
>{{ value }}</component>
|
|
<component
|
|
v-else
|
|
:is="tag"
|
|
class="html-editable"
|
|
ref="html_editable"
|
|
v-html="value"
|
|
:contenteditable="contenteditable"
|
|
:spellcheck="speelcheck"
|
|
@focusout="onContentEditableFocusOut"
|
|
/>
|
|
</template> |