admin front doleance DateEditable
This commit is contained in:
parent
a87d7ac5ff
commit
86bd454791
26
package-lock.json
generated
26
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@mdi/js": "^7.2.96",
|
||||
"@tweenjs/tween.js": "^21.0.0",
|
||||
"@vojtechlanka/vue-simple-suggest": "^2.0.6",
|
||||
"@vuepic/vue-datepicker": "^11.0.1",
|
||||
"fabric": "^6.0.0-beta7",
|
||||
"granim": "^2.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
@ -939,6 +940,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
|
||||
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker": {
|
||||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.1.tgz",
|
||||
"integrity": "sha512-xtGbgZAftBiU1H8pwM54vOCutLzEHsHiolRuDn+memTjqpfzT0x1Ml1tykJ53PLvdkCTyb6sB+1muv5Gsd4nQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"date-fns": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
@ -1505,6 +1521,16 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"@mdi/js": "^7.2.96",
|
||||
"@tweenjs/tween.js": "^21.0.0",
|
||||
"@vojtechlanka/vue-simple-suggest": "^2.0.6",
|
||||
"@vuepic/vue-datepicker": "^11.0.1",
|
||||
"fabric": "^6.0.0-beta7",
|
||||
"granim": "^2.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
|
||||
@ -607,6 +607,9 @@ div.loading{
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
>section{
|
||||
margin:1em 0 0;
|
||||
}
|
||||
label{
|
||||
margin:0;
|
||||
padding:0 0 0.5em 0;
|
||||
@ -618,44 +621,9 @@ div.loading{
|
||||
ul{
|
||||
// padding:0 0 0 1em;
|
||||
}
|
||||
|
||||
// .v-select{
|
||||
// input.vs__search{
|
||||
// display: none;
|
||||
// }
|
||||
// div.vs__dropdown-toggle{
|
||||
// border-radius: 0;
|
||||
// border: none;
|
||||
// }
|
||||
// div.vs__selected-options{
|
||||
// padding: 0;
|
||||
// span.vs__selected{
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// font-weight: 400;
|
||||
// font-size: 1.323em;
|
||||
// color:inherit;
|
||||
// line-height: 1.15;
|
||||
// }
|
||||
// }
|
||||
// ul.vs__dropdown-menu{
|
||||
// border-radius: 0;
|
||||
// border: none;
|
||||
// li.vs__dropdown-option{
|
||||
// white-space:normal;
|
||||
// padding:1em 1em 0 1em;
|
||||
// &:last-of-type{
|
||||
// padding:1em;
|
||||
// }
|
||||
// color: #aaa;
|
||||
// transition: color 0.2s ease-in-out;
|
||||
// &.vs__dropdown-option--highlight{
|
||||
// color:#000;
|
||||
// background-color: #fff;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.leprobleme-date{
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ import { mdiStickerPlusOutline } from '@mdi/js';
|
||||
|
||||
|
||||
import ContentEditable from '@components/editable/ContentEditable.vue';
|
||||
import DateEditable from '@components/editable/DateEditable.vue';
|
||||
// import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
|
||||
// import SelectEditable from '@components/editable/SelectEditable.vue';
|
||||
|
||||
@ -230,7 +231,8 @@ export default {
|
||||
components: {
|
||||
CartoucheLayout,
|
||||
SvgIcon,
|
||||
ContentEditable
|
||||
ContentEditable,
|
||||
DateEditable,
|
||||
// CheckboxEditable,
|
||||
// SelectEditable
|
||||
}
|
||||
@ -265,7 +267,18 @@ export default {
|
||||
v-on:updated="reloadConcernementCerclePol(cid)"/>
|
||||
<section
|
||||
v-if="opened_concernement.opened_doleance.field === 'leprobleme' || !opened_concernement.opened_doleance.field">
|
||||
<span class="date">{{ doleance.date_leprobleme.start }}</span>
|
||||
<!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
|
||||
<DateEditable
|
||||
:value="doleance.date_leprobleme.start"
|
||||
class="leprobleme-date"
|
||||
:contenteditable="opened_concernement.can_update"
|
||||
:data="{
|
||||
entitytype: 'node',
|
||||
bundle: 'cercle_politique',
|
||||
id: doleance.id,
|
||||
field: {field_name: 'field_date_leprobleme', value:'value'}
|
||||
}"
|
||||
v-on:updated="reloadConcernementCerclePol(cid)"/>
|
||||
<h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
|
||||
<ContentEditable
|
||||
tag="h4"
|
||||
|
||||
106
src/components/editable/DateEditable.vue
Normal file
106
src/components/editable/DateEditable.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<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,
|
||||
contenteditable : {
|
||||
type : [Boolean, String],
|
||||
default : true,
|
||||
},
|
||||
data: Object,
|
||||
placeholder : {
|
||||
type : String,
|
||||
default : 'Ajouter du texte'
|
||||
}
|
||||
},
|
||||
emits: ['updated'],
|
||||
data(){
|
||||
return {
|
||||
date: null,
|
||||
// spellcheck: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(UserStore,['csrf_token']),
|
||||
},
|
||||
created () {
|
||||
console.log('DateEditable created');
|
||||
this.date = this.value;
|
||||
},
|
||||
mounted () {
|
||||
// if (this.contenteditable) {
|
||||
// }
|
||||
},
|
||||
beforeUnmount() {
|
||||
},
|
||||
watch: {
|
||||
date (n, o) {
|
||||
console.log(`datEditable watch date n, o`, n, o);
|
||||
|
||||
if(n !== o){
|
||||
this.save();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore, ['reloadConcernements']),
|
||||
save(){
|
||||
console.log('save csrf_token', this.csrf_token);
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
[this.data.field.field_name]: [{[this.data.field.value]: this.date}]
|
||||
};
|
||||
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}
|
||||
};
|
||||
|
||||
// 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"/>
|
||||
<span v-else class="date">{{ value }}</span>
|
||||
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user