From 5f71b46bb753b1a28c8c3488f93e0292d2632c62 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 23 Feb 2022 17:21:35 +0100
Subject: [PATCH] tentative to add asyncupload into modal

---
 .../public/vuejs/_components/PickTemplate.vue |   4 +-
 .../public/module/async_upload/uploader.js    | 103 +++++++++---------
 .../vuejs/_components/AddAsyncUpload.vue      |  30 +++--
 .../components/FormEvaluation.vue             |   2 +-
 4 files changed, 78 insertions(+), 61 deletions(-)

diff --git a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue b/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
index cd5121fc9..2ab033f2e 100644
--- a/src/Bundle/ChillDocGeneratorBundle/Resources/public/vuejs/_components/PickTemplate.vue
+++ b/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">
-                                    <option v-bind:value="t.id">{{ t.name.fr || 'Aucun nom défini' }}</option>
+                                <template v-for="t in templates" :key="t.id">
+                                    <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>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js b/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js
index 6cb68fcea..35871245b 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js
@@ -4,12 +4,12 @@ var initializeDownload = require('./downloader.js');
 
 
 /**
- * 
+ *
  * define a dropzone for chill usage
- * 
- * An event is launched when dropzone is initialize, allowing to customize events 
+ *
+ * An event is launched when dropzone is initialize, allowing to customize events
  * on dropzone :
- * 
+ *
  * ```
  * window.addEventListener("chill_dropzone_initialized", (e) => {
  *    // do something with dropzone:
@@ -18,7 +18,7 @@ var initializeDownload = require('./downloader.js');
  *    });
  * });
  * ```
- * 
+ *
  */
 
 // load css
@@ -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]);
     }
@@ -48,32 +47,32 @@ var getUploadUrl = function(zoneData, files) {
         generateTempUrlPost  = zoneData.zone.querySelector('input[data-async-file-upload]').dataset.generateTempUrlPost,
         oReq = new XMLHttpRequest()
         ;
-    
+
     // arg, dropzone, you cannot handle async upload...
     oReq.open("GET", generateTempUrlPost, false);
     oReq.send();
-    
+
     if (oReq.readyState !== XMLHttpRequest.DONE) {
         throw new Error("Error while fetching url to upload");
     }
-    
+
     zoneData.params = JSON.parse(oReq.responseText);
-    
+
     return zoneData.params.url;
 };
 
 var encryptFile = function(originalFile, zoneData, done) {
-    var 
+    var
         iv = crypto.getRandomValues(new Uint8Array(16)),
         reader = new FileReader(),
         jsKey, rawKey
         ;
-        
+
     zoneData.originalType = originalFile.type;
-        
+
     reader.onload = e => {
         window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ])
-            .then(key => { 
+            .then(key => {
                 jsKey = key;
 
                 // we register the key somwhere
@@ -90,34 +89,34 @@ var encryptFile = function(originalFile, zoneData, done) {
                     rawKey: rawKey,
                     iv: iv
                 };
-                
+
                 done(new File( [ encrypted ], zoneData.suffix));
             });
     };
-    
+
     reader.readAsArrayBuffer(originalFile);
 };
 
 var addBelowButton = (btn, zone, zoneData) => {
     let
         belowZone = zone.querySelector('.chill-dropzone__below-zone');
-        
+
     if (belowZone === null) {
         belowZone = document.createElement('div');
         belowZone.classList.add('chill-dropzone__below-zone');
         zone.appendChild(belowZone);
     }
-            
+
     belowZone.appendChild(btn);
 };
 
 var createZone = (zone, zoneData) => {
-    var 
+    var
         created = document.createElement('div'),
         initMessage = document.createElement('div'),
         initContent = zone.dataset.labelInitMessage,
         dropzoneI;
-    
+
     created.classList.add('dropzone');
     initMessage.classList.add('dz-message');
     initMessage.appendChild(document.createTextNode(initContent));
@@ -142,7 +141,7 @@ var createZone = (zone, zoneData) => {
                 return zoneData.suffix;
             }
         });
-        
+
     dropzoneI.on("sending", function(file, xhr, formData) {
         formData.append("redirect", zoneData.params.redirect);
         formData.append("max_file_size", zoneData.params.max_file_size);
@@ -150,24 +149,24 @@ var createZone = (zone, zoneData) => {
         formData.append("expires", zoneData.params.expires);
         formData.append("signature", zoneData.params.signature);
     });
-    
+
     dropzoneI.on("success", function(file, response) {
         zoneData.currentFile = file;
         storeDataInForm(zone, zoneData);
     });
-    
+
     dropzoneI.on("addedfile", function(file) {
         if (zoneData.hasOwnProperty('currentFile')) {
             dropzoneI.removeFile(zoneData.currentFile);
         }
     });
-    
+
     dropzoneI.on("removedfile", function(file) {
         removeDataInForm(zone, zoneData);
     });
 
     zone.insertBefore(created, zone.firstChild);
-    
+
     let event = new CustomEvent("chill_dropzone_initialized", {
         detail: {
             dropzone: dropzoneI,
@@ -179,7 +178,7 @@ var createZone = (zone, zoneData) => {
 
 
 var initialize = function(zone) {
-    var 
+    var
         allowRemove = zone.dataset.allowRemove,
         zoneData = { zone: zone, suffix: createFilename(), allowRemove: allowRemove, old: null }
         ;
@@ -204,13 +203,13 @@ var createFilename = () => {
 };
 
 var storeDataInForm = (zone, zoneData) => {
-    var 
+    var
         inputKey = zone.querySelector('input[data-stored-object-key]'),
         inputIv  = zone.querySelector('input[data-stored-object-iv]'),
         inputObject = zone.querySelector('input[data-async-file-upload]'),
         inputType = zone.querySelector('input[data-async-file-type]')
         ;
-    
+
     inputKey.value = JSON.stringify(zoneData.crypto.rawKey);
     inputIv.value = JSON.stringify(Array.from(zoneData.crypto.iv));
     inputType.value = zoneData.originalType;
@@ -220,18 +219,18 @@ var storeDataInForm = (zone, zoneData) => {
 };
 
 const restoreDataInForm = (zone, zoneData) => {
-    var 
+    var
         inputKey = zone.querySelector('input[data-stored-object-key]'),
         inputIv  = zone.querySelector('input[data-stored-object-iv]'),
         inputObject = zone.querySelector('input[data-async-file-upload]'),
         inputType = zone.querySelector('input[data-async-file-type]')
         ;
-        
+
     if (zoneData.old === null) {
         console.log('should not have restored data');
         return;
     }
-    
+
     inputKey.value    = zoneData.old.key;
     inputIv.value     = zoneData.old.iv;
     inputType.value   = zoneData.old.type;
@@ -241,21 +240,21 @@ const restoreDataInForm = (zone, zoneData) => {
 };
 
 const hasDataInForm = (zone, zoneData) => {
-    var 
+    var
         inputObject = zone.querySelector('input[data-async-file-upload]')
         ;
-        
+
     return inputObject.value.length > 0;
 };
 
 var removeDataInForm = (zone, zoneData) => {
-    var 
+    var
         inputKey = zone.querySelector('input[data-stored-object-key]'),
         inputIv  = zone.querySelector('input[data-stored-object-iv]'),
         inputObject = zone.querySelector('input[data-async-file-upload]'),
         inputType = zone.querySelector('input[data-async-file-type]')
         ;
-        
+
     // store data for future usage
     zoneData.old = {
             key: inputKey.value,
@@ -268,7 +267,7 @@ var removeDataInForm = (zone, zoneData) => {
     inputIv.value = "";
     inputType.value = "";
     inputObject.value = "";
-    
+
     insertDownloadButton(zone);
 };
 
@@ -279,25 +278,25 @@ var insertRemoveButton = (zone, zoneData) => {
         labelRemove = zone.dataset.dictRemove,
         labelCancel = 'Restaurer'
         ;
-    
+
     removeButton.classList.add('btn', 'btn-delete');
     removeButton.textContent = labelRemove;
-    
+
     cancelButton.classList.add('btn', 'btn-cancel');
     cancelButton.textContent = labelCancel;
-    
+
     removeButton.addEventListener('click', (e) => {
         e.preventDefault();
         if (zoneData.allowRemove === 'true') {
             removeDataInForm(zone, zoneData);
             cancelButton.addEventListener('click', (e) => {
                 e.preventDefault();
-                
+
                 restoreDataInForm(zone, zoneData);
-                
+
                 cancelButton.remove();
                 zone.querySelector('.dropzone').remove();
-                
+
                 initialize(zone);
             });
         }
@@ -306,16 +305,16 @@ var insertRemoveButton = (zone, zoneData) => {
         removeButton.remove();
         createZone(zone, zoneData);
     });
-    
+
     addBelowButton(removeButton, zone, zoneData);
     // zone.appendChild(removeButton);
 };
 
 const removeDownloadButton = (zone, zoneData) => {
-    var 
+    var
         existingButtons = zone.querySelectorAll('a[data-download-button]')
         ;
-        
+
     // remove existing
     existingButtons.forEach(function(b) {
         b.remove();
@@ -323,7 +322,7 @@ const removeDownloadButton = (zone, zoneData) => {
 };
 
 var insertDownloadButton = (zone, zoneData) => {
-    var 
+    var
         existingButtons = zone.querySelectorAll('a[data-download-button]'),
         newButton = document.createElement('a'),
         inputKey = zone.querySelector('input[data-stored-object-key]'),
@@ -336,18 +335,18 @@ var insertDownloadButton = (zone, zoneData) => {
         tempUrlGenerator = zone.dataset.tempUrlGenerator,
         tempUrlGeneratorParams = new URLSearchParams()
         ;
-        
+
     // remove existing
     existingButtons.forEach(function(b) {
         b.remove();
     });
-    
+
     if (inputObject.value === '') {
         return;
     }
-    
+
     tempUrlGeneratorParams.append('object_name', inputObject.value);
-    
+
     newButton.dataset.downloadButton = true;
     newButton.dataset.key = inputKey.value;
     newButton.dataset.iv = inputIv.value;
@@ -357,7 +356,7 @@ var insertDownloadButton = (zone, zoneData) => {
     newButton.dataset.tempUrlGetGenerator = tempUrlGenerator + '?' + tempUrlGeneratorParams.toString();
     newButton.classList.add('btn', 'btn-download', 'dz-bt-below-dropzone');
     newButton.textContent = labelQuietButton;
-    
+
     addBelowButton(newButton, zone, zoneData);
     //zone.appendChild(newButton);
     initializeDownload(zone);
@@ -370,3 +369,5 @@ window.addEventListener('load', function(e) {
 window.addEventListener('collection-add-entry', function(e) {
     searchForZones(e.detail.entry);
 });
+
+export { searchForZones };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue
index a94455308..fc75e1aa4 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue
+++ b/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>
-
-
+</script>
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index 5f630f70f..4872d32a1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/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">