d2aura 23.0.0

package/coreui/components/history/entityHistoryListPanel.js

@@ -0,0 +1,154 @@
+import React from "react";
+import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
+import { getDateTimeColumn, getStringColumn } from "../grid/standardColumns";
+import { EntityColumn } from "../advancedFilter/advancedFilterColumnDefinitions";
+import i18n from "d2core/i18n/i18n";
+import dayjs from "d2core/dayjs";
+import DetailHeaderPanel from "../grid/detailHeaderPanel";
+import { Divider } from "antd";
+import EntityComparisonUtils from "../../../api/comparison/entityComparisonUtils";
+import { LocaleHolder } from "d2core/i18n/localeHolder";
+import cloneDeep from "lodash/cloneDeep";
+export default class EntityHistoryListPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.dataGrid = null;
+        this.firstLoadedPage = null;
+        this.manualReload = true;
+        this.mask = LocaleHolder.getDateTimeFormat(true, true, false);
+        this.state = {
+            columnDefs: this.getInitialColumnDefs(),
+            loading: false,
+            datasource: {
+                getRows: async (params) => {
+                    if (this.firstLoadedPage) {
+                        let pageableList;
+                        if (this.manualReload && params.startRow === 0 && params.endRow === 100) {
+                            this.manualReload = false;
+                            pageableList = this.firstLoadedPage;
+                        }
+                        else {
+                            pageableList = await this.getRecords(params.startRow, params.endRow);
+                        }
+                        params.successCallback(pageableList.data, pageableList.totalNumberOfRows);
+                        if (this.state.selectedData.length === 0) {
+                            const rowNode = this.gridApi?.getRowNode("0");
+                            if (rowNode) {
+                                rowNode.setSelected(true);
+                                this.setState({ selectedData: [rowNode.data] });
+                                this.dataGrid?.showDetailPanel(true);
+                            }
+                            setTimeout(() => {
+                                this.forceUpdate();
+                            }, 400);
+                        }
+                    }
+                    else {
+                        params.successCallback([], 0);
+                    }
+                }
+            },
+            selectedData: [],
+        };
+        this.onSelectionChanged = this.onSelectionChanged.bind(this);
+        this.onLoadData = this.onLoadData.bind(this);
+        this.renderDetailPanel = this.renderDetailPanel.bind(this);
+    }
+    async onLoadData(callback) {
+        this.manualReload = true;
+        this.firstLoadedPage = await this.getRecords(0, 100);
+        callback(this.firstLoadedPage.totalNumberOfRows);
+        this.gridApi?.onFilterChanged();
+    }
+    async getRecords(from, to) {
+        this.setState({ loading: true });
+        const pageableList = await this.props.api.getHistory(this.props.entity?.id, from, to);
+        this.setState({ loading: false });
+        return pageableList;
+    }
+    getInitialColumnDefs() {
+        if (!this.initialColumnDefs) {
+            this.initialColumnDefs = [
+                getDateTimeColumn(EntityColumn.CREATE_DATE, undefined, { sortable: false, headerName: i18n("Date") }),
+                getStringColumn(EntityColumn.CREATED_BY, undefined, { headerName: i18n("User"), sortable: false }),
+            ];
+        }
+        return this.initialColumnDefs;
+    }
+    renderConfigHeader() {
+        let rightContentTitle = i18n("Current");
+        if (this.state.selectedData.length === 2) {
+            rightContentTitle = dayjs(this.state.selectedData[1]?.date_in).format(this.mask);
+        }
+        return (React.createElement("div", null,
+            React.createElement(DetailHeaderPanel, { onPrevRecord: () => this.dataGrid?.selectNextPreviousRecord(true), onNextRecord: () => this.dataGrid?.selectNextPreviousRecord(false), onClose: () => this.onCloseDetailPanel() }),
+            React.createElement("div", { style: { display: "flex", marginTop: 4, fontWeight: 500 } },
+                React.createElement("div", { style: { width: "50%" } },
+                    React.createElement("span", { style: { marginLeft: 12 } }, dayjs(this.state.selectedData[0]?.date_in).format(this.mask))),
+                React.createElement(Divider, { style: { height: "auto", margin: "8px 0px 0px" }, type: "vertical" }),
+                React.createElement("div", { style: { width: "50%" } },
+                    React.createElement("span", { style: { marginLeft: 12 } }, rightContentTitle)))));
+    }
+    renderDetailPanel() {
+        const leftContentEntity = this.getLeftContentEntity();
+        const rightContentEntity = this.getRightContentEntity();
+        const differences = EntityComparisonUtils.compare(leftContentEntity, rightContentEntity);
+        return (React.createElement("div", null,
+            this.renderConfigHeader(),
+            React.createElement("div", { style: { display: "flex" } },
+                this.props.renderDetail(leftContentEntity, differences),
+                React.createElement(Divider, { style: { height: "auto", margin: 0 }, type: "vertical" }),
+                this.props.renderDetail(rightContentEntity, differences))));
+    }
+    getLeftContentEntity() {
+        if (this.state.selectedData[0]) {
+            const leftContentEntity = cloneDeep(this.state.selectedData[0]);
+            leftContentEntity.id = this.props.entity.id;
+            return leftContentEntity;
+        }
+        return undefined;
+    }
+    getRightContentEntity() {
+        if (this.state.selectedData.length === 2) {
+            const rightContentEntity = cloneDeep(this.state.selectedData[1]);
+            rightContentEntity.id = this.props.entity.id;
+            return rightContentEntity;
+        }
+        return this.props.entity;
+    }
+    onCloseDetailPanel() {
+        this.setState({ selectedData: this.gridApi?.getSelectedRows() ?? [] });
+        this.dataGrid?.showDetailPanel(false);
+    }
+    onSelectionChanged(event) {
+        this.props.onSelectionChanged();
+        const selectedRows = event.api.getSelectedRows();
+        if (selectedRows.length > 0) {
+            this.setState({ selectedData: selectedRows });
+        }
+        else {
+            this.setState({ selectedData: [] });
+            this.dataGrid?.showDetailPanel(false);
+        }
+    }
+    render() {
+        return (React.createElement("div", { style: { position: "relative", width: "100%", height: "100%" } },
+            React.createElement(ExtendedDataGrid, { ref: (dataGrid) => {
+                    this.dataGrid = dataGrid;
+                }, defaultGridConfiguration: { pageSize: -1 }, onGridReady: (params) => {
+                    this.gridApi = params.api;
+                }, rowModelType: "infinite", datasource: this.state.datasource, onLoadData: this.onLoadData, onSelectionChanged: this.onSelectionChanged, columnDefs: this.state.columnDefs, search: {
+                    onSearch: () => {
+                        this.dataGrid?.loadData();
+                    },
+                    hidden: true,
+                }, onRowDoubleClicked: (event) => {
+                    this.setState({ selectedData: [event.data] });
+                    this.dataGrid?.showDetailPanel(true);
+                }, detailPanel: {
+                    defaultWidth: this.props.detailPanelWidth,
+                    renderer: this.renderDetailPanel
+                }, rowSelection: "multiple", noRecordsOverlayRenderer: () => React.createElement("div", null) })));
+    }
+}
+//# sourceMappingURL=entityHistoryListPanel.js.map

package/coreui/components/history/entityHistoryListPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entityHistoryListPanel.js","sourceRoot":"","sources":["../../../../../coreui/components/history/entityHistoryListPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {GridApi, GridReadyEvent, IDatasource, IGetRowsParams, SelectionChangedEvent} from \"ag-grid-community\";\r\nimport ExtendedDataGrid from \"d2coreui/components/grid/extendedDataGrid\";\r\nimport AuditableEntity from \"../../../api/types/auditableEntity\";\r\nimport {DataGridColDef, OnLoadDataCallback} from \"d2coreui/components/grid/dataGrid\";\r\nimport AbstractEntityApi, {PageableList} from \"../../../api/abstractEntityApi\";\r\nimport {getDateTimeColumn, getStringColumn} from \"../grid/standardColumns\";\r\nimport {EntityColumn} from \"../advancedFilter/advancedFilterColumnDefinitions\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport dayjs from \"d2core/dayjs\";\r\nimport DetailHeaderPanel from \"../grid/detailHeaderPanel\";\r\nimport {Divider} from \"antd\";\r\nimport EntityComparisonUtils from \"../../../api/comparison/entityComparisonUtils\";\r\nimport {LocaleHolder} from \"d2core/i18n/localeHolder\";\r\nimport cloneDeep from \"lodash/cloneDeep\";\r\n\r\ninterface Props<T extends AuditableEntity> {\r\n    api: AbstractEntityApi<T>\r\n    entity?: T\r\n    detailPanelWidth: number\r\n\r\n    onSelectionChanged(): void\r\n\r\n    renderDetail(entity: T | undefined, differences: string[]): React.ReactNode\r\n}\r\n\r\ninterface State<T extends AuditableEntity> {\r\n    columnDefs: DataGridColDef[]\r\n    loading: boolean\r\n    datasource: IDatasource\r\n    selectedData: T[]\r\n}\r\n\r\nexport default class EntityHistoryListPanel<T extends AuditableEntity> extends React.Component<Props<T>, State<T>> {\r\n    private initialColumnDefs?: DataGridColDef[];\r\n    private dataGrid: ExtendedDataGrid<T> | null = null;\r\n    private gridApi?: GridApi;\r\n    private firstLoadedPage: PageableList<T> | null = null;\r\n    private manualReload = true;\r\n    private mask = LocaleHolder.getDateTimeFormat(true, true, false);\r\n\r\n    constructor(props: Readonly<Props<T>>) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            columnDefs: this.getInitialColumnDefs(),\r\n            loading: false,\r\n            datasource: {\r\n                getRows: async (params: IGetRowsParams) => {\r\n                    if (this.firstLoadedPage) {\r\n                        let pageableList: PageableList<T>;\r\n                        if (this.manualReload && params.startRow === 0 && params.endRow === 100) {\r\n                            this.manualReload = false;\r\n                            pageableList = this.firstLoadedPage;\r\n                        } else {\r\n                            pageableList = await this.getRecords(params.startRow, params.endRow);\r\n                        }\r\n                        params.successCallback(pageableList.data, pageableList.totalNumberOfRows);\r\n\r\n                        if (this.state.selectedData.length === 0) {\r\n                            const rowNode = this.gridApi?.getRowNode(\"0\");\r\n                            if (rowNode) {\r\n                                rowNode.setSelected(true);\r\n                                this.setState({selectedData: [rowNode.data]});\r\n                                this.dataGrid?.showDetailPanel(true);\r\n                            }\r\n                            setTimeout(() => {\r\n                                this.forceUpdate();\r\n                            }, 400);\r\n                        }\r\n                    } else {\r\n                        params.successCallback([], 0);\r\n                    }\r\n                }\r\n            },\r\n            selectedData: [],\r\n        }\r\n\r\n        this.onSelectionChanged = this.onSelectionChanged.bind(this);\r\n        this.onLoadData = this.onLoadData.bind(this);\r\n        this.renderDetailPanel = this.renderDetailPanel.bind(this);\r\n    }\r\n\r\n    private async onLoadData(callback: OnLoadDataCallback) {\r\n        this.manualReload = true;\r\n        this.firstLoadedPage = await this.getRecords(0, 100);\r\n        callback(this.firstLoadedPage.totalNumberOfRows);\r\n        this.gridApi?.onFilterChanged();\r\n    }\r\n\r\n    private async getRecords(from: number, to: number): Promise<PageableList<T>> {\r\n        this.setState({loading: true});\r\n        const pageableList = await this.props.api.getHistory(this.props.entity?.id!, from, to);\r\n        this.setState({loading: false});\r\n        return pageableList;\r\n    }\r\n\r\n    private getInitialColumnDefs(): DataGridColDef[] {\r\n        if (!this.initialColumnDefs) {\r\n            this.initialColumnDefs = [\r\n                getDateTimeColumn(EntityColumn.CREATE_DATE, undefined, {sortable: false, headerName: i18n(\"Date\")}),\r\n                getStringColumn(EntityColumn.CREATED_BY, undefined, {headerName: i18n(\"User\"), sortable: false}),\r\n            ]\r\n        }\r\n\r\n        return this.initialColumnDefs;\r\n    }\r\n\r\n    private renderConfigHeader() {\r\n        let rightContentTitle = i18n(\"Current\");\r\n        if (this.state.selectedData.length === 2) {\r\n            rightContentTitle = dayjs(this.state.selectedData[1]?.date_in).format(this.mask);\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                <DetailHeaderPanel\r\n                    onPrevRecord={() => this.dataGrid?.selectNextPreviousRecord(true)}\r\n                    onNextRecord={() => this.dataGrid?.selectNextPreviousRecord(false)}\r\n                    onClose={() => this.onCloseDetailPanel()}\r\n                />\r\n                <div style={{display: \"flex\", marginTop: 4, fontWeight: 500}}>\r\n                    <div style={{width: \"50%\"}}>\r\n                        <span style={{marginLeft: 12}}>\r\n                            {dayjs(this.state.selectedData[0]?.date_in).format(this.mask)}\r\n                        </span>\r\n                    </div>\r\n                    <Divider style={{height: \"auto\", margin: \"8px 0px 0px\"}} type=\"vertical\"/>\r\n                    <div style={{width: \"50%\"}}>\r\n                        <span style={{marginLeft: 12}}>{rightContentTitle}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderDetailPanel(): React.ReactElement {\r\n        const leftContentEntity = this.getLeftContentEntity();\r\n        const rightContentEntity = this.getRightContentEntity();\r\n        const differences = EntityComparisonUtils.compare(leftContentEntity, rightContentEntity);\r\n\r\n        return (\r\n            <div>\r\n                {this.renderConfigHeader()}\r\n                <div style={{display: \"flex\"}}>\r\n                    {this.props.renderDetail(leftContentEntity, differences)}\r\n                    <Divider style={{height: \"auto\", margin: 0}} type=\"vertical\"/>\r\n                    {this.props.renderDetail(rightContentEntity, differences)}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n\r\n    private getLeftContentEntity(): T | undefined {\r\n        if (this.state.selectedData[0]) {\r\n            const leftContentEntity = cloneDeep(this.state.selectedData[0]);\r\n            leftContentEntity.id = this.props.entity!.id;\r\n            return leftContentEntity;\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    private getRightContentEntity(): T | undefined {\r\n        if (this.state.selectedData.length === 2) {\r\n            const rightContentEntity = cloneDeep(this.state.selectedData[1]);\r\n            rightContentEntity.id = this.props.entity!.id;\r\n            return rightContentEntity;\r\n        }\r\n        return this.props.entity;\r\n    }\r\n\r\n    private onCloseDetailPanel() {\r\n        this.setState({selectedData: this.gridApi?.getSelectedRows() ?? []});\r\n        this.dataGrid?.showDetailPanel(false);\r\n    }\r\n\r\n    private onSelectionChanged(event: SelectionChangedEvent) {\r\n        this.props.onSelectionChanged();\r\n        const selectedRows = event.api.getSelectedRows();\r\n        if (selectedRows.length > 0) {\r\n            this.setState({selectedData: selectedRows});\r\n        } else {\r\n            this.setState({selectedData: []});\r\n            this.dataGrid?.showDetailPanel(false);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div style={{position: \"relative\", width: \"100%\", height: \"100%\"}}>\r\n                <ExtendedDataGrid<T>\r\n                    ref={(dataGrid) => {\r\n                        this.dataGrid = dataGrid;\r\n                    }}\r\n                    defaultGridConfiguration={{pageSize: -1}}\r\n                    onGridReady={(params: GridReadyEvent) => {\r\n                        this.gridApi = params.api;\r\n                    }}\r\n                    rowModelType=\"infinite\"\r\n                    datasource={this.state.datasource}\r\n                    onLoadData={this.onLoadData}\r\n                    onSelectionChanged={this.onSelectionChanged}\r\n                    columnDefs={this.state.columnDefs}\r\n                    search={{\r\n                        onSearch: () => {\r\n                            this.dataGrid?.loadData();\r\n                        },\r\n                        hidden: true,\r\n                    }}\r\n                    onRowDoubleClicked={(event) => {\r\n                        this.setState({selectedData: [event.data]});\r\n                        this.dataGrid?.showDetailPanel(true);\r\n                    }}\r\n                    detailPanel={{\r\n                        defaultWidth: this.props.detailPanelWidth,\r\n                        renderer: this.renderDetailPanel\r\n                    }}\r\n                    rowSelection=\"multiple\"\r\n                    noRecordsOverlayRenderer={() => <div/>}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/languageSelect/languageSelect.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export declare enum LanguageEnum {
+    ENGLISH = "en",
+    SLOVAK = "sk",
+    UKRAINE = "uk"
+}
+interface Props {
+    value: LanguageEnum;
+    allowedLanguages: LanguageEnum[];
+    onChange(value: LanguageEnum): void;
+}
+export default class LanguageSelect extends React.Component<Props> {
+    private languageFlagMap;
+    constructor(props: Readonly<Props>);
+    render(): React.JSX.Element;
+}
+export {};

package/coreui/components/languageSelect/languageSelect.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Select } from "antd";
+import flagEN from "../../images/flags/flag_en.svg";
+import flagSK from "../../images/flags/flag_sk.svg";
+import flagUK from "../../images/flags/flag_uk.svg";
+export var LanguageEnum;
+(function (LanguageEnum) {
+    LanguageEnum["ENGLISH"] = "en";
+    LanguageEnum["SLOVAK"] = "sk";
+    LanguageEnum["UKRAINE"] = "uk";
+})(LanguageEnum || (LanguageEnum = {}));
+export default class LanguageSelect extends React.Component {
+    constructor(props) {
+        super(props);
+        this.languageFlagMap = {
+            [LanguageEnum.ENGLISH]: { svg: flagEN, title: "United Kingdom" },
+            [LanguageEnum.SLOVAK]: { svg: flagSK, title: "Slovakia" },
+            [LanguageEnum.UKRAINE]: { svg: flagUK, title: "Ukraine" },
+        };
+    }
+    render() {
+        return (React.createElement(Select, { variant: "borderless", style: { width: 72, marginRight: 8 }, value: this.props.value, onChange: this.props.onChange }, this.props.allowedLanguages.map(value => {
+            return (React.createElement(Select.Option, { value: value, key: value },
+                React.createElement("img", { style: { marginBottom: 2 }, src: this.languageFlagMap[value].svg, width: "34", height: "20", alt: this.languageFlagMap[value].title })));
+        })));
+    }
+}
+//# sourceMappingURL=languageSelect.js.map

package/coreui/components/languageSelect/languageSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"languageSelect.js","sourceRoot":"","sources":["../../../../../coreui/components/languageSelect/languageSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,MAAM,CAAC;AAC5B,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACpB,8BAAc,CAAA;IACd,6BAAa,CAAA;IACb,8BAAc,CAAA;AAClB,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AASD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAgB;IAO9D,YAAY,KAAsB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QAPT,oBAAe,GAAgE;YACnF,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,EAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAC;YAC9D,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,EAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAC;YACvD,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,EAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAC;SAC1D,CAAA;IAID,CAAC;IAED,MAAM;QACF,OAAO,CACH,oBAAC,MAAM,IACH,OAAO,EAAC,YAAY,EACpB,KAAK,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAC,EAClC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAE5B,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACrC,OAAO,CACH,oBAAC,MAAM,CAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK;gBACnC,6BACI,KAAK,EAAE,EAAC,YAAY,EAAE,CAAC,EAAC,EACxB,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,EACpC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,KAAK,GACxC,CACU,CACnB,CAAC;QACN,CAAC,CAAC,CACG,CACZ,CAAC;IACN,CAAC;CAEJ","sourcesContent":["import React from \"react\";\r\nimport {Select} from \"antd\";\r\nimport flagEN from \"../../images/flags/flag_en.svg\";\r\nimport flagSK from \"../../images/flags/flag_sk.svg\";\r\nimport flagUK from \"../../images/flags/flag_uk.svg\";\r\n\r\nexport enum LanguageEnum {\r\n    ENGLISH = \"en\",\r\n    SLOVAK = \"sk\",\r\n    UKRAINE = \"uk\",\r\n}\r\n\r\ninterface Props {\r\n    value: LanguageEnum\r\n    allowedLanguages: LanguageEnum[]\r\n\r\n    onChange(value: LanguageEnum): void\r\n}\r\n\r\nexport default class LanguageSelect extends React.Component<Props> {\r\n    private languageFlagMap: { [language in LanguageEnum]: { svg: any, title: string } } = {\r\n        [LanguageEnum.ENGLISH]: {svg: flagEN, title: \"United Kingdom\"},\r\n        [LanguageEnum.SLOVAK]: {svg: flagSK, title: \"Slovakia\"},\r\n        [LanguageEnum.UKRAINE]: {svg: flagUK, title: \"Ukraine\"},\r\n    }\r\n\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Select\r\n                variant=\"borderless\"\r\n                style={{width: 72, marginRight: 8}}\r\n                value={this.props.value}\r\n                onChange={this.props.onChange}\r\n            >\r\n                {this.props.allowedLanguages.map(value => {\r\n                    return (\r\n                        <Select.Option value={value} key={value}>\r\n                            <img\r\n                                style={{marginBottom: 2}}\r\n                                src={this.languageFlagMap[value].svg}\r\n                                width=\"34\"\r\n                                height=\"20\"\r\n                                alt={this.languageFlagMap[value].title}\r\n                            />\r\n                        </Select.Option>\r\n                    );\r\n                })}\r\n            </Select>\r\n        );\r\n    }\r\n\r\n}"]}

package/coreui/components/modalWithIcon/openModalWithIcon.d.ts

@@ -0,0 +1,8 @@
+import { ModalDialogFuncProps } from "d2coreui/components/modal/modalDialog";
+import React from "react";
+export declare function openModalWithIcon(props: Omit<ModalDialogFuncProps, "mode"> & {
+    customIcon: React.ReactNode;
+    text: React.ReactNode;
+}): {
+    destroy: () => void;
+};

package/coreui/components/modalWithIcon/openModalWithIcon.js

@@ -0,0 +1,30 @@
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import React from "react";
+export function openModalWithIcon(props) {
+    const { customIcon, text } = props;
+    return ModalDialog.success({
+        mode: "NO_BUTTONS",
+        styles: {
+            body: {
+                textAlign: "center"
+            }
+        },
+        icon: null,
+        centered: true,
+        autoFocusButton: null,
+        content: React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 20,
+                margin: "12px 0px 28px"
+            } },
+            customIcon,
+            text),
+        okButtonProps: {
+            block: true
+        },
+        ...props
+    });
+}
+//# sourceMappingURL=openModalWithIcon.js.map

package/coreui/components/modalWithIcon/openModalWithIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openModalWithIcon.js","sourceRoot":"","sources":["../../../../../coreui/components/modalWithIcon/openModalWithIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAwC,MAAM,uCAAuC,CAAC;AACzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,UAAU,iBAAiB,CAAC,KAGjC;IACG,MAAM,EAAC,UAAU,EAAE,IAAI,EAAC,GAAG,KAAK,CAAC;IAEjC,OAAO,WAAW,CAAC,OAAO,CAAC;QACvB,IAAI,cAA4B;QAChC,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,SAAS,EAAE,QAAQ;aACtB;SACJ;QACD,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,IAAI;QACrB,OAAO,EACH,6BACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,eAAe;aAC1B;YAEA,UAAU;YACV,IAAI,CACH;QACV,aAAa,EAAE;YACX,KAAK,EAAE,IAAI;SACd;QACD,GAAG,KAAK;KACX,CAAC,CAAA;AACN,CAAC","sourcesContent":["import {ModalDialog, ModalDialogFuncProps, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport React from \"react\";\r\n\r\nexport function openModalWithIcon(props: Omit<ModalDialogFuncProps, \"mode\"> & {\r\n    customIcon: React.ReactNode,\r\n    text: React.ReactNode\r\n}): { destroy: () => void } {\r\n    const {customIcon, text} = props;\r\n\r\n    return ModalDialog.success({\r\n        mode: ModalDialogMode.NO_BUTTONS,\r\n        styles: {\r\n            body: {\r\n                textAlign: \"center\"\r\n            }\r\n        },\r\n        icon: null,\r\n        centered: true,\r\n        autoFocusButton: null,\r\n        content:\r\n            <div\r\n                style={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"column\",\r\n                    alignItems: \"center\",\r\n                    gap: 20,\r\n                    margin: \"12px 0px 28px\"\r\n                }}\r\n            >\r\n                {customIcon}\r\n                {text}\r\n            </div>,\r\n        okButtonProps: {\r\n            block: true\r\n        },\r\n        ...props\r\n    })\r\n}"]}

package/coreui/components/select/abstractSelect.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import Entity from "../../../api/types/entity";
+import AbstractEntityApi from "../../../api/abstractEntityApi";
+import { AdvancedFilterApi, AdvancedFilterCondition } from "../../../api/advancedFilterApi";
+export declare enum DetailModalDialogMode {
+    NEW = 0,
+    DETAIL = 1
+}
+export interface SelectedEntity {
+    id: number;
+    name: string | null;
+    code: string | null;
+    extra?: string;
+}
+export interface AbstractSelectProps<T extends Entity> {
+    api: AbstractEntityApi<T>;
+    advancedFilterApi: AdvancedFilterApi;
+    disabled?: boolean;
+    selectedItem?: SelectedEntity;
+    filterConditions?: AdvancedFilterCondition[];
+    onItemSelected?(selectedItem?: T): void;
+}
+export interface AbstractSelectState<T extends Entity> {
+    selectDialogVisible: boolean;
+    detailDialogVisible: boolean;
+    detailModalDialogMode?: DetailModalDialogMode;
+    entityToCreateOrEdit?: T;
+    loading: boolean;
+    suggestedItems: T[];
+    waitingForNewEntity: boolean;
+    waitingForEntityDetail: boolean;
+}
+export default abstract class AbstractSelect<T extends Entity, P extends AbstractSelectProps<T>, S extends AbstractSelectState<T> = AbstractSelectState<T>> extends React.Component<P, S> {
+    protected constructor(props: Readonly<P>);
+    protected initialState: AbstractSelectState<T>;
+    componentDidUpdate(prevProps: Readonly<P>): void;
+    protected getFilterConditionForCode(searchString?: string): AdvancedFilterCondition;
+    protected getFilterConditionForName(searchString?: string): AdvancedFilterCondition;
+    protected getFilterConditions(searchString?: string): AdvancedFilterCondition[];
+    private onLoadData;
+    protected createNewEntity(): Promise<T>;
+    protected getEntity(id: number): Promise<T>;
+    private renderNewEntityButton;
+    private renderDetailEntityButton;
+    private showCancelButton;
+    private showDetailButton;
+    private showNewEntityButton;
+    protected getSuffixIcon(): React.ReactNode;
+    abstract renderSelectDialog(): React.ReactNode;
+    protected onSaveEntity(savedEntity: T): void;
+    renderDetailPanel(): React.ReactNode;
+    protected getNewEntityModalDialogTitle(): string;
+    private getModalDialogTitle;
+    private renderDetailPanelModalDialog;
+    protected getExtraValueForDropdown(_suggestedItem: T): string | undefined;
+    render(): React.JSX.Element;
+}

package/coreui/components/select/abstractSelect.js

@@ -0,0 +1,233 @@
+import React from "react";
+import { CloseCircleOutlined, LoadingOutlined, MonitorOutlined, PlusCircleOutlined, SelectOutlined } from "@ant-design/icons";
+import { Select } from "antd";
+import { AdvancedFilterLogicalOperator, AdvancedFilterOperator } from "../../../api/advancedFilterApi";
+import debounce from "lodash/debounce";
+import AdvancedFilterUtils from "../advancedFilter/advancedFilterUtils";
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import i18n from "d2core/i18n/i18n";
+import { EntityColumn, getStringAdvancedFilterColumn } from "../advancedFilter/advancedFilterColumnDefinitions";
+import { ERROR_COLOR } from "../../../api/constants/constants";
+import TitleWithCodePanel from "../titleWithCodePanel/titleWithCodePanel";
+import ColorTag from "../colorTag/colorTag";
+import { createStyles } from "antd-style";
+import WithCss from "d2coreui/components/style/withCss";
+const useStyles = createStyles(({ css }) => {
+    return {
+        abstractSelectWithDetail: css `
+            .ant-select-selection-item {
+                max-width: calc(100% - 52px);
+            }
+        `
+    };
+});
+export var DetailModalDialogMode;
+(function (DetailModalDialogMode) {
+    DetailModalDialogMode[DetailModalDialogMode["NEW"] = 0] = "NEW";
+    DetailModalDialogMode[DetailModalDialogMode["DETAIL"] = 1] = "DETAIL";
+})(DetailModalDialogMode || (DetailModalDialogMode = {}));
+export default class AbstractSelect extends React.Component {
+    constructor(props) {
+        super(props);
+        this.initialState = {
+            selectDialogVisible: false,
+            detailDialogVisible: false,
+            loading: false,
+            suggestedItems: [],
+            waitingForNewEntity: false,
+            waitingForEntityDetail: false,
+        };
+        this.onLoadData = debounce(this.onLoadData.bind(this), 500);
+        this.onSaveEntity = this.onSaveEntity.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.selectedItem?.id !== this.props.selectedItem?.id) {
+            this.setState({ suggestedItems: [] });
+        }
+    }
+    getFilterConditionForCode(searchString) {
+        return AdvancedFilterUtils.createNewCondition(-1, getStringAdvancedFilterColumn(EntityColumn.CODE), {
+            operator: AdvancedFilterOperator.LIKE,
+            value: `%${searchString ?? ""}%`,
+        });
+    }
+    getFilterConditionForName(searchString) {
+        return AdvancedFilterUtils.createNewCondition(-2, getStringAdvancedFilterColumn(EntityColumn.NAME), {
+            operator: AdvancedFilterOperator.LIKE,
+            value: `%${searchString ?? ""}%`,
+        });
+    }
+    getFilterConditions(searchString) {
+        const filterConditionForCode = this.getFilterConditionForCode(searchString);
+        filterConditionForCode.left_par = 1;
+        filterConditionForCode.logical_operator = AdvancedFilterLogicalOperator.OR;
+        const filterConditionForName = this.getFilterConditionForName(searchString);
+        filterConditionForName.right_par = 1;
+        return [
+            filterConditionForCode,
+            filterConditionForName,
+        ];
+    }
+    async onLoadData(searchString) {
+        this.setState({ loading: true });
+        const filterConditions = this.getFilterConditions(searchString);
+        if (this.props.filterConditions) {
+            filterConditions[filterConditions.length - 1].logical_operator = AdvancedFilterLogicalOperator.AND;
+            filterConditions.push(...this.props.filterConditions);
+        }
+        const pageableList = await this.props.api.getAllData(0, 10, "", filterConditions, true);
+        this.setState({ suggestedItems: pageableList.data, loading: false });
+    }
+    async createNewEntity() {
+        return await this.props.api.createNewEntity();
+    }
+    async getEntity(id) {
+        return await this.props.api.getEntity(id);
+    }
+    renderNewEntityButton() {
+        if (this.state.waitingForNewEntity) {
+            return React.createElement(LoadingOutlined, null);
+        }
+        else {
+            return (React.createElement(PlusCircleOutlined, { title: i18n("Create New Entity"), style: { cursor: "pointer" }, disabled: this.state.waitingForEntityDetail, onClick: async () => {
+                    this.setState({
+                        waitingForNewEntity: true,
+                        detailModalDialogMode: DetailModalDialogMode.NEW
+                    });
+                    const newEntity = await this.createNewEntity();
+                    this.setState({
+                        entityToCreateOrEdit: newEntity,
+                        detailDialogVisible: true,
+                        waitingForNewEntity: false
+                    });
+                } }));
+        }
+    }
+    renderDetailEntityButton(id) {
+        if (this.state.waitingForEntityDetail) {
+            return React.createElement(LoadingOutlined, null);
+        }
+        else {
+            return (React.createElement(MonitorOutlined, { title: i18n("Show Detail"), disabled: this.state.waitingForNewEntity, onClick: async () => {
+                    this.setState({
+                        waitingForEntityDetail: true,
+                        detailModalDialogMode: DetailModalDialogMode.DETAIL
+                    });
+                    const entity = await this.getEntity(id);
+                    this.setState({
+                        entityToCreateOrEdit: entity,
+                        detailDialogVisible: true,
+                        waitingForEntityDetail: false
+                    });
+                } }));
+        }
+    }
+    showCancelButton() {
+        return !!this.props.selectedItem;
+    }
+    showDetailButton() {
+        return !!this.props.selectedItem && !!this.renderDetailPanel();
+    }
+    showNewEntityButton() {
+        return !!this.renderDetailPanel();
+    }
+    getSuffixIcon() {
+        if (this.props.disabled) {
+            if (this.showDetailButton()) {
+                return this.renderDetailEntityButton(this.props.selectedItem.id);
+            }
+            else {
+                return React.createElement("span", null);
+            }
+        }
+        else if (this.state.loading) {
+            return React.createElement(LoadingOutlined, null);
+        }
+        else {
+            return (React.createElement(React.Fragment, null,
+                this.showCancelButton() &&
+                    React.createElement(CloseCircleOutlined, { style: { color: ERROR_COLOR }, title: i18n("Cancel Selected Entity"), onClick: () => {
+                            this.props.onItemSelected?.(undefined);
+                        } }),
+                this.showDetailButton() && this.renderDetailEntityButton(this.props.selectedItem.id),
+                this.showNewEntityButton() && this.renderNewEntityButton(),
+                React.createElement(SelectOutlined, { title: i18n("Open Select Dialog"), onClick: () => {
+                        this.setState({ selectDialogVisible: true });
+                    } })));
+        }
+    }
+    onSaveEntity(savedEntity) {
+        this.props.onItemSelected?.(savedEntity);
+        this.setState({ detailDialogVisible: false, entityToCreateOrEdit: undefined });
+    }
+    renderDetailPanel() {
+        return undefined;
+    }
+    getNewEntityModalDialogTitle() {
+        return i18n("New Entity");
+    }
+    getModalDialogTitle() {
+        if (this.state.detailModalDialogMode === DetailModalDialogMode.NEW) {
+            return this.getNewEntityModalDialogTitle();
+        }
+        else if (this.state.detailModalDialogMode === DetailModalDialogMode.DETAIL) {
+            return React.createElement(TitleWithCodePanel, { title: i18n("Detail"), code: this.state.entityToCreateOrEdit?.code ?? "" });
+        }
+        return undefined;
+    }
+    renderDetailPanelModalDialog() {
+        return (React.createElement(ModalDialog, { mode: "NO_BUTTONS", open: this.state.detailDialogVisible, onCancel: () => this.setState({ detailDialogVisible: false }), styles: { body: { padding: 0 } }, title: this.getModalDialogTitle(), initialWidth: 720, initialHeight: window.innerHeight * 0.95, forceRender: true }, this.renderDetailPanel()));
+    }
+    getExtraValueForDropdown(_suggestedItem) {
+        return undefined;
+    }
+    render() {
+        const selectedItem = this.props.selectedItem;
+        const hasDetailPanel = !!this.renderDetailPanel();
+        let value;
+        if (selectedItem && selectedItem.id >= 0) {
+            value = {
+                key: selectedItem.id.toString(),
+                value: selectedItem.id,
+                label: React.createElement("span", null,
+                    selectedItem.code,
+                    (selectedItem.code && selectedItem.name) ? ` (${selectedItem.name})` : selectedItem.name,
+                    selectedItem.extra && ` ${selectedItem.extra}`)
+            };
+        }
+        else {
+            value = undefined;
+        }
+        return (React.createElement("div", { onDoubleClick: () => {
+                if (!this.props.disabled && !this.state.detailDialogVisible) {
+                    this.setState({ selectDialogVisible: true });
+                }
+            } },
+            this.renderSelectDialog(),
+            this.renderDetailPanelModalDialog(),
+            React.createElement(WithCss, { useStyles: useStyles }, (css) => React.createElement(Select, { className: !this.props.disabled && hasDetailPanel ? css.styles.abstractSelectWithDetail : undefined, disabled: this.props.disabled, style: { width: "100%" }, labelInValue: true, showSearch: true, filterOption: false, value: value, notFoundContent: null, onChange: (value) => {
+                    if (!value) {
+                        this.props.onItemSelected?.(undefined);
+                    }
+                }, onFocus: () => {
+                    this.onLoadData();
+                }, onClick: event => {
+                    if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSpanElement) {
+                        this.onLoadData();
+                    }
+                }, onSearch: searchString => {
+                    this.onLoadData(searchString);
+                }, onSelect: (selectedValue) => {
+                    const item = this.state.suggestedItems.find(value => value.id === selectedValue.value);
+                    this.props.onItemSelected?.(item);
+                }, suffixIcon: React.createElement("span", { style: { display: "flex", gap: 4, fontSize: 14, color: "rgba(0, 0, 0, 0.55)" } }, this.getSuffixIcon()) }, this.state.suggestedItems.map(suggestedItem => {
+                const extraValueForDropdown = this.getExtraValueForDropdown(suggestedItem);
+                const displayName = `${suggestedItem.name ?? ""} ${extraValueForDropdown ?? ""}`;
+                return (React.createElement(Select.Option, { value: suggestedItem.id, key: suggestedItem.id },
+                    React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
+                        suggestedItem.code && React.createElement(ColorTag, null, suggestedItem.code),
+                        React.createElement("div", { title: displayName }, displayName))));
+            })))));
+    }
+}
+//# sourceMappingURL=abstractSelect.js.map

package/coreui/components/select/abstractSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"abstractSelect.js","sourceRoot":"","sources":["../../../../../coreui/components/select/abstractSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport Entity from \"../../../api/types/entity\";\r\nimport {\r\n    CloseCircleOutlined,\r\n    LoadingOutlined,\r\n    MonitorOutlined,\r\n    PlusCircleOutlined,\r\n    SelectOutlined\r\n} from \"@ant-design/icons\";\r\nimport {LabeledValue} from \"antd/es/select\";\r\nimport {Select} from \"antd\";\r\nimport AbstractEntityApi from \"../../../api/abstractEntityApi\";\r\nimport {\r\n    AdvancedFilterApi,\r\n    AdvancedFilterCondition,\r\n    AdvancedFilterLogicalOperator,\r\n    AdvancedFilterOperator\r\n} from \"../../../api/advancedFilterApi\";\r\nimport debounce from \"lodash/debounce\";\r\nimport AdvancedFilterUtils from \"../advancedFilter/advancedFilterUtils\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport {EntityColumn, getStringAdvancedFilterColumn} from \"../advancedFilter/advancedFilterColumnDefinitions\";\r\nimport {ERROR_COLOR} from \"../../../api/constants/constants\";\r\nimport TitleWithCodePanel from \"../titleWithCodePanel/titleWithCodePanel\";\r\nimport ColorTag from \"../colorTag/colorTag\";\r\nimport {createStyles} from \"antd-style\";\r\nimport WithCss from \"d2coreui/components/style/withCss\";\r\n\r\nconst useStyles = createStyles(({css}) => {\r\n    return {\r\n        abstractSelectWithDetail: css`\r\n            .ant-select-selection-item {\r\n                max-width: calc(100% - 52px);\r\n            }\r\n        `\r\n    }\r\n});\r\n\r\nexport enum DetailModalDialogMode {\r\n    NEW, DETAIL\r\n}\r\n\r\nexport interface SelectedEntity {\r\n    id: number\r\n    name: string | null\r\n    code: string | null\r\n    extra?: string\r\n}\r\n\r\nexport interface AbstractSelectProps<T extends Entity> {\r\n    api: AbstractEntityApi<T>\r\n    advancedFilterApi: AdvancedFilterApi\r\n    disabled?: boolean\r\n\r\n    selectedItem?: SelectedEntity\r\n    filterConditions?: AdvancedFilterCondition[]\r\n\r\n    onItemSelected?(selectedItem?: T): void\r\n}\r\n\r\nexport interface AbstractSelectState<T extends Entity> {\r\n    selectDialogVisible: boolean\r\n    detailDialogVisible: boolean\r\n    detailModalDialogMode?: DetailModalDialogMode\r\n    entityToCreateOrEdit?: T\r\n    loading: boolean\r\n    suggestedItems: T[]\r\n    waitingForNewEntity: boolean\r\n    waitingForEntityDetail: boolean\r\n}\r\n\r\nexport default abstract class AbstractSelect<T extends Entity,\r\n    P extends AbstractSelectProps<T>,\r\n    S extends AbstractSelectState<T> = AbstractSelectState<T>> extends React.Component<P, S> {\r\n\r\n    protected constructor(props: Readonly<P>) {\r\n        super(props);\r\n\r\n        // @ts-ignore\r\n        this.onLoadData = debounce(this.onLoadData.bind(this), 500);\r\n        this.onSaveEntity = this.onSaveEntity.bind(this);\r\n    }\r\n\r\n    protected initialState: AbstractSelectState<T> = {\r\n        selectDialogVisible: false,\r\n        detailDialogVisible: false,\r\n        loading: false,\r\n        suggestedItems: [],\r\n        waitingForNewEntity: false,\r\n        waitingForEntityDetail: false,\r\n    }\r\n\r\n    componentDidUpdate(prevProps: Readonly<P>) {\r\n        if (prevProps.selectedItem?.id !== this.props.selectedItem?.id) {\r\n            this.setState({suggestedItems: []});\r\n        }\r\n    }\r\n\r\n    protected getFilterConditionForCode(searchString?: string): AdvancedFilterCondition {\r\n        return AdvancedFilterUtils.createNewCondition(-1, getStringAdvancedFilterColumn(EntityColumn.CODE), {\r\n            operator: AdvancedFilterOperator.LIKE,\r\n            value: `%${searchString ?? \"\"}%`,\r\n        });\r\n    }\r\n\r\n    protected getFilterConditionForName(searchString?: string): AdvancedFilterCondition {\r\n        return AdvancedFilterUtils.createNewCondition(-2, getStringAdvancedFilterColumn(EntityColumn.NAME), {\r\n            operator: AdvancedFilterOperator.LIKE,\r\n            value: `%${searchString ?? \"\"}%`,\r\n        })\r\n    }\r\n\r\n    protected getFilterConditions(searchString?: string): AdvancedFilterCondition[] {\r\n        const filterConditionForCode = this.getFilterConditionForCode(searchString);\r\n        filterConditionForCode.left_par = 1;\r\n        filterConditionForCode.logical_operator = AdvancedFilterLogicalOperator.OR;\r\n\r\n        const filterConditionForName = this.getFilterConditionForName(searchString);\r\n        filterConditionForName.right_par = 1;\r\n\r\n        return [\r\n            filterConditionForCode,\r\n            filterConditionForName,\r\n        ]\r\n    }\r\n\r\n    private async onLoadData(searchString?: string) {\r\n        this.setState({loading: true});\r\n\r\n        const filterConditions = this.getFilterConditions(searchString);\r\n        if (this.props.filterConditions) {\r\n            filterConditions[filterConditions.length - 1].logical_operator = AdvancedFilterLogicalOperator.AND;\r\n            filterConditions.push(...this.props.filterConditions);\r\n        }\r\n\r\n        const pageableList = await this.props.api.getAllData(\r\n            0,\r\n            10,\r\n            \"\",\r\n            filterConditions,\r\n            true\r\n        );\r\n\r\n        this.setState({suggestedItems: pageableList.data, loading: false});\r\n    }\r\n\r\n    protected async createNewEntity(): Promise<T> {\r\n        return await this.props.api.createNewEntity();\r\n    }\r\n\r\n    protected async getEntity(id: number): Promise<T> {\r\n        return await this.props.api.getEntity(id);\r\n    }\r\n\r\n    private renderNewEntityButton() {\r\n        if (this.state.waitingForNewEntity) {\r\n            return <LoadingOutlined/>\r\n        } else {\r\n            return (\r\n                <PlusCircleOutlined\r\n                    title={i18n(\"Create New Entity\")}\r\n                    style={{cursor: \"pointer\"}}\r\n                    disabled={this.state.waitingForEntityDetail}\r\n                    onClick={async () => {\r\n                        this.setState({\r\n                            waitingForNewEntity: true,\r\n                            detailModalDialogMode: DetailModalDialogMode.NEW\r\n                        });\r\n                        const newEntity = await this.createNewEntity();\r\n                        this.setState({\r\n                            entityToCreateOrEdit: newEntity,\r\n                            detailDialogVisible: true,\r\n                            waitingForNewEntity: false\r\n                        });\r\n                    }}\r\n                />\r\n            );\r\n        }\r\n    }\r\n\r\n    private renderDetailEntityButton(id: number) {\r\n        if (this.state.waitingForEntityDetail) {\r\n            return <LoadingOutlined/>\r\n        } else {\r\n            return (\r\n                <MonitorOutlined\r\n                    title={i18n(\"Show Detail\")}\r\n                    disabled={this.state.waitingForNewEntity}\r\n                    onClick={async () => {\r\n                        this.setState({\r\n                            waitingForEntityDetail: true,\r\n                            detailModalDialogMode: DetailModalDialogMode.DETAIL\r\n                        });\r\n                        const entity = await this.getEntity(id);\r\n                        this.setState({\r\n                            entityToCreateOrEdit: entity,\r\n                            detailDialogVisible: true,\r\n                            waitingForEntityDetail: false\r\n                        });\r\n                    }}\r\n                />\r\n            );\r\n        }\r\n    }\r\n\r\n    private showCancelButton(): boolean {\r\n        return !!this.props.selectedItem;\r\n    }\r\n\r\n    private showDetailButton(): boolean {\r\n        return !!this.props.selectedItem && !!this.renderDetailPanel();\r\n    }\r\n\r\n    private showNewEntityButton(): boolean {\r\n        return !!this.renderDetailPanel();\r\n    }\r\n\r\n    protected getSuffixIcon(): React.ReactNode {\r\n        if (this.props.disabled) {\r\n            if (this.showDetailButton()) {\r\n                return this.renderDetailEntityButton(this.props.selectedItem!.id)\r\n            } else {\r\n                return <span/>;\r\n            }\r\n        } else if (this.state.loading) {\r\n            return <LoadingOutlined/>;\r\n        } else {\r\n            return (\r\n                <>\r\n                    {this.showCancelButton() &&\r\n                        <CloseCircleOutlined\r\n                            style={{color: ERROR_COLOR}}\r\n                            title={i18n(\"Cancel Selected Entity\")}\r\n                            onClick={() => {\r\n                                this.props.onItemSelected?.(undefined);\r\n                            }}\r\n                        />\r\n                    }\r\n                    {this.showDetailButton() && this.renderDetailEntityButton(this.props.selectedItem!.id)}\r\n                    {this.showNewEntityButton() && this.renderNewEntityButton()}\r\n                    <SelectOutlined\r\n                        title={i18n(\"Open Select Dialog\")}\r\n                        onClick={() => {\r\n                            this.setState({selectDialogVisible: true})\r\n                        }}\r\n                    />\r\n                </>\r\n            );\r\n        }\r\n    }\r\n\r\n    abstract renderSelectDialog(): React.ReactNode;\r\n\r\n    protected onSaveEntity(savedEntity: T) {\r\n        this.props.onItemSelected?.(savedEntity);\r\n        this.setState({detailDialogVisible: false, entityToCreateOrEdit: undefined});\r\n    }\r\n\r\n    renderDetailPanel(): React.ReactNode {\r\n        return undefined;\r\n    }\r\n\r\n    protected getNewEntityModalDialogTitle(): string {\r\n        return i18n(\"New Entity\");\r\n    }\r\n\r\n    private getModalDialogTitle() {\r\n        if (this.state.detailModalDialogMode === DetailModalDialogMode.NEW) {\r\n            return this.getNewEntityModalDialogTitle();\r\n        } else if (this.state.detailModalDialogMode === DetailModalDialogMode.DETAIL) {\r\n            return <TitleWithCodePanel title={i18n(\"Detail\")} code={this.state.entityToCreateOrEdit?.code ?? \"\"}/>\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    private renderDetailPanelModalDialog() {\r\n        return (\r\n            <ModalDialog\r\n                mode={ModalDialogMode.NO_BUTTONS}\r\n                open={this.state.detailDialogVisible}\r\n                onCancel={() => this.setState({detailDialogVisible: false})}\r\n                styles={{body: {padding: 0}}}\r\n                title={this.getModalDialogTitle()}\r\n                initialWidth={720}\r\n                initialHeight={window.innerHeight * 0.95}\r\n                forceRender\r\n            >\r\n                {this.renderDetailPanel()}\r\n            </ModalDialog>\r\n        );\r\n    }\r\n\r\n    protected getExtraValueForDropdown(_suggestedItem: T): string | undefined {\r\n        return undefined;\r\n    }\r\n\r\n    render() {\r\n        const selectedItem = this.props.selectedItem;\r\n        const hasDetailPanel = !!this.renderDetailPanel();\r\n\r\n        let value: LabeledValue | undefined;\r\n        if (selectedItem && selectedItem.id >= 0) {\r\n            value = {\r\n                key: selectedItem.id.toString(),\r\n                value: selectedItem.id,\r\n                label:\r\n                    <span>\r\n                        {selectedItem.code}\r\n                        {(selectedItem.code && selectedItem.name) ? ` (${selectedItem.name})` : selectedItem.name}\r\n                        {selectedItem.extra && ` ${selectedItem.extra}`}\r\n                    </span>\r\n            };\r\n        } else {\r\n            value = undefined;\r\n        }\r\n\r\n        return (\r\n            <div\r\n                onDoubleClick={() => {\r\n                    if (!this.props.disabled && !this.state.detailDialogVisible) {\r\n                        this.setState({selectDialogVisible: true});\r\n                    }\r\n                }}\r\n            >\r\n                {this.renderSelectDialog()}\r\n                {this.renderDetailPanelModalDialog()}\r\n                <WithCss useStyles={useStyles}>{(css) =>\r\n                    <Select\r\n                        className={!this.props.disabled && hasDetailPanel ? css.styles.abstractSelectWithDetail : undefined}\r\n                        disabled={this.props.disabled}\r\n                        style={{width: \"100%\"}}\r\n                        labelInValue\r\n                        showSearch\r\n                        filterOption={false}\r\n                        value={value}\r\n                        notFoundContent={null}\r\n                        onChange={(value: any) => {\r\n                            if (!value) {\r\n                                this.props.onItemSelected?.(undefined);\r\n                            }\r\n                        }}\r\n                        onFocus={() => {\r\n                            this.onLoadData();\r\n                        }}\r\n                        onClick={event => {\r\n                            if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSpanElement) {\r\n                                this.onLoadData();\r\n                            }\r\n                        }}\r\n                        onSearch={searchString => {\r\n                            this.onLoadData(searchString);\r\n                        }}\r\n                        onSelect={(selectedValue: LabeledValue) => {\r\n                            const item = this.state.suggestedItems.find(value => value.id === selectedValue.value);\r\n                            this.props.onItemSelected?.(item);\r\n                        }}\r\n                        suffixIcon={\r\n                            <span style={{display: \"flex\", gap: 4, fontSize: 14, color: \"rgba(0, 0, 0, 0.55)\"}}>\r\n                            {this.getSuffixIcon()}\r\n                        </span>\r\n                        }\r\n                    >\r\n                        {this.state.suggestedItems.map(suggestedItem => {\r\n                            const extraValueForDropdown = this.getExtraValueForDropdown(suggestedItem);\r\n                            const displayName = `${suggestedItem.name ?? \"\"} ${extraValueForDropdown ?? \"\"}`\r\n                            return (\r\n                                <Select.Option value={suggestedItem.id} key={suggestedItem.id}>\r\n                                    <div style={{display: \"flex\", justifyContent: \"space-between\"}}>\r\n                                        {suggestedItem.code && <ColorTag>{suggestedItem.code}</ColorTag>}\r\n                                        <div title={displayName}>{displayName}</div>\r\n                                    </div>\r\n                                </Select.Option>\r\n                            );\r\n                        })}\r\n                    </Select>\r\n                }</WithCss>\r\n            </div>\r\n        )\r\n    }\r\n}"]}