@mwater/visualization 5.4.5 → 5.6.0

package/lib/mwater_table_selection/IndicatorsListComponent.js

@@ -0,0 +1,251 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicatorsListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const querystring_1 = __importDefault(require("querystring"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+// Searchable list of indicators
+class IndicatorsListComponent extends react_1.default.Component {
+    addIndicatorConfirmPopup;
+    constructor(props) {
+        super(props);
+        this.state = {
+            indicators: null,
+            search: ""
+        };
+    }
+    componentDidMount() {
+        // Get names and basic of forms
+        const query = {};
+        query.fields = JSON.stringify({ "design.name": 1, "design.desc": 1, "design.recommended": 1, deprecated: 1, "design.category": 1, "design.subcategory": 1, "design.code": 1, "design.organization": 1 });
+        query.client = this.props.client;
+        // Get list of all indicator names
+        return jquery_1.default.getJSON(this.props.apiUrl + "indicators?" + querystring_1.default.stringify(query), (indicators) => {
+            // Remove deprecated
+            indicators = lodash_1.default.filter(indicators, (indicator) => !indicator.deprecated);
+            // Sort by name
+            indicators = lodash_1.default.sortByOrder(indicators, [
+                (indicator) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
+                (indicator) => (indicator.design.recommended ? 0 : 1),
+                (indicator) => expressions_1.ExprUtils.localizeString(indicator.design.name, T.locale)
+            ], ["asc", "asc", "asc"]);
+            return this.setState({
+                indicators: indicators
+            });
+        }).fail((xhr) => {
+            return this.setState({ error: xhr.responseText });
+        });
+    }
+    handleTableRemove = (table) => {
+        if (confirm(T `Remove ${expressions_1.ExprUtils.localizeString(table.name, T.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+            return this.props.onExtraTableRemove(table.id);
+        }
+    };
+    searchRef = (comp) => {
+        // Focus
+        if (comp) {
+            return comp.focus();
+        }
+    };
+    handleSelect = (tableId) => {
+        // Add table if not present
+        if (!this.props.schema.getTable(tableId)) {
+            this.props.onExtraTableAdd(tableId);
+        }
+        this.addIndicatorConfirmPopup.show(tableId);
+    };
+    handleOpenIndicator = (id) => {
+        this.handleSelect("indicator_values:" + id);
+    };
+    // Render a simplified version of IndicatorListComponent from mwater-portal
+    renderIndicatorList(indicators, searchText) {
+        // Filter indicators based on search text
+        let filteredIndicators = indicators;
+        if (searchText) {
+            const searchTerms = searchText.toLowerCase().split(" ");
+            filteredIndicators = indicators.filter(indicator => {
+                const searchFields = [
+                    expressions_1.ExprUtils.localizeString(indicator.design.name, T.locale),
+                    indicator.design.code,
+                    indicator.design.organization,
+                    indicator.design.category,
+                    indicator.design.subcategory
+                ];
+                return searchTerms.every(term => searchFields.some(field => field && field.toLowerCase().includes(term)));
+            });
+        }
+        // Split into recommended and all indicators
+        const recommendedIndicators = filteredIndicators.filter(indicator => indicator.design.recommended);
+        const otherIndicators = filteredIndicators.filter(indicator => !indicator.design.recommended);
+        // Group by category
+        const groupByCategory = (indicators) => {
+            const categories = {};
+            indicators.forEach(indicator => {
+                const category = indicator.design.category || T `Uncategorized`;
+                if (!categories[category]) {
+                    categories[category] = [];
+                }
+                categories[category].push(indicator);
+            });
+            return categories;
+        };
+        const recommendedByCategory = groupByCategory(recommendedIndicators);
+        const otherByCategory = groupByCategory(otherIndicators);
+        return (react_1.default.createElement("div", null,
+            recommendedIndicators.length > 0 && (react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null, T `Recommended Indicators`),
+                lodash_1.default.map(recommendedByCategory, (categoryIndicators, category) => (react_1.default.createElement("div", { key: category },
+                    react_1.default.createElement("h5", null, category),
+                    react_1.default.createElement("table", { className: "table table-hover" },
+                        react_1.default.createElement("tbody", null, lodash_1.default.map(categoryIndicators, indicator => (react_1.default.createElement("tr", { key: indicator._id, onClick: () => this.handleOpenIndicator(indicator._id) },
+                            react_1.default.createElement("td", null,
+                                react_1.default.createElement(IndicatorListItemComponent, { indicator: indicator, onClick: () => this.handleOpenIndicator(indicator._id) })))))))))))),
+            react_1.default.createElement("h4", null, T `All Indicators`),
+            lodash_1.default.map(otherByCategory, (categoryIndicators, category) => (react_1.default.createElement("div", { key: category },
+                react_1.default.createElement("h5", null, category),
+                react_1.default.createElement("table", { className: "table table-hover" },
+                    react_1.default.createElement("tbody", null, lodash_1.default.map(categoryIndicators, indicator => (react_1.default.createElement("tr", { key: indicator._id, onClick: () => this.handleOpenIndicator(indicator._id) },
+                        react_1.default.createElement("td", null,
+                            react_1.default.createElement(IndicatorListItemComponent, { indicator: indicator, onClick: () => this.handleOpenIndicator(indicator._id) }))))))))))));
+    }
+    render() {
+        if (this.state.error) {
+            return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
+        }
+        let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => table.id.match(/^indicator_values:/) && !table.deprecated);
+        tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(AddIndicatorConfirmPopupComponent, { schema: this.props.schema, onChange: this.props.onChange, onExtraTableAdd: this.props.onExtraTableAdd, ref: (c) => {
+                    this.addIndicatorConfirmPopup = c;
+                } }),
+            react_1.default.createElement("label", null, T `Included Indicators:`),
+            tables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(tables, (table) => ({
+                    name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                    onClick: () => this.handleSelect(table.id),
+                    onRemove: () => this.handleTableRemove(table)
+                })) })) : (react_1.default.createElement("div", null, T `None`)),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("label", null, T `All Indicators:`),
+            !this.state.indicators || this.state.indicators.length === 0 ? (react_1.default.createElement("div", { className: "alert alert-info" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0" + T `Loading...`)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", placeholder: T `Search...`, key: "search", ref: this.searchRef, style: { maxWidth: "20em", marginBottom: 10 }, value: this.state.search, onChange: (ev) => this.setState({ search: ev.target.value }) }),
+                this.renderIndicatorList(this.state.indicators, this.state.search)))));
+    }
+}
+exports.IndicatorsListComponent = IndicatorsListComponent;
+class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false,
+            indicatorTable: null
+        };
+    }
+    show(indicatorTable) {
+        return this.setState({ visible: true, indicatorTable });
+    }
+    renderContents() {
+        // Show loading if table not loaded
+        if (!this.props.schema.getTable(this.state.indicatorTable)) {
+            return (react_1.default.createElement("div", { className: "alert alert-info" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0",
+                T `Loading...`));
+        }
+        // Find entity links
+        const entityColumns = lodash_1.default.filter(this.props.schema.getColumns(this.state.indicatorTable), (col) => col.join?.toTable?.match(/^entities\./));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("p", null, T `In general, it is better to get indicator values from the related site. Please select the site 
+below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
+are certain that you want to use the raw indicator table`),
+            react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(entityColumns, (entityColumn) => ({
+                    name: expressions_1.ExprUtils.localizeString(entityColumn.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(entityColumn.desc, T.locale),
+                    onClick: () => {
+                        // Select table
+                        this.props.onChange(entityColumn.join.toTable);
+                        return this.setState({ visible: false });
+                    }
+                })) }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("a", { className: "link-plain", onClick: this.props.onChange.bind(null, this.state.indicatorTable) }, T `Use Raw Indicator`))));
+    }
+    render() {
+        if (!this.state.visible) {
+            return null;
+        }
+        return (react_1.default.createElement(ModalPopupComponent_1.default, { showCloseX: true, onClose: () => this.setState({ visible: false }), header: T `Add Indicator` }, this.renderContents()));
+    }
+}
+// Single indicator item in a list
+// Local port of the class found in mwater-portal
+class IndicatorListItemComponent extends react_1.default.Component {
+    renderIcon() {
+        switch (this.props.indicator.type) {
+            case "expression":
+                // R 'i', className: "text-muted fa fa-fw fa-calculator"
+                return null;
+            case "response":
+                // R 'i', className: "text-muted fa fa-fw fa-list-alt"
+                return null;
+            case "set":
+                return (react_1.default.createElement("span", { className: "fa-stack", style: { paddingRight: 6 } },
+                    react_1.default.createElement("i", { className: "fa fa-th-list fa-stack-1x text-muted" }),
+                    react_1.default.createElement("i", { className: "fa fa-circle fa-stack-1x", style: { color: "white", paddingLeft: 15 } }),
+                    react_1.default.createElement("i", { className: "fa fa-check-circle fa-stack-1x text-primary", style: { paddingLeft: 15 } })));
+        }
+        return null;
+    }
+    render() {
+        return (react_1.default.createElement("div", { onClick: this.props.onClick, style: { cursor: "pointer" } },
+            react_1.default.createElement("div", { key: "name", style: { fontWeight: "bold" } },
+                this.renderIcon(),
+                expressions_1.ExprUtils.localizeString(this.props.indicator.design.name, T.locale),
+                this.props.indicator.design.code ? ` (${this.props.indicator.design.code})` : undefined,
+                this.props.indicator.design.organization ? (react_1.default.createElement("span", { className: "text-muted" },
+                    " ",
+                    T `by ${this.props.indicator.design.organization}`)) : undefined),
+            react_1.default.createElement("div", { key: "desc", className: "text-muted" },
+                expressions_1.ExprUtils.localizeString(this.props.indicator.design.desc, T.locale),
+                this.props.indicator.design.category
+                    ? [
+                        ` (${this.props.indicator.design.category}`,
+                        this.props.indicator.design.subcategory ? `/${this.props.indicator.design.subcategory}` : undefined,
+                        `)`
+                    ]
+                    : undefined)));
+    }
+}

package/lib/mwater_table_selection/IssuesListComponent.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+interface IssuesListComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: any;
+    extraTables: any;
+    onExtraTableAdd: any;
+    onExtraTableRemove: any;
+}
+interface IssuesListComponentState {
+    error?: any;
+    search: any;
+    issueTypes: any[] | null;
+}
+export declare class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
+    constructor(props: any);
+    componentDidMount(): JQuery.jqXHR<any>;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/mwater_table_selection/IssuesListComponent.js

@@ -0,0 +1,123 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IssuesListComponent = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importDefault(require("react"));
+const querystring_1 = __importDefault(require("querystring"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+// Searchable list of issue types
+class IssuesListComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            issueTypes: null,
+            search: ""
+        };
+    }
+    componentDidMount() {
+        // Get names and basic of issueTypes
+        const query = {};
+        query.fields = JSON.stringify({ name: 1, desc: 1, roles: 1, created: 1, modified: 1 });
+        query.client = this.props.client;
+        // Get list of all issueType names
+        return jquery_1.default.getJSON(this.props.apiUrl + "issue_types?" + querystring_1.default.stringify(query), (issueTypes) => {
+            // Sort by modified.on desc but first by user
+            issueTypes = lodash_1.default.sortByOrder(issueTypes, [
+                (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
+                (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
+                (issueType) => expressions_1.ExprUtils.localizeString(issueType.name, T.locale)
+            ], ["asc", "asc", "asc"]);
+            return this.setState({
+                issueTypes: lodash_1.default.map(issueTypes, (issueType) => ({
+                    id: issueType._id,
+                    name: expressions_1.ExprUtils.localizeString(issueType.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(issueType.desc, T.locale)
+                }))
+            });
+        }).fail((xhr) => {
+            return this.setState({ error: xhr.responseText });
+        });
+    }
+    handleTableRemove = (table) => {
+        if (confirm(T `Remove ${expressions_1.ExprUtils.localizeString(table.name, T.locale)}? Any widgets that depend on it will no longer work properly.`)) {
+            return this.props.onExtraTableRemove(table.id);
+        }
+    };
+    searchRef = (comp) => {
+        // Focus
+        if (comp) {
+            return comp.focus();
+        }
+    };
+    render() {
+        let issueTypes;
+        if (this.state.error) {
+            return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
+        }
+        // Filter issueTypes
+        if (this.state.search) {
+            const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+            const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i");
+            issueTypes = lodash_1.default.filter(this.state.issueTypes || [], (issueType) => issueType.name.match(searchStringRegExp));
+        }
+        else {
+            ;
+            ({ issueTypes } = this.state);
+        }
+        // Remove if already included
+        issueTypes = lodash_1.default.filter(issueTypes || [], (f) => !(this.props.extraTables || []).includes(`issues:${f.id}`));
+        let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => (table.id.match(/^issues:/) || table.id.match(/^issue_events:/)) && !table.deprecated);
+        tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", null, T `Included Issues:`),
+            tables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(tables, (table) => {
+                    return {
+                        name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                        onClick: this.props.onChange.bind(null, table.id),
+                        onRemove: this.handleTableRemove.bind(null, table)
+                    };
+                }) })) : (react_1.default.createElement("div", null, T `None`)),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("label", null, T `All Issues:`),
+            !this.state.issueTypes || this.state.issueTypes.length === 0 ? (react_1.default.createElement("div", { className: "alert alert-info" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0",
+                T `Loading...`)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", placeholder: T `Search...`, key: "search", ref: this.searchRef, style: { maxWidth: "20em", marginBottom: 10 }, value: this.state.search, onChange: (ev) => this.setState({ search: ev.target.value }) }),
+                react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(issueTypes, (issueType) => ({
+                        name: issueType.name,
+                        desc: issueType.desc,
+                        onClick: this.props.onChange.bind(null, "issues:" + issueType.id)
+                    })) })))));
+    }
+}
+exports.IssuesListComponent = IssuesListComponent;

package/lib/mwater_table_selection/MWaterAccountingSystemListComponent.d.ts

@@ -0,0 +1,20 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+export interface MWaterAccountingSystemListComponentProps {
+    apiUrl: string;
+    schema: Schema;
+    client?: string;
+    /** User id (not currently used but good for consistency) */
+    user?: string;
+    /** Called with table selected, e.g. "custom.accounting:123.accounts" */
+    onChange: (tableId: string | null) => void;
+    /** Current list of extra table wildcards, e.g. ["accounting:123.*"] */
+    extraTables: string[];
+    /** Called to request loading tables for an accounting system, e.g. "accounting:123.*" */
+    onExtraTableAdd: (wildcardTableId: string) => void;
+    /** Called to request unloading tables for an accounting system */
+    onExtraTableRemove: (wildcardTableId: string) => void;
+    /** e.g. "en" */
+    locale?: string;
+}
+export declare function MWaterAccountingSystemListComponent(props: MWaterAccountingSystemListComponentProps): React.JSX.Element;

package/lib/mwater_table_selection/MWaterAccountingSystemListComponent.js

@@ -0,0 +1,157 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterAccountingSystemListComponent = MWaterAccountingSystemListComponent;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const UIComponents_1 = require("../UIComponents");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+function MWaterAccountingSystemListComponent(props) {
+    const { apiUrl, schema, client, onChange, extraTables, onExtraTableAdd, onExtraTableRemove, locale } = props;
+    const [rawAccountingSystems, setRawAccountingSystems] = (0, react_1.useState)();
+    const [accountingTablesetDesign, setAccountingTablesetDesign] = (0, react_1.useState)();
+    const [search, setSearch] = (0, react_1.useState)("");
+    // Stores the fully qualified table ID that we want to select after its system is loaded
+    const [targetSelection, setTargetSelection] = (0, react_1.useState)();
+    // Fetch accounting systems (partitions) and the main accounting tableset design
+    (0, react_1.useEffect)(() => {
+        // Fetch rows from the 'custom.accounting.partitions' table
+        fetch(`${apiUrl}custom/accounting/partitions?client=${client || ""}`)
+            .then((response) => {
+            if (!response.ok) {
+                console.error(`Error fetching accounting system partitions: ${response.status} ${response.statusText}`);
+                return []; // Return empty array on error
+            }
+            return response.json();
+        })
+            .then((systems) => {
+            setRawAccountingSystems(systems);
+        })
+            .catch(error => {
+            console.error("Failed to load accounting systems:", error);
+            setRawAccountingSystems([]);
+        });
+        // Fetch the design of the 'custom.accounting' tableset
+        const filter = encodeURIComponent(JSON.stringify({ code: "accounting" }));
+        fetch(`${apiUrl}custom_tablesets?filter=${filter}&client=${client || ""}`)
+            .then((response) => {
+            if (!response.ok) {
+                console.error(`Error fetching accounting tableset design: ${response.status} ${response.statusText}`);
+                return null;
+            }
+            return response.json();
+        })
+            .then((tablesets) => {
+            if (tablesets && tablesets.length > 0 && tablesets[0].design) {
+                setAccountingTablesetDesign(tablesets[0].design);
+            }
+            else {
+                console.error("Accounting tableset design not found or invalid structure.");
+            }
+        })
+            .catch(error => {
+            console.error("Failed to load accounting tableset design:", error);
+        });
+    }, [apiUrl, client]);
+    const sortedAccountingSystems = (0, react_1.useMemo)(() => {
+        if (!rawAccountingSystems) {
+            return undefined;
+        }
+        return lodash_1.default.sortByAll(rawAccountingSystems, [
+            (sys) => {
+                const wildcard = `custom.accounting:${String(sys._partition)}.*`;
+                return !extraTables.includes(wildcard); // false (0) for included, true (1) for not
+            },
+            (sys) => sys.name
+        ]);
+    }, [rawAccountingSystems, extraTables]);
+    // Effect to handle selecting a table once its accounting system's tables are loaded into the schema
+    (0, react_1.useEffect)(() => {
+        if (targetSelection && schema.getTable(targetSelection)) {
+            onChange(targetSelection);
+            setTargetSelection(undefined); // Clear the target selection
+        }
+    }, [targetSelection, schema, onChange]);
+    const handleSelectTable = (partitionId, table) => {
+        const qualifiedTableId = `custom.accounting:${String(partitionId)}.${table.id}`;
+        const accountingSystemWildcard = `custom.accounting:${String(partitionId)}.*`;
+        if (!extraTables.includes(accountingSystemWildcard)) {
+            onExtraTableAdd(accountingSystemWildcard);
+        }
+        if (schema.getTable(qualifiedTableId)) {
+            onChange(qualifiedTableId);
+        }
+        else {
+            // If not yet in schema, ensure add request is made and set for future selection
+            if (!extraTables.includes(accountingSystemWildcard)) {
+                onExtraTableAdd(accountingSystemWildcard);
+            }
+            setTargetSelection(qualifiedTableId);
+        }
+    };
+    const handleRemoveAccountingSystem = (partitionId) => {
+        const accountingSystemWildcard = `custom.accounting:${String(partitionId)}.*`;
+        if (confirm(T `Remove this accounting system? Some widgets may not work correctly.`)) {
+            onExtraTableRemove(accountingSystemWildcard);
+        }
+    };
+    if (!sortedAccountingSystems || !accountingTablesetDesign) {
+        return (react_2.default.createElement("div", null,
+            react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
+            " ",
+            T `Loading accounting data...`));
+    }
+    const filteredSystems = sortedAccountingSystems.filter(system => {
+        if (search === "") {
+            return true;
+        }
+        const systemName = expressions_1.ExprUtils.localizeString(system.name, locale) || "";
+        if (systemName.toLowerCase().includes(search.toLowerCase())) {
+            return true;
+        }
+        return accountingTablesetDesign.tables.some(t => !t.deprecated && (expressions_1.ExprUtils.localizeString(t.name, locale) || "").toLowerCase().includes(search.toLowerCase()));
+    });
+    const renderSingleAccountingSystem = (system) => {
+        const systemName = expressions_1.ExprUtils.localizeString(system.name, locale) || T `Unnamed System (${system._partition})`;
+        const accountingSystemWildcard = `custom.accounting:${String(system._partition)}.*`;
+        const isIncluded = extraTables.includes(accountingSystemWildcard);
+        const tablesForThisSystem = accountingTablesetDesign.tables
+            .filter(t => !t.deprecated)
+            .filter(t => t.id != "partitions" && t.id != "roles")
+            .filter(t => {
+            if (search === "") {
+                return true;
+            }
+            if ((expressions_1.ExprUtils.localizeString(system.name, locale) || "").toLowerCase().includes(search.toLowerCase())) {
+                return true;
+            }
+            return (expressions_1.ExprUtils.localizeString(t.name, locale) || "").toLowerCase().includes(search.toLowerCase());
+        })
+            .map(t => ({
+            name: expressions_1.ExprUtils.localizeString(t.name, locale),
+            onClick: () => handleSelectTable(system._partition, t)
+        }));
+        if (search !== "" && !(expressions_1.ExprUtils.localizeString(system.name, locale) || "").toLowerCase().includes(search.toLowerCase()) && tablesForThisSystem.length === 0) {
+            return null;
+        }
+        return (react_2.default.createElement("div", { key: system._partition, className: "mt-3" },
+            react_2.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                react_2.default.createElement("h4", { className: "text-muted mb-1" }, systemName),
+                isIncluded && (react_2.default.createElement("button", { className: "btn btn-sm btn-link", type: "button", onClick: () => handleRemoveAccountingSystem(system._partition), title: T `Remove this accounting system` },
+                    react_2.default.createElement("i", { className: "fa fa-times" })))),
+            react_2.default.createElement(UIComponents_1.OptionListComponent, { items: tablesForThisSystem })));
+    };
+    return (react_2.default.createElement("div", null,
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search accounting systems or tables...` }),
+        targetSelection && !schema.getTable(targetSelection) && (react_2.default.createElement("div", { className: "alert alert-info my-2" },
+            react_2.default.createElement("i", { className: "fa fa-spinner fa-spin me-2" }),
+            T `Loading tables for selected accounting system...`)),
+        filteredSystems.length > 0
+            ? filteredSystems.map(system => renderSingleAccountingSystem(system))
+            : (sortedAccountingSystems.length > 0 && search !== "" && react_2.default.createElement("p", null, T `No accounting systems or tables match your search.`)),
+        sortedAccountingSystems.length === 0 && !targetSelection && react_2.default.createElement("p", null, T `No accounting systems found.`)));
+}

package/lib/mwater_table_selection/MWaterAssetSystemsListComponent.d.ts

@@ -0,0 +1,17 @@
+import { Schema } from "@mwater/expressions";
+import React from "react";
+/** Searchable list of asset system tables */
+export declare const MWaterAssetSystemsListComponent: (props: {
+    apiUrl: string;
+    schema: Schema;
+    client?: string;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string | null) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+    /** e.g. "en" */
+    locale?: string;
+}) => React.JSX.Element;