@mwater/visualization 5.4.5 → 5.6.0

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),

package/src/mwater_table_selection/MWaterCalculatedDataSourcesListComponent.tsx

@@ -0,0 +1,111 @@
+import _ from "lodash"
+import { Schema, ExprUtils } from "@mwater/expressions"
+import { useState, useEffect } from "react"
+import React from "react"
+import { OptionListComponent } from "../UIComponents"
+import { TextInput } from "@mwater/react-library/lib/bootstrap"
+
+interface MWaterCalculatedDataSourcesListComponentProps {
+  apiUrl: string
+  schema: Schema
+  client?: string
+  user?: string
+  onChange: (tableId: string | null) => void
+  extraTables: string[]
+  onExtraTableAdd: (tableId: string) => void
+  onExtraTableRemove: (tableId: string) => void
+  locale?: string
+}
+
+/**
+ * A list of calculated data sources that can be selected.
+ */
+export const MWaterCalculatedDataSourcesListComponent = (props: MWaterCalculatedDataSourcesListComponentProps) => {
+  const [calculatedSources, setCalculatedSources] = useState<CalculatedSource[]>()
+  const [search, setSearch] = useState<string | null>("")
+  const [extraTableNeeded, setExtraTableNeeded] = useState<string>()
+
+  useEffect(() => {
+    fetch(`${props.apiUrl}calculated_data_sources?client=${props.client || ""}`)
+      .then((response) => response.json())
+      .then((body: CalculatedSource[]) => {
+        // Filter out calculated data sources that have never been calculated
+        const calculatedSources = body.filter((s) => s.last_calculated)
+        
+        setCalculatedSources(
+          _.sortByAll(calculatedSources, [
+            (s) => (props.extraTables.some((t) => t == `calculated:${s._sid}`) ? 0 : 1),
+            (s) => ExprUtils.localizeString(s.name, props.locale)
+          ])
+        )
+      })
+  }, [])
+
+  useEffect(() => {
+    if (extraTableNeeded && props.schema.getTable(extraTableNeeded)) {
+      props.onChange(extraTableNeeded)
+    }
+  })
+
+  const selectTable = (source: CalculatedSource) => {
+    const qualifiedTableId = `calculated:${source._sid}`
+
+    if (props.schema.getTable(qualifiedTableId)) {
+      props.onChange(qualifiedTableId)
+      return
+    }
+
+    setExtraTableNeeded(qualifiedTableId)
+    props.onExtraTableAdd(qualifiedTableId)
+  }
+
+  const handleRemove = (source: CalculatedSource) => {
+    const match = props.extraTables.find((t) => t == `calculated:${source._sid}`)
+    if (match) {
+      if (confirm(T`Remove this table? Some widgets may not work correctly.`)) {
+        props.onChange(null)
+        props.onExtraTableRemove(match)
+      }
+    }
+  }
+
+  if (!calculatedSources || extraTableNeeded) {
+    return (
+      <div>
+        <i className="fa fa-spin fa-spinner" /> {T`Loading...`}
+      </div>
+    )
+  }
+
+  const renderCalculatedSources = () => {
+    const items = calculatedSources
+      .map((s) => {
+        const alreadyIncluded = props.extraTables.some((t) => t == `calculated:${s._sid}`)
+        return {
+          name: ExprUtils.localizeString(s.name, props.locale) || "",
+          desc: s.description ? ExprUtils.localizeString(s.description, props.locale) || "" : undefined,
+          onClick: () => selectTable(s),
+          onRemove: alreadyIncluded ? handleRemove.bind(null, s) : undefined
+        }
+      })
+      .filter((item) => !search || item.name.toLowerCase().includes(search.toLowerCase()))
+
+    return <OptionListComponent items={items} />
+  }
+
+  return (
+    <div>
+      <TextInput value={search} onChange={setSearch} placeholder={T`Search...`} searchIcon />
+      <br/>
+      {renderCalculatedSources()}
+    </div>
+  )
+}
+
+interface CalculatedSource {
+  _id: string
+  _sid: number
+  name: { _base: string; [code: string]: string }
+  description?: { _base: string; [code: string]: string }
+  last_calculated?: string
+}