Merge branch 'export_vue_multiselect' into 111_exports_suite

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

@@ -0,0 +1,295 @@
+<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
+                  name="actionType"
+                  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
+                  name="goal"
+                  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
+                  name="result"
+                  v-model="result"
+                  :options="results.options"
+                  :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 = '';
+   },
+   methods: {
+      async getSocialActionsList() {
+         this.actions.options = await getSocialActions();
+      },
+   
+      /**
+       * Select/unselect in Action Multiselect
+       * @param value
+       */
+      selectAction(value) {
+         console.log('selectAction', value);
+         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);
+         getGoalByAction(value.id).then(response => new Promise((resolve, reject) => {
+            //console.log('fetch Goals', response);
+            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.removeElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+   
+      /**
+       * Select/unselect in Goal Multiselect
+       * @param value
+       */
+      selectGoal(value) {
+         console.log('selectGoal', value);
+         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);
+         getResultByGoal(value.id).then(response => new Promise((resolve, reject) => {
+            //console.log('fetch Results', response);
+            this.results.options = this.removeElementInData('results', response.results);
+            resolve();
+         })).catch;
+      },
+   
+      /**
+       * 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];
+         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);
+            }
+         })
+      },
+   
+      /**
+       * 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];
+         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);
+               
+               /// 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);
+                  // remove from hiddenField
+                  this.rebuildHiddenFieldValues(target);
+                  // remove should be recursive; here it works but is not fine
+                  if (target === 'goals') {  // <==== TODO improve loop
+                     this.unselectGoal(elem);
+                  }
+               }
+               ///
+            }
+         })
+         return data.options;
+      },
+   
+      /**
+       * Rebuild values serie (string) in target HiddenField
+       * @param target
+       */
+      rebuildHiddenFieldValues(target) {
+         let data = this[target];
+         data.hiddenField.value = ''; // reset
+         data.value.forEach(elem => {
+            data.hiddenField.value = this.addIdToValue(data.hiddenField.value, elem.id);
+         })
+      },
+      
+      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/ChillMainBundle/Resources/public/vuejs/FormActionGoalResult/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/ChillMainBundle/Resources/public/vuejs/FormActionGoalResult/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')
+;

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

@@ -22,6 +22,9 @@
 
 {% block js %}
     {{ encore_entry_script_tags('page_export') }}
+    {% if export_alias == 'count_social_work_actions' %}
+        {{ encore_entry_script_tags('vue_form_action_goal_result') }}
+    {% endif %}
 {% endblock js %}
 
 {% block content  %}