Export: fix loading of form for "filter action by type, goal and result"

.changes/unreleased/Fixed-20231116-105642.yaml

@@ -0,0 +1,5 @@
+kind: Fixed
+body: 'Export: fix loading of form for "filter action by type, goal and result"'
+time: 2023-11-16T10:56:42.771516508+01:00
+custom:
+  Issue: "208"

src/Bundle/ChillMainBundle/Resources/views/Export/new.html.twig

@@ -28,9 +28,7 @@
 {% block js %}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
     {{ encore_entry_script_tags('page_export') }}
-    {% if export_alias == 'count_social_work_actions' %}
+    {{ encore_entry_script_tags('vue_export_action_goal_result') }}
-        {{ encore_entry_script_tags('vue_export_action_goal_result') }}
-    {% endif %}
     {{ encore_entry_script_tags('mod_pick_rolling_date') }}
 {% endblock js %}
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/App.vue

@@ -1,11 +1,11 @@
 <template>
    <teleport to="#export_filters_social_work_type_filter_form">
-      
+
       <fieldset class="mb-3" id="actionType">
          <div class="row">
             <legend class="col-sm-4 col-form-label">{{ $t('action.label')}}</legend>
             <div class="col-sm-8">
-      
+
                <VueMultiselect
                   v-model="action"
                   :options="actions.options"
@@ -18,16 +18,16 @@
                   track-by="id"
                   :searchable="true"
                ></VueMultiselect>
-               
+
             </div>
          </div>
       </fieldset>
-   
+
       <fieldset class="mb-3" id="goal">
          <div class="row">
             <legend class="col-sm-4 col-form-label">{{ $t('goal.label')}}</legend>
             <div class="col-sm-8">
-            
+
                <VueMultiselect
                   v-model="goal"
                   :options="goals.options"
@@ -41,16 +41,16 @@
                   track-by="id"
                   :searchable="true"
                ></VueMultiselect>
-         
+
             </div>
          </div>
       </fieldset>
-   
+
       <fieldset class="mb-3" id="result">
          <div class="row">
             <legend class="col-sm-4 col-form-label">{{ $t('result.label')}}</legend>
             <div class="col-sm-8">
-            
+
                <VueMultiselect
                   v-model="result"
                   :options="results.options"
@@ -64,11 +64,11 @@
                   track-by="id"
                   :searchable="true"
                ></VueMultiselect>
-         
+
             </div>
          </div>
       </fieldset>
-   
+
    </teleport>
 </template>
 
@@ -152,18 +152,18 @@ export default {
    },
    mounted() {
       this.getSocialActionsList();
-      
+
       this.actions.hiddenField.value = '';
       this.goals.hiddenField.value = '';
       this.results.hiddenField.value = '';
-   
+
       //console.log(this.actions.hiddenField, this.goals.hiddenField, this.results.hiddenField);
    },
    methods: {
       async getSocialActionsList() {
          this.actions.options = await getSocialActions();
       },
-   
+
       /**
        * Select/unselect in Action Multiselect
        * @param value
@@ -172,7 +172,7 @@ export default {
          //console.log('----'); console.log('select action', value.id);
          let children = this.getChildrensFromParent(value);
          this.addSelectedElement('actions', children);
-         
+
          let parentAndChildren = [...[value], ...children];
          parentAndChildren.forEach(elem => {
             getGoalByAction(elem.id).then(response => new Promise((resolve, reject) => {
@@ -185,7 +185,7 @@ export default {
             })).catch;
          });
       },
-      
+
       unselectAction(value) {
          //console.log('----'); console.log('unselect action', value.id);
          getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
@@ -197,7 +197,7 @@ export default {
             resolve();
          })).catch;
       },
-   
+
       /**
        * Select/unselect in Goal Multiselect
        * @param value
@@ -209,7 +209,7 @@ export default {
             resolve();
          })).catch;
       },
-      
+
       unselectGoal(value) {
          //console.log('----'); console.log('unselect goal', value.id);
          getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
@@ -217,7 +217,7 @@ export default {
             resolve();
          })).catch;
       },
-   
+
       /**
        * Select/unselect in Result Multiselect
        * @param value
@@ -225,11 +225,11 @@ export default {
       selectResult(value) {
          //console.log('----'); console.log('select result', value.id);
       },
-      
+
       unselectResult(value) {
          //console.log('----'); console.log('unselect result', value.id);
       },
-   
+
       /**
        * Choose parent action will involve retaining the "children" actions.
        * @param value
@@ -244,7 +244,7 @@ export default {
          }
          return [];
       },
-   
+
       /**
        * Add response elements in data target
        * @param target string -> 'actions', 'goals' or 'results'
@@ -264,7 +264,7 @@ export default {
             //console.log('push ' + dump.length + ' elems in', target, dump);
          }
       },
-   
+
       /**
        * Remove response elements from data target
        * @param target string -> 'actions', 'goals' or 'results'
@@ -279,7 +279,7 @@ export default {
             if (found) {
                data.options = data.options.filter(e => e.id !== elem.id);
                dump.push(elem.id);
-               
+
                this.removeSelectedElement(target, elem);
             }
          })
@@ -288,7 +288,7 @@ export default {
          }
          return [ data.options, data.value ];
       },
-   
+
       /**
        *
        * @param target
@@ -300,10 +300,10 @@ export default {
          elements.forEach(elem => {
             let selected = data.value.some(e => e.id === elem.id);
             if (!selected) {
-               
+
                data.value.push(elem);
                dump.push(elem.id);
-   
+
                // add in hiddenField
                this.rebuildHiddenFieldValues(target);
             }
@@ -312,7 +312,7 @@ export default {
             //console.log('add ' + dump.length + ' selected elems in', target, dump);
          }
       },
-   
+
       /**
        * Remove element from selected and from hiddenField
        * @param target
@@ -322,19 +322,19 @@ export default {
          let data = this[target];
          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);
-      
+
             // in any cases, remove should be recursive
             this.unselectToNextField(target, elem);
          }
       },
-      
+
       /**
        * When unselect Action, it could remove elements in goals multiselect.
        * In that case, we have to unselect Goal to remove elements in results too.
@@ -348,7 +348,7 @@ export default {
             //console.log('!!!! done');
          }
       },
-   
+
       /**
        * Rebuild values serie (string) in target HiddenField
        * @param target
@@ -362,14 +362,14 @@ export default {
          })
          //console.log(data.hiddenField);
       },
-      
+
       addIdToValue(string, id) {
          let array = string ? string.split(',') : [];
          array.push(id.toString());
          let str = array.join();
          return str;
       },
-      
+
       transTitle ({ title }) {
          return title.fr //TODO multilang
       },
@@ -378,4 +378,4 @@ export default {
 </script>
 
 <style scoped>
-</style>
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/ExportFormActionGoalResult/index.js

@@ -2,12 +2,13 @@ import { createApp } from "vue";
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import App from './App.vue';
 
-const i18n = _createI18n({});
+if (null !== document.getElementById('export_filters_social_work_type_filter_enabled')) {
+    const i18n = _createI18n({});
 
-const app = createApp({
+    const app = createApp({
-    template: `<app></app>`,
+        template: `<app></app>`,
-})
+    })
-.use(i18n)
+        .use(i18n)
-.component('app', App)
+        .component('app', App)
-.mount('#export_export')
+        .mount('#export_export');
-;
+}