Don't require admin access for plans

Author: jzongker

src/components/Header.tsx

@@ -12,6 +12,7 @@ export const Header: React.FC = () => {
   const formPermission = UserHelper.checkAccess(Permissions.membershipApi.forms.admin) || UserHelper.checkAccess(Permissions.membershipApi.forms.edit);
   const [donationError, setDonationError] = React.useState<boolean>(false);
   const [isFormMember, setIsFormMember] = React.useState<boolean>(false);
+  const [isMinistryMember, setIsMinistryMember] = React.useState<boolean>(false);
 
   useEffect(() => {
     if (UserHelper.checkAccess(Permissions.givingApi.donations.viewSummary)) {
@@ -23,6 +24,10 @@ export const Header: React.FC = () => {
     if (!formPermission && context?.person?.id) {
       ApiHelper.get("/memberpermissions/member/" + context.person?.id, "MembershipApi").then((data) => setIsFormMember(data?.length > 0));
     }
+
+    if (!UserHelper.checkAccess(Permissions.membershipApi.plans.edit)) {
+      ApiHelper.get("/groups/my/ministry", "MembershipApi").then((data) => setIsMinistryMember(data?.length > 0));
+    }
   }, [formPermission, context?.person?.id]);
 
   const primaryMenu = useMemo(() => {
@@ -32,7 +37,8 @@ export const Header: React.FC = () => {
     if (UserHelper.checkAccess(Permissions.membershipApi.people.view)) menuItems.push({ url: "/people", icon: "person", label: Locale.label("components.wrapper.ppl") });
     if (UserHelper.checkAccess(Permissions.givingApi.donations.viewSummary)) menuItems.push({ url: "/donations", label: Locale.label("components.wrapper.don"), icon: donationIcon });
 
-    if (UserHelper.checkAccess(Permissions.membershipApi.plans.edit)) menuItems.push({ url: "/serving", label: Locale.label("components.wrapper.serving"), icon: "assignment" });
+    const canViewPlans = UserHelper.checkAccess(Permissions.membershipApi.plans.edit) || isMinistryMember;
+    if (canViewPlans) menuItems.push({ url: "/serving", label: Locale.label("components.wrapper.serving"), icon: "assignment" });
     else menuItems.push({ url: "/serving/tasks", label: Locale.label("components.wrapper.serving"), icon: "assignment" });
 
     // Temporarily hidden
@@ -44,7 +50,7 @@ export const Header: React.FC = () => {
     else if (formPermission || isFormMember) menuItems.push({ url: "/forms", label: Locale.label("components.wrapper.set"), icon: "settings" });
     // if (UserHelper.checkAccess(Permissions.membershipApi.server.admin)) tabs.push(<NavItem key="/admin" url="/admin" label={Locale.label("components.wrapper.servAdmin")} icon="admin_panel_settings" selected={selectedTab === "admin"} />);
     return menuItems;
-  }, [donationError, formPermission, isFormMember]);
+  }, [donationError, formPermission, isFormMember, isMinistryMember]);
   /*
   const getSecondaryMenu = () => {
     const menuItems:{ url: string, label: string }[] = []
@@ -70,7 +76,7 @@ export const Header: React.FC = () => {
     return result;
   };
 
-  const secondaryMenu = SecondaryMenuHelper.getSecondaryMenu(window.location.pathname, { formPermission, search: window.location.search });
+  const secondaryMenu = SecondaryMenuHelper.getSecondaryMenu(window.location.pathname, { formPermission, search: window.location.search, isMinistryMember });
 
   const handleNavigate = (url: string) => {
     navigate(url);

src/helpers/SecondaryMenuHelper.ts

@@ -13,7 +13,7 @@ export class SecondaryMenuHelper {
     if (path.startsWith("/people") || path.startsWith("/groups") || path.startsWith("/attendance")) result = this.getPeopleMenu(path, data.search);
     else if (path.startsWith("/mobile")) result = this.getMobileMenu(path);
     else if (path.startsWith("/settings") || path.startsWith("/admin") || path.startsWith("/forms")) result = this.getSettingsMenu(path, data);
-    else if (path.startsWith("/serving")) result = this.getServingMenu(path);
+    else if (path.startsWith("/serving")) result = this.getServingMenu(path, data);
     else if (path.startsWith("/donations")) result = this.getDonationsMenu(path);
     else if (path.startsWith("/site") || path.startsWith("/calendars") || path.startsWith("/registrations")) result = this.getSiteMenu(path);
     else if (path.startsWith("/sermons")) result = this.getSermonsMenu(path);
@@ -26,7 +26,7 @@ export class SecondaryMenuHelper {
     const menuItems: MenuItem[] = [];
     let label: string = "";
     menuItems.push({ url: "/groups", label: Locale.label("components.wrapper.groups"), icon: "groups" });
-    if (UserHelper.checkAccess(Permissions.membershipApi.plans.edit)) menuItems.push({ url: "/serving", label: Locale.label("components.wrapper.teams"), icon: "people" });
+    if (UserHelper.checkAccess(Permissions.membershipApi.plans.edit) || data?.isMinistryMember) menuItems.push({ url: "/serving", label: Locale.label("components.wrapper.teams"), icon: "people" });
     menuItems.push({ url: "/people", label: Locale.label("components.wrapper.ppl"), icon: "person" });
     if (UserHelper.checkAccess(Permissions.attendanceApi.attendance.viewSummary)) menuItems.push({ url: "/attendance", label: Locale.label("components.wrapper.att"), icon: "calendar_month" });
 
@@ -77,10 +77,11 @@ export class SecondaryMenuHelper {
     return { menuItems, label };
   };
 
-  static getServingMenu = (path: string) => {
+  static getServingMenu = (path: string, data?: any) => {
     const menuItems: MenuItem[] = [];
     let label: string = "";
-    if (UserHelper.checkAccess(Permissions.membershipApi.plans.edit)) {
+    const canViewPlans = UserHelper.checkAccess(Permissions.membershipApi.plans.edit) || data?.isMinistryMember;
+    if (canViewPlans) {
       menuItems.push({ url: "/serving", label: Locale.label("components.wrapper.plans"), icon: "assignment" });
       menuItems.push({ url: "/serving/songs", label: Locale.label("components.wrapper.songs"), icon: "music_note" });
     }

src/serving/ServingPage.tsx

@@ -17,19 +17,21 @@ export const ServingPage = () => {
   const [selectedMinistryId, setSelectedMinistryId] = React.useState<string | null>(null);
   const [showAllMinistries, setShowAllMinistries] = React.useState(false);
   const context = React.useContext(UserContext);
-
+  const isAdmin = UserHelper.checkAccess(Permissions.membershipApi.roles.edit);
+  
   const ministries = useQuery<GroupInterface[]>({
-    queryKey: ["/groups/tag/ministry", "MembershipApi"],
+    queryKey: isAdmin ? ["/groups/tag/ministry", "MembershipApi"] : ["/groups/my/ministry", "MembershipApi"],
     placeholderData: []
   });
 
   const groupIds = React.useMemo(() => {
     return ministries.data && ministries.data.length > 0 ? ArrayHelper.getIds(ministries.data, "id") : [];
   }, [ministries.data]);
 
+  // Only admins need group members (for membership filtering and Show All toggle)
   const groupMembers = useQuery<GroupMemberInterface[]>({
     queryKey: ["/groupMembers", "MembershipApi", groupIds],
-    enabled: groupIds.length > 0,
+    enabled: isAdmin && groupIds.length > 0,
     placeholderData: [],
     queryFn: async () => {
       if (groupIds.length === 0) return [];
@@ -47,17 +49,14 @@ export const ServingPage = () => {
 
   if (ministries.isLoading) return <Loading />;
 
-  // Admins: Ministries where they're a member OR ministries with no members (to prevent orphaning)
-  // Regular users: Ministries where they're a member
-  // Domain Admins: Can toggle to see all ministries
-  const isAdmin = UserHelper.checkAccess(Permissions.membershipApi.roles.edit);
-  const groups = (ministries.data || []).filter((g) => {
-    if (isAdmin && showAllMinistries) return true;
-    const members = ArrayHelper.getAll(groupMembers.data || [], "groupId", g.id);
-    const isMember = ArrayHelper.getOne(members, "personId", context.person?.id) !== null;
-    if (isAdmin) return isMember || members.length === 0;
-    return isMember;
-  });
+  const groups = isAdmin
+    ? (ministries.data || []).filter((g) => {
+      if (showAllMinistries) return true;
+      const members = ArrayHelper.getAll(groupMembers.data || [], "groupId", g.id);
+      const isMember = ArrayHelper.getOne(members, "personId", context.person?.id) !== null;
+      return isMember || members.length === 0;
+    })
+    : (ministries.data || []);
 
   const selectedMinistry = groups.find((g) => g.id === selectedMinistryId);