@mwater/visualization 5.4.4 → 5.5.0

package/lib/maps/ServerMapDataSource.js

@@ -182,6 +182,35 @@ class ServerLayerDataSource {
         }
         return url;
     }
+    /** Gets hover over data for hover over items
+     * @param design The design of the layer
+     * @param data The data of the current item being hovered over. e.g. { id: 123 }
+     * @param filters The filters to apply to the layer does not include filters that narrow down to a specific item
+     * @returns A promise that resolves to the hover over data, indexed by the id of the hover over item
+     */
+    async getHoverOverData(design, data, filters) {
+        const query = {
+            client: this.options.client,
+            share: this.options.share,
+            filters: (0, compressJson_1.default)(filters || []),
+            data: (0, compressJson_1.default)(data),
+            rev: this.options.rev
+        };
+        const url = `${this.options.apiUrl}maps/${this.options.mapId}/layers/${this.options.layerView.id}/hoverdata?` +
+            querystring_1.default.stringify(query);
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                Accept: "application/json"
+            }
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error(errorText);
+            throw new Error(`Error fetching hover data: ${response.statusText}`);
+        }
+        return await response.json();
+    }
 }
 class ServerMapLayerPopupWidgetDataSource {
     options;

package/lib/maps/VectorMapViewComponent.js

@@ -66,7 +66,7 @@ function VectorMapViewComponent(props) {
     const [legendHidden, setLegendHidden] = (0, react_1.useState)(initialLegendDisplay == "closed" || (props.width < 500 && initialLegendDisplay == "closedIfSmall"));
     // Locale to use
     const locale = props.locale || props.design.locale || "en";
-    // Translate function to use TODO
+    // Translate function to use 
     const translate = props.translate || ((input) => input);
     // Last feature that mouse entered
     const lastFeature = (0, react_2.useRef)();
@@ -424,12 +424,12 @@ function VectorMapViewComponent(props) {
             return;
         }
         if (!props.design.autoBounds && props.design.bounds) {
-            // If we set the new bounds, do not update map bounds
+            // If we set the new bounds, do not update map bounds unless they differ by more than 0.0001 degrees (roughly 10m)
             if (boundsRef.current == null ||
-                props.design.bounds.n != boundsRef.current.n ||
-                props.design.bounds.e != boundsRef.current.e ||
-                props.design.bounds.s != boundsRef.current.s ||
-                props.design.bounds.w != boundsRef.current.w) {
+                Math.abs(props.design.bounds.n - boundsRef.current.n) > 0.0001 ||
+                Math.abs(props.design.bounds.e - boundsRef.current.e) > 0.0001 ||
+                Math.abs(props.design.bounds.s - boundsRef.current.s) > 0.0001 ||
+                Math.abs(props.design.bounds.w - boundsRef.current.w) > 0.0001) {
                 map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n]);
                 boundsRef.current = props.design.bounds;
             }

package/lib/maps/maps.d.ts

@@ -1,5 +1,6 @@
 import { JsonQLQuery } from "@mwater/jsonql";
 import { Expr } from "@mwater/expressions";
+import { ReactNode } from "react";
 export interface LayerDefinition {
     layers: Array<{
         /** Layer id */
@@ -16,6 +17,7 @@ export interface LayerDefinition {
         fields: string[];
     };
 }
+/** Results from onGridClick that can be used to display a popup */
 export type OnGridClickResults = {
     scope?: any;
     row?: {
@@ -24,9 +26,9 @@ export type OnGridClickResults = {
     };
     popup?: React.ReactElement<{}>;
 } | null;
+/** Results from onGridHover that can be used to display a hover over */
 export type OnGridHoverResults = {
-    scope?: any;
-    hoverOver?: React.ReactElement<{}>;
+    hoverOver?: ReactNode;
 } | null;
 /** Item in hover over */
 export interface HoverOverItem {

package/lib/mwater_table_selection/FormsListComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+interface FormsListComponentProps {
+    /** 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 FormsListComponentState {
+    error?: any;
+    search: any;
+    forms: {
+        id: string;
+        name: string;
+        desc?: string;
+    }[] | null;
+}
+export declare class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
+    constructor(props: any);
+    componentDidMount(): void;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/mwater_table_selection/FormsListComponent.js

@@ -0,0 +1,141 @@
+"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.FormsListComponent = 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 moment_1 = __importDefault(require("moment"));
+// Searchable list of forms
+class FormsListComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            forms: null,
+            search: ""
+        };
+    }
+    componentDidMount() {
+        // Get names and basic of forms
+        const query = {};
+        query.fields = JSON.stringify({
+            "design.name": 1,
+            "design.description": 1,
+            roles: 1,
+            created: 1,
+            modified: 1,
+            state: 1,
+            isMaster: 1
+        });
+        query.selector = JSON.stringify({ design: { $exists: true }, state: { $ne: "deleted" } });
+        query.client = this.props.client;
+        // Get list of all form names
+        jquery_1.default.getJSON(this.props.apiUrl + "forms?" + querystring_1.default.stringify(query), (forms) => {
+            // Sort by modified.on desc but first by user
+            forms = lodash_1.default.sortByOrder(forms, [
+                (form) => ((this.props.extraTables || []).includes("responses:" + form._id) ? 1 : 0),
+                (form) => (form.created.by === this.props.user ? 1 : 0),
+                (form) => form.modified?.on
+            ], ["desc", "desc", "desc"]);
+            // TODO use name instead of design.name
+            this.setState({
+                forms: lodash_1.default.map(forms, (form) => {
+                    let desc = expressions_1.ExprUtils.localizeString(form.design.description, null) || "";
+                    if (desc) {
+                        desc += " - ";
+                    }
+                    desc += T `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
+                    return {
+                        id: form._id,
+                        name: expressions_1.ExprUtils.localizeString(form.design.name, null),
+                        desc
+                    };
+                })
+            });
+        }).fail((xhr) => {
+            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 forms;
+        if (this.state.error) {
+            return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
+        }
+        // Filter forms
+        if (this.state.search) {
+            const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+            const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i");
+            forms = lodash_1.default.filter(this.state.forms, (form) => form.name.match(searchStringRegExp));
+        }
+        else {
+            ;
+            ({ forms } = this.state);
+        }
+        // Remove if already included
+        forms = lodash_1.default.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`));
+        let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !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 Surveys:`),
+            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 Surveys:`),
+            !this.state.forms || this.state.forms.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(forms, (form) => ({
+                        name: form.name,
+                        desc: form.desc,
+                        onClick: this.props.onChange.bind(null, "responses:" + form.id)
+                    })) })))));
+    }
+}
+exports.FormsListComponent = FormsListComponent;

package/lib/mwater_table_selection/IndicatorsListComponent.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+interface IndicatorsListComponentProps {
+    /** 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 IndicatorsListComponentState {
+    error?: any;
+    search: any;
+    indicators: any[] | null;
+}
+export declare class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
+    addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null;
+    constructor(props: any);
+    componentDidMount(): JQuery.jqXHR<any>;
+    handleTableRemove: (table: any) => any;
+    searchRef: (comp: any) => any;
+    handleSelect: (tableId: any) => void;
+    render(): React.JSX.Element;
+}
+interface AddIndicatorConfirmPopupComponentProps {
+    schema: Schema;
+    /** Called with table selected */
+    onChange: any;
+    onExtraTableAdd: any;
+}
+interface AddIndicatorConfirmPopupComponentState {
+    indicatorTable: any;
+    visible: any;
+}
+declare class AddIndicatorConfirmPopupComponent extends React.Component<AddIndicatorConfirmPopupComponentProps, AddIndicatorConfirmPopupComponentState> {
+    constructor(props: any);
+    show(indicatorTable: any): void;
+    renderContents(): React.JSX.Element;
+    render(): React.JSX.Element | null;
+}
+export {};

package/lib/mwater_table_selection/IndicatorsListComponent.js

@@ -0,0 +1,182 @@
+"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 });
+        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: lodash_1.default.map(indicators, (indicator) => ({
+                    id: indicator._id,
+                    name: expressions_1.ExprUtils.localizeString(indicator.design.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(indicator.design.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();
+        }
+    };
+    handleSelect = (tableId) => {
+        // Add table if not present
+        if (!this.props.schema.getTable(tableId)) {
+            this.props.onExtraTableAdd(tableId);
+        }
+        this.addIndicatorConfirmPopup.show(tableId);
+    };
+    render() {
+        let indicators;
+        if (this.state.error) {
+            return react_1.default.createElement("div", { className: "alert alert-danger" }, this.state.error);
+        }
+        // Filter indicators
+        if (this.state.search) {
+            const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+            const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i");
+            indicators = lodash_1.default.filter(this.state.indicators || [], (indicator) => indicator.name.match(searchStringRegExp));
+        }
+        else {
+            ;
+            ({ indicators } = this.state);
+        }
+        // Remove if already included
+        indicators = lodash_1.default.filter(indicators || [], (f) => !(this.props.extraTables || []).includes(`indicator_values:${f.id}`));
+        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) => {
+                    return {
+                        name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                        desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                        onClick: this.handleSelect.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 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 }) }),
+                react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(indicators, (indicator) => ({
+                        name: indicator.name,
+                        desc: indicator.desc,
+                        onClick: this.handleSelect.bind(null, "indicator_values:" + indicator.id)
+                    })) })))));
+    }
+}
+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()));
+    }
+}

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;