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>