admin front create new doleance

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;  
       }
@@ -1659,23 +1680,55 @@ 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;
+      }
+
       this.concernement.doleances.forEach((d) => {
-        g.addChild(this.setPaperDoleanceSteps(d))
+        let doleance_group;
+        if (update) {
+          doleance_group = this.paper_main_object.children['doleances'][`doleance_${d.id}`];
+          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 = [
         [