Merge remote-tracking branch 'origin/111_exports_suite' into testing

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

@@ -0,0 +1,381 @@
+<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"
+                  @select="selectAction"
+                  @remove="unselectAction"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('action.placeholder')"
+                  label="text"
+                  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"
+                  @select="selectGoal"
+                  @remove="unselectGoal"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('goal.placeholder')"
+                  label="title"
+                  :custom-label="transTitle"
+                  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"
+                  @select="selectResult"
+                  @remove="unselectResult"
+                  :multiple="true"
+                  :close-on-select="false"
+                  :placeholder="$t('result.placeholder')"
+                  label="title"
+                  :custom-label="transTitle"
+                  track-by="id"
+                  :searchable="true"
+               ></VueMultiselect>
+         
+            </div>
+         </div>
+      </fieldset>
+   
+   </teleport>
+</template>
+
+<script>
+import VueMultiselect from 'vue-multiselect';
+import { getSocialActions, getGoalByAction, getResultByAction, getResultByGoal } from './api';
+
+export default {
+   name: "App",
+   components: {
+      VueMultiselect
+   },
+   i18n: {
+      messages: {
+         fr: {
+            action: {
+               label: 'Types d\'actions',
+               placeholder: 'Choisissez une ou plusieurs actions',
+            },
+            goal: {
+               label: 'Objectifs',
+               placeholder: 'Choisissez un ou plusieurs objectifs',
+            },
+            result: {
+               label: 'Résultats',
+               placeholder: 'Choisissez un ou plusieurs résultats',
+            }
+         }
+      }
+   },
+   data() {
+      return {
+         actions: {
+            options: [], // array with multiselect options
+            value: [],   // array with selected values
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_actionType'),
+         },
+         goals: {
+            options: [],
+            value: [],
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_goal'),
+         },
+         results: {
+            options: [],
+            value: [],
+            hiddenField: document.getElementById(
+               'export_filters_social_work_type_filter_form_result'),
+         },
+      }
+   },
+   computed: {
+      action: {
+         get() {
+            return this.actions.value;
+         },
+         set(value) {
+            this.actions.value = value;
+            this.rebuildHiddenFieldValues('actions');
+         }
+      },
+      goal: {
+         get() {
+            return this.goals.value;
+         },
+         set(value) {
+            this.goals.value = value;
+            this.rebuildHiddenFieldValues('goals');
+         }
+      },
+      result: {
+         get() {
+            return this.results.value;
+         },
+         set(value) {
+            this.results.value = value;
+            this.rebuildHiddenFieldValues('results');
+         }
+      },
+   },
+   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
+       */
+      selectAction(value) {
+         //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) => {
+               this.addElementInData('goals', response.results);
+               resolve();
+            })).catch;
+            getResultByAction(elem.id).then(response => new Promise((resolve, reject) => {
+               this.addElementInData('results', response.results);
+               resolve();
+            })).catch;
+         });
+      },
+      
+      unselectAction(value) {
+         //console.log('----'); console.log('unselect action', value.id);
+         getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.goals.options, this.goals.value ] = this.removeElementInData('goals', response.results);
+            resolve();
+         })).catch;
+         getResultByAction(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.results.options, this.results.value ] = this.removeElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+   
+      /**
+       * Select/unselect in Goal Multiselect
+       * @param value
+       */
+      selectGoal(value) {
+         //console.log('----'); console.log('select goal', value.id);
+         getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
+            this.addElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+      
+      unselectGoal(value) {
+         //console.log('----'); console.log('unselect goal', value.id);
+         getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
+            [ this.results.options, this.results.value ] = 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);
+      },
+   
+      /**
+       * Choose parent action will involve retaining the "children" actions.
+       * @param value
+       * @return array
+       */
+      getChildrensFromParent(value) {
+         if (null === value.parent) {
+            let excludeParent = this.actions.options.filter(o => o.parent !== null);
+            let children = excludeParent.filter(o => o.parent.id === value.id);
+            //console.log("get childrens", children.map(e => e.id));
+            return children;
+         }
+         return [];
+      },
+   
+      /**
+       * Add response elements in data target
+       * @param target string -> 'actions', 'goals' or 'results'
+       * @param response array of objects with fetch results
+       */
+      addElementInData(target, response) {
+         let data = this[target];
+         let dump = [];
+         response.forEach(elem => {
+            let found = data.options.some(e => e.id === elem.id);
+            if (!found) {
+               data.options.push(elem);
+               dump.push(elem.id);
+            }
+         })
+         if (dump.length > 0) {
+            //console.log('push ' + dump.length + ' elems in', target, dump);
+         }
+      },
+   
+      /**
+       * Remove response elements from data target
+       * @param target string -> 'actions', 'goals' or 'results'
+       * @param response array of objects with fetch results
+       * @returns data.<target>.options
+       */
+      removeElementInData(target, response) {
+         let data = this[target];
+         let dump = [];
+         response.forEach(elem => {
+            let found = data.options.some(e => e.id === elem.id);
+            if (found) {
+               data.options = data.options.filter(e => e.id !== elem.id);
+               dump.push(elem.id);
+               
+               this.removeSelectedElement(target, elem);
+            }
+         })
+         if (dump.length > 0) {
+            //console.log('remove ' + dump.length + ' elems from ' + target + ' options', dump);
+         }
+         return [ data.options, data.value ];
+      },
+   
+      /**
+       *
+       * @param target
+       * @param elements
+       */
+      addSelectedElement(target, elements) {
+         let data = this[target];
+         let dump = [];
+         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);
+            }
+         });
+         if (dump.length > 0) {
+            //console.log('add ' + dump.length + ' selected elems in', target, dump);
+         }
+      },
+   
+      /**
+       * Remove element from selected and from hiddenField
+       * @param target
+       * @param elem
+       */
+      removeSelectedElement(target, elem) {
+         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.
+       * @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');
+         }
+      },
+   
+      /**
+       * Rebuild values serie (string) in target HiddenField
+       * @param target
+       */
+      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) {
+         let array = string ? string.split(',') : [];
+         array.push(id.toString());
+         let str = array.join();
+         return str;
+      },
+      
+      transTitle ({ title }) {
+         return title.fr //TODO multilang
+      },
+   },
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,41 @@
+import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods';
+
+const getSocialActions = () => fetchResults(
+    '/api/1.0/person/social/social-action.json', {
+        item_per_page: 200
+    }
+);
+
+const getGoalByAction = (id) => {
+    let url = `/api/1.0/person/social-work/goal/by-social-action/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+const getResultByAction = (id) => {
+    let url = `/api/1.0/person/social-work/result/by-social-action/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+const getResultByGoal = (id) => {
+    let url = `/api/1.0/person/social-work/result/by-goal/${id}.json`;
+    return fetch(url)
+        .then(response => {
+            if (response.ok) { return response.json(); }
+            throw Error('Error with request resource response');
+        });
+};
+
+export {
+    getSocialActions,
+    getGoalByAction,
+    getResultByAction,
+    getResultByGoal,
+}

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

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import App from './App.vue';
+
+const i18n = _createI18n({});
+
+const app = createApp({
+    template: `<app></app>`,
+})
+.use(i18n)
+.component('app', App)
+.mount('#export_export')
+;