@churchapps/apphelper 0.1.3 → 0.1.4

package/src/components/reporting/ReportOutput.tsx

@@ -1,79 +1,79 @@
-import React, { useRef } from "react";
-import { ReportInterface, ReportResultInterface } from "../../interfaces";
-import { DisplayBox, ExportLink, Loading } from "../"
-import { ApiHelper } from "../../helpers"
-import { useReactToPrint } from "react-to-print";
-import { TableReport } from "./TableReport";
-import { ChartReport } from "./ChartReport";
-import { TreeReport } from "./TreeReport";
-import { Icon } from "@mui/material";
-import { useMountedState } from "../../hooks/useMountedState";
-
-interface Props { report: ReportInterface }
-
-export const ReportOutput = (props: Props) => {
-  const [reportResult, setReportResult] = React.useState<ReportResultInterface>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const isMounted = useMountedState();
-
-  const handlePrint = useReactToPrint({
-    content: () => contentRef.current
-  })
-
-  const runReport = () => {
-    if (props.report) {
-      const queryParams: string[] = [];
-      props.report.parameters.forEach(p => {
-        if (p.value) queryParams.push(p.keyName + "=" + p.value);
-      });
-      let url = "/reports/" + props.report.keyName + "/run";
-      if (queryParams) url += "?" + queryParams.join("&");
-
-      ApiHelper.get(url, "ReportingApi").then((data: ReportResultInterface) => {
-        if(isMounted()) {
-          setReportResult(data);
-        }
-      });
-    }
-  }
-
-  React.useEffect(runReport, [props.report, isMounted]);
-
-  const getEditContent = () => {
-    const result: JSX.Element[] = [];
-
-    if (reportResult) {
-      result.push(<button type="button" className="no-default-style" key={result.length - 2} onClick={handlePrint} title="print"><Icon>print</Icon></button>);
-      result.push(<ExportLink key={result.length - 1} data={reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} />);
-    }
-    return result;
-  }
-
-  const getOutputs = () => {
-    const result: JSX.Element[] = [];
-    reportResult.outputs.forEach(o => {
-      if (o.outputType === "table") result.push(<TableReport key={o.outputType} reportResult={reportResult} output={o} />)
-      if (o.outputType === "tree") result.push(<TreeReport key={o.outputType} reportResult={reportResult} output={o} />)
-      else if (o.outputType === "barChart") result.push(<ChartReport key={o.outputType} reportResult={reportResult} output={o} />)
-    })
-
-    return result;
-  }
-
-  const getResults = () => {
-    if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText="Run Report" editContent={getEditContent()}><p>Use the filter to run the report.</p></DisplayBox>);
-
-    else if (!reportResult) return <Loading />
-    else {
-      return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={props.report.displayName} editContent={getEditContent()}>
-        {getOutputs()}
-      </DisplayBox>);
-    }
-  }
-
-  return (
-    <>
-      {getResults()}
-    </>
-  );
-}
+import React, { useRef } from "react";
+import { ReportInterface, ReportResultInterface } from "../../interfaces";
+import { DisplayBox, ExportLink, Loading } from "../"
+import { ApiHelper } from "../../helpers"
+import { useReactToPrint } from "react-to-print";
+import { TableReport } from "./TableReport";
+import { ChartReport } from "./ChartReport";
+import { TreeReport } from "./TreeReport";
+import { Icon } from "@mui/material";
+import { useMountedState } from "../../hooks/useMountedState";
+
+interface Props { report: ReportInterface }
+
+export const ReportOutput = (props: Props) => {
+  const [reportResult, setReportResult] = React.useState<ReportResultInterface>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const isMounted = useMountedState();
+
+  const handlePrint = useReactToPrint({
+    content: () => contentRef.current
+  })
+
+  const runReport = () => {
+    if (props.report) {
+      const queryParams: string[] = [];
+      props.report.parameters.forEach(p => {
+        if (p.value) queryParams.push(p.keyName + "=" + p.value);
+      });
+      let url = "/reports/" + props.report.keyName + "/run";
+      if (queryParams) url += "?" + queryParams.join("&");
+
+      ApiHelper.get(url, "ReportingApi").then((data: ReportResultInterface) => {
+        if(isMounted()) {
+          setReportResult(data);
+        }
+      });
+    }
+  }
+
+  React.useEffect(runReport, [props.report, isMounted]);
+
+  const getEditContent = () => {
+    const result: JSX.Element[] = [];
+
+    if (reportResult) {
+      result.push(<button type="button" className="no-default-style" key={result.length - 2} onClick={handlePrint} title="print"><Icon>print</Icon></button>);
+      result.push(<ExportLink key={result.length - 1} data={reportResult.table} filename={props.report.displayName.replace(" ", "_") + ".csv"} />);
+    }
+    return result;
+  }
+
+  const getOutputs = () => {
+    const result: JSX.Element[] = [];
+    reportResult.outputs.forEach(o => {
+      if (o.outputType === "table") result.push(<TableReport key={o.outputType} reportResult={reportResult} output={o} />)
+      if (o.outputType === "tree") result.push(<TreeReport key={o.outputType} reportResult={reportResult} output={o} />)
+      else if (o.outputType === "barChart") result.push(<ChartReport key={o.outputType} reportResult={reportResult} output={o} />)
+    })
+
+    return result;
+  }
+
+  const getResults = () => {
+    if (!props.report) return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText="Run Report" editContent={getEditContent()}><p>Use the filter to run the report.</p></DisplayBox>);
+
+    else if (!reportResult) return <Loading />
+    else {
+      return (<DisplayBox ref={contentRef} id="reportsBox" headerIcon="summarize" headerText={props.report.displayName} editContent={getEditContent()}>
+        {getOutputs()}
+      </DisplayBox>);
+    }
+  }
+
+  return (
+    <>
+      {getResults()}
+    </>
+  );
+}

package/src/components/reporting/ReportWithFilter.tsx

@@ -1,70 +1,70 @@
-import React from "react";
-import { ReportInterface, ReportPermissionInterface } from "../../interfaces";
-import { ApiHelper, UserHelper } from "../../helpers"
-import { Loading } from "../Loading"
-import { Grid } from "@mui/material"
-import { ReportOutput } from "./ReportOutput"
-import { ReportFilter } from "./ReportFilter"
-import { useMountedState } from "../../hooks/useMountedState";
-
-interface Props { keyName: string, autoRun: boolean }
-
-export const ReportWithFilter = (props: Props) => {
-  const [report, setReport] = React.useState<ReportInterface>(null);
-  const [reportToRun, setReportToRun] = React.useState<ReportInterface>(null);
-  const isMounted = useMountedState();
-
-  const loadData = () => {
-    setReportToRun(null);
-    setReport(null);
-    ApiHelper.get("/reports/" + props.keyName, "ReportingApi").then(data => {
-      if(isMounted()) {
-        setReport(data);
-      }
-    });
-  }
-
-  const handleAutoRun = () => {
-    if (props.autoRun && report) {
-      setReportToRun(report);
-    }
-  }
-
-  React.useEffect(loadData, [props.keyName, isMounted]);
-  React.useEffect(handleAutoRun, [report, props.autoRun]);
-
-  const handleRun = () => { setReportToRun(report); }
-
-  const handleChange = (r: ReportInterface) => setReport(r);
-
-  const checkAccess = () => {
-    let result = true;
-    report.permissions.forEach(rpg => {
-      let groupResult = checkGroup(rpg.requireOne);
-      if (!groupResult) result = false;  //between groups use AND
-    })
-    return result;
-  }
-
-  //Within groups use OR
-  const checkGroup = (pa: ReportPermissionInterface[]) => {
-    let result = false;
-    pa.forEach(p => {
-      if (UserHelper.checkAccess(p)) result = true;
-    });
-    return result;
-  }
-
-  if (!report) return <Loading />
-  if (!checkAccess()) return <></>
-  else {
-    return (<Grid container spacing={3}>
-      <Grid item md={8} xs={12}>
-        <ReportOutput report={reportToRun} />
-      </Grid>
-      <Grid item md={4} xs={12}>
-        <ReportFilter report={report} onChange={handleChange} onRun={handleRun} />
-      </Grid>
-    </Grid>)
-  }
-}
+import React from "react";
+import { ReportInterface, ReportPermissionInterface } from "../../interfaces";
+import { ApiHelper, UserHelper } from "../../helpers"
+import { Loading } from "../Loading"
+import { Grid } from "@mui/material"
+import { ReportOutput } from "./ReportOutput"
+import { ReportFilter } from "./ReportFilter"
+import { useMountedState } from "../../hooks/useMountedState";
+
+interface Props { keyName: string, autoRun: boolean }
+
+export const ReportWithFilter = (props: Props) => {
+  const [report, setReport] = React.useState<ReportInterface>(null);
+  const [reportToRun, setReportToRun] = React.useState<ReportInterface>(null);
+  const isMounted = useMountedState();
+
+  const loadData = () => {
+    setReportToRun(null);
+    setReport(null);
+    ApiHelper.get("/reports/" + props.keyName, "ReportingApi").then(data => {
+      if(isMounted()) {
+        setReport(data);
+      }
+    });
+  }
+
+  const handleAutoRun = () => {
+    if (props.autoRun && report) {
+      setReportToRun(report);
+    }
+  }
+
+  React.useEffect(loadData, [props.keyName, isMounted]);
+  React.useEffect(handleAutoRun, [report, props.autoRun]);
+
+  const handleRun = () => { setReportToRun(report); }
+
+  const handleChange = (r: ReportInterface) => setReport(r);
+
+  const checkAccess = () => {
+    let result = true;
+    report.permissions.forEach(rpg => {
+      let groupResult = checkGroup(rpg.requireOne);
+      if (!groupResult) result = false;  //between groups use AND
+    })
+    return result;
+  }
+
+  //Within groups use OR
+  const checkGroup = (pa: ReportPermissionInterface[]) => {
+    let result = false;
+    pa.forEach(p => {
+      if (UserHelper.checkAccess(p)) result = true;
+    });
+    return result;
+  }
+
+  if (!report) return <Loading />
+  if (!checkAccess()) return <></>
+  else {
+    return (<Grid container spacing={3}>
+      <Grid item md={8} xs={12}>
+        <ReportOutput report={reportToRun} />
+      </Grid>
+      <Grid item md={4} xs={12}>
+        <ReportFilter report={report} onChange={handleChange} onRun={handleRun} />
+      </Grid>
+    </Grid>)
+  }
+}

package/src/components/reporting/TableReport.tsx

@@ -1,57 +1,57 @@
-import React from "react";
-import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
-import { DateHelper } from "../../helpers";
-import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material";
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const TableReport = (props: Props) => {
-
-  const getHeaders = () => {
-    const result: JSX.Element[] = []
-    props.output.columns.forEach((c, i) => {
-      result.push(<th key={i}>{c.header}</th>);
-    })
-    return result;
-  }
-
-  const getRows = () => {
-    const result: JSX.Element[] = []
-    props.reportResult.table.forEach(d => {
-      const row: JSX.Element[] = [];
-      props.output.columns.forEach(c => {
-        row.push(<TableCell>{getField(c, d)}</TableCell>);
-      })
-      result.push(<TableRow>{row}</TableRow>);
-    });
-    return result;
-  }
-
-  const getField = (column: ColumnInterface, dataRow: any) => {
-    let result = ""
-    try {
-      result = dataRow[column.value]?.toString() || "";
-    } catch { }
-
-    switch (column.formatter) {
-      case "date":
-        let dt = new Date(result);
-        result = DateHelper.prettyDate(dt);
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <Table className="table">
-      <TableHead>
-        <TableRow>
-          {getHeaders()}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {getRows()}
-      </TableBody>
-    </Table>
-  );
-}
+import React from "react";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
+import { DateHelper } from "../../helpers";
+import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material";
+
+interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
+
+export const TableReport = (props: Props) => {
+
+  const getHeaders = () => {
+    const result: JSX.Element[] = []
+    props.output.columns.forEach((c, i) => {
+      result.push(<th key={i}>{c.header}</th>);
+    })
+    return result;
+  }
+
+  const getRows = () => {
+    const result: JSX.Element[] = []
+    props.reportResult.table.forEach(d => {
+      const row: JSX.Element[] = [];
+      props.output.columns.forEach(c => {
+        row.push(<TableCell>{getField(c, d)}</TableCell>);
+      })
+      result.push(<TableRow>{row}</TableRow>);
+    });
+    return result;
+  }
+
+  const getField = (column: ColumnInterface, dataRow: any) => {
+    let result = ""
+    try {
+      result = dataRow[column.value]?.toString() || "";
+    } catch { }
+
+    switch (column.formatter) {
+      case "date":
+        let dt = new Date(result);
+        result = DateHelper.prettyDate(dt);
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <Table className="table">
+      <TableHead>
+        <TableRow>
+          {getHeaders()}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {getRows()}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/reporting/TreeReport.tsx

@@ -1,111 +1,111 @@
-import React from "react";
-import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces"
-import { DateHelper } from "../../helpers"
-import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material"
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const TreeReport = (props: Props) => {
-
-  const getPreviousGroupingCount = (depth: number) => {
-    let result = 0;
-    for (let i = 0; i < depth; i++) result += props.output.groupings[i];
-    return result;
-  }
-
-  let totalGroupings = getPreviousGroupingCount(props.output.groupings.length);
-
-  const getHeaders = () => {
-    const result: JSX.Element[] = []
-    const columns = props.output.columns;
-    for (let i = totalGroupings; i < columns.length; i++) {
-      const c = columns[i];
-      if (i === totalGroupings) result.push(<th key={i}>{c.header}</th>);
-      else result.push(<th key={i}>{c.header}</th>);
-    }
-    return result;
-  }
-
-  const getRows = () => {
-    const result: JSX.Element[] = []
-    const columns = props.output.columns;
-    let previousData = {}
-    props.reportResult.table.forEach(d => {
-      const row: JSX.Element[] = [];
-      const groupingRows: JSX.Element[] = getGroupingRows(previousData, d);
-      groupingRows.forEach(gr => result.push(gr));
-      for (let i = totalGroupings; i < columns.length; i++) {
-        const c = columns[i];
-        if (i === totalGroupings) row.push(<TableCell style={{ paddingLeft: 30 * totalGroupings }}>{getField(c, d)}</TableCell>);
-        else row.push(<TableCell>{getField(c, d)}</TableCell>);
-      }
-      result.push(<TableRow>{row}</TableRow>);
-      previousData = d;
-    });
-    return result;
-  }
-
-  const getGroupingRows = (previousData: any, data: any) => {
-    const result: JSX.Element[] = [];
-    let firstGroupModified = getFirstGroupModified(previousData, data);
-    for (let i = firstGroupModified; i <= props.output.groupings.length; i++) {
-      result.push(getGroupingRow(data, i))
-    }
-    return result;
-  }
-
-  const getGroupingRow = (row: any, groupNumber: number) => {
-    const g = props.output.groupings[groupNumber];
-    const prevCols = getPreviousGroupingCount(groupNumber);
-    const outputRow: JSX.Element[] = [];
-    for (let i = prevCols; i < prevCols + g; i++) {
-      const c = props.output.columns[i];
-      const className = "heading" + (groupNumber + 1);
-      if (i === prevCols && i > 0) outputRow.push(<TableCell className={className} style={{ paddingLeft: 30 * groupNumber }}>{getField(c, row)}</TableCell>);
-      else outputRow.push(<TableCell className={className}>{getField(c, row)}</TableCell>);
-    }
-    return (<TableRow>{outputRow}</TableRow>);
-  }
-
-  const getFirstGroupModified = (previousRow: any, row: any) => {
-    let firstColumnModified = props.output.columns.length - 1;
-    for (let i = props.output.columns.length - 1; i >= 0; i--) {
-      const colName = props.output.columns[i].value;
-      if (row[colName] !== previousRow[colName]) {
-        firstColumnModified = i;
-      }
-    }
-
-    let firstGroupModified = props.output.groupings.length;
-    for (let i = props.output.groupings.length - 1; i >= 0; i--) {
-      let totalColumns = getPreviousGroupingCount(i);
-      if (totalColumns >= firstColumnModified) firstGroupModified = i;
-    }
-
-    return firstGroupModified;
-  }
-
-  const getField = (column: ColumnInterface, dataRow: any) => {
-    let result = dataRow[column.value].toString() || "";
-    switch (column.formatter) {
-      case "date":
-        let dt = new Date(result);
-        result = DateHelper.prettyDate(dt);
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <Table className="table table-sm report">
-      <TableHead className="thead-dark">
-        <TableRow>
-          {getHeaders()}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {getRows()}
-      </TableBody>
-    </Table>
-  );
-}
+import React from "react";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces"
+import { DateHelper } from "../../helpers"
+import { Table, TableBody, TableRow, TableCell, TableHead } from "@mui/material"
+
+interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
+
+export const TreeReport = (props: Props) => {
+
+  const getPreviousGroupingCount = (depth: number) => {
+    let result = 0;
+    for (let i = 0; i < depth; i++) result += props.output.groupings[i];
+    return result;
+  }
+
+  let totalGroupings = getPreviousGroupingCount(props.output.groupings.length);
+
+  const getHeaders = () => {
+    const result: JSX.Element[] = []
+    const columns = props.output.columns;
+    for (let i = totalGroupings; i < columns.length; i++) {
+      const c = columns[i];
+      if (i === totalGroupings) result.push(<th key={i}>{c.header}</th>);
+      else result.push(<th key={i}>{c.header}</th>);
+    }
+    return result;
+  }
+
+  const getRows = () => {
+    const result: JSX.Element[] = []
+    const columns = props.output.columns;
+    let previousData = {}
+    props.reportResult.table.forEach(d => {
+      const row: JSX.Element[] = [];
+      const groupingRows: JSX.Element[] = getGroupingRows(previousData, d);
+      groupingRows.forEach(gr => result.push(gr));
+      for (let i = totalGroupings; i < columns.length; i++) {
+        const c = columns[i];
+        if (i === totalGroupings) row.push(<TableCell style={{ paddingLeft: 30 * totalGroupings }}>{getField(c, d)}</TableCell>);
+        else row.push(<TableCell>{getField(c, d)}</TableCell>);
+      }
+      result.push(<TableRow>{row}</TableRow>);
+      previousData = d;
+    });
+    return result;
+  }
+
+  const getGroupingRows = (previousData: any, data: any) => {
+    const result: JSX.Element[] = [];
+    let firstGroupModified = getFirstGroupModified(previousData, data);
+    for (let i = firstGroupModified; i <= props.output.groupings.length; i++) {
+      result.push(getGroupingRow(data, i))
+    }
+    return result;
+  }
+
+  const getGroupingRow = (row: any, groupNumber: number) => {
+    const g = props.output.groupings[groupNumber];
+    const prevCols = getPreviousGroupingCount(groupNumber);
+    const outputRow: JSX.Element[] = [];
+    for (let i = prevCols; i < prevCols + g; i++) {
+      const c = props.output.columns[i];
+      const className = "heading" + (groupNumber + 1);
+      if (i === prevCols && i > 0) outputRow.push(<TableCell className={className} style={{ paddingLeft: 30 * groupNumber }}>{getField(c, row)}</TableCell>);
+      else outputRow.push(<TableCell className={className}>{getField(c, row)}</TableCell>);
+    }
+    return (<TableRow>{outputRow}</TableRow>);
+  }
+
+  const getFirstGroupModified = (previousRow: any, row: any) => {
+    let firstColumnModified = props.output.columns.length - 1;
+    for (let i = props.output.columns.length - 1; i >= 0; i--) {
+      const colName = props.output.columns[i].value;
+      if (row[colName] !== previousRow[colName]) {
+        firstColumnModified = i;
+      }
+    }
+
+    let firstGroupModified = props.output.groupings.length;
+    for (let i = props.output.groupings.length - 1; i >= 0; i--) {
+      let totalColumns = getPreviousGroupingCount(i);
+      if (totalColumns >= firstColumnModified) firstGroupModified = i;
+    }
+
+    return firstGroupModified;
+  }
+
+  const getField = (column: ColumnInterface, dataRow: any) => {
+    let result = dataRow[column.value].toString() || "";
+    switch (column.formatter) {
+      case "date":
+        let dt = new Date(result);
+        result = DateHelper.prettyDate(dt);
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <Table className="table table-sm report">
+      <TableHead className="thead-dark">
+        <TableRow>
+          {getHeaders()}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {getRows()}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/reporting/index.ts

@@ -1,4 +1,4 @@
-export { ReportFilter } from "./ReportFilter"
-export { ReportFilterField } from "./ReportFilterField"
-export { ReportOutput } from "./ReportOutput"
-export { ReportWithFilter } from "./ReportWithFilter"
+export { ReportFilter } from "./ReportFilter"
+export { ReportFilterField } from "./ReportFilterField"
+export { ReportOutput } from "./ReportOutput"
+export { ReportWithFilter } from "./ReportWithFilter"