cercle po: adresse doleance & reception et traitement OK

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/api/gql/concernement.fragment.gql

@@ -103,6 +103,8 @@ fragment ConcernementFields on Concernement {
     leprobleme
     lenquete
     groupesinterets {
+      id
+      revision_id
       date {
         end
         start
@@ -115,10 +117,12 @@ fragment ConcernementFields on Concernement {
     date_adresse {
       start
     }
-    entite_addresse_doleance
-    comment_ennonce_doleance
-    aqui_addresse_doleance
+    entite_adresse_doleance
+    comment_enonce_doleance
+    a_qui_adresse_doleance
     reception_traitement {
+      id
+      revision_id
       date {
         end
         start
@@ -135,6 +139,8 @@ fragment ConcernementFields on Concernement {
     entites_decisionnaires
     decision_formule
     mise_en_oeuvre_decision {
+      id
+      revision_id
       date {
         end
         start
@@ -151,6 +157,8 @@ fragment ConcernementFields on Concernement {
     aqui_adresse_decision
     comment_formule_decision
     receptions_et_applications {
+      id
+      revision_id
       date {
         end
         start

src/assets/main.scss

@@ -607,55 +607,23 @@ div.loading{
               margin: 0 0 0.5em 0;
             }
           }
+          >section{
+            margin:1em 0 0;
+          }
           label{
-            margin:0;
+            margin:1em 0 0;
             padding:0 0 0.5em 0;
           }
-          p{
+          p:not(.editable):not(.html-editable){
             margin:0;
             padding:0 0 0.5em 0;
           }
           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;
+          }
         }
 
       }
@@ -721,7 +689,7 @@ div.loading{
         font-weight: 400;
         font-size: 1.1em;
       }
-      section>div, p{
+      section>div:not(.btn), p{
         // font-size: 1em;
         // font-weight: 300;
         // line-height: 1.40;
@@ -1090,15 +1058,18 @@ div.loading{
   }
 }
 
-*[contenteditable="true"] {
+*[contenteditable="true"],
+div.dp__main{
   background: #eee;
   border: #eee 2px solid;
   border-radius: 5px;
   $p:0.3em;
   padding:$p;
-  margin:0 0 0 -$p;
+  margin:0.5em 0 0 -$p;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
+  box-shadow: 2px 2px 4px #bbb;
+  width: calc(100% - 4px);
   &:focus{
     outline: none;
     border: #01ffe2 2px solid;
@@ -1329,3 +1300,16 @@ div.add-besoin-btn{
 div.add-ressource-btn{
   @include add-btn();
 }
+
+div.add-cerclepo-btn,
+div.add-groupinteret-btn,
+div.add-adressedoleance-btn,
+div.add-receptiontraitement-btn{
+  @include add-btn();
+  margin: 0 0 1em;
+  height: 60px;
+  line-height: 50px;
+  >svg{
+    width:30px; height:30px;
+  }
+}

src/components/ConcernementMapItem.vue

@@ -377,6 +377,24 @@ export default {
       },
       deep: true
     },
+    'concernement.doleances': {
+      handler (n, o) {
+        console.log(`${this.id} watch concernement.doleances o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer") {
+          this.setPaperDoleances(true); // true for update=true
+        }
+      },
+      deep: true
+    },
+    'concernement.doleances.length': {
+      handler (n, o){
+        console.log(`${this.id} watch concernement.doleances.length o, n`, o, n);
+        if (this.is_open && this.map_mode === "doleancer" && o != null && n !== o) {
+          this.resetPaperContents();
+        }
+      },
+      deep: true
+    },
     wait: {
       handler (n, o){
         // when we are reloading entites par exemple
@@ -915,9 +933,12 @@ export default {
             this.paper_main_object.addChild(this.setPaperAgissantes());
             break;
           case 'doleancer':
-            this.addNewPaperSymbolInstance('doleance_bg');
-            this.paper_main_object.addChild(this.setPaperDoleances());
+            if (this.concernement.doleances.length) {
+              this.addNewPaperSymbolInstance('doleance_bg');
+              this.paper_main_object.addChild(this.setPaperDoleances());
+            }
             break;
+            
         }
         this.paperContentsIsSet = true;  
       }
@@ -1106,6 +1127,8 @@ export default {
       
     },
     setPaperEntites(){
+      console.log(`setPaperEntites ${this.cid}`);
+      
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites'
@@ -1120,6 +1143,7 @@ export default {
       // for (let i = 0; i < this.entites.length; i++) {
       for (let i = 0; i < this.concernement.revisions_byid[this.active_revision].entites.length; i++) {
         let entite = this.concernement.revisions_byid[this.active_revision].entites[i];
+        console.log('entite', entite);
         
         if (!entite.active && !this.concernement.can_update) {
           continue;
@@ -1144,7 +1168,7 @@ export default {
           }
         } 
 
-        // console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
+        console.log(`item_type: ${item_type}, symbol_name: ${symbol_name}`);
 
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
@@ -1157,6 +1181,7 @@ export default {
         instance.is_symbol_instance = true;
         g.addChild(instance);
         // instance.bringToFront();
+        console.log('instance', instance);
         
         if (entite.entite && entite.entite.title) {
           let pad = 2;
@@ -1209,6 +1234,8 @@ export default {
           instance.label_item = label;
         }
       }
+      console.log(`g`, g);
+      
       return g;
     },
     setPaperEntitesSuperposees(){
@@ -1653,23 +1680,60 @@ export default {
     //     }
     //   }
     // },
-    setPaperDoleances(){
-      let g = new paper.Group({
-        pivot: new paper.Point({x:0,y:0}),
-        name: `doleances`
-      });
+    setPaperDoleances(update){
+      console.log(`setPaperDoleances cid:${this.concernement.id}, update: ${update}`);
+      let g;
+      if (update) {
+        g = this.paper_main_object.children['doleances'];
+        console.log('REUSING doleances group', g);
+      } else{
+        g = new paper.Group({
+          pivot: new paper.Point({x:0,y:0}),
+          name: `doleances`
+        });
+      }
+
+      if (!g) {
+        console.warn('no doleances group created nor found')
+        return;
+      }
+      console.log('doleances main group: ', g);
+      
       this.concernement.doleances.forEach((d) => {
-        g.addChild(this.setPaperDoleanceSteps(d))
+        console.log('each doleance, d:', d);
+        
+        let doleance_group;
+        console.log('is update: ', update);
+        if (update) {
+          doleance_group = g.children[`doleance_${d.id}`];
+          console.log('doleance_group', doleance_group);
+          if (doleance_group) {
+            this.setPaperDoleanceSteps(d, doleance_group);
+          }else{
+            g.addChild(this.setPaperDoleanceSteps(d));  
+          }
+        }else{
+          g.addChild(this.setPaperDoleanceSteps(d));
+        }
       });
       return g;
     },
-    setPaperDoleanceSteps(doleance){
-      let g = new paper.Group({
-        pivot: new paper.Point({x:0,y:0}),
-        name: `doleance_${doleance.id}`,
-        doleance_id: doleance.id,
-        visible: false
-      });
+    setPaperDoleanceSteps(doleance, groupToUpdate){
+      console.log(`setPaperDoleanceSteps doleance`, doleance);
+      console.log(`setPaperDoleanceSteps groupToUpdate`, groupToUpdate);
+      
+      let g;
+      if (groupToUpdate) {
+        g = groupToUpdate;
+        g.removeChildren();
+      } else {
+        g = new paper.Group({
+          pivot: new paper.Point({x:0,y:0}),
+          name: `doleance_${doleance.id}`,
+          doleance_id: doleance.id,
+          visible: false
+        });
+      }
       // let doleance = this.concernement.doleances[0];
       let all_fields = [
         [
@@ -1685,9 +1749,9 @@ export default {
           }
         ],
         [
-          'entite_addresse_doleance',
-          'comment_ennonce_doleance',
-          'aqui_addresse_doleance',
+          'entite_adresse_doleance',
+          'comment_enonce_doleance',
+          'a_qui_adresse_doleance',
           {
             fieldname: 'reception_traitement',
             fields: [
@@ -1906,7 +1970,7 @@ export default {
       
 
       // adresse de la doleance
-      if (doleance.entite_addresse_doleance || doleance.aqui_addresse_doleance || doleance.comment_ennonce_doleance) {
+      if (doleance.entite_adresse_doleance || doleance.a_qui_adresse_doleance || doleance.comment_enonce_doleance) {
         g.addChild(new paper.Path.Circle({
           center: [this.pos.x - r, this.pos.y],
           radius: 3 * this.scale,

src/components/MapConcernements.vue

@@ -1614,8 +1614,9 @@ export default {
       <li>
         <a 
           title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance, active: map_mode === 'doleancer'}"
+          :class="{ active: map_mode === 'doleancer'}"
         >
+        <!-- disabled: opened_concernement && !opened_concernement.has_doleance,  -->
           <span class="icon doleancer"/> <span class="label"> cercle politique</span>
         </a>
       </li>

src/components/contents/TerrainDeVie.vue

@@ -308,7 +308,7 @@ export default {
             resolve(data)
           })
           .catch(error => {
-            console.warn(`Issue with post new paragraph source`, error)
+            console.warn(`Issue with post new node cercle_politique`, error)
             reject(error)
           })
       })

src/components/editable/DateEditable.vue

@@ -0,0 +1,152 @@
+<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>

src/stores/concernements.js

@@ -389,7 +389,7 @@ export const ConcernementsStore = defineStore({
             // records and/or merge into general object and on conernement entitites_byid
             tmp_conc.entites.forEach(entite => {
               entite.cid = tmp_conc.id;
-              // if(entite.entite){
+              if(entite.entite){
                 if (this.allEntitesById[entite.entite.id]) {
                   _assign(this.allEntitesById[entite.entite.id], entite);
                 }else{
@@ -400,7 +400,7 @@ export const ConcernementsStore = defineStore({
                 }else{
                   tmp_conc.entites_byid[entite.entite.id] = entite;
                 }
-              // }
+              }
             });
             // add and/or merge revisions
             tmp_conc.active_revision = concernement.revision_id;
@@ -546,6 +546,127 @@ export const ConcernementsStore = defineStore({
           })
       });
     },
+    reloadConcernementCerclePol(nid){
+      // let tmp_conc = this.concernementsByID[nid];
+      console.log(`reloadConcernementCerclePol nid: ${nid} ${Math.random()*10000}`);
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          concernement(id:${nid}) {
+            id
+            doleances {
+              id
+              author
+              bundle
+              path
+              title
+              uuid
+              #1
+              date_leprobleme {
+                start
+              }
+              leprobleme
+              lenquete
+              groupesinterets {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                groupe_interets
+                accorder_interets
+                formuler
+              }
+              #2
+              date_adresse {
+                start
+              }
+              entite_adresse_doleance
+              comment_enonce_doleance
+              a_qui_adresse_doleance
+              reception_traitement {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                entite_adressee
+                doleance_formulee
+                traite_doleance
+                entite_recoit_doleance
+              }
+              #3
+              date_decision {
+                start
+              }
+              entites_decisionnaires
+              decision_formule
+              mise_en_oeuvre_decision {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                entite_adresse_decision
+                formule_decision
+                entite_metenoeuvre_decisio
+              }
+              #4
+              date_application {
+                start
+              }
+              entite_adresse_application
+              aqui_adresse_decision
+              comment_formule_decision
+              receptions_et_applications {
+                id
+                revision_id
+                date {
+                  end
+                  start
+                }
+                applique_decision
+                formule_decision_applic
+                entite_recoit_decision
+              }
+              probleme_initial_resolu
+              oui_nouvelle_situation
+              non_adresse_doleance
+            }
+          }
+        }
+        `
+        // console.log('ast', ast);
+        GQL.post('', { query: print(ast) })
+          .then(({ data : { data  : { concernement } } }) => {
+            console.log(`reloadConcernementCerclePol loaded len: ${concernement.doleances.length} revision: ${concernement.revision_id}`, concernement)
+            let tmp_conc = this.concernementsByID[concernement.id];
+            // merge old concernement entites with new once
+            _assign(tmp_conc.doleances, concernement.doleances);
+
+            // redefine opened doleance if needed
+            tmp_conc.has_doleance = tmp_conc.doleances.length ? true : false;
+            if (tmp_conc.has_doleance) {
+              // console.log('concernement has doleance', tmp_conc.doleances);
+              if (!tmp_conc.opened_doleance) {
+                tmp_conc.opened_doleance = {
+                  id: tmp_conc.doleances[0].id
+                };
+              }
+            }
+
+            // resolve
+            resolve(concernement);
+          })
+          .catch(error => {
+            console.warn('Issue with reloadConcernementCerclePol', error)
+            reject(error);
+            Promise.reject(error)
+          })
+      });
+    },
     loadContentTypeDefinition () {
       const body = {
         query: `
@@ -706,7 +827,7 @@ export const ConcernementsStore = defineStore({
       // })
     },
     setOpenedDoleance(cid, did){
-      console.log(`setOpenedDoleance(${cid}, ${did})`, cid, did);
+      console.log(`setOpenedDoleance cid:${cid}, did:${did})`, cid, did);
       this.concernementsByID[cid].opened_doleance = {id: did};
       // console.log('this.opened_concernement.opened_doleance', this.opened_concernement.opened_doleance);
     },