x4js 1.4.52 → 1.4.53

package/lib/esm/form.js

@@ -0,0 +1,297 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file form.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+import { Component, flyWrap } from './component';
+import { HLayout, VLayout } from './layout';
+import { Button } from './button';
+import { TextEdit } from './textedit';
+import { ajaxRequest } from './request';
+import { EvBtnClick } from './dialog';
+import { _tr } from './i18n';
+/**
+ *
+ */
+export class Form extends VLayout {
+    m_height;
+    m_container;
+    m_buttons;
+    m_dirty;
+    m_watchChanges;
+    constructor(props) {
+        let content = props.content;
+        props.content = null;
+        // save height, because real form height is 'height' PLUS button bar height
+        let height = props.height;
+        props.height = undefined;
+        super(props);
+        this.setTag(props.disableSuggestions ? 'section' : 'form');
+        this.mapPropEvents(props, 'btnClick');
+        this.updateContent(content, props.buttons, height);
+        this.m_dirty = false;
+        this.m_watchChanges = false;
+    }
+    /**
+     * returns the container object
+     */
+    get container() {
+        return this.m_container;
+    }
+    /**
+     *
+     */
+    componentCreated() {
+        super.componentCreated();
+        if (this.m_watchChanges) {
+            this.watchChanges();
+        }
+    }
+    /**
+     *
+     */
+    updateContent(items, buttons, height = 0) {
+        if (height) {
+            // keep height for next time
+            this.m_height = height;
+        }
+        this._makeButtons(buttons);
+        let content = [
+            this.m_container = new VLayout({
+                cls: 'container',
+                height: this.m_height,
+                content: items
+            }),
+            this.m_buttons,
+        ];
+        super.setContent(content);
+    }
+    /**
+     *
+     * @param els
+     * @param refreshAll
+     */
+    setContent(els, refreshAll = true) {
+        this.m_container.setContent(els, refreshAll);
+    }
+    /**
+     *
+     * @param buttons
+     */
+    setButtons(buttons) {
+        this._makeButtons(buttons);
+    }
+    /**
+     * enable a button by it's name
+     */
+    enableButton(name, enable = true) {
+        let button = this.getButton(name);
+        if (button) {
+            button.enable(enable);
+        }
+    }
+    /**
+     * return a button by it's name
+     * @param name
+     */
+    getButton(name) {
+        let button = this.m_buttons?.itemWithRef('@' + name);
+        return button;
+    }
+    /**
+     *
+     */
+    _makeButtons(buttons) {
+        if (!this.m_buttons) {
+            this.m_buttons = new HLayout({
+                cls: 'footer',
+                ref: 'buttons',
+            });
+        }
+        let btns = [];
+        if (buttons) {
+            for (let b of buttons) {
+                if (b instanceof Component) {
+                    btns.push(b);
+                }
+                else {
+                    switch (b) {
+                        case 'ok': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.ok, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'cancel': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.cancel, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'ignore': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.ignore, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'yes': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.yes, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'no': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.no, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'close': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.close, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'save': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.save, click: () => { this._click(b); } }));
+                            break;
+                        }
+                        case 'dontsave': {
+                            btns.push(new Button({ ref: '@' + b, text: _tr.global.dontsave, click: () => { this._click(b); } }));
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        if (btns.length == 1) {
+            btns[0].setAttribute('autofocus', true);
+        }
+        this.m_buttons.setContent(btns);
+    }
+    /**
+     *
+     */
+    validate() {
+        let inputs = this.queryAll('input'), result = true;
+        for (let i = 0; i < inputs.length; i++) {
+            let input = Component.getElement(inputs[i], TextEdit);
+            if (input && !input.validate()) {
+                result = false;
+            }
+        }
+        return result;
+    }
+    /**
+     *
+     */
+    _click(btn) {
+        this.emit('btnClick', EvBtnClick(btn));
+    }
+    /**
+     * replacement for HTMLFormElement.elements
+     * as chrome shows suggestions on form elements even if we ask him (not to do that)
+     * we removed <form> element.
+     * so we have to get children by hand
+     */
+    _getElements() {
+        console.assert(!!this.dom);
+        const els = this.queryAll('[name]');
+        return els;
+    }
+    /**
+     *
+     */
+    setValues(values) {
+        let elements = this._getElements();
+        for (let e = 0; e < elements.length; e++) {
+            let input = elements[e];
+            let item = Component.getElement(input);
+            if (!item.hasAttribute("name")) {
+                continue;
+            }
+            let name = item.getAttribute('name'), type = item.getAttribute('type');
+            if (values[name] !== undefined) {
+                item.setStoreValue(values[name]);
+            }
+        }
+        this.setDirty(false);
+    }
+    /**
+     * values are not escaped
+     * checkbox set true when checked
+     * radio set value when checked
+     */
+    getValues() {
+        let elements = this._getElements();
+        let result = {};
+        for (let e = 0; e < elements.length; e++) {
+            let el = elements[e];
+            let item = Component.getElement(el);
+            if (!item.hasAttribute("name")) {
+                continue;
+            }
+            let name = item.getAttribute('name'), value = item.getStoreValue();
+            if (value !== undefined) {
+                result[name] = value;
+            }
+        }
+        return result;
+    }
+    /**
+     * send the query to the desired handler
+     */
+    submit(cfg, cbvalidation) {
+        if (!this.validate()) {
+            return false;
+        }
+        let values = this.getValues();
+        if (cbvalidation) {
+            if (!cbvalidation(values)) {
+                return false;
+            }
+        }
+        let form = new FormData();
+        for (let n in values) {
+            if (values.hasOwnProperty(n)) {
+                form.append(n, values[n] === undefined ? '' : values[n]);
+            }
+        }
+        cfg.params = form;
+        return ajaxRequest(cfg);
+    }
+    /**
+     *
+     */
+    watchChanges() {
+        if (this.dom) {
+            const els = this.queryAll('input[name], textarea[name]');
+            els.forEach(el => {
+                flyWrap(el).setDomEvent('input', () => {
+                    this.setDirty();
+                });
+            });
+            this.m_watchChanges = false;
+        }
+        else {
+            this.m_watchChanges = true;
+        }
+    }
+    setDirty(set = true) {
+        this.m_dirty = set;
+    }
+    isDirty() {
+        return this.m_dirty;
+    }
+}

package/lib/esm/formatters.js

@@ -0,0 +1,81 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file formatters.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+import { formatIntlDate, roundTo } from './tools';
+let locale;
+let moneyFmt;
+export function setCurrencySymbol(symbol) {
+    if (symbol) {
+        moneyFmt = new Intl.NumberFormat(locale, { style: 'currency', currency: symbol /*, currencyDisplay: 'symbol'*/ });
+    }
+    else {
+        moneyFmt = new Intl.NumberFormat(locale, { style: 'decimal', useGrouping: true, minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+}
+export function sql_date_formatter(input) {
+    if (input === null || input === undefined || input === '') {
+        return '';
+    }
+    let dte = new Date(Date.parse(input));
+    //todo: better implementation
+    const options = { /*weekday: 'short',*/ month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+    return dte.toLocaleDateString(locale, options);
+}
+export function date_formatter(input) {
+    if (input === null || input === undefined || input === '') {
+        return '';
+    }
+    let dte = typeof (input) == 'string' ? new Date(Date.parse(input)) : input;
+    return formatIntlDate(dte);
+}
+export function money_formatter(input) {
+    if (input === null || input === undefined || input === '') {
+        return '';
+    }
+    let val = roundTo(typeof (input) == 'string' ? parseFloat(input) : input, 2);
+    if (Object.is(val, -0.00)) {
+        val = 0.00;
+    }
+    let res = moneyFmt.format(val);
+    return res;
+}
+export function money_formatter_nz(input) {
+    if (input === null || input === undefined || input === '') {
+        return '';
+    }
+    let val = roundTo(typeof (input) == 'string' ? parseFloat(input) : input, 2);
+    if (!val) { // do not show zeros
+        return '';
+    }
+    let res = moneyFmt.format(val);
+    return res;
+}
+export function bool_formatter(input) {
+    return input ? 'oui' : '-';
+}
+setCurrencySymbol(null);