@mwater/visualization 5.4.4 → 5.5.0

package/src/mwater_table_selection/IndicatorsListComponent.tsx

@@ -0,0 +1,283 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+
+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
+}
+
+// Searchable list of indicators
+export class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
+  addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      indicators: null,
+      search: ""
+    }
+  }
+
+  componentDidMount() {
+    // Get names and basic of forms
+    const query: any = {}
+    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 $.getJSON(this.props.apiUrl + "indicators?" + querystring.stringify(query), (indicators: any[]) => {
+      // Remove deprecated
+      indicators = _.filter(indicators, (indicator) => !indicator.deprecated)
+
+      // Sort by name
+      indicators = _.sortByOrder(
+        indicators,
+        [
+          (indicator: any) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
+          (indicator: any) => (indicator.design.recommended ? 0 : 1),
+          (indicator: any) => ExprUtils.localizeString(indicator.design.name, T.locale)
+        ],
+        ["asc", "asc", "asc"]
+      )
+
+      return this.setState({
+        indicators: _.map(indicators, (indicator) => ({
+          id: indicator._id,
+          name: ExprUtils.localizeString(indicator.design.name, T.locale),
+          desc: ExprUtils.localizeString(indicator.design.desc, T.locale)
+        }))
+      })
+    }).fail((xhr: any) => {
+      return this.setState({ error: xhr.responseText })
+    })
+  }
+
+  handleTableRemove = (table: any) => {
+    if (
+      confirm(
+        T`Remove ${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: any) => {
+    // Focus
+    if (comp) {
+      return comp.focus()
+    }
+  }
+
+  handleSelect = (tableId: any) => {
+    // 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 <div className="alert alert-danger">{this.state.error}</div>
+    }
+
+    // Filter indicators
+    if (this.state.search) {
+      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+
+      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
+
+      indicators = _.filter(this.state.indicators || [], (indicator) => indicator.name.match(searchStringRegExp))
+    } else {
+      ;({ indicators } = this.state)
+    }
+
+    // Remove if already included
+    indicators = _.filter(indicators || [], (f) => !(this.props.extraTables || []).includes(`indicator_values:${f.id}`))
+
+    let tables = _.filter(
+      this.props.schema.getTables(),
+      (table) => table.id.match(/^indicator_values:/) && !table.deprecated
+    )
+    tables = _.sortBy(tables, (t) => t.name.en)
+
+    return (
+      <div>
+        <AddIndicatorConfirmPopupComponent
+          schema={this.props.schema}
+          onChange={this.props.onChange}
+          onExtraTableAdd={this.props.onExtraTableAdd}
+          ref={(c: AddIndicatorConfirmPopupComponent | null) => {
+            this.addIndicatorConfirmPopup = c
+          }}
+        />
+
+        <label>{T`Included Indicators:`}</label>
+        {tables.length > 0 ? (
+          <uiComponents.OptionListComponent
+            items={_.map(tables, (table) => {
+              return {
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
+                onClick: this.handleSelect.bind(null, table.id),
+                onRemove: this.handleTableRemove.bind(null, table)
+              }
+            })}
+          />
+        ) : (
+          <div>{T`None`}</div>
+        )}
+
+        <br />
+
+        <label>{T`All Indicators:`}</label>
+        {!this.state.indicators || this.state.indicators.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"
+              ref={this.searchRef}
+              style={{ maxWidth: "20em", marginBottom: 10 }}
+              value={this.state.search}
+              onChange={(ev: any) => this.setState({ search: ev.target.value })}
+            />
+
+            <uiComponents.OptionListComponent
+              items={_.map(indicators, (indicator) => ({
+                name: indicator.name,
+                desc: indicator.desc,
+                onClick: this.handleSelect.bind(null, "indicator_values:" + indicator.id)
+              }))}
+            />
+          </>
+        )}
+      </div>
+    )
+  }
+}
+
+interface AddIndicatorConfirmPopupComponentProps {
+  schema: Schema
+  /** Called with table selected */
+  onChange: any
+  onExtraTableAdd: any
+}
+
+interface AddIndicatorConfirmPopupComponentState {
+  indicatorTable: any
+  visible: any
+}
+
+class AddIndicatorConfirmPopupComponent extends React.Component<
+  AddIndicatorConfirmPopupComponentProps,
+  AddIndicatorConfirmPopupComponentState
+> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      visible: false,
+      indicatorTable: null
+    }
+  }
+
+  show(indicatorTable: any) {
+    return this.setState({ visible: true, indicatorTable })
+  }
+
+  renderContents() {
+    // Show loading if table not loaded
+    if (!this.props.schema.getTable(this.state.indicatorTable)) {
+      return (
+        <div className="alert alert-info">
+          <i className="fa fa-spinner fa-spin" />
+          &nbsp;{T`Loading...`}
+        </div>
+      )
+    }
+
+    // Find entity links
+    const entityColumns = _.filter(this.props.schema.getColumns(this.state.indicatorTable), (col) =>
+      col.join?.toTable?.match(/^entities\./)
+    )
+
+    return (
+      <div>
+        <p>
+          {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`}
+        </p>
+
+        <uiComponents.OptionListComponent
+          items={_.map(entityColumns, (entityColumn) => ({
+            name: ExprUtils.localizeString(entityColumn.name, T.locale),
+            desc: ExprUtils.localizeString(entityColumn.desc, T.locale),
+            onClick: () => {
+              // Select table
+              this.props.onChange(entityColumn.join!.toTable)
+              return this.setState({ visible: false })
+            }
+          }))}
+        />
+
+        <br />
+
+        <div>
+          <a className="link-plain" onClick={this.props.onChange.bind(null, this.state.indicatorTable)}>
+            {T`Use Raw Indicator`}
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    if (!this.state.visible) {
+      return null
+    }
+
+    return (
+      <ModalPopupComponent
+        showCloseX={true}
+        onClose={() => this.setState({ visible: false })}
+        header={T`Add Indicator`}
+      >
+        {this.renderContents()}
+      </ModalPopupComponent>
+    )
+  }
+}

package/src/mwater_table_selection/IssuesListComponent.tsx

@@ -0,0 +1,167 @@
+import _ from "lodash"
+import $ from "jquery"
+import React from "react"
+import querystring from "querystring"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, 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
+}
+
+// Searchable list of issue types
+export class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      issueTypes: null,
+      search: ""
+    }
+  }
+
+  componentDidMount() {
+    // Get names and basic of issueTypes
+    const query: any = {}
+    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 $.getJSON(this.props.apiUrl + "issue_types?" + querystring.stringify(query), (issueTypes: any[]) => {
+      // Sort by modified.on desc but first by user
+      issueTypes = _.sortByOrder(
+        issueTypes,
+        [
+          (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
+          (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
+          (issueType) => ExprUtils.localizeString(issueType.name, T.locale)
+        ],
+        ["asc", "asc", "asc"]
+      )
+
+      return this.setState({
+        issueTypes: _.map(issueTypes, (issueType) => ({
+          id: issueType._id,
+          name: ExprUtils.localizeString(issueType.name, T.locale),
+          desc: ExprUtils.localizeString(issueType.desc, T.locale)
+        }))
+      })
+    }).fail((xhr: any) => {
+      return this.setState({ error: xhr.responseText })
+    })
+  }
+
+  handleTableRemove = (table: any) => {
+    if (
+      confirm(
+        T`Remove ${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: any) => {
+    // Focus
+    if (comp) {
+      return comp.focus()
+    }
+  }
+
+  render() {
+    let issueTypes
+    if (this.state.error) {
+      return <div className="alert alert-danger">{this.state.error}</div>
+    }
+
+    // Filter issueTypes
+    if (this.state.search) {
+      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+
+      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
+
+      issueTypes = _.filter(this.state.issueTypes || [], (issueType) => issueType.name.match(searchStringRegExp))
+    } else {
+      ;({ issueTypes } = this.state)
+    }
+
+    // Remove if already included
+    issueTypes = _.filter(issueTypes || [], (f) => !(this.props.extraTables || []).includes(`issues:${f.id}`))
+
+    let tables = _.filter(
+      this.props.schema.getTables(),
+      (table) => (table.id.match(/^issues:/) || table.id.match(/^issue_events:/)) && !table.deprecated
+    )
+    tables = _.sortBy(tables, (t) => t.name.en)
+
+    return (
+      <div>
+        <label>{T`Included Issues:`}</label>
+        {tables.length > 0 ? (
+          <uiComponents.OptionListComponent
+            items={_.map(tables, (table) => {
+              return {
+                name: ExprUtils.localizeString(table.name, T.locale),
+                desc: ExprUtils.localizeString(table.desc, T.locale),
+                onClick: this.props.onChange.bind(null, table.id),
+                onRemove: this.handleTableRemove.bind(null, table)
+              }
+            })}
+          />
+        ) : (
+          <div>{T`None`}</div>
+        )}
+
+        <br />
+
+        <label>{T`All Issues:`}</label>
+        {!this.state.issueTypes || this.state.issueTypes.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"
+              ref={this.searchRef}
+              style={{ maxWidth: "20em", marginBottom: 10 }}
+              value={this.state.search}
+              onChange={(ev: any) => this.setState({ search: ev.target.value })}
+            />
+
+            <uiComponents.OptionListComponent
+              items={_.map(issueTypes, (issueType) => ({
+                name: issueType.name,
+                desc: issueType.desc,
+                onClick: this.props.onChange.bind(null, "issues:" + issueType.id)
+              }))}
+            />
+          </>
+        )}
+      </div>
+    )
+  }
+}

package/src/mwater_table_selection/MWaterAccountingSystemListComponent.tsx

@@ -0,0 +1,225 @@
+import _ from "lodash"
+import { Schema, LocalizedString, ExprUtils } from "@mwater/expressions"
+import { CustomTablesetDesign, CustomTable } from "@mwater/common/lib/tables/custom_tablesets"
+import { Partition as AccountingSystemPartitionType } from "@mwater/common/lib/accounting/accountingTypes"
+import { useState, useEffect, useMemo } from "react"
+import React from "react"
+import { OptionListComponent } from "../UIComponents"
+import { TextInput } from "@mwater/react-library/lib/bootstrap"
+
+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 function MWaterAccountingSystemListComponent(props: MWaterAccountingSystemListComponentProps) {
+  const {
+    apiUrl,
+    schema,
+    client,
+    onChange,
+    extraTables,
+    onExtraTableAdd,
+    onExtraTableRemove,
+    locale
+  } = props
+
+  const [rawAccountingSystems, setRawAccountingSystems] = useState<AccountingSystemPartitionType[]>()
+  const [accountingTablesetDesign, setAccountingTablesetDesign] = useState<CustomTablesetDesign>()
+  const [search, setSearch] = useState<string>("")
+  // Stores the fully qualified table ID that we want to select after its system is loaded
+  const [targetSelection, setTargetSelection] = useState<string>()
+
+  // Fetch accounting systems (partitions) and the main accounting tableset design
+  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: AccountingSystemPartitionType[]) => {
+        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: { design: CustomTablesetDesign }[] | null) => {
+        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 = useMemo(() => {
+    if (!rawAccountingSystems) {
+      return undefined
+    }
+    return _.sortByAll(
+      rawAccountingSystems,
+      [
+        (sys: AccountingSystemPartitionType) => {
+          const wildcard = `custom.accounting:${String(sys._partition)}.*`
+          return !extraTables.includes(wildcard) // false (0) for included, true (1) for not
+        },
+        (sys: AccountingSystemPartitionType) => sys.name
+      ]
+    )
+  }, [rawAccountingSystems, extraTables])
+
+  // Effect to handle selecting a table once its accounting system's tables are loaded into the schema
+  useEffect(() => {
+    if (targetSelection && schema.getTable(targetSelection)) {
+      onChange(targetSelection)
+      setTargetSelection(undefined) // Clear the target selection
+    }
+  }, [targetSelection, schema, onChange])
+
+  const handleSelectTable = (partitionId: string | number, table: CustomTable) => {
+    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: string | number) => {
+    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 (
+      <div>
+        <i className="fa fa-spin fa-spinner" /> {T`Loading accounting data...`}
+      </div>
+    )
+  }
+
+  const filteredSystems = sortedAccountingSystems.filter(system => {
+    if (search === "") {
+      return true
+    }
+    const systemName = ExprUtils.localizeString(system.name, locale) || ""
+    if (systemName.toLowerCase().includes(search.toLowerCase())) {
+      return true
+    }
+
+    return accountingTablesetDesign.tables.some(t =>
+      !t.deprecated && (ExprUtils.localizeString(t.name, locale) || "").toLowerCase().includes(search.toLowerCase())
+    )
+  })
+
+  const renderSingleAccountingSystem = (system: AccountingSystemPartitionType) => {
+    const systemName = 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 ((ExprUtils.localizeString(system.name, locale) || "").toLowerCase().includes(search.toLowerCase())) {
+          return true
+        }
+        return (ExprUtils.localizeString(t.name, locale) || "").toLowerCase().includes(search.toLowerCase())
+      })
+      .map(t => ({
+        name: ExprUtils.localizeString(t.name, locale)!,
+        onClick: () => handleSelectTable(system._partition, t)
+      }))
+
+    if (search !== "" && !(ExprUtils.localizeString(system.name, locale) || "").toLowerCase().includes(search.toLowerCase()) && tablesForThisSystem.length === 0) {
+      return null
+    }
+
+    return (
+      <div key={system._partition} className="mt-3">
+        <div className="d-flex justify-content-between align-items-center">
+          <h4 className="text-muted mb-1">{systemName}</h4>
+          {isIncluded && (
+            <button
+              className="btn btn-sm btn-link"
+              type="button"
+              onClick={() => handleRemoveAccountingSystem(system._partition)}
+              title={T`Remove this accounting system`}
+            >
+              <i className="fa fa-times" />
+            </button>
+          )}
+        </div>
+        <OptionListComponent items={tablesForThisSystem} />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <TextInput
+        value={search}
+        onChange={setSearch}
+        placeholder={T`Search accounting systems or tables...`}
+      />
+      {targetSelection && !schema.getTable(targetSelection) && (
+        <div className="alert alert-info my-2">
+          <i className="fa fa-spinner fa-spin me-2" />
+          {T`Loading tables for selected accounting system...`}
+        </div>
+      )}
+      {filteredSystems.length > 0
+        ? filteredSystems.map(system => renderSingleAccountingSystem(system))
+        : (sortedAccountingSystems.length > 0 && search !== "" && <p>{T`No accounting systems or tables match your search.`}</p>)
+      }
+      {sortedAccountingSystems.length === 0 && !targetSelection && <p>{T`No accounting systems found.`}</p>}
+    </div>
+  )
+}

package/src/{MWaterAssetSystemsListComponent.tsx → mwater_table_selection/MWaterAssetSystemsListComponent.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 asset system tables */
@@ -84,7 +84,7 @@ export const MWaterAssetSystemsListComponent = (props: {
   const renderAssetSystems = () => {
     const items = systems
       .map((m) => {
-        const alreadyIncluded = props.extraTables.some((t) => t == `systems:${m.sid}`)
+        const alreadyIncluded = props.extraTables.some((t) => t == `assets:${m.sid}`)
         return {
           name: ExprUtils.localizeString(m.design.name, props.locale) || "",
           onClick: () => selectTable(m),