admin front doleance DateEditable

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

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

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;
           }
-          
+          .leprobleme-date{
-          // .v-select{
+            margin: 0.5em 0;
-          //   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;
-          //       }
-          //     }
-          //   }
-          // }
         }
 
       }

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)"/>
           <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"

src/components/editable/DateEditable.vue

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