voom-presenters 0.2.0 → 2.0.0

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

@@ -0,0 +1,62 @@
+class VActionParameter {
+    constructor(options) {
+        this.value = options.value;
+        this.response_index = options.response_index;
+    }
+
+    fetchValue(results) {
+        const result = results[results.length - this.response_index - 1];
+        return this.resolve(this.value, JSON.parse(result.content));
+    }
+
+    resolve(path, obj) {
+        return this.value.reduce(function(prev, curr) {
+            return prev ? prev[curr] : null;
+        }, obj || self);
+    }
+}
+
+function isObject(thing) {
+    return thing && typeof thing === 'object';
+}
+
+/**
+ * expandParam resolves an parameter `value` to a primitive value
+ * according to the given path for the parameter in `results`.
+ * If the `value` is not an action_parameter, it is returned unaltered.
+ * @param {Object} results An action's results
+ * @param {*} value The value of the parameter
+ * @return {*} A resolved primitive value
+ */
+export function expandParam(results, value) {
+    if (isObject(value) && value.type === 'action_parameter') {
+        return new VActionParameter(value).fetchValue(results);
+    }
+
+    return value;
+}
+
+/**
+ * expandParams resolves all values in `params` to primitive values.
+ *
+ * Primitive values are passed through unaltered.
+ * Values of action_parameter parameters are resolved to primitive values
+ * via `results`.
+ * @param {Object} results An action's results
+ * @param {Object} params An action's parameters
+ * @return {Object}
+ */
+export function expandParams(results, params) {
+    const expandedParams = {};
+
+    for (const [key, value] of Object.entries(params)) {
+        if (!isObject(value) || value.type === 'action_parameter') {
+            expandedParams[key] = expandParam(results, value);
+        }
+        else {
+            expandedParams[key] = expandParams(results, value);
+        }
+    }
+
+    return expandedParams;
+}

data/views/mdc/assets/js/components/events/action_parameter.test.js

@@ -0,0 +1,62 @@
+import {expandParam, expandParams} from './action_parameter';
+
+const mockMessage = {
+    errors: {},
+    snackbar: [],
+    warnings: {},
+};
+const mockPayload = 'hello, world!';
+const mockContent = {
+    data: mockPayload,
+    status: 0,
+    message: mockMessage,
+};
+const mockAction = {
+    action: 'posts',
+    content: JSON.stringify(mockContent),
+    contentType: 'application/json; charset=utf-8',
+    method: undefined,
+    responseURL: 'https://example.com',
+    statusCode: 200
+};
+const mockResults = [mockAction];
+const mockActionParameter = {
+    value: ['data'],
+    type: 'action_parameter',
+    response_index: 0,
+};
+
+describe('expandParam', () => {
+    test('resolves values of action parameters', () => {
+        expect(expandParam(mockResults, mockActionParameter)).toEqual(mockPayload);
+    });
+
+    test('passes through objects unaltered', () => {
+        expect(expandParam(mockResults, {key: 'value'})).toEqual({key: 'value'});
+    });
+
+    test('passes through primitive values unalthered', () => {
+        expect(expandParam(mockResults, 4)).toEqual(4);
+        expect(expandParam(mockResults, 'string')).toEqual('string');
+        expect(expandParam(mockResults, true)).toEqual(true);
+        expect(expandParam(mockResults, null)).toEqual(null);
+    });
+});
+
+describe('expandParams', () => {
+    const params = {
+        primitive: 'value',
+        action: mockActionParameter,
+        nested: { integer: 4, action: mockActionParameter },
+    };
+
+    test('resolves values of action parameters', () => {
+        expect(expandParams(mockResults, params).action).toEqual(mockPayload);
+        expect(expandParams(mockResults, params).nested.action).toEqual(mockPayload);
+    });
+
+    test('passes through primitive values unalthered', () => {
+        expect(expandParams(mockResults, params).primitive).toEqual('value');
+        expect(expandParams(mockResults, params).nested.integer).toEqual(4);
+    });
+});

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

@@ -0,0 +1,94 @@
+import {VBase} from './base';
+
+// Auto complete a datalist
+// The elementId is a datalist
+// The url is called as a GET expecting json back
+export class VAutoComplete extends VBase {
+    constructor(options, url, params, event, root) {
+        super(options, root);
+        this.element_id = options.target;
+        this.url = url;
+        this.params = params;
+        this.event = event;
+    }
+
+    call(results) {
+        // Clear the timeout if it has already been set.
+        // This will prevent the previous task from executing
+        // if it has been less than <MILLISECONDS>
+        let parentElement = this.parentElement();
+        let updateElement = this.createUpdateElementHandler(this);
+        let promiseObj = new Promise(function (resolve) {
+            clearTimeout(parentElement.vTimeout);
+            // Make a new timeout
+            parentElement.vTimeout = setTimeout(updateElement, 500);
+            results.push({action:'autocomplete', statusCode: 200});
+            resolve(results);
+        });
+        return promiseObj;
+    }
+
+    // This is used to get a proper binding of the object
+    // https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+    createUpdateElementHandler(_this_) {
+        return function () {
+            _this_.updateElement();
+        };
+    }
+
+    updateElement() {
+        this.clearErrors();
+        this.getData(this.populateOptions);
+    }
+
+    dataList() {
+        return this.root.getElementById(this.element_id);
+    }
+
+    getData(funcProcessData) {
+        let comp = this.component();
+        console.log(comp);
+        if(comp.value().length < 2){
+            return;
+        }
+        let httpRequest = new XMLHttpRequest();
+        if (!httpRequest) {
+            throw new Error('Cannot talk to server! Please upgrade your browser to one that supports XMLHttpRequest.');
+        }
+        let dataList = this.dataList();
+        let url = this.buildURL(this.url, this.params, this.inputValues());
+
+        httpRequest.onreadystatechange = function () {
+            if (httpRequest.readyState === XMLHttpRequest.DONE) {
+                console.log(httpRequest.status + ':' + this.getResponseHeader('content-type'));
+                if (httpRequest.status === 200) {
+                    let response = JSON.parse(httpRequest.responseText);
+                    funcProcessData(response, dataList);
+                } else {
+                    console.error("Unable to autocomplete! ElementId: " + this.element_id);
+                }
+            }
+        };
+        console.log('GET:' + url);
+        httpRequest.open('GET', url, true);
+        httpRequest.send();
+    }
+
+    populateOptions(response, dataList) {
+        dataList.innerHTML = "";
+
+        response.forEach(function (item) {
+            let value = item;
+            let key = null;
+            if (Array.isArray(item)) {
+                value = item[0];
+                key = item[1];
+            }
+            // Create a new <option> element.
+            let option = document.createElement('option');
+            option.value = value;
+            option.dataset.key = key;
+            dataList.appendChild(option);
+        });
+    }
+}

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

@@ -1,51 +1,167 @@
+import 'core-js/features/array/flat';
+import 'core-js/features/array/flat-map';
 import {VErrors} from './errors';
 import {VUrls} from '../../utils/urls';
 
 export class VBase extends VUrls {
-    constructor(options) {
+    constructor(options, root) {
         super();
         this.options = options;
+        this.root = root;
     }
 
     clearErrors() {
-        new VErrors().clearErrors();
+        new VErrors(this.root).clearErrors();
     }
 
     parentElement() {
-        return document.getElementById(this.options.__parent_id__);
+        return this.root.getElementById(this.options.__parent_id__);
     }
 
-    inputValues(form) {
-        let params = [];
+    /**
+     * taggedInputs retrieves all components matching this event's input_tag
+     * value.
+     * @return {NodeList}
+     */
+    taggedInputs() {
+        const inputTag = this.options.input_tag;
 
-        // If tagged input is asked for. Fetch all the matching tag elements and then call any bound components
-        if (this.options.input_tag !== undefined) {
-            var taggedInputs = document.querySelectorAll('[data-input-tag=' + this.options.input_tag + ']');
-            for (let input of taggedInputs) {
-                if (input.vComponent && typeof input.vComponent.prepareSubmit === 'function') {
-                    input.vComponent.prepareSubmit(params);
-                }
+        if (!inputTag) {
+            return [];
+        }
+
+        const selector = `[data-input-tag="${inputTag}"]`;
+        const inputs = this.root.querySelectorAll(selector);
+
+        if (inputs.length < 1) {
+            console.warn(
+                `input_tag ${inputTag} matched 0 elements. Are you sure`
+                + 'you\'ve specified the correct value?'
+            );
+        }
+
+        return inputs;
+    }
+
+    /**
+     * inputs retrieves relevant input elements for this event.
+     *
+     * - If an `input_tag` has been provided, all matching tagged elements are
+     *   included.
+     * - If this component is a input element, it is included.
+     * - If this component has input elements, its input elements are included.
+     *   If not, the input elements of the nearest container (dialog or content)
+     *   are included.
+     * @return {Array<HTMLElement>}
+     */
+    inputs() {
+        const components = [];
+
+        // Collect tagged components, if applicable:
+        if (this.options.input_tag) {
+            const taggedComponents = Array.from(this.taggedInputs())
+                .filter((element) => element.vComponent)
+                .map((element) => element.vComponent);
+
+            components.push(taggedComponents);
+        }
+
+        let comp = this.component();
+
+        if (comp) {
+            // Include ourselves if we're a form field component, but not a
+            // container:
+            if (comp.respondTo('prepareSubmit') && !comp.respondTo('inputs')) {
+                components.push(comp);
+            }
+            else if (!comp.respondTo('inputs')) {
+                // Defer to the component's closest container (card, content,
+                // dialog, or form) if the component itself does not respond to
+                // `inputs`:
+                comp = this.closestContainer();
             }
         }
-        // Let input components push parameters
-        let vComp = this.component();
-        if (vComp && typeof vComp.prepareSubmit === 'function') {
-            vComp.prepareSubmit(params);
+
+        // If the caller requested tagged_inputs assume they only want those inputs posted and
+        // DO NOT include additional input from the component
+        // I reverted this temporarily as it caused some unintended behavior in. I am going to discuss with the dev
+        // team and revisit in a later release.
+        if (comp && comp.respondTo('inputs')) { //} && !this.options.input_tag) {
+            components.push(comp);
         }
+
+        // Map components to elements.
+        // Containers are mapped to their child elements.
+        // Form field components are mapped to their own element.
+        const elements = components.flat().flatMap((comp) => {
+            if (comp.respondTo('inputs')) {
+                return Array.from(comp.inputs());
+            }
+            else if (comp.respondTo('prepareSubmit')) {
+                return comp.element;
+            }
+        });
+
+        // Deduplicate:
+        return Array.from(new Set(elements));
+    }
+
+    /**
+     * inputComponents retrieves the Component for each of this event's
+     * relevant input elements.
+     * @return {Array<VBaseComponent>}
+     */
+    inputComponents() {
+        return this.inputs()
+            .filter((element) => element.vComponent)
+            .map((element) => element.vComponent);
+    }
+
+    /**
+     * inputValues retrieves submit values for each of this event's relevant
+     * input elements.
+     * @return {Array}
+     */
+    inputValues() {
+        const params = [];
+
+        this.inputComponents()
+            .filter((comp) => comp.respondTo('prepareSubmit'))
+            .map((comp) => comp.prepareSubmit(params));
+
         return params;
     }
 
     component() {
-        let parent = this.parentElement();
+        const parent = this.parentElement();
+
         return parent ? parent.vComponent : null;
     }
 
-    validate() {
-        let errors = [];
-        let comp = this.component();
-        if (comp) {
-            errors = comp.validate();
+    validate(formData) {
+        return this.inputComponents()
+            .filter((comp) => comp.respondTo('validate'))
+            .map((comp) => comp.validate(formData))
+            .filter((errors) => errors !== true && errors !== undefined);
+    }
+
+    closestContainer() {
+        const element = this.closestContainerElement();
+
+        if (!element) {
+            return null;
         }
-        return errors;
+
+        return element.vComponent;
+    }
+
+    closestContainerElement() {
+        const comp = this.component();
+
+        if (!(comp && comp.element)) {
+            return null;
+        }
+
+        return comp.element.closest('[data-is-container]');
     }
 }

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

@@ -1,26 +1,29 @@
 export class VClears {
-    constructor(options, params, event) {
+    constructor(options, params, event, root) {
         this.target = options.target;
         this.ids = params.ids;
         this.event = event;
+        this.root = root;
     }
 
     call(results) {
-        let ids = this.ids;
-        var promiseObj = new Promise(function (resolve) {
-            console.log("Clearing");
+        const ids = this.ids;
+        const root = this.root;
+        return new Promise(function(resolve) {
+            console.debug('Clearing');
             results.push({action: 'clears', statusCode: 200});
-            for (const id of ids){
-                let elem = document.getElementById(id);
-                if(elem && elem.vComponent && elem.vComponent.clear){
+            for (const id of ids) {
+                const elem = root.getElementById(id);
+                if (elem && elem.vComponent && elem.vComponent.clear) {
                     elem.vComponent.clear();
-                }else {
-                    console.log("Unable to clear element with id: "+id+
-                        "! Check to make sure you passed the correct id, and that the control/input can be cleared.");
+                }
+                else {
+                    console.warn('Unable to clear element with id: ' + id +
+                        '! Check to make sure you passed the correct id, and ' +
+                        'that the control/input can be cleared.');
                 }
             }
             resolve(results);
         });
-        return promiseObj;
     }
-}
+}