diff --git a/package-lock.json b/package-lock.json index 4179bd8..780d26c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 867a646..7b19d7b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/main.scss b/src/assets/main.scss index 4f8e370..19ac377 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -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; + } } } diff --git a/src/components/contents/Doleancer.vue b/src/components/contents/Doleancer.vue index 91d29ef..5e8a02a 100644 --- a/src/components/contents/Doleancer.vue +++ b/src/components/contents/Doleancer.vue @@ -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)"/>
- {{ doleance.date_leprobleme.start }} + +
{{ ct_cercle_politique.field_le_probleme.label }}
+ +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 + } +} + + + \ No newline at end of file