adapting vuejs form for accompanyingPeriodWork: include template for

specific evaluation

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>