coprl 0.1.0 → 3.0.0.beta.1

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

@@ -0,0 +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, root) {
+        super();
+        this.options = options;
+        this.root = root;
+    }
+
+    clearErrors() {
+        new VErrors(this.root).clearErrors();
+    }
+
+    parentElement() {
+        return this.root.getElementById(this.options.__parent_id__);
+    }
+
+    /**
+     * taggedInputs retrieves all components matching this event's input_tag
+     * value.
+     * @return {NodeList}
+     */
+    taggedInputs() {
+        const inputTag = this.options.input_tag;
+
+        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();
+            }
+        }
+
+        // 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() {
+        const parent = this.parentElement();
+
+        return parent ? parent.vComponent : null;
+    }
+
+    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 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

@@ -0,0 +1,29 @@
+export class VClears {
+    constructor(options, params, event, root) {
+        this.target = options.target;
+        this.ids = params.ids;
+        this.event = event;
+        this.root = root;
+    }
+
+    call(results) {
+        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) {
+                const elem = root.getElementById(id);
+                if (elem && elem.vComponent && elem.vComponent.clear) {
+                    elem.vComponent.clear();
+                }
+                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);
+        });
+    }
+}

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);
+        });
+    }
+}