x4js 1.4.2

package/lib/form.js

@@ -0,0 +1,293 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file form.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+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.setProp('tag', 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/formatters.d.ts

@@ -0,0 +1,31 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file formatters.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+export declare type FormatFunc = (input: any, rec: any) => string;
+export declare function setCurrencySymbol(symbol: string | null): void;
+export declare function sql_date_formatter(input: any): string;
+export declare function date_formatter(input: any): string;
+export declare function money_formatter(input: any): string;
+export declare function money_formatter_nz(input: any): string;
+export declare function bool_formatter(input: any): string;

package/lib/formatters.js

@@ -0,0 +1,75 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file formatters.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+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 (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' : '-';
+}

package/lib/gridview.d.ts

@@ -0,0 +1,171 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file gridview.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+/**
+ * todo: sizable column
+ * todo: button in a column
+ */
+import { VLayout } from './layout';
+import { Component, ContainerEventMap, EvDblClick, CProps, HtmlString } from './component';
+import { Label } from './label';
+import * as Formatters from './formatters';
+import { DataView, DataStore, Record } from './datastore';
+import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4_events";
+export interface EvGridCheck extends BasicEvent {
+    rec: Record;
+    chk: boolean;
+}
+export declare function EvGridCheck(rec: Record, chk: boolean): EvGridCheck;
+/**
+ *
+ */
+export interface GridColumn {
+    id: any;
+    title: string;
+    width: number;
+    flex?: number;
+    align?: 'left' | 'center' | 'right';
+    renderer?: CellRenderer;
+    formatter?: Formatters.FormatFunc;
+    cls?: string;
+    sortable?: boolean;
+}
+export declare type CellRenderer = (rec: Record) => Component;
+export declare type RowClassifier = (rec: Record, Row: Component) => void;
+export declare type ContextMenuGridItem = (event: MouseEvent, item: Record, grid: GridView) => any;
+declare type emptyFn = () => string;
+interface GridViewEventMap extends ContainerEventMap {
+    dblClick?: EvDblClick;
+    selectionChange?: EvSelectionChange;
+    contextMenu?: EvContextMenu;
+    gridCheck?: EvGridCheck;
+}
+export interface GridViewProps extends CProps<GridViewEventMap> {
+    store: DataStore | DataView;
+    columns: GridColumn[];
+    calcRowClass?: RowClassifier;
+    empty_text?: string | emptyFn;
+    hasMarks?: boolean;
+    hasFooter?: boolean;
+}
+/**
+ * gridview class
+ */
+export declare class GridView extends VLayout<GridViewProps, GridViewEventMap> {
+    protected m_dataview: DataView;
+    protected m_data_cx: EventDisposer;
+    protected m_columns: GridColumn[];
+    protected m_view_el: Component;
+    protected m_container: Component;
+    protected m_header: Component;
+    protected m_footer: Component;
+    protected m_empty_msg: Label;
+    protected m_empty_text: string | emptyFn;
+    protected m_selection: any;
+    private m_itemHeight;
+    private m_topIndex;
+    protected m_visible_rows: Component[];
+    protected m_hasMarks: boolean;
+    protected m_marks: Set<any>;
+    private m_recycler;
+    private m_rowClassifier;
+    constructor(props: GridViewProps);
+    componentCreated(): void;
+    /**
+     *
+     */
+    private _moveSel;
+    /**
+     *
+     */
+    private _handleKey;
+    /**
+     *
+     */
+    getNextSel(sens: number): any;
+    private _scrollIntoView;
+    /**
+     * change the list of item displayed
+     * @param items - new array of items
+     */
+    setStore(store: DataStore | DataView): void;
+    getView(): DataView;
+    /**
+     * return the current selection (row id) or null
+     */
+    getSelection(): any;
+    getSelRec(): Record;
+    setSelection(recId: any): void;
+    /** @ignore */
+    render(): void;
+    private _on_col_resize;
+    /**
+     *
+     */
+    private _sortCol;
+    /**
+     *
+     */
+    private _computeItemHeight;
+    private _createRow;
+    private _buildItems;
+    /**
+     *
+     */
+    private _updateScroll;
+    /** @ignore */
+    private _rowFromTarget;
+    private _itemClick;
+    private _itemDblClick;
+    /** @ignore */
+    private _itemMenu;
+    /**
+     *
+     */
+    private _findItem;
+    /**
+     * @ignore
+     * called when an item is selected by mouse
+     */
+    protected _selectItem(item: any, dom_item: Component, scrollIntoView?: string): void;
+    /**
+     *
+     */
+    protected _showItemContextMenu(event: MouseEvent, item: Record): void;
+    /**
+     *
+     */
+    clearSelection(): void;
+    /**
+     * todo: moveto datastore
+     */
+    exportData(filename: any): void;
+    set empty_text(text: string | HtmlString);
+    private _renderCheck;
+    private _toggleMark;
+    getMarks(): any[];
+    clearMarks(): void;
+    setFooterData(rec: any): void;
+}
+export {};