App.vue: improve logs to understand algo

src/Bundle/ChillMainBundle/Resources/public/vuejs/FormActionGoalResult/App.vue

@@ -54,6 +54,8 @@
                <VueMultiselect
                   v-model="result"
                   :options="results.options"
+                  @select="selectResult"
+                  @remove="unselectResult"
                   :multiple="true"
                   :close-on-select="false"
                   :placeholder="$t('result.placeholder')"
@@ -154,6 +156,9 @@ export default {
       this.actions.hiddenField.value = '';
       this.goals.hiddenField.value = '';
       this.results.hiddenField.value = '';
+   
+      console.log(this.actions.hiddenField, this.goals.hiddenField, this.results.hiddenField);
+      // TODO choisir une action parente impliquera de retenir les actions "enfants".
    },
    methods: {
       async getSocialActionsList() {
@@ -165,29 +170,25 @@ export default {
        * @param value
        */
       selectAction(value) {
-         console.log('selectAction', value);
+         console.log('----'); console.log('select action', value.id);
          getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Goals', response);
             this.addElementInData('goals', response.results);
             resolve();
          })).catch;
          getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Results', response);
             this.addElementInData('results', response.results);
             resolve();
          })).catch;
       },
       
       unselectAction(value) {
-         console.log('unselectAction', value);
+         console.log('----'); console.log('unselect action', value.id);
          getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Goals', response);
+            [ this.goals.options, this.goals.value ] = this.removeElementInData('goals', response.results);
-            this.goals.options = this.removeElementInData('goals', response.results);
             resolve();
          })).catch;
          getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Results', response);
+            [ this.results.options, this.results.value ] = this.removeElementInData('results', response.results);
-            this.results.options = this.removeElementInData('results', response.results);
             resolve();
          })).catch;
       },
@@ -197,23 +198,33 @@ export default {
        * @param value
        */
       selectGoal(value) {
-         console.log('selectGoal', value);
+         console.log('----'); console.log('select goal', value.id);
          getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Results', response);
             this.addElementInData('results', response.results);
             resolve();
          })).catch;
       },
       
       unselectGoal(value) {
-         console.log('unselectGoal', value);
+         console.log('----'); console.log('unselect goal', value.id);
          getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
-            //console.log('fetch Results', response);
+            [ this.results.options, this.results.value ] = this.removeElementInData('results', response.results);
-            this.results.options = this.removeElementInData('results', response.results);
             resolve();
          })).catch;
       },
    
+      /**
+       * Select/unselect in Result Multiselect
+       * @param value
+       */
+      selectResult(value) {
+         console.log('----'); console.log('select result', value.id);
+      },
+      
+      unselectResult(value) {
+         console.log('----'); console.log('unselect result', value.id);
+      },
+   
       /**
        * Add response elements in data target
        * @param target string -> 'actions', 'goals' or 'results'
@@ -221,13 +232,17 @@ export default {
        */
       addElementInData(target, response) {
          let data = this[target];
+         let dump = [];
          response.forEach(elem => {
             let found = data.options.some(e => e.id === elem.id);
             if (!found) {
-               console.log('push elem in', target, elem.id);
                data.options.push(elem);
+               dump.push(elem.id);
             }
          })
+         if (dump.length > 0) {
+            console.log('push ' + dump.length + ' elems in', target, dump);
+         }
       },
    
       /**
@@ -238,28 +253,48 @@ export default {
        */
       removeElementInData(target, response) {
          let data = this[target];
+         let dump = [];
          response.forEach(elem => {
             let found = data.options.some(e => e.id === elem.id);
             if (found) {
-               console.log('remove elem from', target, elem.id);
                data.options = data.options.filter(e => e.id !== elem.id);
+               dump.push(elem.id);
                
                /// remove too from selected and from hiddenField
                let selected = data.value.some(e => e.id === elem.id);
                if (selected) {
+                  
                   // remove from selected
                   data.value = data.value.filter(e => e.id !== elem.id);
+                  console.log('remove ' + elem.id + ' from selected ' + target);
+                  
                   // remove from hiddenField
                   this.rebuildHiddenFieldValues(target);
-                  // remove should be recursive; here it works but is not fine
+                  
-                  if (target === 'goals') {  // <==== TODO improve loop
+                  // in any cases, remove should be recursive
-                     this.unselectGoal(elem);
+                  this.unselectToNextField(target, elem);
-                  }
                }
                ///
             }
          })
-         return data.options;
+         if (dump.length > 0) {
+            console.log('remove ' + dump.length + ' elems from ' + target + ' options', dump);
+         }
+         return [ data.options, data.value ];
+      },
+   
+      /**
+       * When unselect Action, it could remove elements in goals multiselect.
+       * In that case, we have to unselect Goal to remove elements in results too.
+       * @param target
+       * @param elem
+       */
+      unselectToNextField(target, elem) {
+         if (target === 'goals') {
+            console.log('!!!! target is goal: unselect goal', elem.id);
+            this.unselectGoal(elem);
+            console.log('!!!! done');
+         }
       },
    
       /**
@@ -268,10 +303,12 @@ export default {
        */
       rebuildHiddenFieldValues(target) {
          let data = this[target];
+         console.log('rebuild hiddenFields ' + target + ' values :');
          data.hiddenField.value = ''; // reset
          data.value.forEach(elem => {
             data.hiddenField.value = this.addIdToValue(data.hiddenField.value, elem.id);
          })
+         console.log(data.hiddenField);
       },
       
       addIdToValue(string, id) {