adapting vuejs form for accompanyingPeriodWork: include template for

specific evaluation
2025-08-22 07:33:50 +00:00 · 2021-12-03 20:09:24 +01:00
parent a86ba6faf5
commit 2d319fcc42
8 changed files with 224 additions and 139 deletions
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -196,7 +196,8 @@
      </div>

     <pick-template
-         entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+         entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+         :templates="this.templatesAvailablesForAction"
         :entityId="work.id"
         :beforeMove="beforeGenerateTemplate">
       <template v-slot:title>
@@ -329,6 +330,7 @@ export default {
         'thirdParties',
         'isPosting',
         'errors',
+         'templatesAvailablesForAction',
      ]),
      ...mapGetters([
         'hasResultsForAction',
@@ -397,7 +399,7 @@ export default {
         this.$store.commit('removeGoal', g);
      },
      addEvaluation(e) {
-         this.$store.commit('addEvaluation', e);
+         this.$store.dispatch('addEvaluation', e);
      },
      toggleAddEvaluation() {
         this.showAddEvaluation = !this.showAddEvaluation;
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -61,21 +61,18 @@
         </div>
      </div>

-      <div class="row mb-3">
-         <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
-         <div class="col-sm-8">
-            <div class="input-group">
-               <select class="form-select form-select-sm" v-model="template">
-                  <option disabled value="">{{ $t('evaluation_choose_a_template') }}</option>
-                  <template v-for="t in getTemplatesAvailaibleForEvaluation">
-                    <option  v-bind:value="t.id">{{ t.name.fr }}</option>
-                  </template>
-               </select>
-              <button v-if="canGenerate" class="btn btn-update btn-sm change-icon" type="button" @click="generateDocument"><i class="fa fa-fw fa-cog"></i></button>
-              <button v-else class="btn btn-update btn-sm change-icon" type="button" disabled ><i class="fa fa-fw fa-cog"></i></button>
-            </div>
-         </div>
-      </div>
+     <div class="row mb-3">
+       <pick-template
+           entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+           :id="evaluation.id"
+           :templates="getTemplatesAvailables"
+           :beforeMove="submitBeforeGenerate"
+       >
+         <template v-slot:title>
+           <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
+         </template>
+       </pick-template>
+     </div>
   </div>
 </div>
 </template>
@@ -85,6 +82,7 @@ import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import { mapGetters, mapState } from 'vuex';
+import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';

 const i18n = {
   messages: {
@@ -111,6 +109,7 @@ export default {
   props: ['evaluation'],
   components: {
      ckeditor: CKEditor.component,
+      PickTemplate,
   },
   i18n,
   data() {
@@ -120,12 +119,12 @@ export default {
      }
   },
   computed: {
-     ...mapGetters([
-        'getTemplatesAvailaibleForEvaluation'
-     ]),
     ...mapState([
       'isPosting'
     ]),
+      getTemplatesAvailables() {
+        return this.$store.getters.getTemplatesAvailablesForEvaluation(this.evaluation.evaluation);
+      },
      canGenerate() {
        return !this.$store.state.isPosting && this.template !== null;
      },
@@ -176,13 +175,14 @@ export default {
         })
         ;
      },
-      generateDocument() {
-        console.log('template picked', this.template);
-        this.$store.dispatch('generateDocument', { key: this.evaluation.key, templateId: this.template})
+      submitBeforeGenerate() {
+        const callback = (data) => {
+          let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
+          return Promise.resolve({entityId: evaluationId});
+        };
+
+        return this.$store.dispatch('submit', callback).catch(e => { console.log(e); throw e; });
      }
   },
-   mounted() {
-      //this.listAllStatus();
-   }
 }
 </script>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
@@ -2,6 +2,8 @@ import { createStore } from 'vuex';
 import { datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date.js';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
 import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
+import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';

 const debug = process.env.NODE_ENV !== 'production';
 const evalFQDN = encodeURIComponent("Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation");
@@ -20,20 +22,10 @@ const store = createStore({
    resultsPicked: window.accompanyingCourseWork.results,
    resultsForAction: [],
    resultsForGoal: [],
-    evaluationsPicked: window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations.map((e, index) => {
-      var k = Object.assign(e, {
-        key: index,
-        editEvaluation: false,
-        startDate: e.startDate !== null ? ISOToDatetime(e.startDate.datetime) : null,
-        endDate: e.endDate !== null ? ISOToDatetime(e.endDate.datetime) : null,
-        maxDate: e.maxDate !== null ? ISOToDatetime(e.maxDate.datetime) : null,
-        warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
-      });
-
-      return k;
-    }),
+    evaluationsPicked: [],
    evaluationsForAction: [],
-    templatesAvailableForEvaluation: [],
+    templatesAvailablesForAction: [],
+    templatesAvailablesForEvaluation: new Map([]),
    personsPicked: window.accompanyingCourseWork.persons,
    personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
      .map(p => p.person),
@@ -65,8 +57,8 @@ const store = createStore({
    hasThirdParties(state) {
      return state.thirdParties.length > 0;
    },
-    getTemplatesAvailaibleForEvaluation(state) {
-      return state.templatesAvailableForEvaluation;
+    getTemplatesAvailablesForEvaluation: (state) => (evaluation) => {
+      return state.templatesAvailablesForEvaluation.get(evaluation.id) || [];
    },
    buildPayload(state) {
      return {
@@ -125,6 +117,20 @@ const store = createStore({
    }
  },
  mutations: {
+    setEvaluationsPicked(state, evaluations) {
+      state.evaluationsPicked = evaluations.map((e, index) => {
+        var k = Object.assign(e, {
+          key: index,
+          editEvaluation: false,
+          startDate: e.startDate !== null ? ISOToDatetime(e.startDate.datetime) : null,
+          endDate: e.endDate !== null ? ISOToDatetime(e.endDate.datetime) : null,
+          maxDate: e.maxDate !== null ? ISOToDatetime(e.maxDate.datetime) : null,
+          warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
+        });
+
+        return k;
+      });
+    },
    setStartDate(state, date) {
      state.startDate = date;
    },
@@ -222,10 +228,11 @@ const store = createStore({
      let evaluation = state.evaluationsPicked.find(e => e.key === key);
      evaluation.editEvaluation = !evaluation.editEvaluation;
    },
-    setTemplatesAvailableForEvaluation(state, templates) {
-      for (let i in templates) {
-        state.templatesAvailableForEvaluation.push(templates[i]);
-      }
+    setTemplatesForEvaluation(state, {templates, evaluation}) {
+      state.templatesAvailablesForEvaluation.set(evaluation.id, templates);
+    },
+    setTemplatesAvailablesForAction(state, templates) {
+      state.templatesAvailablesForAction = templates;
    },
    setPersonsPickedIds(state, ids) {
      state.personsPicked = state.personsReachables
@@ -328,36 +335,19 @@ const store = createStore({
          commit('setEvaluationsForAction', data.results);
        });
    },
-    getReachableTemplatesForEvaluation({commit}) {
-      const
-          url = `/fr/doc/gen/templates/for/${evalFQDN}`
-      ;
-      window.fetch(url).then(r => {
-        if (r.ok) {
-          return r.json();
-        }
-        throw new Error("not possible to load templates for evaluations")
-      }).then(data => {
-        commit('setTemplatesAvailableForEvaluation', data.results);
-      }).catch(e => {
-        console.error(e);
-      })
+    addEvaluation({commit, dispatch}, evaluation) {
+      commit('addEvaluation', evaluation);
+      dispatch('fetchTemplatesAvailablesForEvaluation', evaluation);
    },
-    generateDocument({ dispatch }, {key, templateId}) {
-      const callback = function(data) {
-        // get the evaluation id from the data
-        const
-            evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === key).id,
-            returnPath = encodeURIComponent(window.location.pathname + window.location.search + window.location.hash),
-            url = `/fr/doc/gen/generate/from/${templateId}/for/${evalFQDN}/${evaluationId}?returnPath=${returnPath}`
-        ;
-        //http://localhost:8001/fr/doc/gen/generate/from/12/for/Chill%5CPersonBundle%5CEntity%5CAccompanyingPeriod%5CAccompanyingPeriodWorkEvaluation/41
-
-        console.log('I will generate your doc at', url);
-        window.location.assign(url);
-      };
-
-      dispatch('submit', callback);
+    fetchTemplatesAvailablesForEvaluation({commit, state}, evaluation) {
+      if (!state.templatesAvailablesForEvaluation.has(evaluation.id)) {
+        // commit an empty array to avoid parallel fetching for same evaluation id
+        commit('setTemplatesForEvaluation', {templates: [], evaluation});
+        fetchResults(`/api/1.0/person/docgen/template/by-evaluation/${evaluation.id}.json`)
+          .then(templates => {
+            commit('setTemplatesForEvaluation', {templates, evaluation});
+          });
+      }
    },
    submit({ getters, state, commit }, callback) {
      let
@@ -368,47 +358,36 @@ const store = createStore({

      commit('setIsPosting', true);

-      window.fetch(url, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      }).then(response => {
-        if (response.ok || response.status === 422) {
-          return response.json().then(data => ({data, status: response.status}));
-        }
-
-        throw new Error(response.status);
-      }).then(({data, status}) => {
-        if (status === 422) {
-          for (let i in data.violations) {
-            errors.push(data.violations[i].title);
+      return makeFetch('PUT', url, payload)
+        .then(data => {
+          console.log('data received', data);
+          if (typeof(callback) !== 'undefined') {
+            return callback(data);
+          } else {
+            console.info('nothing to do here, bye bye');window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
          }
-          commit('setErrors', errors);
+        }).catch(error => {
+          console.log('error on submit', error);
          commit('setIsPosting', false);
-        } else if (typeof(callback) !== 'undefined') {
-          callback(data);
-        } else {
-          console.info('nothing to do here, bye bye');
-          window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
-        }
-      }).catch(e => {
-        commit('setErrors', [
-          'Erreur serveur ou réseau: veuillez ré-essayer. Code erreur: ' + e
-        ]);
-        commit('setIsPosting', false);
-      });
-    },
-    initAsync({ dispatch }) {
-      dispatch('getReachablesResultsForAction');
-      dispatch('getReachablesGoalsForAction');
-      dispatch('getReachablesEvaluationsForAction');
-      dispatch('getReachableTemplatesForEvaluation');
+          commit('setErrors', error.violations);
+        });
    },
  }
 });

-store.dispatch('initAsync');
+store.commit('setEvaluationsPicked', window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations);
+store.dispatch('getReachablesResultsForAction');
+store.dispatch('getReachablesGoalsForAction');
+store.dispatch('getReachablesEvaluationsForAction');
+
+store.state.evaluationsPicked.forEach(evaluation => {
+  store.dispatch('fetchTemplatesAvailablesForEvaluation', evaluation.evaluation)
+});
+
+fetchTemplates('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork')
+  .then(templates => {
+    store.commit('setTemplatesAvailablesForAction', templates);
+  }
+)

 export { store };