d2coreui 23.0.14 → 23.0.15

package/components/grid/detail/detailHeaderPanel.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, ProfileOutlined} from "@ant-design/icons";
+import i18n from "d2core/i18n/i18n";
+import {Button} from "antd";
+
+interface Props {
+    style?: React.CSSProperties
+    hidePrevNextButton?: boolean
+
+    onPrevRecord?(): void
+
+    onNextRecord?(): void
+
+    onClose?(): void
+}
+
+export default class DetailHeaderPanel extends React.Component<Props> {
+    constructor(props: Readonly<Props>) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div
+                className="d2-drawer-header"
+                style={{
+                    padding: "8px 4px 8px 12px",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    ...this.props.style
+                }}
+            >
+                <div>
+                    <ProfileOutlined/> {i18n("Detail")}
+                </div>
+                <div>
+                    {!this.props.hidePrevNextButton &&
+                        <Button.Group style={{marginTop: -4}}>
+                            <Button title={i18n("Previous Record")} onClick={this.props.onPrevRecord}>
+                                <ArrowUpOutlined/>
+                            </Button>
+                            <Button title={i18n("Next Record")} onClick={this.props.onNextRecord}>
+                                <ArrowDownOutlined/>
+                            </Button>
+                        </Button.Group>
+                    }
+                    <Button
+                        title={i18n("Close")}
+                        type="text"
+                        onClick={this.props.onClose}
+                    >
+                        <CloseOutlined/>
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+}

package/components/grid/export/contextMenu.tsx

@@ -0,0 +1,154 @@
+import {CopyOutlined, FileOutlined, FilePdfOutlined, FileTextOutlined} from "@ant-design/icons";
+import {MenuProps, Switch} from "antd";
+import React from "react";
+import i18n from "d2core/i18n/i18n";
+import {spawn, Thread, Worker} from "threads"
+import dayjs from "dayjs";
+import ProgressPopup from "./progressPopup";
+import {MenuElement} from "../dataGrid";
+import {ClipboardUtils} from "d2coreui/components/clipboard/clipboardUtils";
+// @ts-ignore
+import txtExportUrl from 'threads-plugin/dist/loader?name=txtExport!d2coreui/components/grid/export/worker/txtExport.ts'
+// @ts-ignore
+import csvExportUrl from "threads-plugin/dist/loader?name=csvExport!d2coreui/components/grid/export/worker/csvExport.ts"
+// @ts-ignore
+import clipboardExportUrl from "threads-plugin/dist/loader?name=clipboardExport!d2coreui/components/grid/export/worker/clipboardExport.ts"
+// @ts-ignore
+import pdfExportUrl from "threads-plugin/dist/loader?name=pdfExport!d2coreui/components/grid/export/worker/pdfExport.ts"
+import PlatformSpecific from "d2coreui/components/platformSpecific";
+
+
+export interface ContextMenuProps {
+    onlySelectedNodes?: boolean
+    showMilliseconds: boolean
+    showYear: boolean
+    hideNotificationOnClipboardCopy?: boolean
+    pageOrientation: PageOrientation
+    exporting: boolean
+
+    getExportContent: (progressPopup: ProgressPopup | null, props: ContextMenuProps) => Promise<string[][]>
+    onPageOrientationChange:(pageOrientation: PageOrientation)=>void
+    onExport:(start: boolean)=>void
+
+    // overrides context menu rendering
+    renderer?(menuElements: MenuElement[]): MenuElement[]
+
+    // handler for custom context menu items click
+    onClick?(key: string): void
+}
+
+export type PageOrientation = "PORTRAIT" | "LANDSCAPE";
+
+export default function getContextMenu(props: ContextMenuProps): MenuProps {
+    const {hideNotificationOnClipboardCopy, getExportContent, renderer, onClick} = props;
+
+    const onExportMenuClick = async (menuKey: string) => {
+        props.onExport(true);
+        switch (menuKey) {
+        case "txtExport": {
+                const progressPopup = new ProgressPopup(i18n("Export List to") + " TXT");
+                const tableContent = await getExportContent(progressPopup, props);
+                const txtExport = await spawn(new Worker(txtExportUrl));
+                const textContent = await txtExport(tableContent);
+                await Thread.terminate(txtExport);
+                await progressPopup.update(100);
+                PlatformSpecific.INSTANCE.saveContent(`export_${dayjs().format("YYYYMMDD_HHmm")}.txt`, textContent, true);
+                break;
+            }
+        case "csvExport": {
+                const progressPopup = new ProgressPopup(i18n("Export List to") + " CSV");
+                const tableContent = await getExportContent(progressPopup, props);
+                const csvExport = await spawn(new Worker(csvExportUrl));
+                const csvContent = await csvExport(tableContent);
+                await Thread.terminate(csvExport);
+                await progressPopup.update(100);
+                PlatformSpecific.INSTANCE.saveContent(`export_${dayjs().format("YYYYMMDD_HHmm")}.csv`, `\ufeff${csvContent}`, true);
+                break;
+            }
+        case "clipboardCopy": {
+                const progressPopup = !hideNotificationOnClipboardCopy ? new ProgressPopup(i18n("Export List to") + " " + i18n("Clipboard")) : null;
+                const tableContent = await getExportContent(progressPopup, props);
+                const clipboardExport = await spawn(new Worker(clipboardExportUrl));
+                const clipboardContent = await clipboardExport(tableContent);
+                const success = ClipboardUtils.copyToClipboard(clipboardContent);
+                if (success) {
+                    await Thread.terminate(clipboardExport);
+                    await progressPopup?.update(100);
+                } else {
+                    progressPopup?.error();
+                }
+                break;
+            }
+        case "pdfExport": {
+                const progressPopup = new ProgressPopup(i18n("Export List to") + " PDF");
+                const tableContent = await getExportContent(progressPopup, props);
+                const pdfExport = await spawn(new Worker(pdfExportUrl));
+                pdfExport.handler().subscribe(async (data: string) => {
+                    Thread.terminate(pdfExport);
+                    await progressPopup.update(100);
+                    PlatformSpecific.INSTANCE.saveContent(`export_${dayjs().format("YYYYMMDD_HHmm")}.pdf`, data, false);
+                });
+                pdfExport.export(tableContent, {pageOrientation: props.pageOrientation});
+            }
+        }
+        props.onExport(false);
+    }
+
+    let menuItems: MenuElement[] = [
+        {
+            key: "txtExport",
+            icon: <FileOutlined/>,
+            disabled: props.exporting,
+            label: i18n("Export List to") + " TXT",
+        },
+        {
+            key: "csvExport",
+            icon: <FileTextOutlined/>,
+            disabled: props.exporting,
+            label: i18n("Export List to") + " CSV",
+        },
+        {
+            key: "pdfExport",
+            icon: <FilePdfOutlined/>,
+            disabled: props.exporting,
+            label: <>
+                {i18n("Export List to") + " PDF"}
+                <Switch
+                    style={{marginLeft: 8}}
+                    checkedChildren={i18n("Landscape") + " "}
+                    unCheckedChildren={"" + i18n("Portrait")}
+                    checked={props.pageOrientation !== "PORTRAIT"}
+                    onChange={(checked, e) => {
+                        e.stopPropagation();
+                        (e as any).nativeEvent.stopImmediatePropagation();
+                        props.onPageOrientationChange(checked ? "LANDSCAPE" : "PORTRAIT")
+                    }}
+                />
+            </>
+        },
+        {
+            key: "divider1",
+            type: "divider",
+        },
+        {
+            key: "clipboardCopy",
+            icon: <CopyOutlined/>,
+            disabled: props.exporting,
+            label: i18n("Copy to Clipboard"),
+        }
+    ];
+
+    if (renderer) {
+        menuItems = renderer(menuItems);
+    }
+
+    return {
+        items: menuItems,
+        onClick: (item) => {
+            onExportMenuClick(item.key);
+            if (onClick) {
+                onClick(item.key.toString());
+            }
+        },
+    }
+}

package/components/grid/export/progressPopup.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import {LoadingOutlined} from "@ant-design/icons";
+import {notification, Progress} from "antd";
+import i18n from "d2core/i18n/i18n";
+import {ProgressProps} from "antd/lib/progress/progress";
+
+interface ProgressBarProps extends ProgressProps {
+    registerUpdateHandler(updateHandler: ((percent: number) => void) | null): void
+}
+
+interface ProgressBarState {
+    percent: number
+}
+
+export class ProgressBar extends React.Component<ProgressBarProps, ProgressBarState> {
+    constructor(props: Readonly<ProgressBarProps>) {
+        super(props);
+        this.state = {
+            percent: 0,
+        };
+    }
+
+    componentDidMount() {
+        if (this.props.registerUpdateHandler) {
+            this.props.registerUpdateHandler(this.makeProgress.bind(this));
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.registerUpdateHandler) {
+            this.props.registerUpdateHandler(null);
+        }
+    }
+
+    makeProgress(percent: number) {
+        this.setState({percent: percent});
+    }
+
+    render() {
+        const {registerUpdateHandler, ...rest} = this.props;
+        return <Progress percent={this.state.percent} {...rest}/>;
+    }
+}
+
+export default class ProgressPopup {
+    title: string;
+    recordCount?: number;
+    makeProgress: ((percent: number) => void) | null = null;
+    progressVisible: boolean = false;
+
+    constructor(title: string) {
+        this.title = title;
+    }
+
+    async initializeProgressPopup() {
+        notification.open({
+            message: this.title + (this.recordCount === undefined ? "" : i18n(" (%{n} records)", {n: "" + this.recordCount})),
+            key: "export",
+            description: <ProgressBar registerUpdateHandler={(makeProgress) => {
+                this.makeProgress = makeProgress;
+            }}/>,
+            icon: <LoadingOutlined/>,
+            duration: 0
+        });
+        this.progressVisible = true;
+        await this.sleep(100);
+    }
+
+    setRecordCount(recordCount: number) {
+        this.recordCount = recordCount;
+    }
+
+    async update(progressPercent: number) {
+        if (!this.progressVisible) {
+            await this.initializeProgressPopup();
+        }
+        if (progressPercent === 100) {
+            this.close();
+        }
+        if (this.makeProgress) {
+            this.makeProgress(progressPercent);
+        }
+    }
+
+    close() {
+        notification.success({
+            message: this.title + (this.recordCount === undefined ? "" : i18n(" (%{n} records)", {n: "" + this.recordCount})),
+            key: "export",
+            description: <Progress percent={100}/>
+        });
+        this.progressVisible = false;
+    }
+
+    error() {
+        notification.error({
+            message: this.title + (this.recordCount === undefined ? "" : i18n(" (%{n} records)", {n: "" + this.recordCount})),
+            key: "export",
+            description: <Progress status={"exception"} percent={100}/>
+        });
+        this.progressVisible = false;
+    }
+
+    sleep(ms: number): Promise<void> {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+}

package/components/grid/export/worker/clipboardExport.ts

@@ -0,0 +1,10 @@
+import {expose} from "threads/worker"
+
+function clipboardExport(tableData: string[][]) {
+    const textContent = tableData.map((row) => {
+        return row.join("\t");
+    }).join("\r\n");
+    return textContent;
+}
+
+expose(clipboardExport);

package/components/grid/export/worker/csvExport.ts

@@ -0,0 +1,10 @@
+import {expose} from "threads/worker"
+
+function csvExport(tableData:string[][]) {
+    const textContent = tableData.map((row) => {
+        return row.join(";");
+    }).join("\r\n");
+    return textContent;
+}
+
+expose(csvExport);

package/components/grid/export/worker/pdfExport.ts

@@ -0,0 +1,98 @@
+import {expose} from "threads/worker"
+import pdfMake from "pdfmake/build/pdfmake";
+import {PageOrientation, TDocumentDefinitions} from "pdfmake/interfaces";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+import dayjs from "dayjs";
+import {Observable, Subject} from "threads/observable"
+import {LocaleHolder} from "d2core/i18n/localeHolder";
+
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+
+interface PageConfig {
+    pageOrientation: PageOrientation
+}
+
+type TableCell = string | { text: string, style: string }
+
+function getPdfConfig(tableData: TableCell[][], pageConfig: PageConfig): TDocumentDefinitions {
+    // styling header
+    tableData[0] = tableData[0].map((value) => {
+        return {text: value as string, style: 'tableHeader'};
+    });
+    // escaping empty data
+    tableData.forEach((row) => {
+        row.forEach((value, index) => {
+            if (value === undefined || value === null) {
+                row[index] = "";
+            }
+        });
+    });
+    return {
+        content: [{
+            style: 'tableExample',
+            table: {
+                headerRows: 1,
+                // dontBreakRows: true,
+                // keepWithHeaderRows: 1,
+                body: tableData
+            }
+        }],
+        styles: {
+            header: {
+                fontSize: 10,
+                bold: true,
+                margin: [0, 0, 0, 10]
+            },
+            subheader: {
+                fontSize: 9,
+                bold: true,
+                margin: [0, 10, 0, 5]
+            },
+            tableExample: {
+                margin: [0, 5, 0, 15],
+
+            },
+            tableHeader: {
+                bold: true,
+                fontSize: 10,
+            }
+        },
+        defaultStyle: {
+            // alignment: 'justify',
+            fontSize: 10,
+        },
+        footer: function (currentPage: number, pageCount: number) {
+            return {
+                table: {
+                    widths: ['*'],
+                    body: [
+                        [
+                            {text: `${currentPage}/${pageCount}`, alignment: 'center'},
+                        ]
+                    ]
+                },
+                layout: 'noBorders'
+            };
+        },
+        info: {
+            title: `Export ${dayjs().format(LocaleHolder.getDateTimeFormat(true, true))}`,
+            author: 'D2000',
+        },
+        pageOrientation: pageConfig.pageOrientation
+    };
+}
+
+const subject = new Subject();
+const pdfExport = {
+    export(tableData: TableCell[][], pageConfig: PageConfig) {
+        pdfMake.createPdf(getPdfConfig(tableData, pageConfig)).getBase64((data) => {
+            subject.next(data);
+            subject.complete();
+        });
+    },
+    handler() {
+        return Observable.from(subject);
+    },
+};
+
+expose(pdfExport);

package/components/grid/export/worker/txtExport.ts

@@ -0,0 +1,21 @@
+import {expose} from "threads/worker"
+import padEnd from "lodash/padEnd";
+
+function txtExport(tableData:string[][]) {
+    let cellLengths = tableData[0].map((cell) => cell ? cell.length : 0);
+    cellLengths = tableData.reduce((result, row) => {
+        row.forEach((cell, index) => {
+            result[index] = Math.max(result[index], cell ? cell.length : 0);
+        });
+        return result;
+    }, cellLengths);
+    const textContent = tableData.map((row, index) => {
+        const rowContent = row.map((cell, index) => {
+            return padEnd(cell, cellLengths[index] + 1);
+        }).join("");
+        return index === 0 ? rowContent + "\r\n" + padEnd("", cellLengths.reduce((total, cellLength) => total + cellLength + 1, 0), "-") : rowContent;
+    }).join("\r\n");
+    return textContent;
+}
+
+expose(txtExport);