jpf 4.2.15 → 4.2.17

package/src/controls/kendo/Chart/Chart.ts

@@ -0,0 +1,97 @@
+import * as kendo from "@progress/kendo-ui/js/dataviz/chart/chart.js";
+import { View } from "../../../framework/View";
+import { Properties, extendProperties} from "../../../framework/ViewModel";
+import { Subscribable, unwrap, isSubscribable } from "knockout";
+
+export interface ChartProperties extends Properties {
+    data?: Array<any> | Subscribable<Array<any>>;
+    chartArea?: kendo.dataviz.ui.ChartChartArea | undefined;
+    series?: kendo.dataviz.ui.ChartSeriesItem[] | Subscribable<kendo.dataviz.ui.ChartSeriesItem[]>;
+    categoryAxis?: kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[] | Subscribable<kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[]>;
+    valueAxis?: kendo.dataviz.ui.ChartValueAxisItem | kendo.dataviz.ui.ChartValueAxisItem[] | undefined;
+    legend?: kendo.dataviz.ui.ChartLegend | undefined;
+}
+
+export class ChartView extends View<ChartProperties>{
+    constructor(properties: ChartProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoChart"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private chart: kendo.dataviz.ui.Chart;
+    private dataSource: kendo.data.DataSource;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        if (viewModel.data) {
+            this.dataSource = new kendo.data.DataSource(
+                {
+                    data: unwrap(viewModel.data)
+                }
+            );
+        }
+
+        if (isSubscribable(viewModel.data)) {
+            this.subscriptions.push(
+                viewModel.data.subscribe((data) => {
+                    this.dataSource.data(data);
+                })
+            );
+        }
+
+        setTimeout(() => {
+            this.chart = new kendo.dataviz.ui.Chart(
+                this.element,
+                {
+                    autoBind: false,
+                    legend: viewModel.legend,
+                    dataSource: this.dataSource,
+                    chartArea: viewModel.chartArea,
+                    series: unwrap(viewModel.series),
+                    categoryAxis: unwrap(viewModel.categoryAxis),
+                    valueAxis: viewModel.valueAxis
+                }
+            );
+        });
+
+        if (isSubscribable(viewModel.series)) {
+            this.subscriptions.push(
+                viewModel.series.subscribe((series) => {
+                    if (this.chart) {
+                        this.chart.setOptions({
+                            series: series
+                        });
+                    }
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.categoryAxis)) {
+            this.subscriptions.push(
+                viewModel.categoryAxis.subscribe((categoryAxis) => {
+                    if (this.chart) {
+                        this.chart.setOptions({
+                            categoryAxis: categoryAxis
+                        });
+                    }
+                })
+            );
+        }
+    }
+}
+
+export function chartView(properties: ChartProperties) {
+    return new ChartView(properties);
+}

package/src/controls/kendo/Culture/Culture.ts

@@ -0,0 +1,32 @@
+import { getScript } from "jquery";
+import kendo from "@progress/kendo-ui/js/kendo.core";
+
+export async function setCulture(cultureCode: string) {
+    if (!cultureCode || cultureCode === "en-US") return;
+
+    const kendoVersion = "2021.1.330";
+    const urlPrefix = "https://kendo.cdn.telerik.com/" + kendoVersion + "/js/";
+    const urlPostfix = "." + cultureCode + ".min.js";
+
+    try {
+        await getScript(urlPrefix + "cultures/kendo.culture" + urlPostfix);
+
+        //If the culture has been successfully loaded then we set the culture as active culture
+        kendo.culture(cultureCode);
+        //console.log("Culture loaded for " + cultureCode);
+    } catch (ec) {
+        const error = ec as Error;
+        //If the culture can not be loaded then we fall back to en-US
+        kendo.culture("en-US");
+        console.log("Failed loading culture for " + cultureCode + ": " + error.message);
+    }
+
+    try {
+        await getScript(urlPrefix + "messages/kendo.messages" + urlPostfix);
+
+        //console.log("Messages loaded for " + cultureCode);
+    } catch (em) {
+        const error = em as Error;
+        console.log("Failed loading messages for " + cultureCode + ": " + error.message);
+    }
+}

package/src/controls/kendo/DataSource/DataSource.ts

@@ -0,0 +1,4 @@
+export interface ChangedItem {
+    key: string;
+    dirtyFields: object;
+}

package/src/controls/kendo/Dialog/Dialog.ts

@@ -0,0 +1,64 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.window.js";
+import { View } from "../../../framework/View";
+import { DivView } from "../../html/Div/Div";
+import { ButtonView } from "../../html/Button/Button";
+
+export interface DialogOptions {
+    content?: View;
+    buttons?: Array<ButtonView>;
+}
+
+export class Dialog {
+    constructor(options: DialogOptions) {
+        this.options = options;
+    }
+
+    private options: DialogOptions;
+    private dialog: kendo.ui.Window;
+
+    open() {
+        this.dialog = new kendo.ui.Window(
+            document.createElement("div"),
+            {
+                modal: true,
+                maxHeight: (window as Window).innerHeight * 0.9,
+                maxWidth: (window as Window).innerWidth * 0.9,
+                open: (x) => {
+                    console.log(x);
+                    this.dialog.center();
+                    const wrapper = this.dialog.wrapper.get(0) as HTMLElement;
+                    if (this.options.content) {
+                        const content = wrapper.querySelector(".k-window-content");
+                        if (content) {
+                            content.appendChild(this.options.content.render());
+                        }
+                    }
+                    if (this.options.buttons) {
+                        const footer = new DivView({
+                            children: this.options.buttons,
+                            style: {
+                                display: "flex",
+                                justifyContent: "flex-end",
+                                borderTop: "1px solid gray",
+                                padding: "5px"
+                            }
+                        });
+                        wrapper.appendChild(footer.render());
+                    }
+                }
+            }
+        );
+
+        this.dialog.open();
+    }
+
+    close() {
+        if (this.dialog) {
+            this.dialog.close();
+        }
+    }
+}
+
+export function dialog(options: DialogOptions) {
+    return new Dialog(options);
+}

package/src/controls/kendo/Editor/Editor.ts

@@ -0,0 +1,142 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.editor.js";
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { unwrap, isObservable, computed, observable } from "knockout";
+import { isObservableProperty, ObservableProperty } from "../../../framework/observable";
+import { DivView } from "../../html/Div/Div";
+import { ButtonView } from "../../html/Button/Button";
+import { prettifyHtml } from "../../../utilities/html/html";
+
+export interface EditorProperties extends Properties {
+    value?: string | ObservableProperty<string>;
+    tools?: string[] | kendo.ui.EditorTool[];
+}
+
+export class EditorView extends View<EditorProperties> {
+    constructor(properties: EditorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoEditor",
+                        style: {
+                            display: "flex",
+                            flexDirection: "column"
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private editor: kendo.ui.Editor;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        const htmlMode = observable<boolean>(false);
+
+        const divHeader = new DivView({
+            children: [
+                new ButtonView({
+                    content: computed<string>(() => {
+                        return htmlMode() ? "wysiwyg" : "view html source";
+                    }),
+                    eventListeners: {
+                        click: {
+                            listener: () => {
+                                htmlMode(!htmlMode());
+                            }
+                        }
+                    },
+                    style: {
+                        width: "120px",
+                        marginTop: "2px"
+                    }
+                })
+            ]
+        }).render();
+
+        const divElement = new DivView({
+            visible: computed<boolean>(() => {
+                return !htmlMode();
+            }),
+            style: {
+                flexGrow: 1
+            }
+        }).render();
+
+        const textAreaElement = new View({
+            tagName: "textarea",
+            properties: {
+                visible: htmlMode,
+                style: {
+                    flexGrow: 1,
+                    borderColor: "transparent",
+                    borderRadius: "4px"
+                }
+            }
+        }).render() as HTMLTextAreaElement;
+
+        this.element.appendChild(divElement);
+        this.element.appendChild(textAreaElement);
+        this.element.appendChild(divHeader);
+
+        const html = unwrap(viewModel.value);
+        divElement.innerHTML = html;
+        textAreaElement.value = prettifyHtml(html);
+
+        if (isObservable(viewModel.value)) {
+            this.subscriptions.push(
+                viewModel.value.subscribe((value) => {
+                    divElement.innerHTML = value;
+                    textAreaElement.value = value;
+                })
+            );
+        }
+
+        this.editor = new kendo.ui.Editor(
+            divElement,
+            {
+                tools: viewModel.tools
+            }
+        );
+
+        this.editor.bind(
+            "change",
+            () => {
+                if (isObservableProperty(viewModel.value)) {
+                    viewModel.value.set(divElement.innerHTML);
+                }
+            }
+        );
+
+        textAreaElement.addEventListener("change", () => {
+            if (isObservableProperty(viewModel.value)) {
+                viewModel.value.set(textAreaElement.value);
+            }
+        });
+    }
+}
+
+export function editorView(properties: EditorProperties) {
+    return new EditorView(properties);
+}
+
+export class EditorViewModel extends ViewModel implements EditorProperties {
+    constructor(properties: EditorProperties) {
+        super();
+        this.setProperties(this, properties);
+    }
+    value?: string | ObservableProperty<string>;
+    tools?: string[] | kendo.ui.EditorTool[];
+}
+
+registerView(
+    EditorViewModel,
+    EditorView
+)

package/src/controls/kendo/Grid/Grid.ts

@@ -0,0 +1,291 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.grid.js";
+import { View, registerView } from "../../../framework/View";
+import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
+import { ObservableArrayProperty, ObservableProperty } from "../../../framework/observable";
+import { unwrap, utils, Subscribable, isSubscribable } from "knockout";
+import { ChangedItem } from "../DataSource/DataSource";
+import { knockoutObservableToKendoObservableArray, getUnderlyingObject } from "../ObservableObject/ObservableObject";
+
+export interface GridProperties<TItem> extends Properties {
+    items?: Array<TItem> | Subscribable<Array<TItem>>;
+    idProperty?: keyof TItem;
+    columns?: Array<kendo.ui.GridColumn>;
+    pageSize?: number;
+    sortable?: boolean | kendo.ui.GridSortable;
+    scrollable?: kendo.ui.GridScrollable;
+    editable?: kendo.ui.GridEditable;
+    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    toolbar?: string | Array<string>;
+    selectable?: boolean | string;
+    selectedItem?: TItem | Subscribable<TItem>;
+    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onGridChange?: (selectedItems: Array<any>, grid: kendo.ui.Grid) => void;
+    onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
+}
+
+export class GridView<TItem = any> extends View<GridProperties<TItem>> {
+    constructor(properties: GridProperties<TItem>) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoGrid"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private grid: kendo.ui.Grid;
+    private dataSource: kendo.data.DataSource;
+
+    private getItemById(id) {
+        if (this.properties.idProperty) {
+            const items = this.dataSource.data() as any as Array<any>;
+            return utils.arrayFirst(items, (item) => { return item[this.properties.idProperty] === id });
+        }
+
+        throw "Can only getItem when idProperty is set";
+    }
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        this.dataSource = new kendo.data.DataSource({
+            data: knockoutObservableToKendoObservableArray(viewModel.items),
+            pageSize: this.properties.pageSize || 30,
+            change: (event: kendo.data.DataSourceChangeEvent) => {
+                var items = event.items as Array<ChangedItem>;
+                switch (event.action) {
+                    case "itemchange":
+                        if (viewModel.onDataSourceChange) {
+                            viewModel.onDataSourceChange(items, event.sender);
+                        }
+                        break;
+
+                    case "add":
+                        if (viewModel.onDataSourceAdd) {
+                            viewModel.onDataSourceAdd(items, event.sender);
+                        }
+                        break;
+
+                    case "remove":
+                        if (viewModel.onDataSourceRemove) {
+                            viewModel.onDataSourceRemove(items, event.sender);
+                        }
+                        break;
+                }
+            }
+        });
+
+        this.grid = new kendo.ui.Grid(this.element, {
+            dataSource: this.dataSource,
+            columns: this.properties.columns,
+            toolbar: this.properties.toolbar,
+            scrollable: this.properties.scrollable,
+            sortable: this.properties.sortable,
+            editable: this.properties.editable,
+            filterable: unwrap(this.properties.filterable),
+            change: (event: kendo.ui.GridChangeEvent) => {
+                if (this.properties.selectedItem) {
+                    const selectedItem = getSelectedDataItem(event.sender);
+                    const observableProperty = this.properties.selectedItem as ObservableProperty;
+                    if (observableProperty.set) {
+                        observableProperty.set(selectedItem);
+                    }
+                }
+                if (this.properties.selectedItems) {
+                    const selectedItems = getSelectedDataItems<TItem>(event.sender);
+                    const observableArrayProperty = this.properties.selectedItems as ObservableArrayProperty<TItem>;
+                    if (observableArrayProperty.set) {
+                        observableArrayProperty.set(selectedItems);
+                    }
+                }
+
+                if (this.properties.onGridChange) {
+                    this.properties.onGridChange(getSelectedDataItems<TItem>(event.sender), event.sender);
+                }
+            },
+            selectable: this.properties.selectable
+        });
+
+        if (viewModel.onRowContextMenu) {
+            this.grid.table.contextmenu((event: PointerEvent) => {
+                event.preventDefault();
+                var target = event.target;
+                var row: HTMLTableRowElement;
+
+                if (target instanceof HTMLElement) {
+                    switch (target.tagName.toLowerCase()) {
+                        case "td":
+                            row = target.parentElement as HTMLTableRowElement;
+                            break;
+
+                        case "tr":
+                            row = target as HTMLTableRowElement;
+                            break;
+                    }
+                }
+
+                if (row) {
+                    let dataItem = this.grid.dataItem(row);
+                    if (dataItem) {
+                        const underlyingObject = getUnderlyingObject(dataItem);
+                        if (underlyingObject) {
+                            dataItem = underlyingObject as any;
+                        }
+                        setTimeout(() => {
+                            viewModel.onRowContextMenu(event, dataItem);
+                        });
+
+                    };
+                }
+            });
+        }
+        if (isSubscribable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    if (items) {
+                        this.dataSource.data(new kendo.data.ObservableArray(knockoutObservableToKendoObservableArray(items)));
+                    } else {
+                        this.dataSource.data([]);
+                    }
+                })
+            );
+        }
+        if (isSubscribable(viewModel.filterable)) {
+            this.subscriptions.push(
+                viewModel.filterable.subscribe((filterable) => {
+                    this.grid.setOptions({ filterable: filterable });
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.selectedItem)) {
+            this.subscriptions.push(
+                viewModel.selectedItem.subscribe((selectedItem: TItem) => {
+                    if (selectedItem && viewModel.idProperty) {
+                        setTimeout(
+                            () => {
+                                const id = selectedItem[viewModel.idProperty];
+                                const item = this.getItemById(id);
+                                //Remove previous selected row
+                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+                                //Add the selected class to the newly selected row
+                                this.grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("k-state-selected");
+                            },
+                            10
+                        );
+                    } else {
+                        this.grid.select();
+                    }
+                })
+            );
+        }
+
+        if (isSubscribable(viewModel.selectedItems)) {
+            this.subscriptions.push(
+                viewModel.selectedItems.subscribe((selectedItems: Array<TItem>) => {
+                    if (selectedItems && selectedItems.length > 0 && viewModel.idProperty) {
+                        setTimeout(
+                            () => {
+                                //Remove all previous selected rows
+                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+                                for (let index = 0; index < selectedItems.length; index++) {
+                                    const selectedItem = selectedItems[index];
+                                    const id = selectedItem[viewModel.idProperty];
+                                    const item = this.getItemById(id);
+
+                                    //Add the selected class to the newly selected row
+                                    this.grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("k-state-selected");
+                                }
+                            },
+                            10
+                        );
+                    } else {
+                        this.grid.select();
+                    }
+                })
+            );
+        }
+
+        //Force the grid to repaint to show the scrollbar properly
+        setTimeout(() => {
+            this.grid.resize(true);
+        }, 5);
+    }
+}
+
+export function gridView<TItem>(properties: GridProperties<TItem>) {
+    return new GridView(properties);
+}
+
+export function getSelectedDataItem<TDataItem>(grid: kendo.ui.Grid): TDataItem {
+    const selection = grid.select() as any as Array<any>;
+    if (selection.length === 1) {
+        const dataItem = grid.dataItem(selection[0]);
+        const underlyingObject = getUnderlyingObject(dataItem);
+        if (underlyingObject) {
+            return underlyingObject as any as TDataItem;
+        }
+        return dataItem.toJSON() as TDataItem;
+    }
+
+    return null;
+}
+
+export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
+    const selection = grid.select() as any as Array<any>;
+    const selectedDataItems = new Array();
+    if (selection && selection.length > 0) {
+        for (let index = 0; index < selection.length; index++) {
+            const dataItem = grid.dataItem(selection[index]);
+            const underlyingObject = getUnderlyingObject(dataItem);
+            if (underlyingObject) {
+                selectedDataItems.push(underlyingObject);
+            } else {
+                selectedDataItems.push(dataItem.toJSON());
+            }
+        }
+    }
+
+    return selectedDataItems;
+}
+
+export class GridViewModel<TItem = any> extends ViewModel implements GridProperties<TItem>
+{
+    constructor(properties: GridProperties<TItem>) {
+        super();
+        this.setProperties(this, properties);
+    }
+
+    items?: Array<TItem> | Subscribable<Array<TItem>>;
+    idProperty?: keyof TItem;
+    columns?: Array<kendo.ui.GridColumn>;
+    pageSize?: number;
+    sortable?: boolean | kendo.ui.GridSortable;
+    scrollable?: kendo.ui.GridScrollable;
+    editable?: kendo.ui.GridEditable;
+    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    toolbar?: string | Array<string>;
+    selectable?: boolean | string;
+    selectedItem?: TItem | Subscribable<TItem>;
+    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
+    onGridChange?: (selectedItems: Array<any>, grid: kendo.ui.Grid) => void;
+    onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
+}
+
+registerView(
+    GridViewModel,
+    GridView
+);