Improve form behaviour to allow removing of document:

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

CHANGELOG.md

@@ -18,7 +18,7 @@ Version 1.5.3
 
 - the javascript for uploading a file now works within collections, listening to collection events.
 
-Master branch
+Version 1.5.4
 =============
 
 - replace default message on download button below dropzone ;
@@ -27,3 +27,8 @@ Master branch
 - add privacy events to document edit / update
 - remove dump message
 
+Version 1.5.5
+=============
+
+- add button to remove existing document in form, and improve UI in this part
+- fix error when document is removed in form

DependencyInjection/ChillDocStoreExtension.php

@@ -30,6 +30,7 @@ class ChillDocStoreExtension extends Extension implements PrependExtensionInterf
         $loader->load('services/controller.yml');
         $loader->load('services/menu.yml');
         $loader->load('services/fixtures.yml');
+        $loader->load('services/form.yml');
     }
 
     public function prepend(ContainerBuilder $container)

Form/StoredObjectType.php

@@ -10,14 +10,25 @@ use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Chill\DocStoreBundle\Entity\StoredObject;
 use Symfony\Component\Form\CallbackTransformer;
+use Doctrine\ORM\EntityManagerInterface;
 
 /**
+ * Form type which allow to join a document 
  *
- *
- * @author Julien Fastré <julien.fastre@champs-libres.coop>
  */
 class StoredObjectType extends AbstractType
 {
+    /**
+     *
+     * @var EntityManagerInterface
+     */
+    protected $em;
+    
+    public function __construct(EntityManagerInterface $em)
+    {
+        $this->em = $em;
+    }
+    
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
@@ -86,6 +97,9 @@ class StoredObjectType extends AbstractType
         }
         
         if (NULL === $object->getFilename()) {
+            // remove the original object
+            $this->em->remove($object);
+            
             return null;
         }
         

Resources/config/services/form.yml

@@ -0,0 +1,6 @@
+services:
+    Chill\DocStoreBundle\Form\StoredObjectType:
+        arguments:
+            $em: '@Doctrine\ORM\EntityManagerInterface'
+        tags:
+            - { name: form.type }

Resources/public/module/async_upload/index.scss

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

Resources/public/module/async_upload/uploader.js

@@ -98,13 +98,24 @@ var encryptFile = function(originalFile, zoneData, done) {
     reader.readAsArrayBuffer(originalFile);
 };
 
+var addBelowButton = (btn, zone, zoneData) => {
+    let
+        belowZone = zone.querySelector('.chill-dropzone__below-zone');
         
-var initialize = function(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 
         created = document.createElement('div'),
         initMessage = document.createElement('div'),
         initContent = zone.dataset.labelInitMessage,
-        zoneData = { zone: zone, suffix: createFilename() },
         dropzoneI;
     
     created.classList.add('dropzone');
@@ -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]'),
@@ -203,6 +256,14 @@ var removeDataInForm = (zone, zoneData) => {
         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);
 };
 

Resources/translations/messages.fr.yml

@@ -24,3 +24,4 @@ Max files exceeded. Remove previous files: Nombre maximum de fichier atteint. Su
 Cancel upload: Annuler le téléversement
 Are you sure you want to cancel this upload ?: Êtes-vous sûrs de vouloir annuler ce téléversement ?
 Upload canceled: Téléversement annulé
+Remove existing file: Supprimer le document existant

Resources/views/Form/fields.html.twig

@@ -11,6 +11,8 @@
         data-dict-cancel-upload="{{ 'Cancel upload'|trans|escape('html_attr') }}"
         data-dict-cancel-upload-confirm="{{ 'Are you sure you want to cancel this upload ?'|trans|escape('html_attr') }}"
         data-dict-upload-canceled="{{ 'Upload canceled'|trans|escape('html_attr') }}"
+        data-dict-remove="{{ 'Remove existing file'|trans|escape('html_attr') }}"
+        data-allow-remove="{% if required %}false{% else %}true{% endif %}"
         data-temp-url-generator="{{ path('async_upload.generate_url', { 'method': 'GET' })|escape('html_attr') }}">
         {{ form_widget(form.filename) }}
         {{ form_widget(form.keyInfos, { 'attr': { 'data-stored-object-key': 1 } }) }}