voom-presenters 0.2.0 → 2.0.0

data/views/mdc/assets/js/components/events/close_dialog.js

@@ -0,0 +1,50 @@
+import {VBase} from './base';
+
+
+export class VCloseDialog extends VBase {
+    constructor(options, params, event, root) {
+        super(options, root);
+        this.elementId = options.target;
+    }
+
+    call(results) {
+        return new Promise((resolve) => {
+            const elem = this.root.getElementById(this.elementId);
+            if (!elem) {
+                const err = new Error(
+                    `Unable to locate node ${this.elementId}!`
+                    + ' Did you forget to attach it?');
+
+                results.push({
+                    action: 'close',
+                    contentType: 'v/errors',
+                    content: {exception: err.message},
+                });
+
+                return new Promise((_, reject) => reject(results));
+            }
+            if (!elem.vComponent || !elem.vComponent.respondTo('closeDialog')) {
+                const err = new Error(
+                    `Element at node ${this.elementId} does not contain a component that reponds to `
+                    + 'the closeDialog() method. Are you targeting the correct element.');
+
+                results.push({
+                    action: 'close_dialog',
+                    contentType: 'v/errors',
+                    content: {exception: err.message},
+                });
+
+                return new Promise((_, reject) => reject(results));
+            }
+            elem.vComponent.closeDialog();
+
+            results.push({
+                action: 'close_dialog',
+                statusCode: 200,
+            });
+
+            // Otherwise, proceed with the next action:
+            return resolve(results);
+        });
+    }
+}

data/views/mdc/assets/js/components/events/dialog.js

@@ -1,25 +1,43 @@
 export class VDialog {
-    constructor(options, params, event) {
+    constructor(options, params, event, root) {
         this.dialogId = options.target;
         this.params = params;
         this.event = event;
+        this.root = root;
     }
 
     call(results) {
-        var dialog = document.querySelector('#' + this.dialogId);
-        if(dialog) {
-            if (!dialog.showModal) {
-                dialogPolyfill.registerDialog(dialog);
-            }
-
-            dialog.showModal();
-        }else {
-            console.error("Unable to find dialog with id: "+this.dialogId+". Usually this means you forgot to attach it to the currently rendered page.");
+        const dialog = this.root.querySelector('#' + this.dialogId);
+
+        if (!(dialog && dialog.vComponent)) {
+            const err = new Error(
+                `Unable to find dialog ${this.dialogId}. `
+                + 'Did you forget to attach it?'
+            );
+
+            results.push({
+                action: 'dialog',
+                contentType: 'v/errors',
+                content: {exception: err.message},
+            });
+
+            return new Promise((_, reject) => reject(results));
         }
-        var promiseObj = new Promise(function (resolve) {
-            results.push({action:'dialog', statusCode: 200});
-            resolve(results);
+
+        return new Promise(function(resolve, reject) {
+            const comp = dialog.vComponent.mdcComponent;
+
+            comp.listen('MDCDialog:closed', (event) => {
+                results.push({
+                    action: 'dialog',
+                    statusCode: 200,
+                    dialogAction: event.detail.action,
+                });
+
+                resolve(results);
+            });
+
+            dialog.vComponent.open();
         });
-        return promiseObj;
     }
 }

data/views/mdc/assets/js/components/events/encode.js

@@ -0,0 +1,8 @@
+export function encode(value) {
+    if (value === Object(value)) {
+        return JSON.stringify(value);
+    }
+    else {
+        return value;
+    }
+}

data/views/mdc/assets/js/components/events/errors.js

@@ -1,142 +1,225 @@
+import 'core-js/features/array/flat';
+
+/**
+ * mapObject transforms an object's key-value pairs via the provided function.
+ * @param {Object} object
+ * @param {Function} fn A mapping function suitable for use with Array.map
+ * @return {Object}
+ */
+function mapObject(object, fn) {
+    return Object.entries(object)
+        .map(fn)
+        .reduce((obj, [k, v]) => Object.assign(obj, {[[k]]: v}), {});
+}
+
+/*
+    Attempt to interpret and serialize the following cases for display:
+
+    A: Rails errors:
+        1. { "name": ["Requires name"] }
+
+    B: Validation errors:
+        1. { :email => ["must be filled"] }
+        2. { :fees => 0 => { :fee => ["must be filled", "must be greater than zero"] } }
+
+    C: Custom errors and client-side exceptions:
+        1. { :email => "must be filled" }
+        2. { exception: 'Something bad happened' }
+
+    D: Logical errors:
+        1. "undefined method `map' for nil:NilClass"
+ */
+
 export class VErrors {
-    constructor(event) {
-        this.event = event;
+    constructor(root, target) {
+        this.root = root;
+        this.target = target;
     }
 
     clearErrors() {
-        var errorMessages = document.querySelectorAll('.v-error-message');
+        const errorMessages = this.root.querySelectorAll('.v-error-message');
 
-        for (var i = 0; i < errorMessages.length; i++) {
+        for (let i = 0; i < errorMessages.length; i++) {
             errorMessages[i].remove();
         }
     }
 
-    // Rails errors
-    // {
-    //   "name": [
-    //     "Requires name"
-    //   ]
-    // }
+    /**
+     * normalize attempts to convert the various error structures described
+     * above into a single consistent structure by replacing error arrays
+     * with joined strings.
+     * @param {Object} errors
+     * @return {Object}
+     */
+    normalize(errors) {
+        if (!errors) {
+            return {};
+        }
+
+        // Normalize case D into case C-1:
+        if (typeof errors === 'string') {
+            errors = {error: errors};
+        }
+
+        return mapObject(errors, ([k, v]) => {
+            let result = null;
 
-    // Validation errors
-    // { :email => ["must be filled"] }
+            // Case C, a single key-value pair:
+            if (typeof v === 'string') {
+                // Normalize case C into case A/B-1:
+                v = [v];
+            }
 
-    // Custom errors
-    // { :email => "must be filled" }
+            if (Array.isArray(v)) {
+                // Case A and B-1: an array of error messages:
+                result = v.join(', ');
+            } else if (v.constructor === Object) {
+                // Case B-2: a nested structure:
+                result = this.normalize(v);
+            } else {
+                throw new Error(`Cannot normalize value of type ${typeof v}`);
+            }
 
-    // Exceptions
-    // {exception: 'Something bad happened' }
+            return [k, result];
+        });
+    }
 
-    stringsToArrays(value) {
-        if (Array.isArray(value) || value.constructor === Object) {
-            return value;
+    /**
+     * flatten attempts to extract all human-readable error messages from an
+     * arbitrary error structure, yielding a flat array of strings.
+     * @param {Object} errors
+     * @return {Array<String>}
+     */
+    flatten(errors) {
+        if (!errors) {
+            return [];
         }
-        return new Array(value);
-    }
 
-    normalizeErrors(errors) {
-        if (errors && errors.constructor === Object) {
-            return Object.keys(errors).reduce((previous, key) => {
-                previous[key] = this.stringsToArrays(errors[key]);
-                return previous;
-            }, {});
+        // Normalize case D into case C-1:
+        if (typeof errors === 'string') {
+            errors = {error: errors};
         }
-        return [];
+
+        const object = mapObject(errors, ([k, v]) => {
+            let result = null;
+
+            if (typeof v === 'string') {
+                result = v;
+            }
+            else if (v.constructor === Object) {
+                result = this.flatten(v);
+            }
+            else {
+                throw new Error(`Cannot flatten value of type ${typeof v}`);
+            }
+
+            return [k, result];
+        });
+
+        return Object.values(object).flat();
     }
 
-    // [http_status, content_type, resultText]
     displayErrors(result) {
-        var httpStatus = result.statusCode;
-        var contentType = result.contentType;
-        var resultText = result.content;
+        const {statusCode, contentType, content} = result;
 
-        var responseErrors = null;
+        let responseErrors = null;
 
-        if (contentType && contentType.indexOf("application/json") !== -1) {
-            responseErrors = JSON.parse(resultText);
-        } else if (contentType && contentType.indexOf("v/errors") !== -1) {
-            responseErrors = resultText;
+        if (contentType && contentType.includes('application/json')) {
+            responseErrors = JSON.parse(content);
+        }
+        else if (contentType && contentType.includes('v/errors')) {
+            responseErrors = content;
         }
 
         if (responseErrors) {
             if (!Array.isArray(responseErrors)) {
                 responseErrors = [responseErrors];
             }
-            for (var response of responseErrors) {
-                var pageErrors = Object.values(this.normalizeErrors(response)).reduce(function (previous, value) {
-                    if (Array.isArray(value) && value.length > 0) {
-                        previous.push(value.join('<br/>'));
-                    }
-                    return previous;
-                }, []);
-                var fieldErrors = this.normalizeErrors(response.errors);
-
-                for (var field in fieldErrors) {
-                    if (!this.displayInputError(field, fieldErrors[field])) {
-                        // Collect errors that can't be displayed at the field level
-                        pageErrors.push(fieldErrors[field]);
+
+            for (const response of responseErrors) {
+                const normalizedResponse = this.normalize(response);
+                const errors = normalizedResponse.errors ? normalizedResponse.errors : normalizedResponse;
+                if (errors.constructor === String) {
+                    this.prependErrors([errors]);
+                }
+                else {
+                    for (const key in errors) {
+                        if (!this.displayInputError(key, errors[key])) {
+                            // If not handled at the field level, display at the page level
+                            if (errors[key].length > 0) {
+                                this.prependErrors([errors[key]]);
+                            }
+                        }
                     }
                 }
-                this.prependErrors(pageErrors);
             }
-        } else if (httpStatus === 0) {
-            this.prependErrors(["Unable to contact server. Please check that you are online and retry."]);
-        } else  {
-            this.prependErrors(["The server returned an unexpected response! Status:" + httpStatus]);
+        }
+        else if (statusCode === 0) {
+            this.prependErrors(
+                ['Unable to contact server. Please check that you are online and retry.']
+            );
+        }
+        else {
+            this.prependErrors(
+                [`The server returned an unexpected response! Status: ${statusCode}`]
+            );
         }
     }
 
     // Sets the helper text on the field
     // Returns true if it was able to set the error on the control
-    displayInputError(divId, messages) {
-        var currentEl = document.getElementById(divId);
-        if (currentEl && currentEl.mdcComponent) {
-            currentEl.mdcComponent.helperTextContent = messages.join(', ');
-            var helperText = document.getElementById(divId + '-input-helper-text');
-            helperText.classList.add('mdc-text-field--invalid',
-                'mdc-text-field-helper-text--validation-msg',
-                'mdc-text-field-helper-text--persistent');
-            currentEl.mdcComponent.valid = false;
-            return true;
+    displayInputError(id, message) {
+        const currentEl = this.root.getElementById(id) || this.root.getElementsByName(id)[0];
+
+        if (!currentEl) {
+            return false;
+        }
+
+        const helperText = this.root.getElementById(`${currentEl.id}-helper-text`);
+        if (!helperText) {
+            return false;
         }
-        return false;
+
+        helperText.innerHTML = message;
+        currentEl.classList.add('mdc-text-field--invalid');
+        helperText.classList.add('mdc-text-field-helper-text--validation-msg');
+        helperText.classList.remove('v-hidden');
+
+        return true;
     }
 
     // Creates a div before the element with the same id as the error
-    // Used to display an error message without their being an input field to attach the error to
+    // Used to display an error message without their being an input field to
+    // attach the error to
     prependErrors(messages) {
-        var errorsDiv = this.findNearestErrorDiv();
-        // create a new div element
-        var newDiv = document.createElement("div");
-        newDiv.className = 'v-error-message';
-        // and give it some content
-
-        for (var message of messages) {
-            var newContent = document.createTextNode(message);
-            newDiv.appendChild(newContent);
-            let br = document.createElement('br');
-            // add the text node to the newly created div
-            newDiv.appendChild(br);
+        const errorsDiv = this.findNearestErrorDiv();
+
+        if (!errorsDiv) {
+            console.error('Unable to display Errors! ', messages);
+
+            return false;
         }
 
+        const newDiv = document.createElement('div');
+
+        newDiv.classList.add('v-error-message');
+        newDiv.insertAdjacentHTML('beforeend', messages.join('<br>'));
+
         // add the newly created element and its content into the DOM
-        if (errorsDiv) {
-            errorsDiv.parentElement.insertBefore(newDiv, errorsDiv);
-            return true;
-        } else {
-            console.error("Unable to display Errors! ", messages);
+        if (errorsDiv.clientTop < 10) {
+            errorsDiv.scrollIntoView();
         }
-        return false;
+
+        errorsDiv.insertAdjacentElement('beforebegin', newDiv);
+
+        return true;
     }
 
     findNearestErrorDiv() {
-        let errorsDiv = null;
-        const currentDiv = this.event.target;
-        if(currentDiv) {
-            errorsDiv = currentDiv.closest('.v-errors')
-        }else{
-            errorsDiv = document.querySelector('.v-errors');
+        if (this.target) {
+            return this.target.closest('.v-errors');
         }
-        return errorsDiv;
+
+        return this.root.querySelector('.v-errors');
     }
 }

data/views/mdc/assets/js/components/events/loads.js

@@ -1,23 +1,62 @@
-import {VUrls} from '../../utils/urls';
+import {expandParams} from './action_parameter';
+import {VBase} from './base';
 
-export class VLoads extends VUrls{
-    constructor(options, url, params, event) {
+export class VLoads extends VBase {
+    constructor(options, url, params, event, root) {
         super();
+        this.root = root;
         this.options = options;
         this.params = params;
         this.url = url;
         this.event = event;
     }
 
+
+    waitForDownload(downloadID, f) {
+        // Now, we need to start watching the local Cookies to
+        // see when the download ID has been updated by the
+        // response headers.
+        const cookieTimer = setInterval(() => {
+            // The local cookie cache is defined in the browser
+            // as one large string; we need to search for the
+            // name-value pattern with the above ID.
+            const cookiePattern = new RegExp(('downloadID=' + downloadID), 'i');
+
+            if (!downloadID) {
+                clearInterval(cookieTimer);
+                return f();
+            }
+            // I check the local cookies for an update.
+            // If the local cookies have been updated, clear
+            // the timer and call the promise!
+            else if (document.cookie.search(cookiePattern) >= 0) {
+                clearInterval(cookieTimer);
+                return f();
+            }
+            console.debug(
+                'File still downloading (Make sure you set the downloadID in your cookie?)...',
+                new Date().getTime());
+        }, downloadID ? 500 : 0);
+    }
+
+
     call(results) {
-        var url = this.buildURL(this.url, this.params);
-        var newWindow = this.options['target'] === '_blank';
-        var promiseObj = new Promise(function (resolve) {
-            console.log("Loading page: " + url);
-            results.push({action:'loads', statusCode: 200});
-            resolve(results);
-            newWindow ? window.open(url) : window.location = url;
+        const expandedParams = expandParams(results, this.params);
+        return new Promise((resolve) => {
+            let downloadID = null;
+            if (this.options['wait_for_download']) {
+                downloadID = (new Date()).getTime();
+            }
+            const url = this.buildURL(this.url, expandedParams,
+                this.inputValues(),
+                downloadID ? {download_id: downloadID} : null);
+            this.waitForDownload(downloadID, () => {
+                results.push({action: 'loads', statusCode: 200});
+                resolve(results);
+            });
+            this.options['target'] === '_blank' ?
+                document.defaultView.open(url) :
+                document.defaultView.location = url;
         });
-        return promiseObj;
     }
 }