@churchapps/apphelper 0.0.7 → 0.0.9

package/src/components/FormSubmissionEdit.tsx

@@ -1,122 +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,
-  sendEmail?: boolean,
-}
-
-export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackground = false, sendEmail = 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.churchId = UserHelper.currentUserChurch.church.id;
-    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 = 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} 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 = 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} 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>
+)

package/src/components/ImageEditor.tsx

@@ -1,126 +1,126 @@
-import React, { useState, useEffect, useRef } from "react";
-import Cropper from "react-cropper";
-import "cropperjs/dist/cropper.css";
-import { InputBox, SmallButton } from ".";
-
-interface Props {
-  title?: string;
-  photoUrl: string;
-  aspectRatio: number;
-  onUpdate: (dataUrl?: string) => void;
-  onCancel?: () => void;
-  outputWidth?: number;
-  outputHeight?: number;
-  hideDelete?: boolean;
-}
-
-export function ImageEditor(props: Props) {
-  const [photoSrc, setPhotoSrc] = useState<string>("");
-  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
-  const cropperRef = useRef<HTMLImageElement>(null);
-  let timeout: any = null;
-
-  const handleSave = () => props.onUpdate(croppedImageDataUrl);
-
-  const handleDelete = () => props.onUpdate("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    let files;
-    if (e.target) {
-      files = e.target.files;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-      const url = reader.result.toString();
-      setPhotoSrc(url);
-      setCroppedImageDataUrl(url);
-      setTimeout(selectDefaultCropZone, 500);
-    };
-    reader.readAsDataURL(files[0]);
-  };
-
-  const selectDefaultCropZone = () => {
-    const imageElement: any = cropperRef?.current;
-    let cropper: any = imageElement?.cropper;
-    if (props.aspectRatio===0)
-    {
-      let containerData = cropper.getContainerData();
-      const imgWidth = cropper.getImageData().width;
-      const imgHeight = cropper.getImageData().height;
-      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
-      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
-      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
-    } else {
-      let desiredAspect = props.aspectRatio;
-      let containerData = cropper.getContainerData();
-      let imgAspect = cropper.getImageData().aspectRatio;
-      let scale = imgAspect / desiredAspect;
-      if (scale < 1) {
-        const imgWidth = cropper.getImageData().width;
-        let l = (containerData.width - imgWidth) / 2.0;
-        let t = (containerData.height - (containerData.height * scale)) / 2.0;
-        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
-      } else {
-        const imgHeight = cropper.getImageData().height;
-        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
-        let t = 0;
-        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
-      }
-    }
-
-  }
-
-  const handleCrop = () => {
-    if (timeout !== null) {
-      window.clearTimeout(timeout);
-      timeout = null;
-    }
-
-    timeout = window.setTimeout(() => {
-      if (cropperRef.current !== null) {
-        const imageElement: any = cropperRef?.current;
-        const cropper: any = imageElement?.cropper;
-
-        const url = cropper.getCroppedCanvas({ width: props.outputWidth || 400, height: props.outputHeight || 300 }).toDataURL("image/png", 0.4);
-        setCroppedImageDataUrl(url);
-      }
-    }, 200);
-  };
-
-  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
-
-  return (
-    <InputBox
-      id="cropperBox"
-      headerIcon=""
-      headerText={props.title}
-      ariaLabelDelete="deletePhoto"
-      saveText="Update"
-      saveFunction={handleSave}
-      cancelFunction={props.onCancel}
-      deleteFunction={(!props.hideDelete) && handleDelete}
-      headerActionContent={
-        <div>
-          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
-          <SmallButton
-            icon="upload"
-            text="Upload"
-            onClick={() => {
-              document.getElementById("fileUpload").click();
-            }}
-          />
-        </div>
-      }
-    >
-      <Cropper
-        ref={cropperRef}
-        src={photoSrc}
-        style={{ height: 240, width: "100%" }}
-        aspectRatio={props.aspectRatio}
-        guides={false}
-        crop={handleCrop}
-      />
-    </InputBox>
-  );
-}
+import React, { useState, useEffect, useRef } from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import { InputBox, SmallButton } from ".";
+
+interface Props {
+  title?: string;
+  photoUrl: string;
+  aspectRatio: number;
+  onUpdate: (dataUrl?: string) => void;
+  onCancel?: () => void;
+  outputWidth?: number;
+  outputHeight?: number;
+  hideDelete?: boolean;
+}
+
+export function ImageEditor(props: Props) {
+  const [photoSrc, setPhotoSrc] = useState<string>("");
+  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
+  const cropperRef = useRef<HTMLImageElement>(null);
+  let timeout: any = null;
+
+  const handleSave = () => props.onUpdate(croppedImageDataUrl);
+
+  const handleDelete = () => props.onUpdate("");
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    let files;
+    if (e.target) {
+      files = e.target.files;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = reader.result.toString();
+      setPhotoSrc(url);
+      setCroppedImageDataUrl(url);
+      setTimeout(selectDefaultCropZone, 500);
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  const selectDefaultCropZone = () => {
+    const imageElement: any = cropperRef?.current;
+    let cropper: any = imageElement?.cropper;
+    if (props.aspectRatio===0)
+    {
+      let containerData = cropper.getContainerData();
+      const imgWidth = cropper.getImageData().width;
+      const imgHeight = cropper.getImageData().height;
+      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
+      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
+      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
+    } else {
+      let desiredAspect = props.aspectRatio;
+      let containerData = cropper.getContainerData();
+      let imgAspect = cropper.getImageData().aspectRatio;
+      let scale = imgAspect / desiredAspect;
+      if (scale < 1) {
+        const imgWidth = cropper.getImageData().width;
+        let l = (containerData.width - imgWidth) / 2.0;
+        let t = (containerData.height - (containerData.height * scale)) / 2.0;
+        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
+      } else {
+        const imgHeight = cropper.getImageData().height;
+        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
+        let t = 0;
+        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
+      }
+    }
+
+  }
+
+  const handleCrop = () => {
+    if (timeout !== null) {
+      window.clearTimeout(timeout);
+      timeout = null;
+    }
+
+    timeout = window.setTimeout(() => {
+      if (cropperRef.current !== null) {
+        const imageElement: any = cropperRef?.current;
+        const cropper: any = imageElement?.cropper;
+
+        const url = cropper.getCroppedCanvas({ width: props.outputWidth || 400, height: props.outputHeight || 300 }).toDataURL("image/png", 0.4);
+        setCroppedImageDataUrl(url);
+      }
+    }, 200);
+  };
+
+  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
+
+  return (
+    <InputBox
+      id="cropperBox"
+      headerIcon=""
+      headerText={props.title}
+      ariaLabelDelete="deletePhoto"
+      saveText="Update"
+      saveFunction={handleSave}
+      cancelFunction={props.onCancel}
+      deleteFunction={(!props.hideDelete) && handleDelete}
+      headerActionContent={
+        <div>
+          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
+          <SmallButton
+            icon="upload"
+            text="Upload"
+            onClick={() => {
+              document.getElementById("fileUpload").click();
+            }}
+          />
+        </div>
+      }
+    >
+      <Cropper
+        ref={cropperRef}
+        src={photoSrc}
+        style={{ height: 240, width: "100%" }}
+        aspectRatio={props.aspectRatio}
+        guides={false}
+        crop={handleCrop}
+      />
+    </InputBox>
+  );
+}