@mwater/visualization 5.4.5 → 5.6.0

package/lib/mwater_table_selection/MWaterTableSelectComponent.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { ToggleEditComponent } from "../UIComponents";
+import { Schema } from "@mwater/expressions";
+export interface MWaterTableSelectComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    table?: string;
+    /** Called with table selected */
+    onChange: (table: string | null) => void;
+    extraTables?: string[];
+    onExtraTablesChange?: (tables: string[]) => void;
+    /** Can also perform filtering for some types. Include these props to enable this */
+    filter?: any;
+    onFilterChange?: (filter: any) => void;
+}
+interface MWaterTableSelectComponentState {
+    pendingExtraTable: string | null;
+}
+export default class MWaterTableSelectComponent extends React.Component<MWaterTableSelectComponentProps, MWaterTableSelectComponentState> {
+    toggleEdit: ToggleEditComponent | null;
+    constructor(props: MWaterTableSelectComponentProps);
+    componentDidUpdate(prevProps: MWaterTableSelectComponentProps): void;
+    handleChange: (tableId: string | null) => void;
+    handleTableChange: (tableId: string | null) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/mwater_table_selection/MWaterTableSelectComponent.js

@@ -0,0 +1,163 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importDefault(require("react"));
+const UIComponents_1 = require("../UIComponents");
+const expressions_1 = require("@mwater/expressions");
+const MWaterResponsesFilterComponent_1 = __importDefault(require("../MWaterResponsesFilterComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+const MWaterCompleteTableSelectComponent_1 = __importDefault(require("./MWaterCompleteTableSelectComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+// Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
+class MWaterTableSelectComponent extends react_1.default.Component {
+    toggleEdit = null;
+    constructor(props) {
+        super(props);
+        this.state = {
+            pendingExtraTable: null // Set when waiting for a table to load
+        };
+    }
+    componentDidUpdate(prevProps) {
+        // If received new schema with pending extra table, select it
+        let table = null;
+        if (this.state.pendingExtraTable) {
+            table = this.state.pendingExtraTable;
+            if (this.props.schema.getTable(table)) {
+                // No longer waiting
+                this.setState({ pendingExtraTable: null });
+                // Close toggle edit
+                this.toggleEdit?.close();
+                // Fire change
+                this.props.onChange(table);
+            }
+        }
+        // If table is newly selected and is a responses table and no filters, set filters to final only
+        if (this.props.table &&
+            this.props.table.match(/responses:/) &&
+            this.props.table !== prevProps.table &&
+            !this.props.filter &&
+            this.props.onFilterChange) {
+            this.props.onFilterChange({
+                type: "op",
+                op: "= any",
+                table: this.props.table,
+                exprs: [
+                    { type: "field", table: this.props.table, column: "status" },
+                    { type: "literal", valueType: "enumset", value: ["final"] }
+                ]
+            });
+        }
+    }
+    handleChange = (tableId) => {
+        // Close toggle edit
+        this.toggleEdit?.close();
+        // Call onChange if different
+        if (tableId !== this.props.table) {
+            return this.props.onChange(tableId);
+        }
+    };
+    handleTableChange = (tableId) => {
+        // If not part of extra tables, add it and wait for new schema
+        if (tableId && !this.props.schema.getTable(tableId)) {
+            if (this.props.onExtraTablesChange) {
+                this.setState({ pendingExtraTable: tableId }, () => {
+                    this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables || [], [tableId]));
+                });
+            }
+            else {
+                alert(T `Cannot add new tables.`);
+            }
+        }
+        else {
+            this.handleChange(tableId);
+        }
+    };
+    render() {
+        const editor = react_1.default.createElement(EditModeTableSelectComponent, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleTableChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange });
+        return (react_1.default.createElement("div", null,
+            this.state.pendingExtraTable ? (react_1.default.createElement("div", { className: "alert alert-info", key: "pendingExtraTable" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                "\u00A0",
+                T `Please wait...`)) : undefined,
+            react_1.default.createElement(UIComponents_1.ToggleEditComponent, { ref: (c) => {
+                    this.toggleEdit = c;
+                }, forceOpen: !this.props.table, label: this.props.table
+                    ? expressions_1.ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
+                    : "", editor: editor, onRemove: () => {
+                    this.props.onChange(null);
+                } }),
+            this.props.table &&
+                this.props.onFilterChange &&
+                this.props.table.match(/^responses:/) &&
+                this.props.schema.getTable(this.props.table) ? (react_1.default.createElement(MWaterResponsesFilterComponent_1.default, { schema: this.props.schema, table: this.props.table, filter: this.props.filter, onFilterChange: this.props.onFilterChange })) : undefined));
+    }
+}
+exports.default = MWaterTableSelectComponent;
+// Is the table select component when in edit mode. Toggles between complete list and simplified list
+class EditModeTableSelectComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // True when in popup mode that shows all tables
+            completeMode: false
+        };
+    }
+    handleShowMore = () => {
+        return this.setState({ completeMode: true });
+    };
+    // Get list of tables that should be included in shortlist
+    // This is all active tables and all responses tables in schema (so as to include rosters) and all extra tables
+    // Also includes current table
+    getTableShortlist(activeTables) {
+        let tables = activeTables;
+        // Remove dead tables
+        tables = tables.filter((t) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)?.deprecated);
+        tables = lodash_1.default.union(tables, lodash_1.default.filter(lodash_1.default.pluck(this.props.schema.getTables(), "id"), (t) => t.match(/^responses:/)));
+        if (this.props.table) {
+            tables = lodash_1.default.union(tables, [this.props.table]);
+        }
+        for (let extraTable of this.props.extraTables || []) {
+            // Check if wildcard
+            if (extraTable.match(/\*$/)) {
+                for (let table of this.props.schema.getTables()) {
+                    if (table.id.startsWith(extraTable.substr(0, extraTable.length - 1)) && !table.deprecated) {
+                        tables = lodash_1.default.union(tables, [table.id]);
+                    }
+                }
+            }
+            else {
+                // Add if exists
+                if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)?.deprecated) {
+                    tables = lodash_1.default.union(tables, [extraTable]);
+                }
+            }
+        }
+        // Sort by name
+        tables = lodash_1.default.sortBy(tables, (tableId) => expressions_1.ExprUtils.localizeString(this.props.schema.getTable(tableId)?.name, T.locale));
+        return tables;
+    }
+    handleCompleteChange = (tableId) => {
+        this.setState({ completeMode: false });
+        return this.props.onChange(tableId);
+    };
+    render() {
+        return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Consumer, null, (activeTables) => (react_1.default.createElement("div", null,
+            this.state.completeMode ? (react_1.default.createElement(ModalPopupComponent_1.default, { header: T `Select Data Source`, onClose: () => this.setState({ completeMode: false }), showCloseX: true, size: "x-large" },
+                react_1.default.createElement(MWaterCompleteTableSelectComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, schema: this.props.schema, user: this.props.user, table: this.props.table, onChange: this.handleCompleteChange, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange }))) : null,
+            this.getTableShortlist(activeTables).length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "text-muted" }, T `Select Data Source:`),
+                react_1.default.createElement(UIComponents_1.OptionListComponent, { items: this.getTableShortlist(activeTables).map((tableId) => {
+                        const table = this.props.schema.getTable(tableId);
+                        return {
+                            name: expressions_1.ExprUtils.localizeString(table?.name, T.locale),
+                            desc: expressions_1.ExprUtils.localizeString(table?.desc, T.locale),
+                            onClick: () => table && this.props.onChange(table.id)
+                        };
+                    }) }),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleShowMore }, T `Show All Available Data Sources...`)))) : (react_1.default.createElement("button", { type: "button", className: "btn btn-link", onClick: this.handleShowMore }, T `Select Data Source...`))))));
+    }
+}

package/lib/mwater_table_selection/MWaterWorkflowsSelectComponent.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+interface MWaterWorkflowsSelectComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+}
+/** Searchable list of workflow types */
+export declare function MWaterWorkflowsSelectComponent(props: MWaterWorkflowsSelectComponentProps): React.JSX.Element;
+export {};

package/lib/mwater_table_selection/MWaterWorkflowsSelectComponent.js

@@ -0,0 +1,111 @@
+"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.MWaterWorkflowsSelectComponent = MWaterWorkflowsSelectComponent;
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importStar(require("react"));
+const querystring_1 = __importDefault(require("querystring"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+/** Searchable list of workflow types */
+function MWaterWorkflowsSelectComponent(props) {
+    const [workflowTypes, setWorkflowTypes] = (0, react_1.useState)(null);
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        // Get names and basic of workflow types
+        const query = {};
+        query.fields = JSON.stringify({
+            name: 1,
+            description: 1,
+            roles: 1,
+            _created_by: 1,
+            _modified_on: 1
+        });
+        query.client = props.client;
+        // Get list of all workflow types
+        jquery_1.default.getJSON(props.apiUrl + "workflow_types?" + querystring_1.default.stringify(query), (types) => {
+            // Sort by included first, then user-created, then by name
+            types = lodash_1.default.sortByOrder(types, [
+                (type) => ((props.extraTables || []).includes("workflows:" + type._id) ? 0 : 1),
+                (type) => (type._created_by === props.user ? 0 : 1),
+                (type) => expressions_1.ExprUtils.localizeString(type.name, T.locale) || T `Untitled Workflow Type`
+            ], ["asc", "asc", "asc"]);
+            setWorkflowTypes(lodash_1.default.map(types, (type) => ({
+                id: type._id,
+                name: expressions_1.ExprUtils.localizeString(type.name, T.locale) || T `Untitled Workflow Type`,
+                desc: expressions_1.ExprUtils.localizeString(type.description, T.locale)
+            })));
+        }).fail((xhr) => {
+            setError(xhr.responseText);
+        });
+    }, [props.apiUrl, props.client, props.user, props.extraTables]);
+    const handleTableRemove = (table) => {
+        if (confirm(T `Remove ${table.name}? Any widgets that depend on it will no longer work properly.`)) {
+            props.onExtraTableRemove(`workflows:${table.id}`);
+        }
+    };
+    if (error) {
+        return react_1.default.createElement("div", { className: "alert alert-danger" }, error);
+    }
+    // Filter workflow types by search
+    let filteredWorkflowTypes = workflowTypes;
+    if (search && workflowTypes) {
+        const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+        const searchStringRegExp = new RegExp(escapeRegExp(search), "i");
+        filteredWorkflowTypes = lodash_1.default.filter(workflowTypes, (type) => type.name.match(searchStringRegExp));
+    }
+    // Remove if already included
+    filteredWorkflowTypes = lodash_1.default.filter(filteredWorkflowTypes || [], (wt) => !(props.extraTables || []).includes(`workflows:${wt.id}`));
+    // Get included workflow tables from schema
+    let includedTables = lodash_1.default.filter(props.schema.getTables(), (table) => (table.id.match(/^workflows:/) || table.id.match(/^workflow_events:/)) && !table.deprecated);
+    includedTables = lodash_1.default.sortBy(includedTables, (t) => t.name.en);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("label", null, T `Included Workflows:`),
+        includedTables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(includedTables, (table) => {
+                return {
+                    name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                    onClick: () => props.onChange(table.id),
+                    onRemove: () => handleTableRemove({ id: table.id.replace(/^workflows:/, ""), name: expressions_1.ExprUtils.localizeString(table.name, T.locale) })
+                };
+            }) })) : (react_1.default.createElement("div", null, T `None`)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("label", null, T `All Workflows:`),
+        !workflowTypes || workflowTypes.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", autoFocus: true, style: { maxWidth: "20em", marginBottom: 10 }, value: search, onChange: (ev) => setSearch(ev.target.value) }),
+            react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(filteredWorkflowTypes, (workflowType) => ({
+                    name: workflowType.name,
+                    desc: workflowType.desc,
+                    onClick: () => props.onChange("workflows:" + workflowType.id)
+                })) })))));
+}

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { DataSource, LocalizedString, Schema } from "@mwater/expressions";
-import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent";
+import { DataSource, Schema } from "@mwater/expressions";
 import { Quickfilter, QuickfilterLock } from "./Quickfilter";
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource";
 import { JsonQLFilter } from "..";
@@ -26,104 +25,6 @@ export interface QuickfiltersComponentProps {
 }
 /** Displays quick filters and allows their value to be modified */
 export default class QuickfiltersComponent extends React.Component<QuickfiltersComponentProps> {
-    renderQuickfilter(item: any, index: any): React.CElement<EnumQuickfilterComponentProps, EnumQuickfilterComponent> | React.CElement<TextQuickfilterComponentProps, TextQuickfilterComponent> | React.CElement<DateQuickfilterComponentProps, DateQuickfilterComponent> | React.CElement<import("./IdArrayQuickfilterComponent").IdArrayQuickfilterComponentProps, IdArrayQuickfilterComponent> | null;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            borderTop: string | undefined;
-            borderBottom: string;
-            padding: number;
-        };
-    }, HTMLElement> | null;
+    renderQuickfilter(item: Quickfilter, index: number): React.JSX.Element | null;
+    render(): React.JSX.Element | null;
 }
-interface EnumQuickfilterComponentProps {
-    label?: string;
-    schema: Schema;
-    /** true to display multiple values */
-    multi?: boolean;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    /** Called when value changes */
-    onValueChange?: any;
-    options: {
-        /** id of option */
-        id: string;
-        /** localized name */
-        name: LocalizedString;
-    }[];
-}
-/** Quickfilter for an enum */
-declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
-    static contextType: React.Context<string>;
-    handleSingleChange: (val: any) => any;
-    handleMultiChange: (val: any) => any;
-    renderSingleSelect(options: any[]): React.FunctionComponentElement<{
-        placeholder: string;
-        value: any;
-        options: any[];
-        isClearable: boolean;
-        onChange: (value: any) => any;
-        isDisabled: boolean;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    renderMultiSelect(options: any[]): React.FunctionComponentElement<{
-        placeholder: string;
-        value: any[];
-        isClearable: boolean;
-        isMulti: boolean;
-        options: any[];
-        onChange: ((val: any) => any) | undefined;
-        isDisabled: boolean;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-interface TextQuickfilterComponentProps {
-    label: string;
-    schema: Schema;
-    /** See QuickfiltersDataSource */
-    quickfiltersDataSource: QuickfiltersDataSource;
-    expr: any;
-    index: number;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    /** Called when value changes */
-    onValueChange?: any;
-    /** true to display multiple values */
-    multi?: boolean;
-    /** Filters to add to restrict quick filter data to */
-    filters?: JsonQLFilter[];
-}
-declare class TextQuickfilterComponent extends React.Component<TextQuickfilterComponentProps> {
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-interface DateQuickfilterComponentProps {
-    label?: string;
-    schema: Schema;
-    expr: any;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    onValueChange: any;
-}
-declare class DateQuickfilterComponent extends React.Component<DateQuickfilterComponentProps> {
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-export {};