tentative to add asyncupload into modal

src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue

@@ -16,8 +16,8 @@
                         <div class="input-group mb-3">
                             <select class="form-select" v-model="template">
                                 <option disabled selected value="">{{ $t('choose_a_template') }}</option>
-                                <template v-for="t in templates">
+                                <template v-for="t in templates" :key="t.id">
-                                    <option v-bind:value="t.id">{{ t.name.fr || 'Aucun nom défini' }}</option>
+                                    <option :value="t.id" >{{ t.name.fr || 'Aucun nom défini' }}</option>
                                 </template>
                             </select>
                             <a v-if="canGenerate" class="btn btn-update btn-sm change-icon" :href="buildUrlGenerate" @click.prevent="clickGenerate($event, buildUrlGenerate)"><i class="fa fa-fw fa-cog"></i></a>

src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js

@@ -37,7 +37,6 @@ var keyDefinition = {
 
 var searchForZones = function(root) {
     var zones = root.querySelectorAll('div[data-stored-object]');
-    
     for(let i=0; i < zones.length; i++) {
         initialize(zones[i]);
     }
@@ -370,3 +369,5 @@ window.addEventListener('load', function(e) {
 window.addEventListener('collection-add-entry', function(e) {
     searchForZones(e.detail.entry);
 });
+
+export { searchForZones };

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue

@@ -2,7 +2,6 @@
    <a class="btn btn-create" :title="$t(buttonTitle)" @click="openModal">
       <span>{{ $t(buttonTitle) }}</span>
    </a>
-
    <teleport to="body">
       <div>
          <modal v-if="modal.showModal"
@@ -14,7 +13,24 @@
             </template>
 
             <template v-slot:body>
-               modal body
+                <div id="dropZoneWrapper">
+                    <div
+                        data-stored-object="data-stored-object"
+                        data-label-preparing="Preparing"
+                        data-label-quiet-button="Download existing file"
+                        data-label-ready="Ready to show"
+                        data-dict-file-too-big="File too big"
+                        data-dict-default-message="Drop your file or click here"
+                        data-dict-remove-file="Remove file in order to upload a new one"
+                        data-dict-max-files-exceeded="Max files exceeded. Remove previous files"
+                        data-dict-cancel-upload="Cancel upload"
+                        data-dict-cancel-upload-confirm="Are you sure you want to cancel this upload ?"
+                        data-dict-upload-canceled="Upload canceled"
+                        data-dict-remove="Remove existing file"
+                        data-allow-remove="true"
+                        data-temp-url-generator="url">
+                    </div>
+                </div>
             </template>
 
             <template v-slot:footer>
@@ -28,6 +44,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import { searchForZones } from '../../module/async_upload/uploader';
 
 export default {
    name: "AddAsyncUpload",
@@ -45,14 +62,13 @@ export default {
          },
       }
    },
-   computed: {
-   },
    methods: {
       openModal() {
          this.modal.showModal = true;
+         let dropZoneWrapper = document.getElementById('dropZoneWrapper');
+         console.log(dropZoneWrapper)
+         searchForZones(document); //TODO: only searchforzone in modal body
       },
    }
 }
 </script>
-
-

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -65,7 +65,7 @@
        <h5>{{ $t('Documents') }} :</h5>
 
        <div class="flex-table">
-         <div class="item-bloc" v-for="d in evaluation.documents">
+         <div class="item-bloc" v-for="(d, i) in evaluation.documents" :key="i">
            <div class="item-row">
              <div class="item-col"><h6>{{ d.template.name.fr }}</h6></div>
              <div class="item-col">