@churchapps/apphelper 0.1.9 → 0.1.11

package/src/components/ExportLink.tsx

@@ -1,67 +1,67 @@
-import { Button, Icon } from "@mui/material";
-import React from "react";
-import { CSVLink } from "react-csv";
-
-interface Props {
-  data: any[],
-  spaceAfter?: boolean,
-  spaceBefore?: boolean,
-  filename?: string
-}
-
-export const ExportLink: React.FC<Props> = (props) => {
-
-  const people = props.data ? [...props.data] : [];
-
-  const getHeaders = () => {
-    let result = [];
-    if (people?.length > 0) {
-      let names = getAllPropertyNames();
-      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
-    }
-    return result;
-  }
-
-  const getAllPropertyNames = () => {
-    let result = [];
-    for (let i = 0; i < people.length; i++) {
-      let p = {...people[i]}
-      p.birthDate = p.birthDate ? new Date(p.birthDate).toISOString() : null;
-      p.anniversary = p.anniversary ? new Date(p.anniversary).toISOString() : null;
-      people[i] = p;
-      let propertyNames = getPropertyNames("", people[i]);
-      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
-    }
-    return result.sort();
-  }
-
-  const getPropertyNames = (prefix: string, obj: any) => {
-    let result = [];
-    let names = Object.getOwnPropertyNames(obj)
-    for (let i = 0; i < names.length; i++) {
-      let t = typeof obj[names[i]];
-      switch (t) {
-        case "number":
-        case "string":
-        case "boolean":
-          result.push(prefix + names[i]);
-          break;
-        case "object":
-          if ((obj[names[i]] !== null)) {
-            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
-            for (let j = 0; j < children.length; j++) result.push(children[j]);
-          }
-      }
-    }
-    return result;
-  }
-
-  if (!people || people?.length === 0) return null;
-  else {
-    let items = [];
-    if (props.spaceBefore) items.push(" ");
-    items.push(<CSVLink key={props.filename} data={people} headers={getHeaders()} filename={props.filename || "export.csv"}> <Button><Icon>file_download</Icon></Button></CSVLink>);
-    if (props.spaceAfter) items.push(" ");
-    return (<>{items}</>);
-  }
-}
+import { Button, Icon } from "@mui/material";
+import React from "react";
+import { CSVLink } from "react-csv";
+
+interface Props {
+  data: any[],
+  spaceAfter?: boolean,
+  spaceBefore?: boolean,
+  filename?: string
+}
+
+export const ExportLink: React.FC<Props> = (props) => {
+
+  const people = props.data ? [...props.data] : [];
+
+  const getHeaders = () => {
+    let result = [];
+    if (people?.length > 0) {
+      let names = getAllPropertyNames();
+      for (let i = 0; i < names.length; i++) { result.push({ label: names[i], key: names[i] }); }
+    }
+    return result;
+  }
+
+  const getAllPropertyNames = () => {
+    let result = [];
+    for (let i = 0; i < people.length; i++) {
+      let p = {...people[i]}
+      p.birthDate = p.birthDate ? new Date(p.birthDate).toISOString() : null;
+      p.anniversary = p.anniversary ? new Date(p.anniversary).toISOString() : null;
+      people[i] = p;
+      let propertyNames = getPropertyNames("", people[i]);
+      for (let j = 0; j < propertyNames.length; j++) if (result.indexOf(propertyNames[j]) === -1) result.push(propertyNames[j]);
+    }
+    return result.sort();
+  }
+
+  const getPropertyNames = (prefix: string, obj: any) => {
+    let result = [];
+    let names = Object.getOwnPropertyNames(obj)
+    for (let i = 0; i < names.length; i++) {
+      let t = typeof obj[names[i]];
+      switch (t) {
+        case "number":
+        case "string":
+        case "boolean":
+          result.push(prefix + names[i]);
+          break;
+        case "object":
+          if ((obj[names[i]] !== null)) {
+            let children: string[] = getPropertyNames(prefix + names[i] + ".", obj[names[i]]);
+            for (let j = 0; j < children.length; j++) result.push(children[j]);
+          }
+      }
+    }
+    return result;
+  }
+
+  if (!people || people?.length === 0) return null;
+  else {
+    let items = [];
+    if (props.spaceBefore) items.push(" ");
+    items.push(<CSVLink key={props.filename} data={people} headers={getHeaders()} filename={props.filename || "export.csv"}> <Button><Icon>file_download</Icon></Button></CSVLink>);
+    if (props.spaceAfter) items.push(" ");
+    return (<>{items}</>);
+  }
+}

package/src/components/FloatingSupport.tsx

@@ -1,16 +1,16 @@
-import { Fab, Icon } from "@mui/material";
-import React from "react";
-import { SupportModal } from "./SupportModal";
-
-interface Props { appName?: string }
-
-export const FloatingSupport: React.FC<Props> = (props) => {
-  const [showSupport, setShowSupport] = React.useState(false);
-
-  return (<>
-    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
-      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
-    </Fab>
-    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
-  </>);
-};
+import { Fab, Icon } from "@mui/material";
+import React from "react";
+import { SupportModal } from "./SupportModal";
+
+interface Props { appName?: string }
+
+export const FloatingSupport: React.FC<Props> = (props) => {
+  const [showSupport, setShowSupport] = React.useState(false);
+
+  return (<>
+    <Fab color="primary" style={{ position: "fixed", cursor: "pointer", bottom: "20px", right: (showSupport) ? 47 : 30 }} onClick={() => { setShowSupport(!showSupport) }} aria-label="Support">
+      <Icon style={{ fontSize: 40 }}>contact_support</Icon>
+    </Fab>
+    {showSupport && <SupportModal onClose={() => setShowSupport(false)} appName={props.appName} />}
+  </>);
+};

package/src/components/FormSubmissionEdit.tsx

@@ -1,120 +1,120 @@
-import React from "react";
-import { ErrorMessages, InputBox, QuestionEdit } from "./";
-import { ApiHelper, UniqueIdHelper, UserHelper } from "../helpers";
-import { AnswerInterface, QuestionInterface, FormSubmissionInterface } from "../interfaces";
-
-interface Props {
-  addFormId: string,
-  contentType: string,
-  contentId: string,
-  formSubmissionId: string,
-  unRestrictedFormId?: string,
-  personId?: string,
-  churchId?: string,
-  showHeader?: boolean,
-  noBackground?:boolean,
-  updatedFunction: () => void,
-  cancelFunction?: () => void
-}
-
-export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackground = false, ...props}) => {
-  const [formSubmission, setFormSubmission] = React.useState(null);
-  const [errors, setErrors] = React.useState([]);
-
-  const getDeleteFunction = () => (!UniqueIdHelper.isMissing(formSubmission?.id)) ? handleDelete : undefined
-  const handleDelete = () => {
-    if (window.confirm("Are you sure you wish to delete this form data?")) {
-      ApiHelper.delete("/formsubmissions/" + formSubmission.id, "MembershipApi").then(() => {
-        props.updatedFunction();
-      });
-    }
-  }
-
-  const getAnswer = (questionId: string) => {
-    let answers = formSubmission.answers;
-    for (let i = 0; i < answers.length; i++) if (answers[i].questionId === questionId) return answers[i];
-    return null;
-  }
-
-  const setFormSubmissionData = (data: any) => {
-    const formId = props.addFormId || props.unRestrictedFormId;
-    let fs: FormSubmissionInterface = {
-      formId, contentType: props.contentType, contentId: props.contentId, answers: []
-    };
-    fs.questions = data;
-    fs.answers = [];
-    fs.questions.forEach((q) => {
-      let answer: AnswerInterface = { formSubmissionId: fs.id, questionId: q.id, required: q.required };
-      answer.value = getDefaultValue(q);
-      fs.answers.push(answer);
-    });
-    setFormSubmission(fs);
-  }
-
-  const loadData = () => {
-    console.log("loadData", "fs", props.formSubmissionId, "af", props.addFormId, props.unRestrictedFormId)
-    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then(data => setFormSubmission(data));
-    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then(data => setFormSubmissionData(data));
-    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then(data => setFormSubmissionData(data));
-  }
-
-  const getDefaultValue = (q: QuestionInterface) => {
-    let result = "";
-    if (q.fieldType === "Yes/No") result = "False";
-    else if (q.fieldType === "Multiple Choice") {
-      if (q.choices !== undefined && q.choices !== null && q.choices.length > 0) result = q.choices[0].value;
-    }
-    return result;
-  }
-
-  const handleSave = () => {
-    const fs = formSubmission;
-    fs.submittedBy = props.personId || null;
-    fs.submissionDate = new Date();
-    fs.churchId = props.churchId || null;
-    let e: any = [];
-    fs.answers.forEach((a: AnswerInterface) => {
-    
-      if (a.required && a.value === "") {
-        const q: QuestionInterface = fs.questions.find((q: QuestionInterface) => q.id === a.questionId);
-        e.push(q.title + " is required");
-        setErrors(e);
-      }
-    });
-    if (!e.length) ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
-      if (res?.[0]?.error) {
-        setErrors([res?.[0].error]);
-      } else {
-        props.updatedFunction();
-      }
-    });
-  }
-
-  const handleChange = (questionId: string, value: string) => {
-    let fs = { ...formSubmission };
-    let answer: AnswerInterface = null;
-    for (let i = 0; i < fs.answers.length; i++) if (fs.answers[i].questionId === questionId) answer = fs.answers[i];
-    if (answer !== null) answer.value = value;
-    else {
-      answer = { formSubmissionId: fs.id, questionId: questionId, value: value };
-      fs.answers.push(answer);
-    }
-    setFormSubmission(fs);
-  }
-
-  React.useEffect(loadData, []); //eslint-disable-line
-
-  let questionList = [];
-  if (formSubmission != null) {
-    let questions = formSubmission.questions;
-    for (let i = 0; i < questions.length; i++) questionList.push(<QuestionEdit noBackground={noBackground} key={questions[i].id} question={questions[i]} answer={getAnswer(questions[i].id)} changeFunction={handleChange} />);
-  }
-
-  return (
-    <InputBox id="formSubmissionBox" headerText={showHeader ? (formSubmission?.form?.name || "Edit Form") : ""} headerIcon={showHeader ? "person" : ""} mainContainerCssProps={noBackground ? { sx: {backgroundColor: "transparent", boxShadow: 0}}: {}} saveFunction={handleSave} saveText={props.contentType === "form" ? "Submit" : ""} cancelFunction={props.cancelFunction} deleteFunction={getDeleteFunction()}>
-      <ErrorMessages errors={errors} />
-      {questionList}
-    </InputBox>
-  );
-}
-
+import React from "react";
+import { ErrorMessages, InputBox, QuestionEdit } from "./";
+import { ApiHelper, UniqueIdHelper, UserHelper } from "../helpers";
+import { AnswerInterface, QuestionInterface, FormSubmissionInterface } from "../interfaces";
+
+interface Props {
+  addFormId: string,
+  contentType: string,
+  contentId: string,
+  formSubmissionId: string,
+  unRestrictedFormId?: string,
+  personId?: string,
+  churchId?: string,
+  showHeader?: boolean,
+  noBackground?:boolean,
+  updatedFunction: () => void,
+  cancelFunction?: () => void
+}
+
+export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackground = false, ...props}) => {
+  const [formSubmission, setFormSubmission] = React.useState(null);
+  const [errors, setErrors] = React.useState([]);
+
+  const getDeleteFunction = () => (!UniqueIdHelper.isMissing(formSubmission?.id)) ? handleDelete : undefined
+  const handleDelete = () => {
+    if (window.confirm("Are you sure you wish to delete this form data?")) {
+      ApiHelper.delete("/formsubmissions/" + formSubmission.id, "MembershipApi").then(() => {
+        props.updatedFunction();
+      });
+    }
+  }
+
+  const getAnswer = (questionId: string) => {
+    let answers = formSubmission.answers;
+    for (let i = 0; i < answers.length; i++) if (answers[i].questionId === questionId) return answers[i];
+    return null;
+  }
+
+  const setFormSubmissionData = (data: any) => {
+    const formId = props.addFormId || props.unRestrictedFormId;
+    let fs: FormSubmissionInterface = {
+      formId, contentType: props.contentType, contentId: props.contentId, answers: []
+    };
+    fs.questions = data;
+    fs.answers = [];
+    fs.questions.forEach((q) => {
+      let answer: AnswerInterface = { formSubmissionId: fs.id, questionId: q.id, required: q.required };
+      answer.value = getDefaultValue(q);
+      fs.answers.push(answer);
+    });
+    setFormSubmission(fs);
+  }
+
+  const loadData = () => {
+    console.log("loadData", "fs", props.formSubmissionId, "af", props.addFormId, props.unRestrictedFormId)
+    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then(data => setFormSubmission(data));
+    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+  }
+
+  const getDefaultValue = (q: QuestionInterface) => {
+    let result = "";
+    if (q.fieldType === "Yes/No") result = "False";
+    else if (q.fieldType === "Multiple Choice") {
+      if (q.choices !== undefined && q.choices !== null && q.choices.length > 0) result = q.choices[0].value;
+    }
+    return result;
+  }
+
+  const handleSave = () => {
+    const fs = formSubmission;
+    fs.submittedBy = props.personId || null;
+    fs.submissionDate = new Date();
+    fs.churchId = props.churchId || null;
+    let e: any = [];
+    fs.answers.forEach((a: AnswerInterface) => {
+    
+      if (a.required && a.value === "") {
+        const q: QuestionInterface = fs.questions.find((q: QuestionInterface) => q.id === a.questionId);
+        e.push(q.title + " is required");
+        setErrors(e);
+      }
+    });
+    if (!e.length) ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
+      if (res?.[0]?.error) {
+        setErrors([res?.[0].error]);
+      } else {
+        props.updatedFunction();
+      }
+    });
+  }
+
+  const handleChange = (questionId: string, value: string) => {
+    let fs = { ...formSubmission };
+    let answer: AnswerInterface = null;
+    for (let i = 0; i < fs.answers.length; i++) if (fs.answers[i].questionId === questionId) answer = fs.answers[i];
+    if (answer !== null) answer.value = value;
+    else {
+      answer = { formSubmissionId: fs.id, questionId: questionId, value: value };
+      fs.answers.push(answer);
+    }
+    setFormSubmission(fs);
+  }
+
+  React.useEffect(loadData, []); //eslint-disable-line
+
+  let questionList = [];
+  if (formSubmission != null) {
+    let questions = formSubmission.questions;
+    for (let i = 0; i < questions.length; i++) questionList.push(<QuestionEdit noBackground={noBackground} key={questions[i].id} question={questions[i]} answer={getAnswer(questions[i].id)} changeFunction={handleChange} />);
+  }
+
+  return (
+    <InputBox id="formSubmissionBox" headerText={showHeader ? (formSubmission?.form?.name || "Edit Form") : ""} headerIcon={showHeader ? "person" : ""} mainContainerCssProps={noBackground ? { sx: {backgroundColor: "transparent", boxShadow: 0}}: {}} saveFunction={handleSave} saveText={props.contentType === "form" ? "Submit" : ""} cancelFunction={props.cancelFunction} deleteFunction={getDeleteFunction()}>
+      <ErrorMessages errors={errors} />
+      {questionList}
+    </InputBox>
+  );
+}
+

package/src/components/HelpIcon.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { SmallButton } from "./SmallButton";
-
-interface Props { article: string; }
-
-export const HelpIcon = (props: Props) => (
-  <span style={{ float: "right", color: "#1976d2" }}>
-    <SmallButton icon="help" aria-label={"help"} onClick={() => window.open("https://support.churchapps.org/" + props.article, "_blank")} />
-  </span>
-)
+import React from "react";
+import { SmallButton } from "./SmallButton";
+
+interface Props { article: string; }
+
+export const HelpIcon = (props: Props) => (
+  <span style={{ float: "right", color: "#1976d2" }}>
+    <SmallButton icon="help" aria-label={"help"} onClick={() => window.open("https://support.churchapps.org/" + props.article, "_blank")} />
+  </span>
+)