@churchapps/apphelper 0.1.2 → 0.1.4

package/src/components/reporting/ChartReport.tsx

@@ -1,98 +1,98 @@
-import React from "react";
-import { Chart } from "react-google-charts";
-import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
-import { DateHelper } from "../../helpers";
-
-interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
-
-export const ChartReport = (props: Props) => {
-  let rows: any = [];
-
-  const getChartData = () => {
-    if (props.output.columns.length === 2) return getSingleData();
-    else return getMultiData();
-  }
-
-  const getHeaders = () => {
-    const result: string[] = [];
-    const uniqueValues: string[] = [];
-
-    props.reportResult.table.forEach(d => {
-      const val = getField(props.output.columns[1], d);
-      if (uniqueValues.indexOf(val) === -1) uniqueValues.push(val);
-    });
-
-    result.push(props.output.columns[0].header);
-    uniqueValues.forEach(v => result.push(v));
-
-    return result;
-  }
-
-  const getHeaderIndex = (headers: string[], header: string) => {
-    let result = -1;
-    let i = 0;
-    headers.forEach(h => {
-      if (h === header) result = i;
-      i++;
-    })
-    return result;
-  }
-
-  const transformData = (headers: string[]) => {
-    const result: any[] = [];
-    props.reportResult.table.forEach(d => {
-      const firstVal = getField(props.output.columns[0], d);
-      const secondVal = getField(props.output.columns[1], d);
-      const headerIndex = getHeaderIndex(headers, secondVal);
-
-      let row: any[] = []
-      if (result.length === 0 || firstVal !== result[result.length - 1][0]) {
-        row[0] = firstVal;
-        for (let i = 1; i < headers.length; i++) row[i] = 0;
-        result.push(row);
-      } else row = result[result.length - 1];
-
-      row[headerIndex] = parseFloat(d[props.output.columns[2].value]);
-    });
-
-    return result;
-  }
-
-  const getMultiData = () => {
-    const headers = getHeaders();
-    rows = [];
-    rows.push(headers);
-    transformData(headers).forEach(d => {
-      rows.push(d);
-    })
-
-    return rows;
-  }
-
-  const getSingleData = () => {
-    rows = [];
-    rows.push([props.output.columns[0].header, props.output.columns[1].header]);
-    props.reportResult.table.forEach(d => {
-      rows.push([getField(props.output.columns[0], d), parseFloat(getField(props.output.columns[1], d))])
-    });
-    return rows;
-  }
-
-  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;
-  }
-
-  let result = <p>There is no data to display</p>
-  if (props.reportResult.table?.length > 0) result = (<Chart chartType="ColumnChart" data={getChartData()} width="100%" height="400px" options={{ height: 400, legend: { position: "top", maxLines: 3 }, bar: { groupWidth: "75%" }, isStacked: true }} />);
-
-  return result;
-
-}
+import React from "react";
+import { Chart } from "react-google-charts";
+import { ColumnInterface, ReportOutputInterface, ReportResultInterface } from "../../interfaces";
+import { DateHelper } from "../../helpers";
+
+interface Props { reportResult: ReportResultInterface, output: ReportOutputInterface }
+
+export const ChartReport = (props: Props) => {
+  let rows: any = [];
+
+  const getChartData = () => {
+    if (props.output.columns.length === 2) return getSingleData();
+    else return getMultiData();
+  }
+
+  const getHeaders = () => {
+    const result: string[] = [];
+    const uniqueValues: string[] = [];
+
+    props.reportResult.table.forEach(d => {
+      const val = getField(props.output.columns[1], d);
+      if (uniqueValues.indexOf(val) === -1) uniqueValues.push(val);
+    });
+
+    result.push(props.output.columns[0].header);
+    uniqueValues.forEach(v => result.push(v));
+
+    return result;
+  }
+
+  const getHeaderIndex = (headers: string[], header: string) => {
+    let result = -1;
+    let i = 0;
+    headers.forEach(h => {
+      if (h === header) result = i;
+      i++;
+    })
+    return result;
+  }
+
+  const transformData = (headers: string[]) => {
+    const result: any[] = [];
+    props.reportResult.table.forEach(d => {
+      const firstVal = getField(props.output.columns[0], d);
+      const secondVal = getField(props.output.columns[1], d);
+      const headerIndex = getHeaderIndex(headers, secondVal);
+
+      let row: any[] = []
+      if (result.length === 0 || firstVal !== result[result.length - 1][0]) {
+        row[0] = firstVal;
+        for (let i = 1; i < headers.length; i++) row[i] = 0;
+        result.push(row);
+      } else row = result[result.length - 1];
+
+      row[headerIndex] = parseFloat(d[props.output.columns[2].value]);
+    });
+
+    return result;
+  }
+
+  const getMultiData = () => {
+    const headers = getHeaders();
+    rows = [];
+    rows.push(headers);
+    transformData(headers).forEach(d => {
+      rows.push(d);
+    })
+
+    return rows;
+  }
+
+  const getSingleData = () => {
+    rows = [];
+    rows.push([props.output.columns[0].header, props.output.columns[1].header]);
+    props.reportResult.table.forEach(d => {
+      rows.push([getField(props.output.columns[0], d), parseFloat(getField(props.output.columns[1], d))])
+    });
+    return rows;
+  }
+
+  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;
+  }
+
+  let result = <p>There is no data to display</p>
+  if (props.reportResult.table?.length > 0) result = (<Chart chartType="ColumnChart" data={getChartData()} width="100%" height="400px" options={{ height: 400, legend: { position: "top", maxLines: 3 }, bar: { groupWidth: "75%" }, isStacked: true }} />);
+
+  return result;
+
+}

package/src/components/reporting/ReportFilter.tsx

@@ -1,54 +1,54 @@
-import React from "react";
-import { ReportInterface, ParameterInterface } from "../../interfaces";
-import { ArrayHelper } from "../../helpers"
-import { InputBox } from "../"
-import { ReportFilterField } from "./ReportFilterField";
-
-interface Props { report: ReportInterface, onChange: (report: ReportInterface) => void, onRun: () => void }
-
-export const ReportFilter = (props: Props) => {
-
-  const handleChange = (parameter: ParameterInterface, permittedChildIds: string[]) => {
-    const r = { ...props.report };
-    const p: ParameterInterface = ArrayHelper.getOne(r.parameters, "keyName", parameter.keyName);
-    p.value = parameter.value;
-    updateChildIds(r, p, permittedChildIds)
-    props.onChange(r);
-  }
-
-  const updateChildIds = (report: ReportInterface, parameter: ParameterInterface, permittedChildIds: string[]) => {
-    switch (parameter.sourceKey) {
-      case "campus":
-        setRequiredParentIds(report, "service", permittedChildIds);
-        break;
-      case "service":
-        setRequiredParentIds(report, "serviceTime", permittedChildIds);
-        break;
-      case "serviceTime":
-        setRequiredParentIds(report, "group", permittedChildIds);
-        break;
-    }
-  }
-
-  const setRequiredParentIds = (report: ReportInterface, childSourceKey: string, requiredParentIds: string[]) => {
-    const child: ParameterInterface = ArrayHelper.getOne(report.parameters, "sourceKey", childSourceKey);
-    if (child) child.requiredParentIds = requiredParentIds;
-  }
-
-  const getInputs = () => {
-    const result: JSX.Element[] = [];
-    props.report.parameters.forEach((p, i) => {
-      if (p.source === "dropdown" || p.source === "date") {
-        result.push(<ReportFilterField key={i} parameter={p} report={props.report} onChange={handleChange} />)
-      }
-    });
-    return result;
-  }
-
-  const inputs = getInputs();
-  if (inputs.length > 0) {
-    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText="Run Report">
-      {inputs}
-    </InputBox>
-  } else return <> </>
-}
+import React from "react";
+import { ReportInterface, ParameterInterface } from "../../interfaces";
+import { ArrayHelper } from "../../helpers"
+import { InputBox } from "../"
+import { ReportFilterField } from "./ReportFilterField";
+
+interface Props { report: ReportInterface, onChange: (report: ReportInterface) => void, onRun: () => void }
+
+export const ReportFilter = (props: Props) => {
+
+  const handleChange = (parameter: ParameterInterface, permittedChildIds: string[]) => {
+    const r = { ...props.report };
+    const p: ParameterInterface = ArrayHelper.getOne(r.parameters, "keyName", parameter.keyName);
+    p.value = parameter.value;
+    updateChildIds(r, p, permittedChildIds)
+    props.onChange(r);
+  }
+
+  const updateChildIds = (report: ReportInterface, parameter: ParameterInterface, permittedChildIds: string[]) => {
+    switch (parameter.sourceKey) {
+      case "campus":
+        setRequiredParentIds(report, "service", permittedChildIds);
+        break;
+      case "service":
+        setRequiredParentIds(report, "serviceTime", permittedChildIds);
+        break;
+      case "serviceTime":
+        setRequiredParentIds(report, "group", permittedChildIds);
+        break;
+    }
+  }
+
+  const setRequiredParentIds = (report: ReportInterface, childSourceKey: string, requiredParentIds: string[]) => {
+    const child: ParameterInterface = ArrayHelper.getOne(report.parameters, "sourceKey", childSourceKey);
+    if (child) child.requiredParentIds = requiredParentIds;
+  }
+
+  const getInputs = () => {
+    const result: JSX.Element[] = [];
+    props.report.parameters.forEach((p, i) => {
+      if (p.source === "dropdown" || p.source === "date") {
+        result.push(<ReportFilterField key={i} parameter={p} report={props.report} onChange={handleChange} />)
+      }
+    });
+    return result;
+  }
+
+  const inputs = getInputs();
+  if (inputs.length > 0) {
+    return <InputBox id="formSubmissionBox" headerText="Filter Report" headerIcon="summarize" saveFunction={props.onRun} saveText="Run Report">
+      {inputs}
+    </InputBox>
+  } else return <> </>
+}

package/src/components/reporting/ReportFilterField.tsx

@@ -1,160 +1,160 @@
-import React from "react";
-import { ReportInterface, ParameterInterface } from "../../interfaces";
-import { ApiHelper, ArrayHelper, DateHelper } from "../../helpers";
-import { FormControl, InputLabel, Select, SelectChangeEvent, TextField, MenuItem } from "@mui/material";
-import { useMountedState } from "../../hooks/useMountedState";
-
-interface Props {
-  parameter: ParameterInterface,
-  report: ReportInterface,
-  onChange: (parameter: ParameterInterface, permittedChildIds: string[]) => void
-}
-
-export const ReportFilterField = (props: Props) => {
-
-  const [rawData, setRawData] = React.useState<any[]>(null);
-  const [secondaryData, setSecondaryData] = React.useState<any[]>(null);
-  const isMounted = useMountedState();
-
-  const init = async () => {
-    switch (props.parameter.sourceKey) {
-      case "provided":
-        setRawData(props.parameter.options);
-        break;
-      case "month":
-        setRawData(getMonths());
-        break;
-      case "campus":
-        ApiHelper.get("/campuses", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "service":
-        ApiHelper.get("/services", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "serviceTime":
-        ApiHelper.get("/serviceTimes", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        break;
-      case "group":
-        ApiHelper.get("/groups", "MembershipApi").then(data => { data.unshift({ id: "", name: "Any" });
-          if(isMounted()) {
-            setRawData(data);
-          }})
-        ApiHelper.get("/groupServiceTimes", "AttendanceApi").then(data => {
-          if(isMounted()) {
-            setSecondaryData(data);
-          }})
-        break;
-    }
-    setDefaultValue();
-  }
-
-  const setDefaultValue = () => {
-    switch (props.parameter.source) {
-      case "date":
-        if (props.parameter.defaultValue) {
-          let dt = new Date();
-          if (props.parameter.defaultValue === "yesterday") dt.setDate(dt.getDate() - 1);
-          if (props.parameter.defaultValue === "lastYear") dt.setFullYear(dt.getFullYear() - 1);
-          if (props.parameter.defaultValue === "lastSunday") dt = DateHelper.getLastSunday();
-          const p = { ...props.parameter };
-          p.value = DateHelper.formatHtml5Date(dt);
-          props.onChange(p, []);
-        }
-        break;
-    }
-  }
-
-  const getMonths = () => {
-    const list = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December"]
-    const result = [];
-    for (let i = 0; i < list.length; i++) result.push({ value: (i + 1).toString(), text: list[i] });
-    return result;
-  }
-
-  const getIdName = () => {
-    const result: { value: string, text: string }[] = [];
-    filterOptions().forEach(d => { result.push({ value: d.id, text: d.name }); });
-    return result;
-  }
-
-  const filterOptions = () => {
-    let result = rawData;
-    if (props.parameter.requiredParentIds?.length > 0) {
-      switch (props.parameter.sourceKey) {
-        case "service":
-          result = ArrayHelper.getAllArray(rawData, "campusId", props.parameter.requiredParentIds);
-          result.unshift({ id: "", name: "Any" });
-          break;
-        case "serviceTime":
-          result = ArrayHelper.getAllArray(rawData, "serviceId", props.parameter.requiredParentIds);
-          result.unshift({ id: "", name: "Any" });
-          break;
-        case "group":
-          const times = ArrayHelper.getAllArray(secondaryData, "serviceTimeId", props.parameter.requiredParentIds)
-          result = ArrayHelper.getAllArray(rawData, "id", ArrayHelper.getUniqueValues(times, "groupId"));
-          result.unshift({ id: "", name: "Any" });
-          break;
-      }
-    }
-    return result;
-  }
-
-  const getOptions = () => {
-    let options: { value: string, text: string }[] = []
-    if (rawData) {
-      switch (props.parameter.sourceKey) {
-        case "campus":
-        case "service":
-        case "serviceTime":
-        case "group":
-          options = getIdName();
-          break;
-        case "month":
-        case "provided":
-          options = rawData;
-          break;
-      }
-    }
-
-    return options;
-  }
-
-  const options = getOptions();
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    const p = { ...props.parameter };
-    p.value = e.target.value;
-    let parentIds = [];
-    if (p.value) parentIds.push(p.value);
-    props.onChange(p, parentIds);
-  }
-
-  React.useEffect(() => { init() }, [props.parameter.keyName, isMounted]); //eslint-disable-line
-
-  let result = <></>
-  switch (props.parameter.source) {
-    case "dropdown":
-      result = (
-        <FormControl fullWidth>
-          <InputLabel>{props.parameter.displayName}</InputLabel>
-          <Select value={options.find(v => v.value === props.parameter.value)?.value || ""} label={props.parameter.displayName} onChange={handleChange} name={props.parameter.keyName}>
-            {options.map((o,i) => <MenuItem key={i} value={o.value}>{o.text}</MenuItem>)}
-          </Select>
-        </FormControl>
-      );
-      break;
-    case "date":
-      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label="Date" value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
-      break;
-  }
-  return result;
-
-}
+import React from "react";
+import { ReportInterface, ParameterInterface } from "../../interfaces";
+import { ApiHelper, ArrayHelper, DateHelper } from "../../helpers";
+import { FormControl, InputLabel, Select, SelectChangeEvent, TextField, MenuItem } from "@mui/material";
+import { useMountedState } from "../../hooks/useMountedState";
+
+interface Props {
+  parameter: ParameterInterface,
+  report: ReportInterface,
+  onChange: (parameter: ParameterInterface, permittedChildIds: string[]) => void
+}
+
+export const ReportFilterField = (props: Props) => {
+
+  const [rawData, setRawData] = React.useState<any[]>(null);
+  const [secondaryData, setSecondaryData] = React.useState<any[]>(null);
+  const isMounted = useMountedState();
+
+  const init = async () => {
+    switch (props.parameter.sourceKey) {
+      case "provided":
+        setRawData(props.parameter.options);
+        break;
+      case "month":
+        setRawData(getMonths());
+        break;
+      case "campus":
+        ApiHelper.get("/campuses", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "service":
+        ApiHelper.get("/services", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "serviceTime":
+        ApiHelper.get("/serviceTimes", "AttendanceApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        break;
+      case "group":
+        ApiHelper.get("/groups", "MembershipApi").then(data => { data.unshift({ id: "", name: "Any" });
+          if(isMounted()) {
+            setRawData(data);
+          }})
+        ApiHelper.get("/groupServiceTimes", "AttendanceApi").then(data => {
+          if(isMounted()) {
+            setSecondaryData(data);
+          }})
+        break;
+    }
+    setDefaultValue();
+  }
+
+  const setDefaultValue = () => {
+    switch (props.parameter.source) {
+      case "date":
+        if (props.parameter.defaultValue) {
+          let dt = new Date();
+          if (props.parameter.defaultValue === "yesterday") dt.setDate(dt.getDate() - 1);
+          if (props.parameter.defaultValue === "lastYear") dt.setFullYear(dt.getFullYear() - 1);
+          if (props.parameter.defaultValue === "lastSunday") dt = DateHelper.getLastSunday();
+          const p = { ...props.parameter };
+          p.value = DateHelper.formatHtml5Date(dt);
+          props.onChange(p, []);
+        }
+        break;
+    }
+  }
+
+  const getMonths = () => {
+    const list = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December"]
+    const result = [];
+    for (let i = 0; i < list.length; i++) result.push({ value: (i + 1).toString(), text: list[i] });
+    return result;
+  }
+
+  const getIdName = () => {
+    const result: { value: string, text: string }[] = [];
+    filterOptions().forEach(d => { result.push({ value: d.id, text: d.name }); });
+    return result;
+  }
+
+  const filterOptions = () => {
+    let result = rawData;
+    if (props.parameter.requiredParentIds?.length > 0) {
+      switch (props.parameter.sourceKey) {
+        case "service":
+          result = ArrayHelper.getAllArray(rawData, "campusId", props.parameter.requiredParentIds);
+          result.unshift({ id: "", name: "Any" });
+          break;
+        case "serviceTime":
+          result = ArrayHelper.getAllArray(rawData, "serviceId", props.parameter.requiredParentIds);
+          result.unshift({ id: "", name: "Any" });
+          break;
+        case "group":
+          const times = ArrayHelper.getAllArray(secondaryData, "serviceTimeId", props.parameter.requiredParentIds)
+          result = ArrayHelper.getAllArray(rawData, "id", ArrayHelper.getUniqueValues(times, "groupId"));
+          result.unshift({ id: "", name: "Any" });
+          break;
+      }
+    }
+    return result;
+  }
+
+  const getOptions = () => {
+    let options: { value: string, text: string }[] = []
+    if (rawData) {
+      switch (props.parameter.sourceKey) {
+        case "campus":
+        case "service":
+        case "serviceTime":
+        case "group":
+          options = getIdName();
+          break;
+        case "month":
+        case "provided":
+          options = rawData;
+          break;
+      }
+    }
+
+    return options;
+  }
+
+  const options = getOptions();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    const p = { ...props.parameter };
+    p.value = e.target.value;
+    let parentIds = [];
+    if (p.value) parentIds.push(p.value);
+    props.onChange(p, parentIds);
+  }
+
+  React.useEffect(() => { init() }, [props.parameter.keyName, isMounted]); //eslint-disable-line
+
+  let result = <></>
+  switch (props.parameter.source) {
+    case "dropdown":
+      result = (
+        <FormControl fullWidth>
+          <InputLabel>{props.parameter.displayName}</InputLabel>
+          <Select value={options.find(v => v.value === props.parameter.value)?.value || ""} label={props.parameter.displayName} onChange={handleChange} name={props.parameter.keyName}>
+            {options.map((o,i) => <MenuItem key={i} value={o.value}>{o.text}</MenuItem>)}
+          </Select>
+        </FormControl>
+      );
+      break;
+    case "date":
+      result = (<TextField type="date" fullWidth InputLabelProps={{shrink: true}} label="Date" value={props.parameter.value || ""} onChange={handleChange} name={props.parameter.keyName} />)
+      break;
+  }
+  return result;
+
+}