@mwater/visualization 5.4.5 → 5.6.0

package/src/{MWaterCustomTablesetListComponent.tsx → mwater_table_selection/MWaterCustomTablesetListComponent.tsx}

@@ -2,7 +2,7 @@ import _ from "lodash"
 import { Schema, LocalizedString, Table, ExprUtils } from "@mwater/expressions"
 import { useState, useEffect } from "react"
 import React from "react"
-import { OptionListComponent } from "./UIComponents"
+import { OptionListComponent } from "../UIComponents"
 import { TextInput } from "@mwater/react-library/lib/bootstrap"
 
 /** Searchable list of custom tables */

package/src/{MWaterMetricsTableListComponent.tsx → mwater_table_selection/MWaterMetricsTableListComponent.tsx}

@@ -2,7 +2,7 @@ import _ from "lodash"
 import { Schema, LocalizedString, Table, ExprUtils } from "@mwater/expressions"
 import { useState, useEffect } from "react"
 import React from "react"
-import { OptionListComponent } from "./UIComponents"
+import { OptionListComponent } from "../UIComponents"
 import { TextInput } from "@mwater/react-library/lib/bootstrap"
 
 /** Searchable list of metric tables */

package/src/{MWaterTableSelectComponent.tsx → mwater_table_selection/MWaterTableSelectComponent.tsx}

@@ -1,9 +1,8 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-import { ToggleEditComponent, OptionListComponent } from "./UIComponents"
+import { ToggleEditComponent, OptionListComponent } from "../UIComponents"
 import { ExprUtils, Schema } from "@mwater/expressions"
-import MWaterResponsesFilterComponent from "./MWaterResponsesFilterComponent"
+import MWaterResponsesFilterComponent from "../MWaterResponsesFilterComponent"
 import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
 import MWaterCompleteTableSelectComponent from "./MWaterCompleteTableSelectComponent"
 import { ActiveTablesContext } from "@mwater/expressions-ui"
@@ -18,16 +17,16 @@ export interface MWaterTableSelectComponentProps {
   user?: string
   table?: string
   /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTablesChange: any
+  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?: any
+  onFilterChange?: (filter: any) => void
 }
 
 interface MWaterTableSelectComponentState {
-  pendingExtraTable: any
+  pendingExtraTable: string | null
 }
 
 // Allows selection of a mwater-visualization table. Loads forms as well and calls event if modified
@@ -35,7 +34,7 @@ export default class MWaterTableSelectComponent extends React.Component<
   MWaterTableSelectComponentProps,
   MWaterTableSelectComponentState
 > {
-  toggleEdit: any
+  toggleEdit: ToggleEditComponent | null = null
 
   constructor(props: MWaterTableSelectComponentProps) {
     super(props)
@@ -45,46 +44,46 @@ export default class MWaterTableSelectComponent extends React.Component<
     }
   }
 
-  componentWillReceiveProps(nextProps: any) {
+  componentDidUpdate(prevProps: MWaterTableSelectComponentProps) {
     // If received new schema with pending extra table, select it
-    let table
+    let table: string | null = null
     if (this.state.pendingExtraTable) {
       table = this.state.pendingExtraTable
-      if (nextProps.schema.getTable(table)) {
+      if (this.props.schema.getTable(table)) {
         // No longer waiting
         this.setState({ pendingExtraTable: null })
 
         // Close toggle edit
-        this.toggleEdit.close()
+        this.toggleEdit?.close()
 
         // Fire change
-        nextProps.onChange(table)
+        this.props.onChange(table)
       }
     }
 
     // If table is newly selected and is a responses table and no filters, set filters to final only
     if (
-      nextProps.table &&
-      nextProps.table.match(/responses:/) &&
-      nextProps.table !== this.props.table &&
-      !nextProps.filter &&
-      nextProps.onFilterChange
+      this.props.table &&
+      this.props.table.match(/responses:/) &&
+      this.props.table !== prevProps.table &&
+      !this.props.filter &&
+      this.props.onFilterChange
     ) {
-      return nextProps.onFilterChange({
+      this.props.onFilterChange({
         type: "op",
         op: "= any",
-        table: nextProps.table,
+        table: this.props.table,
         exprs: [
-          { type: "field", table: nextProps.table, column: "status" },
+          { type: "field", table: this.props.table, column: "status" },
           { type: "literal", valueType: "enumset", value: ["final"] }
         ]
       })
     }
   }
 
-  handleChange = (tableId: any) => {
+  handleChange = (tableId: string | null) => {
     // Close toggle edit
-    this.toggleEdit.close()
+    this.toggleEdit?.close()
 
     // Call onChange if different
     if (tableId !== this.props.table) {
@@ -92,68 +91,70 @@ export default class MWaterTableSelectComponent extends React.Component<
     }
   }
 
-  handleTableChange = (tableId: any) => {
+  handleTableChange = (tableId: string | null) => {
     // If not part of extra tables, add it and wait for new schema
     if (tableId && !this.props.schema.getTable(tableId)) {
-      return this.setState({ pendingExtraTable: tableId }, () => {
-        return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
-      })
+      if (this.props.onExtraTablesChange) {
+        this.setState({ pendingExtraTable: tableId }, () => {
+          this.props.onExtraTablesChange!(_.union(this.props.extraTables || [], [tableId]))
+        })
+      } else {
+        alert(T`Cannot add new tables.`)
+      }
     } else {
-      return this.handleChange(tableId)
+      this.handleChange(tableId)
     }
   }
 
   render() {
-    const editor = R(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
-    })
+    const editor = <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 R(
-      "div",
-      null,
-      // Show message if loading
-      this.state.pendingExtraTable
-        ? R(
-            "div",
-            { className: "alert alert-info", key: "pendingExtraTable" },
-            R("i", { className: "fa fa-spinner fa-spin" }),
-            `\u00a0${T`Please wait...`}`
-          )
-        : undefined,
+    return (
+      <div>
+        {/* Show message if loading */}
+        {this.state.pendingExtraTable ? (
+          <div className="alert alert-info" key="pendingExtraTable">
+            <i className="fa fa-spinner fa-spin"/>
+            &nbsp;{T`Please wait...`}
+          </div>
+        ) : undefined}
 
-      R(ToggleEditComponent, {
-        ref: (c: any) => {
-          this.toggleEdit = c
-        },
-        forceOpen: !this.props.table, // Must have table
-        label: this.props.table
-          ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
-          : "",
-        editor,
-        onRemove: () => {
-          this.props.onChange(null)
-        }
-      }),
+        <ToggleEditComponent
+          ref={(c: ToggleEditComponent | null) => {
+            this.toggleEdit = c
+          }}
+          forceOpen={!this.props.table} // Must have table
+          label={this.props.table
+            ? ExprUtils.localizeString(this.props.schema.getTable(this.props.table)?.name, T.locale)
+            : ""}
+          editor={editor}
+          onRemove={() => {
+            this.props.onChange(null)
+          }}
+        />
 
-      // Make sure table still exists
-      this.props.table &&
-        this.props.onFilterChange &&
-        this.props.table.match(/^responses:/) &&
-        this.props.schema.getTable(this.props.table)
-        ? R(MWaterResponsesFilterComponent, {
-            schema: this.props.schema,
-            table: this.props.table,
-            filter: this.props.filter,
-            onFilterChange: this.props.onFilterChange
-          })
-        : undefined
+        {/* Make sure table still exists */}
+        {this.props.table &&
+          this.props.onFilterChange &&
+          this.props.table.match(/^responses:/) &&
+          this.props.schema.getTable(this.props.table) ? (
+            <MWaterResponsesFilterComponent
+              schema={this.props.schema}
+              table={this.props.table}
+              filter={this.props.filter}
+              onFilterChange={this.props.onFilterChange}
+            />
+          ) : undefined}
+      </div>
     )
   }
 }
@@ -168,13 +169,13 @@ interface EditModeTableSelectComponentProps {
   user?: string
   table?: string
   /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTablesChange: any
+  onChange: (table: string | null) => void
+  extraTables?: string[]
+  onExtraTablesChange?: (tables: string[]) => void
 }
 
 interface EditModeTableSelectComponentState {
-  completeMode: any
+  completeMode: boolean
 }
 
 // Is the table select component when in edit mode. Toggles between complete list and simplified list
@@ -182,7 +183,7 @@ class EditModeTableSelectComponent extends React.Component<
   EditModeTableSelectComponentProps,
   EditModeTableSelectComponentState
 > {
-  constructor(props: any) {
+  constructor(props: EditModeTableSelectComponentProps) {
     super(props)
 
     this.state = {
@@ -203,7 +204,7 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Remove dead tables
     tables = tables.filter(
-      (t: any) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)!.deprecated
+      (t: string) => this.props.schema.getTable(t) != null && !this.props.schema.getTable(t)?.deprecated
     )
     tables = _.union(
       tables,
@@ -223,7 +224,7 @@ class EditModeTableSelectComponent extends React.Component<
         }
       } else {
         // Add if exists
-        if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)!.deprecated) {
+        if (this.props.schema.getTable(extraTable) && !this.props.schema.getTable(extraTable)?.deprecated) {
           tables = _.union(tables, [extraTable])
         }
       }
@@ -231,13 +232,13 @@ class EditModeTableSelectComponent extends React.Component<
 
     // Sort by name
     tables = _.sortBy(tables, (tableId) =>
-      ExprUtils.localizeString(this.props.schema.getTable(tableId)!.name, T.locale)
+      ExprUtils.localizeString(this.props.schema.getTable(tableId)?.name, T.locale)
     )
 
     return tables
   }
 
-  handleCompleteChange = (tableId: any) => {
+  handleCompleteChange = (tableId: string | null) => {
     this.setState({ completeMode: false })
     return this.props.onChange(tableId)
   }
@@ -245,7 +246,7 @@ class EditModeTableSelectComponent extends React.Component<
   render() {
     return (
       <ActiveTablesContext.Consumer>
-        {activeTables => (
+        {(activeTables: string[]) => (
           <div>
             {this.state.completeMode ? (
               <ModalPopupComponent
@@ -271,11 +272,11 @@ class EditModeTableSelectComponent extends React.Component<
               <>
                 <div className="text-muted">{T`Select Data Source:`}</div>
                 <OptionListComponent items={this.getTableShortlist(activeTables).map((tableId) => {
-                  const table = this.props.schema.getTable(tableId)!
+                  const table = this.props.schema.getTable(tableId)
                   return {
-                    name: ExprUtils.localizeString(table.name, T.locale),
-                    desc: ExprUtils.localizeString(table.desc, T.locale),
-                    onClick: () => this.props.onChange(table.id)
+                    name: ExprUtils.localizeString(table?.name, T.locale),
+                    desc: ExprUtils.localizeString(table?.desc, T.locale),
+                    onClick: () => table && this.props.onChange(table.id)
                   }
                 })} />
                 <div>

package/src/mwater_table_selection/MWaterWorkflowsSelectComponent.tsx

@@ -0,0 +1,159 @@
+import _ from "lodash"
+import $ from "jquery"
+import React, { useState, useEffect } from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import { WorkflowType } from "@mwater/common/lib/tables/workflow_types"
+
+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
+}
+
+interface WorkflowTypeItem {
+  id: string
+  name: string
+  desc?: string
+}
+
+/** Searchable list of workflow types */
+export function MWaterWorkflowsSelectComponent(props: MWaterWorkflowsSelectComponentProps) {
+  const [workflowTypes, setWorkflowTypes] = useState<WorkflowTypeItem[] | null>(null)
+  const [search, setSearch] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Get names and basic of workflow types
+    const query: any = {}
+    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
+    $.getJSON(props.apiUrl + "workflow_types?" + querystring.stringify(query), (types: WorkflowType[]) => {
+      // Sort by included first, then user-created, then by name
+      types = _.sortByOrder(
+        types,
+        [
+          (type: WorkflowType) => ((props.extraTables || []).includes("workflows:" + type._id) ? 0 : 1),
+          (type: WorkflowType) => (type._created_by === props.user ? 0 : 1),
+          (type: WorkflowType) => ExprUtils.localizeString(type.name, T.locale) || T`Untitled Workflow Type`
+        ],
+        ["asc", "asc", "asc"]
+      )
+
+      setWorkflowTypes(
+        _.map(types, (type) => ({
+          id: type._id,
+          name: ExprUtils.localizeString(type.name, T.locale) || T`Untitled Workflow Type`,
+          desc: ExprUtils.localizeString(type.description, T.locale)
+        }))
+      )
+    }).fail((xhr: any) => {
+      setError(xhr.responseText)
+    })
+  }, [props.apiUrl, props.client, props.user, props.extraTables])
+
+  const handleTableRemove = (table: WorkflowTypeItem) => {
+    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 <div className="alert alert-danger">{error}</div>
+  }
+
+  // Filter workflow types by search
+  let filteredWorkflowTypes: WorkflowTypeItem[] | null = workflowTypes
+  if (search && workflowTypes) {
+    const escapeRegExp = (s: string) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+    const searchStringRegExp = new RegExp(escapeRegExp(search), "i")
+    filteredWorkflowTypes = _.filter(workflowTypes, (type) => type.name.match(searchStringRegExp))
+  }
+
+  // Remove if already included
+  filteredWorkflowTypes = _.filter(
+    filteredWorkflowTypes || [],
+    (wt) => !(props.extraTables || []).includes(`workflows:${wt.id}`)
+  )
+
+  // Get included workflow tables from schema
+  let includedTables = _.filter(
+    props.schema.getTables(),
+    (table) => (table.id.match(/^workflows:/) || table.id.match(/^workflow_events:/)) && !table.deprecated
+  )
+  includedTables = _.sortBy(includedTables, (t) => t.name.en)
+
+  return (
+    <div>
+      <label>{T`Included Workflows:`}</label>
+      {includedTables.length > 0 ? (
+        <uiComponents.OptionListComponent
+          items={_.map(includedTables, (table) => {
+            return {
+              name: ExprUtils.localizeString(table.name, T.locale),
+              desc: ExprUtils.localizeString(table.desc, T.locale),
+              onClick: () => props.onChange(table.id),
+              onRemove: () => handleTableRemove({ id: table.id.replace(/^workflows:/, ""), name: ExprUtils.localizeString(table.name, T.locale) })
+            }
+          })}
+        />
+      ) : (
+        <div>{T`None`}</div>
+      )}
+
+      <br />
+
+      <label>{T`All Workflows:`}</label>
+      {!workflowTypes || workflowTypes.length === 0 ? (
+        <div className="alert alert-info">
+          <i className="fa fa-spinner fa-spin" />
+          &nbsp;{T`Loading...`}
+        </div>
+      ) : (
+        <>
+          <input
+            type="text"
+            className="form-control form-control-sm"
+            placeholder={T`Search...`}
+            key="search"
+            autoFocus
+            style={{ maxWidth: "20em", marginBottom: 10 }}
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+          />
+
+          <uiComponents.OptionListComponent
+            items={_.map(filteredWorkflowTypes, (workflowType) => ({
+              name: workflowType.name,
+              desc: workflowType.desc,
+              onClick: () => props.onChange("workflows:" + workflowType.id)
+            }))}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+