Upload dialog: layout enhanced, progress indicator added, error reporting...

Upload dialog: layout enhanced, progress indicator added, error reporting implemented inside the dialog

jupyter-openbis-extension/static/uploadDIalog.js

@@ -7,6 +7,29 @@ define([
     ],
     function (dialog, utils, $, state, common) {
 
+        var errorElements = { }
+        function createErrorElement(name) {
+            var element = document.createElement("STRONG")
+            element.textContent = ""
+            element.style.marginLeft = "8px"
+            element.style.color = "red"
+            errorElements[name] = element
+            return element
+        }
+        function cleanErrors() {
+            Object.keys(errorElements).forEach(key => errorElements[key].textContent="")
+        }
+
+        var spinner = document.createElement("IMG")
+        spinner.className="openbis-feedback"
+        spinner.src=""
+        function showSpinner() {
+            spinner.src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/ajax-loader.gif"
+        }
+        function hideSpinner() {
+            spinner.src=""
+        }
+
         function getDatasetTypes(env, connection_name, dataset_types, input_fields) {
             // get all DatasetTypes of a given connection
 
@@ -19,6 +42,9 @@ define([
                                 //console.log(data.dataSetTypes)
 
                                 var change_input_fields = function () {
+                                    hideSpinner()
+                                    cleanErrors()
+
                                     // remove existing input fields
                                     while (input_fields.firstChild) {
                                         input_fields.removeChild(input_fields.firstChild)
@@ -26,14 +52,19 @@ define([
 
                                     // for every property assignment, create an input field.
                                     for (pa of dts[dataset_types.selectedIndex].propertyAssignments) {
-                                        //var input_title = document.createTextNode(pa.label + ": ")
+                                        var input_title = document.createElement("STRONG")
+                                        input_title.textContent = pa.mandatory ? pa.label + " (mandatory)" : pa.label
+                                        var input_error = createErrorElement('prop.'+pa.code)
+
                                         var input_field = document.createElement("INPUT")
                                         input_field.type = "text"
                                         input_field.name = pa.code
-                                        input_field.placeholder = pa.description ? pa.label + ": " + pa.description : pa.label
+                                        input_field.placeholder = pa.description ? pa.description : pa.label
                                         input_field.size = 90
+                                        input_field.style.width="100%"
 
-                                        //input_fields.appendChild(input_title)
+                                        input_fields.appendChild(input_title)
+                                        input_fields.appendChild(input_error)
                                         input_fields.appendChild(input_field)
                                         input_fields.appendChild(document.createElement("BR"))
                                     }
@@ -76,11 +107,14 @@ define([
             help_index: '',
             handler: function (env) {
 
+                var main_error = createErrorElement('main')
+
                 var dst_title = document.createElement("STRONG")
                 dst_title.textContent = "DataSet type"
                 var dataset_types = document.createElement("SELECT")
                 dataset_types.id = "dataset_type"
                 dataset_types.className = "form-control select-xs"
+                dataset_types.style.marginLeft = 0
 
                 var input_fields = document.createElement("DIV")
                 input_fields.setAttribute("id", "upload-input-fields");
@@ -89,12 +123,16 @@ define([
 
                 var sample_title = document.createElement("STRONG")
                 sample_title.textContent = "Sample Identifier"
+
+                var sample_error = createErrorElement('sampleIdentifier')
+
                 var sampleIdentifier = document.createElement("INPUT")
                 sampleIdentifier.type = "text"
                 sampleIdentifier.name = 'sampleIdentifier'
                 sampleIdentifier.placeholder = "Sample Identifier or permId"
                 sampleIdentifier.value = ''
                 sampleIdentifier.size = "90"
+                sampleIdentifier.style.width="100%"
 
                 var ds_title = document.createElement("STRONG")
                 ds_title.textContent = "DataSet files"
@@ -103,13 +141,18 @@ define([
                 ds_files.placeholder = "filenames"
                 ds_files.name = "ds_files"
                 ds_files.size = "90"
+                ds_files.style.width="100%"
 
                 var inputs = document.createElement("DIV")
                 inputs.style.marginTop = '10px'
+                inputs.appendChild(main_error)
+                inputs.appendChild(spinner)
+                inputs.appendChild(document.createElement("BR"))
                 inputs.appendChild(dst_title)
                 inputs.appendChild(dataset_types)
                 inputs.appendChild(input_fields)
                 inputs.appendChild(sample_title)
+                inputs.appendChild(sample_error)
                 inputs.appendChild(sampleIdentifier)
                 inputs.appendChild(ds_title)
                 inputs.appendChild(ds_files)
@@ -170,21 +213,34 @@ define([
                             if (data.permId) {
                                 notebook.metadata.openbis.permIds[data.permId] = data.statusText
                             }
-
                         },
                         error: function (data) {
+                            hideSpinner()
+
                             if ("errors" in data.responseJSON) {
                                 var errors = data.responseJSON.errors
-                                console.log("ERROR", errors)
-                                sample_title.textContent = "Sample Identifier - " + errors[0].sampleIdentifier
+
+                                for (error of errors) {
+                                    let key, value
+                                    Object.keys(error).forEach(k => {
+                                        key = k
+                                        value = error[k]
+                                    })
+
+                                    var element;
+                                    if (key in errorElements) {
+                                        element = errorElements[key]
+                                    } else {
+                                        element = errorElements['main']
+                                    }
+                                    element.textContent =  element.textContent.concat(value)
+                                }
                             }
                         }
                     }
 
-                    // display preloader during commit and push
-                    var preloader = '<img class="openbis-feedback" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/ajax-loader.gif">'
-
-                    // commit and push
+                    showSpinner()
+                    cleanErrors()
                     utils.ajax(settings)
                     return false
                 }