152 lines
3.5 KiB
Vue
152 lines
3.5 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 VueDatePicker from '@vuepic/vue-datepicker';
|
|
import '@vuepic/vue-datepicker/dist/main.css';
|
|
|
|
export default {
|
|
props: {
|
|
tag: String,
|
|
value: String,
|
|
end_value : {
|
|
type : String,
|
|
default : null
|
|
},
|
|
contenteditable : {
|
|
type : [Boolean, String],
|
|
default : true
|
|
},
|
|
mode : {
|
|
type : String,
|
|
default : null
|
|
},
|
|
data: Object,
|
|
placeholder : {
|
|
type : String,
|
|
default : 'Choisir une date'
|
|
}
|
|
},
|
|
emits: ['updated'],
|
|
data(){
|
|
return {
|
|
date: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(UserStore,['csrf_token']),
|
|
attrs() {
|
|
// console.log(`this.mode: ${this.mode}`);
|
|
let a = {};
|
|
if (this.mode && this.mode === 'range') {
|
|
a.range = true;
|
|
}
|
|
return a;
|
|
}
|
|
},
|
|
created () {
|
|
console.log('DateEditable created');
|
|
this.initDateValues();
|
|
},
|
|
// updated() {
|
|
// console.log('DateEditable updated');
|
|
// this.initDateValues();
|
|
// },
|
|
mounted () {
|
|
},
|
|
beforeUnmount() {
|
|
},
|
|
watch: {
|
|
value (n, o) {
|
|
console.log(`dateEditable watch value n, o`, n, o);
|
|
|
|
if(n !== o){
|
|
this.initDateValues();
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(ConcernementsStore, ['reloadConcernements']),
|
|
initDateValues(){
|
|
if (this.value) {
|
|
if (this.mode && this.mode === 'range') {
|
|
this.date = [this.value, this.end_value]
|
|
}else{
|
|
this.date = this.value;
|
|
}
|
|
} else {
|
|
this.date = null;
|
|
}
|
|
},
|
|
onDateSelected(modeldata){
|
|
console.log('onDateSelected, modeldata', modeldata);
|
|
this.save();
|
|
},
|
|
save(){
|
|
console.log('save csrf_token', this.csrf_token);
|
|
console.log('save this.data', this.data);
|
|
console.log('save this.date', this.date);
|
|
|
|
let params = {
|
|
type: this.data.bundle,
|
|
};
|
|
|
|
if (this.data.entitytype === 'node') {
|
|
params.nid = [{"value":this.data.id}];
|
|
} else {
|
|
params.id = [{"value":this.data.id}];
|
|
}
|
|
|
|
if (this.mode && this.mode === "range") {
|
|
params[this.data.field.field_name] = [{
|
|
value: this.date[0],
|
|
end_value: this.date[1]
|
|
}]
|
|
} else {
|
|
params[this.data.field.field_name] = [{
|
|
value: this.date
|
|
}]
|
|
}
|
|
|
|
const configs = {
|
|
headers: {'X-CSRF-Token': this.csrf_token}
|
|
};
|
|
|
|
// url is not the same between nodes and others entities
|
|
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
|
// call the api
|
|
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
|
.then(({ data }) => {
|
|
console.log('user REST post node data', data)
|
|
this.$emit('updated');
|
|
})
|
|
.catch(error => {
|
|
console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
|
|
Promise.reject(error)
|
|
})
|
|
}
|
|
},
|
|
components: {
|
|
VueDatePicker
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueDatePicker
|
|
v-if="contenteditable"
|
|
v-model="date"
|
|
model-type="yyyy-MM-dd"
|
|
format="dd-MM-yyyy"
|
|
:enable-time-picker="false"
|
|
:clearable="false"
|
|
@update:model-value="onDateSelected"
|
|
:placeholder="placeholder"
|
|
v-bind="attrs"/>
|
|
<span v-else class="date">{{ value }}</span>
|
|
|
|
</template> |