Merge branch 'main' of github.com:LiveChurchSolutions/ChumsApp

package.json

@@ -41,6 +41,7 @@
     "react-draft-wysiwyg": "^1.15.0",
     "react-ga4": "^2.1.0",
     "react-google-charts": "^3.0.15",
+    "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.0",
@@ -82,6 +83,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/react-draft-wysiwyg": "^1.13.4",
+    "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-helmet": "^6.1.6",
     "google-charts": "^2.0.0",
     "husky": "^7.0.4",

src/attendance/AttendancePage.tsx

@@ -114,26 +114,10 @@ export const AttendancePage = () => {
 
   const getEditLinks = () => (
     <>
-      <IconButton
-        aria-label="addButton"
-        id="addBtnGroup"
-        data-cy="add-button"
-        aria-controls={open ? "add-menu" : undefined}
-        aria-expanded={open ? "true" : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
+      <IconButton aria-label="addButton" id="addBtnGroup" data-cy="add-button" aria-controls={open ? "add-menu" : undefined} aria-expanded={open ? "true" : undefined} aria-haspopup="true" onClick={handleClick}>
         <Icon color="primary">add</Icon>
       </IconButton>
-      <Menu
-        id="add-menu"
-        MenuListProps={{
-          "aria-labelledby": "addBtnGroup"
-        }}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-      >
+      <Menu id="add-menu" MenuListProps={{ "aria-labelledby": "addBtnGroup" }} anchorEl={anchorEl} open={open} onClose={handleClose}>
         <MenuItem data-cy="add-campus" onClick={() => {handleClose(); selectCampus({ id: "", name: "New Campus" }); }}>
           <Icon sx={{mr: "3px"}}>church</Icon> Add Campus
         </MenuItem>

src/people/components/Household.tsx

@@ -31,7 +31,7 @@ export const Household: React.FC<Props> = (props) => {
       ApiHelper.get("/people/household/" + household.id, "MembershipApi").then(data => setMembers(data));
     }
   }
-  const getEditFunction = () => (UserHelper.checkAccess(Permissions.membershipApi.households.edit)) ? handleEdit : undefined
+  const getEditFunction = () => (UserHelper.checkAccess(Permissions.membershipApi.people.edit)) ? handleEdit : undefined
   React.useEffect(loadData, [props.person]);
   React.useEffect(() => {
     setPhoto(PersonHelper.getPhotoUrl(props.person))

src/people/components/Tabs.tsx

@@ -39,7 +39,7 @@ export const Tabs: React.FC<Props> = (props) => {
   switch (selectedTab) {
     case "notes": currentTab = <Notes context={context} conversationId={person?.conversationId} createConversation={handleCreateConversation} />; break;
     case "attendance": currentTab = <PersonAttendance personId={person.id} />; break;
-    case "donations": currentTab = <DonationPage personId={person.id} />; break;
+    case "donations": currentTab = <DonationPage personId={person.id} churchName={UserHelper.currentUserChurch.church.name} />; break;
     default: currentTab = <div>Not implemented</div>; break;
   }
 

src/settings/components/RoleMembers.tsx

@@ -31,7 +31,7 @@ export const RoleMembers: React.FC<Props> = (props) => {
   }
 
   const getRows = () => {
-    let canEdit = UserHelper.checkAccess(Permissions.membershipApi.roleMembers.edit);
+    let canEdit = UserHelper.checkAccess(Permissions.membershipApi.roles.edit);
     let rows: JSX.Element[] = [];
     if (isRoleEveryone) {
       rows.push(<TableRow><TableCell key="0">This role applies to all the members of the church.</TableCell></TableRow>)

src/settings/components/Roles.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
 import { DisplayBox, UserHelper, ApiHelper, Permissions, ChurchInterface } from "."
-import { RoleInterface } from "../../helpers"
-import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import { RoleInterface, RolePermissionInterface } from "../../helpers"
+import { Divider, Icon, IconButton, Menu, MenuItem, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import { SmallButton } from "../../appBase/components"
 
 interface Props {
@@ -14,27 +14,102 @@ interface Props {
 export const Roles: React.FC<Props> = ({ selectRoleId, selectedRoleId, church }) => {
 
   const [roles, setRoles] = useState<RoleInterface[]>([]);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (e: React.MouseEvent) => {
+    setAnchorEl(e.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const predefined = [
+    { name: "Accounting", description: "Has access to view and manage donations.", permissions: [
+      Permissions.membershipApi.people.view,
+      Permissions.membershipApi.people.edit,
+      Permissions.givingApi.donations.edit,
+      Permissions.givingApi.donations.view,
+      Permissions.givingApi.donations.viewSummary,
+      Permissions.givingApi.settings.edit
+    ]},
+    { name: "Church Staff", description: "Can edit most data in Chums.org, including people, groups, attendance and forms.", permissions: [
+      Permissions.membershipApi.people.view,
+      Permissions.membershipApi.people.edit,
+      Permissions.membershipApi.groups.edit,
+      Permissions.membershipApi.groupMembers.view,
+      Permissions.membershipApi.groupMembers.edit,
+      Permissions.membershipApi.forms.edit,
+      Permissions.membershipApi.forms.admin,
+      Permissions.attendanceApi.attendance.edit,
+      Permissions.attendanceApi.attendance.view,
+      Permissions.attendanceApi.services.edit,
+    ]},
+    { name: "Content Admin", description: "Can edit website content, mobile content and sermons.", permissions: [
+      Permissions.contentApi.chat.host,
+      Permissions.contentApi.content.edit,
+      Permissions.contentApi.streamingServices.edit
+    ]},
+    { name: "Lessons Admin", description: "Can set up classrooms and schedule lessons on Lessons.church.", permissions: [
+      { api: "LessonsApi", contentType:"Schedules", permission: "Edit" }
+    ]}
+  ]
+
 
   const loadData = () => {
     if (selectedRoleId !== "notset") return;
     ApiHelper.get(`/roles/church/${church.id}`, "MembershipApi").then(roles => setRoles(roles));
   }
 
+  const addRole = async (role:any) => {
+    console.log("made it")
+    console.log(role);
+    handleClose();
+    if (window.confirm("Do you wish to create a new role of " + role.name + "?  It " + role.description.toLowerCase() )) {
+
+      const roles = await ApiHelper.post("/roles", [{ name: role.name  }], "MembershipApi");
+      const r = roles[0];
+      const perms:RolePermissionInterface[] = [];
+      role.permissions.forEach((p:any) => {
+        perms.push({ roleId: r.id, apiName: p.api, contentType: p.contentType, action: p.action })
+      });
+      await ApiHelper.post("/rolepermissions/", perms, "MembershipApi");
+      loadData();
+    }
+  }
+
   const getEditContent = () => {
     if (!UserHelper.checkAccess(Permissions.membershipApi.roles.edit)) return null;
-    else return (<SmallButton icon="add" text="Add" onClick={() => { selectRoleId(""); }} />);
+    else {
+      return (<>
+        <IconButton aria-label="addButton" id="addBtnGroup" data-cy="add-button" aria-controls={open ? "add-menu" : undefined} aria-expanded={open ? "true" : undefined} aria-haspopup="true" onClick={handleClick}>
+          <Icon color="primary">add</Icon>
+        </IconButton>
+        <Menu id="add-menu" MenuListProps={{ "aria-labelledby": "addBtnGroup" }} anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem data-cy="add-campus" onClick={() => {handleClose(); selectRoleId(""); }}>
+            <Icon sx={{mr: "3px"}}>lock</Icon> Add Custom Role
+          </MenuItem>
+          <Divider />
+          {predefined.map((role, i) => (
+            <MenuItem key={role.name} onClick={() => {addRole(role); }} title={role.description}>
+              <Icon sx={{mr: "3px"}}>lock</Icon> Add "<b>{role.name}</b>" Role
+            </MenuItem>
+          ))}
+        </Menu>
+      </>)
+      //return (<SmallButton icon="add" text="Add" onClick={() => { selectRoleId(""); }} />);
+    }
   }
 
   const getRows = () => {
     const result: JSX.Element[] = [];
     const sortedRoles = [...roles].sort((a, b) => a.name > b.name ? 1 : -1);
     const canEdit = (
       UserHelper.checkAccess(Permissions.membershipApi.roles.edit)
-      && UserHelper.checkAccess(Permissions.membershipApi.users.edit)
+      && UserHelper.checkAccess(Permissions.membershipApi.roles.edit)
       && UserHelper.checkAccess(Permissions.membershipApi.people.view)
     );
 
-    if (UserHelper.checkAccess(Permissions.membershipApi.rolePermissions.edit)) {
+    if (UserHelper.checkAccess(Permissions.membershipApi.roles.edit)) {
       result.push(
         <TableRow key="everyone">
           <TableCell><i className="groups" /> <Link to={`/settings/role/everyone`}>(Everyone)</Link></TableCell>