@mwater/visualization 5.4.5 → 5.6.0

package/src/mwater_table_selection/IndicatorsListComponent.tsx

@@ -0,0 +1,411 @@
+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"
+
+export 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: IndicatorsListComponentProps) {
+    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, "design.category": 1, "design.subcategory": 1, "design.code": 1, "design.organization": 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: indicators
+      })
+    }).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)
+  }
+
+  handleOpenIndicator = (id: string) => {
+    this.handleSelect("indicator_values:" + id)
+  }
+
+  // Render a simplified version of IndicatorListComponent from mwater-portal
+  renderIndicatorList(indicators: any[], searchText: string) {
+    // Filter indicators based on search text
+    let filteredIndicators = indicators
+    if (searchText) {
+      const searchTerms = searchText.toLowerCase().split(" ")
+      filteredIndicators = indicators.filter(indicator => {
+        const searchFields = [
+          ExprUtils.localizeString(indicator.design.name, T.locale),
+          indicator.design.code,
+          indicator.design.organization,
+          indicator.design.category,
+          indicator.design.subcategory
+        ]
+
+        return searchTerms.every(term =>
+          searchFields.some(field =>
+            field && field.toLowerCase().includes(term)
+          )
+        )
+      })
+    }
+
+    // Split into recommended and all indicators
+    const recommendedIndicators = filteredIndicators.filter(indicator => indicator.design.recommended)
+    const otherIndicators = filteredIndicators.filter(indicator => !indicator.design.recommended)
+
+    // Group by category
+    const groupByCategory = (indicators: any[]) => {
+      const categories: Record<string, any[]> = {}
+
+      indicators.forEach(indicator => {
+        const category = indicator.design.category || T`Uncategorized`
+        if (!categories[category]) {
+          categories[category] = []
+        }
+        categories[category].push(indicator)
+      })
+
+      return categories
+    }
+
+    const recommendedByCategory = groupByCategory(recommendedIndicators)
+    const otherByCategory = groupByCategory(otherIndicators)
+
+    return (
+      <div>
+        {recommendedIndicators.length > 0 && (
+          <div>
+            <h4>{T`Recommended Indicators`}</h4>
+            {_.map(recommendedByCategory, (categoryIndicators, category) => (
+              <div key={category}>
+                <h5>{category}</h5>
+                <table className="table table-hover">
+                  <tbody>
+                    {_.map(categoryIndicators, indicator => (
+                      <tr key={indicator._id} onClick={() => this.handleOpenIndicator(indicator._id)}>
+                        <td>
+                          <IndicatorListItemComponent
+                            indicator={indicator}
+                            onClick={() => this.handleOpenIndicator(indicator._id)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <h4>{T`All Indicators`}</h4>
+        {_.map(otherByCategory, (categoryIndicators, category) => (
+          <div key={category}>
+            <h5>{category}</h5>
+            <table className="table table-hover">
+              <tbody>
+                {_.map(categoryIndicators, indicator => (
+                  <tr key={indicator._id} onClick={() => this.handleOpenIndicator(indicator._id)}>
+                    <td>
+                      <IndicatorListItemComponent
+                        indicator={indicator}
+                        onClick={() => this.handleOpenIndicator(indicator._id)}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  render() {
+    if (this.state.error) {
+      return <div className="alert alert-danger">{this.state.error}</div>
+    }
+
+    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) => ({
+              name: ExprUtils.localizeString(table.name, T.locale),
+              desc: ExprUtils.localizeString(table.desc, T.locale),
+              onClick: () => this.handleSelect(table.id),
+              onRemove: () => this.handleTableRemove(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" />
+            {"\u00A0" + 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 })}
+            />
+
+            {this.renderIndicatorList(this.state.indicators, this.state.search)}
+          </>
+        )}
+      </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>
+    )
+  }
+}
+
+// Single indicator item in a list
+// Local port of the class found in mwater-portal
+class IndicatorListItemComponent extends React.Component<{
+  indicator: any
+  onClick: any
+}> {
+
+  renderIcon() {
+    switch (this.props.indicator.type) {
+      case "expression":
+        // R 'i', className: "text-muted fa fa-fw fa-calculator"
+        return null
+      case "response":
+        // R 'i', className: "text-muted fa fa-fw fa-list-alt"
+        return null
+      case "set":
+        return (
+          <span className="fa-stack" style={{ paddingRight: 6 }}>
+            <i className="fa fa-th-list fa-stack-1x text-muted" />
+            <i className="fa fa-circle fa-stack-1x" style={{ color: "white", paddingLeft: 15 }} />
+            <i className="fa fa-check-circle fa-stack-1x text-primary" style={{ paddingLeft: 15 }} />
+          </span>
+        )
+    }
+    return null
+  }
+
+  render() {
+    return (
+      <div onClick={this.props.onClick} style={{ cursor: "pointer" }}>
+        <div key="name" style={{ fontWeight: "bold" }}>
+          {this.renderIcon()}
+          {ExprUtils.localizeString(this.props.indicator.design.name, T.locale)}
+          {this.props.indicator.design.code ? ` (${this.props.indicator.design.code})` : undefined}
+          {this.props.indicator.design.organization ? (
+            <span className="text-muted"> {T`by ${this.props.indicator.design.organization}`}</span>
+          ) : undefined}
+        </div>
+
+        <div key="desc" className="text-muted">
+          {ExprUtils.localizeString(this.props.indicator.design.desc, T.locale)}
+          {this.props.indicator.design.category
+            ? [
+              ` (${this.props.indicator.design.category}`,
+              this.props.indicator.design.subcategory ? `/${this.props.indicator.design.subcategory}` : undefined,
+              `)`
+            ]
+            : undefined}
+        </div>
+      </div>
+    )
+  }
+}

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>
+    )
+  }
+}