Merge remote-tracking branch 'origin/raos_work' into crose_work

javascript/src/FileDelete.js

+/**
+ * @author Rafael Ostertag <rafael.ostertag@math.uzh.ch>
+ */
+/* global $ */
+/* global EventEmitter */
+
+/* @depend QfqEvents.js */
+
+var QfqNS = QfqNS || {};
+
+(function (n) {
+    'use strict';
+
+    n.FileDelete = function (formSelector, targetUrl, sip) {
+        this.formSelector = formSelector;
+        this.targetUrl = targetUrl;
+        // TODO: make sip part of url or button element
+        this.sip = sip;
+        this.eventEmitter = new EventEmitter();
+
+        this.setupOnClickHandler();
+    };
+
+    n.FileDelete.prototype.on = n.EventEmitter.onMixin;
+
+    n.FileDelete.prototype.setupOnClickHandler = function () {
+        $(this.formSelector + " button.delete-file").click(this.buttonClicked.bind(this));
+    };
+
+    n.FileDelete.prototype.buttonClicked = function (event) {
+        var alert = new n.Alert("Do you want to delete the file?", "warning", "okcancel");
+        alert.on('alert.ok', function () {
+            this.performFileDelete(event);
+        }.bind(this));
+        alert.show();
+    };
+
+    n.FileDelete.prototype.performFileDelete = function (event) {
+        this.eventEmitter.emitEvent('filedelete.started', n.EventEmitter.makePayload(event.target, null));
+
+        var data = this.prepareData(event.target);
+
+        $.ajax({
+            url: this.targetUrl,
+            type: 'POST',
+            data: data,
+            cache: false
+        })
+            .done(this.ajaxSuccessHandler.bind(this, event.target))
+            .fail(this.ajaxErrorHandler.bind(this, event.target));
+    };
+
+    n.FileDelete.prototype.prepareData = function (htmlButton) {
+        if (!htmlButton.hasAttribute("name")) {
+            throw new Error("File delete button element requires 'name' attribute");
+        }
+
+        var fileDeleteName = htmlButton.getAttribute('name');
+
+        var data = {
+            s: this.sip,
+            name: fileDeleteName
+        };
+
+        return data;
+    };
+
+    n.FileDelete.prototype.ajaxSuccessHandler = function (uploadTriggeredBy, data, textStatus, jqXHR) {
+        var eventData = n.EventEmitter.makePayload(uploadTriggeredBy, data, {
+            textStatus: textStatus,
+            jqXHR: jqXHR
+        });
+        this.eventEmitter.emitEvent('filedelete.delete.successful', eventData);
+        this.eventEmitter.emitEvent('filedelete.ended', eventData);
+    };
+
+    n.FileDelete.prototype.ajaxErrorHandler = function (uploadTriggeredBy, jqXHR, textStatus, errorThrown) {
+        var eventData = n.EventEmitter.makePayload(uploadTriggeredBy, null, {
+            textStatus: textStatus,
+            errorThrown: errorThrown,
+            jqXHR: jqXHR
+        });
+        this.eventEmitter.emitEvent('filedelete.delete.failed', eventData);
+        this.eventEmitter.emitEvent('filedelete.ended', eventData);
+    };
+
+
+})(QfqNS);
\ No newline at end of file

javascript/src/QfqForm.js

@@ -22,12 +22,14 @@ var QfqNS = QfqNS || {};
      * @param fileUploadTo {string} url used for file uploads
      * @constructor
      */
-    n.QfqForm = function (formId, submitTo, deleteUrl, dataRefreshUrl, fileUploadTo) {
+    n.QfqForm = function (formId, submitTo, deleteUrl, dataRefreshUrl, fileUploadTo, fileDeleteUrl) {
         this.formId = formId;
         this.submitTo = submitTo;
         this.deleteUrl = deleteUrl;
         this.dataRefreshUrl = dataRefreshUrl;
         this.fileUploadTo = fileUploadTo;
+        this.fileDeleteUrl = fileDeleteUrl;
+
         this.form = new n.Form(this.formId);
         // This is required when displaying validation messages, in to activate the tab, which has validation issues
         this.bsTabs = null;
@@ -52,13 +54,21 @@ var QfqNS = QfqNS || {};
 
         this.fileUploader = new n.FileUpload('#' + this.formId, this.fileUploadTo, this.getSip());
         this.fileUploader.on('fileupload.started', this.startUploadHandler);
-        this.fileUploader.on('fileupload.upload.success', this.fileUploadSuccessHandler);
+        this.fileUploader.on('fileupload.upload.successful', this.fileUploadSuccessHandler);
 
         this.fileUploader.on('fileupload.upload.failed',
             function (obj) {
                 n.Helper.showAjaxError(null, obj.textStatus, obj.errorThrown);
             });
         this.fileUploader.on('fileupload.ended', this.endUploadHandler);
+
+        this.fileDeleter = new n.FileDelete("#" + this.formId, this.fileDeleteUrl, this.getSip());
+        this.fileDeleter.on('filedelete.delete.successful', this.fileDeleteSuccessHandler);
+
+        this.fileDeleter.on('filedelete.delete.failed',
+            function (obj) {
+                n.Helper.showAjaxError(null, obj.textStatus, obj.errorThrown);
+            });
     };
 
     n.QfqForm.prototype.on = n.EventEmitter.onMixin;
@@ -71,6 +81,33 @@ var QfqNS = QfqNS || {};
         this.bsTabs = bsTabs;
     };
 
+    /**
+     * @private
+     */
+    n.QfqForm.prototype.fileDeleteSuccessHandler = function (obj) {
+        if (!obj.data.status) {
+            throw Error("Response on file upload missing status");
+        }
+
+        if (obj.data.status === "error") {
+            var alert = new n.Alert(obj.data.message, "error");
+            alert.show();
+            return;
+        }
+
+        var $button = $(obj.target);
+        $button.prop("disabled", true);
+
+        var $buttonParent = $button.parent();
+        $buttonParent.addClass('hidden');
+
+        var $inputFile = $buttonParent.siblings(':file');
+        $inputFile.prop("disabled", false);
+        $inputFile.removeClass('hidden');
+
+        $inputFile.val("");
+    };
+
     /**
      * @private
      */
@@ -82,7 +119,24 @@ var QfqNS = QfqNS || {};
         if (obj.data.status === "error") {
             var alert = new n.Alert(obj.data.message, "error");
             alert.show();
+            return;
         }
+
+        var $fileInput = $(obj.target);
+        $fileInput.prop("disabled", true);
+        $fileInput.addClass("hidden");
+
+        var $deleteContainer = $fileInput.siblings('div.uploaded-file');
+
+
+        var fileNamesString = obj.target.files[0].name;
+        var $fileNameSpan = $deleteContainer.find("span.uploaded-file-name");
+        $fileNameSpan.empty().append(fileNamesString);
+
+        var $deleteButton = $deleteContainer.find("button");
+        $deleteButton.prop("disabled", false);
+
+        $deleteContainer.removeClass("hidden");
     };
 
     /**

javascript/src/QfqPage.js

@@ -20,6 +20,7 @@ var QfqNS = QfqNS || {};
                 deleteUrl: "typo3conf/ext/qfq/qfq/api/delete.php",
                 refreshUrl: "typo3conf/ext/qfq/qfq/api/load.php",
                 fileUploadTo: "typo3conf/ext/qfq/qfq/api/upload.php",
+                fileDeleteUrl: "typo3conf/ext/qfq/qfq/api/filedelete.php",
                 pageState: new n.PageState()
             }, settings
         );
@@ -48,7 +49,8 @@ var QfqNS = QfqNS || {};
                 this.settings.submitTo,
                 this.settings.deleteUrl,
                 this.settings.refreshUrl,
-                this.settings.fileUploadTo);
+                this.settings.fileUploadTo,
+                this.settings.fileDeleteUrl);
             this.qfqForm.setBsTabs(this.bsTabs);
             this.qfqForm.on('qfqform.destroyed', this.destroyFormHandler.bind(this));
         } catch (e) {

mockup/api/delete_file_error.json

+{
+  "status": "error",
+  "message": "error removing file"
+}
\ No newline at end of file

mockup/api/delete_file_ok.json

+{
+  "status": "ok",
+  "message": "success"
+}
\ No newline at end of file

mockup/personmock.html

@@ -17,14 +17,14 @@
 <body>
 
 <label>Submit to
-<select name="submitTo" id="submitTo">
-    <option>404 error</option>
-    <option>save_error_matno.json</option>
-    <option>save_error_geburtstag.json</option>
-    <option>save_no_redirect.json</option>
-    <option>save_server_redirect.json</option>
-    <option>save_client_redirect.json</option>
-</select>
+    <select name="submitTo" id="submitTo">
+        <option>404 error</option>
+        <option>save_error_matno.json</option>
+        <option>save_error_geburtstag.json</option>
+        <option>save_no_redirect.json</option>
+        <option>save_server_redirect.json</option>
+        <option>save_client_redirect.json</option>
+    </select>
 </label>
 
 <label>Delete URL
@@ -45,6 +45,14 @@
     </select>
 </label>
 
+<label>File Delete Url
+    <select name="fileDeleteUrl" id="fileDeleteUrl">
+        <option>404 error</option>
+        <option>delete_file_ok.json</option>
+        <option>delete_file_error.json</option>
+    </select>
+</label>
+
 
 <div class="container-fluid">
     <div class="row hidden-xs">
@@ -102,6 +110,7 @@
 
     <form id="myForm" class="form-horizontal" data-toggle="validator">
         <input type="hidden" name="s" value="badcaffee1234">
+
         <div class="tab-content">
 
             <!--pill: Person-->
@@ -643,7 +652,17 @@
                         <label for="fileupload" class="control-label">File upload</label>
                     </div>
                     <div class="col-md-6">
-                        <input id="fileupload" type="file" name="fileupload">
+                        <div class="col-md-6">
+                            <div class="uploaded-file "><span class="uploaded-file-name">john.doe.png</span>
+                                <button class="delete-file" data-sip="571f23506ad2a"
+                                        name="trash-picture:1"><span
+                                        class="glyphicon glyphicon-trash"></span></button>
+                            </div>
+                            <input id="fileupload" name="picture:1" disabled="disabled" class="hidden" type="file">
+
+                            <div class="help-block with-errors"></div>
+                        </div>
+
                     </div>
 
                     <div class=" col-md-4">
@@ -1001,7 +1020,8 @@
             formId: 'myForm',
             submitTo: 'api/' + $("#submitTo").val(),
             deleteUrl: 'api/' + $("#deleteUrl").val(),
-            fileUploadTo: 'api/' + $("#uploadTo").val()
+            fileUploadTo: 'api/' + $("#uploadTo").val(),
+            fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
         });
 
         $("#submitTo").on("change", function (evt) {
@@ -1019,6 +1039,11 @@
             qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val();
         });
 
+        $("#fileDeleteUrl").on("change", function (evt) {
+            qfqPage.settings.fileDeleteUrl = 'api/' + $(evt.target).val();
+            qfqPage.qfqForm.fileDeleter.targetUrl = 'api/' + $(evt.target).val();
+        });
+
         $('#myForm').on('invalid', function () {
             console.log("Invalid event catched");
         });