@mwater/visualization 5.4.4 → 5.5.0

package/src/mwater_table_selection/MWaterCompleteTableSelectComponent.tsx

@@ -0,0 +1,377 @@
+import _ from "lodash"
+import React from "react"
+import { default as TabbedComponent, TabbedComponentTab } from "@mwater/react-library/lib/TabbedComponent"
+import * as uiComponents from "../UIComponents"
+import { ExprUtils, Schema } from "@mwater/expressions"
+import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListComponent"
+import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
+import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
+import { FormsListComponent } from "./FormsListComponent"
+import { IndicatorsListComponent } from "./IndicatorsListComponent"
+import { IssuesListComponent } from "./IssuesListComponent"
+import { MWaterAccountingSystemListComponent } from "./MWaterAccountingSystemListComponent"
+
+const sitesOrder: { [table: string]: number } = {
+  "entities.water_point": 1,
+  "entities.sanitation_facility": 2,
+  "entities.household": 3,
+  "entities.community": 4,
+  "entities.school": 5,
+  "entities.health_facility": 6,
+  "entities.place_of_worship": 7,
+  "entities.water_system": 8,
+  "entities.water_system_component": 9,
+  "entities.wastewater_treatment_system": 10,
+  "entities.waste_disposal_site": 11
+}
+
+/** Entity types that are assets */
+const assetEntities = [
+  "entities.water_asset"
+]
+
+interface MWaterCompleteTableSelectComponentProps {
+  /** Url to hit api */
+  apiUrl: string
+  /** Optional client */
+  client?: string
+  schema: Schema
+  /** User id */
+  user?: string
+  table?: string
+  /** Called with table selected */
+  onChange: any
+  extraTables: any
+  onExtraTablesChange: any
+}
+
+// Allows selection of a table. Is the complete list mode of tables
+export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
+  showLegacyAssets: boolean
+}> {
+  constructor(props: MWaterCompleteTableSelectComponentProps) {
+    super(props)
+
+    this.state = {
+      showLegacyAssets: false
+    }
+  }
+
+  handleExtraTableAdd = (tableId: any) => {
+    return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
+  }
+
+  handleExtraTableRemove = (tableId: any) => {
+    // Set to null if current table
+    if (this.props.table === tableId) {
+      this.props.onChange(null)
+    }
+
+    return this.props.onExtraTablesChange(_.without(this.props.extraTables, tableId))
+  }
+
+  renderSites() {
+    let table
+    let types = []
+
+    for (table of this.props.schema.getTables()) {
+      if (table.deprecated) {
+        continue
+      }
+
+      if (!table.id.match(/^entities\./)) {
+        continue
+      }
+
+      // Skip assets
+      if (assetEntities.includes(table.id)) {
+        continue
+      }
+
+      types.push(table.id)
+    }
+
+    // Sort by order if present
+    types = _.sortBy(types, (type) => sitesOrder[type] || 999)
+
+    return <uiComponents.OptionListComponent
+      items={_.compact(
+        _.map(types, (tableId) => {
+          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.bind(null, table.id)
+          }
+        })
+      )}
+    />
+  }
+
+  renderForms() {
+    return <FormsListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+    />
+  }
+
+  renderIndicators() {
+    return <IndicatorsListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+    />
+  }
+
+  renderIssues() {
+    return <IssuesListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+    />
+  }
+
+  renderSweetSense() {
+    let sweetSenseTables = this.getSweetSenseTables()
+
+    sweetSenseTables = _.sortBy(sweetSenseTables, (table) => table.name.en)
+    return <uiComponents.OptionListComponent
+      items={_.map(sweetSenseTables, (table) => {
+        return {
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
+          onClick: this.props.onChange.bind(null, table.id)
+        }
+      })}
+    />
+  }
+
+  renderTablesets() {
+    return <MWaterCustomTablesetListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+      locale={T.locale}
+    />
+  }
+
+  renderMetrics() {
+    return <MWaterMetricsTableListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+      locale={T.locale}
+    />
+  }
+
+  renderAccountingSystems() {
+    return <MWaterAccountingSystemListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+      locale={T.locale}
+    />
+  }
+
+  renderAssets() {
+    const items: {
+      name: string
+      desc?: string
+      onClick: () => void
+      onRemove?: () => void
+    }[] = []
+
+    for (const tableId of assetEntities) {
+      const table = this.props.schema.getTable(tableId)
+      if (!table) {
+        continue
+      }
+      items.push({
+        name: ExprUtils.localizeString(table.name, T.locale),
+        desc: ExprUtils.localizeString(table.desc, T.locale),
+        onClick: this.props.onChange.bind(null, table.id),
+        onRemove: this.handleExtraTableRemove.bind(null, table.id)
+      })
+    }
+
+    return <div>
+      <uiComponents.OptionListComponent 
+        items={items} 
+      />
+      <div className="text-center mt-2 mb-2">
+        <button className="btn btn-link" onClick={() => this.setState({ showLegacyAssets: !this.state.showLegacyAssets })}>
+          {this.state.showLegacyAssets ? T`Hide` : T`Show`} {T`Legacy Assets`}
+        </button>
+      </div>
+      {this.state.showLegacyAssets && this.renderLegacyAssets()}
+    </div>
+  }
+
+
+  renderLegacyAssets() {
+    return <MWaterAssetSystemsListComponent
+      schema={this.props.schema}
+      client={this.props.client}
+      apiUrl={this.props.apiUrl}
+      user={this.props.user}
+      onChange={this.props.onChange}
+      extraTables={this.props.extraTables}
+      onExtraTableAdd={this.handleExtraTableAdd}
+      onExtraTableRemove={this.handleExtraTableRemove}
+      locale={T.locale}
+    />
+  }
+
+  renderOther() {
+    let otherTables = _.filter(this.props.schema.getTables(), (table) => {
+      // Remove deprecated
+      if (table.deprecated) {
+        return false
+      }
+
+      // Remove sites
+      if (table.id.match(/^entities\./)) {
+        return false
+      }
+
+      // sweetsense tables
+      if (table.id.match(/^sweetsense/)) {
+        return false
+      }
+
+      // Remove responses
+      if (table.id.match(/^responses:/)) {
+        return false
+      }
+
+      // Remove indicators
+      if (table.id.match(/^indicator_values:/)) {
+        return false
+      }
+
+      // Remove issues
+      if (table.id.match(/^(issues|issue_events):/)) {
+        return false
+      }
+
+      // Remove custom tablesets
+      if (table.id.match(/^custom\./)) {
+        return false
+      }
+
+      // Remove metrics
+      if (table.id.match(/^metrics:/)) {
+        return false
+      }
+
+      // Remove assets
+      if (table.id.match(/^assets:/)) {
+        return false
+      }
+
+      return true
+    })
+
+    otherTables = _.sortBy(otherTables, (table) => table.name.en)
+    return <uiComponents.OptionListComponent
+      items={_.map(otherTables, (table) => {
+        return {
+          name: ExprUtils.localizeString(table.name, T.locale),
+          desc: ExprUtils.localizeString(table.desc, T.locale),
+          onClick: this.props.onChange.bind(null, table.id)
+        }
+      })}
+    />
+  }
+
+  getSweetSenseTables() {
+    return _.filter(this.props.schema.getTables(), (table) => {
+      if (table.deprecated) {
+        return false
+      }
+
+      if (table.id.match(/^sweetsense/)) {
+        return true
+      }
+
+      return false
+    })
+  }
+
+  render() {
+    const sweetSenseTables = this.getSweetSenseTables()
+
+    const tabs: TabbedComponentTab[] = [
+      { id: "sites", label: <><i className="fa fa-map-marker" /> {T`Sites`}</>, elem: this.renderSites() },
+      { id: "forms", label: <><i className="fa fa-th-list" /> {T`Surveys`}</>, elem: this.renderForms() },
+      {
+        id: "indicators",
+        label: <><i className="fa fa-check-circle" /> {T`Indicators`}</>,
+        elem: this.renderIndicators()
+      },
+      {
+        id: "issues",
+        label: <><i className="fa fa-exclamation-circle" /> {T`Issues`}</>,
+        elem: this.renderIssues()
+      },
+      { id: "tablesets", label: <><i className="fa fa-table" /> {T`Tables`}</>, elem: this.renderTablesets() },
+      { id: "metrics", label: <><i className="fa fa-line-chart" /> {T`Metrics`}</>, elem: this.renderMetrics() },
+      { 
+        id: "accounting", 
+        label: <><i className="fa fa-calculator" /> {T`Accounting`}</>, 
+        elem: this.renderAccountingSystems() 
+      },
+      { id: "assets", label: <><i className="fas fa-map-pin" /> {T`Assets`}</>, elem: this.renderAssets() }
+    ]
+
+    if (sweetSenseTables.length > 0) {
+      tabs.push({ id: "sensors", label: T`Sensors`, elem: this.renderSweetSense() })
+    }
+
+    tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
+
+    return (
+      <div>
+        <div className="text-muted">
+          {T`Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`}
+        </div>
+
+        <TabbedComponent
+          tabs={tabs}
+          initialTabId="sites"
+        />
+      </div>
+    )
+  }
+}

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 */