Improve form behaviour to allow removing of document:

* add button to remove document ;
* fix error when document is removed ;

Resources/public/module/async_upload/index.scss

@@ -1,6 +1,7 @@
+// override dropzone from dropzoneJS
 .dropzone {
     margin-bottom: 0.5rem;
-    
+
     .dz-preview {
         display: initial;
         margin-left: auto;
@@ -19,7 +20,15 @@
     }
 }
 
-.sc-button.dz-bt-below-dropzone {
-    width: 100%;
-}
+.chill-dropzone__below-zone {
 
+    display: flex;
+    
+    & > *:not(:last-child) {
+        margin-right: 1rem;
+    }
+    
+    .sc-button.dz-bt-below-dropzone {
+        width: 100%;
+    }
+}

Resources/public/module/async_upload/uploader.js

@@ -98,15 +98,26 @@ var encryptFile = function(originalFile, zoneData, done) {
     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 initialize = function(zone) {
+var createZone = (zone, zoneData) => {
     var 
         created = document.createElement('div'),
         initMessage = document.createElement('div'),
         initContent = zone.dataset.labelInitMessage,
-        zoneData = { zone: zone, suffix: createFilename() },
         dropzoneI;
-        
+    
     created.classList.add('dropzone');
     initMessage.classList.add('dz-message');
     initMessage.appendChild(document.createTextNode(initContent));
@@ -157,8 +168,6 @@ var initialize = function(zone) {
 
     zone.insertBefore(created, zone.firstChild);
     
-    insertDownloadButton(zone, zoneData);
-    
     let event = new CustomEvent("chill_dropzone_initialized", {
         detail: {
             dropzone: dropzoneI,
@@ -168,6 +177,21 @@ var initialize = function(zone) {
     window.dispatchEvent(event);
 };
 
+
+var initialize = function(zone) {
+    var 
+        allowRemove = zone.dataset.allowRemove,
+        zoneData = { zone: zone, suffix: createFilename(), allowRemove: allowRemove, old: null }
+        ;
+
+    if (hasDataInForm(zone, zoneData)) {
+        insertRemoveButton(zone, zoneData);
+        insertDownloadButton(zone, zoneData);
+    } else {
+        createZone(zone, zoneData);
+    }
+};
+
 var createFilename = () => {
     var text = "";
     var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -195,6 +219,35 @@ var storeDataInForm = (zone, zoneData) => {
     insertDownloadButton(zone);
 };
 
+const restoreDataInForm = (zone, zoneData) => {
+    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;
+    inputObject.value = zoneData.old.obj;
+
+    insertDownloadButton(zone);
+};
+
+const hasDataInForm = (zone, zoneData) => {
+    var 
+        inputObject = zone.querySelector('input[data-async-file-upload]')
+        ;
+        
+    return inputObject.value.length > 0;
+};
+
 var removeDataInForm = (zone, zoneData) => {
     var 
         inputKey = zone.querySelector('input[data-stored-object-key]'),
@@ -202,7 +255,15 @@ var removeDataInForm = (zone, zoneData) => {
         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,
+            iv: inputIv.value,
+            obj: inputObject.value,
+            type: inputType.value
+            };
+    // set blank values
     inputKey.value = "";
     inputIv.value = "";
     inputType.value = "";
@@ -211,7 +272,57 @@ var removeDataInForm = (zone, zoneData) => {
     insertDownloadButton(zone);
 };
 
-var insertDownloadButton = (zone) => {
+var insertRemoveButton = (zone, zoneData) => {
+    var
+        removeButton = document.createElement('a'),
+        cancelButton = document.createElement('a'),
+        labelRemove = zone.dataset.dictRemove,
+        labelCancel = 'Restaurer'
+        ;
+    
+    removeButton.classList.add('sc-button', 'bt-delete');
+    removeButton.textContent = labelRemove;
+    
+    cancelButton.classList.add('sc-button');
+    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);
+            });
+        }
+        addBelowButton(cancelButton, zone, zoneData);
+        //zone.appendChild(cancelButton);
+        removeButton.remove();
+        createZone(zone, zoneData);
+    });
+    
+    addBelowButton(removeButton, zone, zoneData);
+    // zone.appendChild(removeButton);
+};
+
+const removeDownloadButton = (zone, zoneData) => {
+    var 
+        existingButtons = zone.querySelectorAll('a[data-download-button]')
+        ;
+        
+    // remove existing
+    existingButtons.forEach(function(b) {
+        b.remove();
+    });
+};
+
+var insertDownloadButton = (zone, zoneData) => {
     var 
         existingButtons = zone.querySelectorAll('a[data-download-button]'),
         newButton = document.createElement('a'),
@@ -247,7 +358,8 @@ var insertDownloadButton = (zone) => {
     newButton.classList.add('sc-button', 'bt-download', 'dz-bt-below-dropzone');
     newButton.textContent = labelQuietButton;
     
-    zone.appendChild(newButton);
+    addBelowButton(newButton, zone, zoneData);
+    //zone.appendChild(newButton);
     initializeDownload(zone);
 };