Added planTypeId, contentType and contentId to plans.

Author: jzongker

src/helpers/Interfaces.ts

@@ -72,3 +72,16 @@ export interface PlanTypeInterface {
   ministryId?: string;
   name?: string;
 }
+
+export interface PlanInterface {
+  id?: string;
+  churchId?: string;
+  name?: string;
+  ministryId?: string;
+  planTypeId?: string;
+  serviceDate?: Date;
+  notes?: string;
+  serviceOrder?: boolean;
+  contentType?: string;
+  contentId?: string;
+}

src/plans/PlanPage.tsx

@@ -1,20 +1,13 @@
 import React from "react";
 import { useParams } from "react-router-dom";
 import { ApiHelper, Locale, PageHeader } from "@churchapps/apphelper";
+import { type PlanInterface } from "../helpers";
 import { Assignment } from "./components/Assignment";
 import { Box, Stack, Button, Container, Typography } from "@mui/material";
 import { Assignment as AssignmentIcon, Album as AlbumIcon } from "@mui/icons-material";
 import { ServiceOrder } from "./components/ServiceOrder";
 
-export interface PlanInterface {
-  id?: string;
-  churchId?: string;
-  name?: string;
-  ministryId?: string;
-  serviceDate?: Date;
-  notes?: string;
-  serviceOrder?: boolean;
-}
+
 
 export const PlanPage = () => {
   const params = useParams();

src/plans/components/PlanEdit.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { FormControl, InputLabel, MenuItem, Select, TextField, type SelectChangeEvent } from "@mui/material";
 import { DateHelper, ErrorMessages, InputBox, Locale } from "@churchapps/apphelper";
+import { type PlanInterface } from "../../helpers";
 import { useMutation } from "@tanstack/react-query";
 import { queryClient } from "../../queryClient";
 
@@ -10,15 +11,7 @@ interface Props {
   updatedFunction: () => void;
 }
 
-export interface PlanInterface {
-  id?: string;
-  churchId?: string;
-  name?: string;
-  ministryId?: string;
-  serviceDate?: Date;
-  notes?: string;
-  serviceOrder?: boolean;
-}
+
 
 export const PlanEdit = (props: Props) => {
   const [plan, setPlan] = React.useState<PlanInterface>(props.plan);

src/plans/components/PlanList.tsx

@@ -5,6 +5,7 @@ import {
 import { Add as AddIcon, Assignment as AssignmentIcon, CalendarMonth as CalendarIcon, Edit as EditIcon, EventNote as EventNoteIcon } from "@mui/icons-material";
 import { Link } from "react-router-dom";
 import { type GroupInterface } from "@churchapps/helpers";
+import { type PlanInterface } from "../../helpers";
 import { ArrayHelper, DateHelper, Locale, Loading, UserHelper, Permissions } from "@churchapps/apphelper";
 import { PlanEdit } from "./PlanEdit";
 import { MinistryList } from "./MinistryList";
@@ -16,32 +17,24 @@ interface Props {
   planTypeId?: string;
 }
 
-export interface PlanInterface {
-  id?: string;
-  churchId?: string;
-  name?: string;
-  ministryId?: string;
-  planTypeId?: string;
-  serviceDate?: Date;
-  notes?: string;
-  serviceOrder?: boolean;
-}
+
 
 export const PlanList = memo((props: Props) => {
   const [plan, setPlan] = React.useState<PlanInterface>(null);
   const canEdit = UserHelper.checkAccess(Permissions.membershipApi.plans.edit);
 
   const plansQuery = useQuery<PlanInterface[]>({
-    queryKey: ["/plans", "DoingApi"],
+    queryKey: props.planTypeId ? [`/plans/types/${props.planTypeId}`, "DoingApi"] : ["/plans", "DoingApi"],
     placeholderData: [],
   });
 
   const plans = React.useMemo(() => {
-    let filtered = ArrayHelper.getAll(plansQuery.data || [], "ministryId", props.ministry.id);
+    // When planTypeId is provided, the API already returns filtered data
     if (props.planTypeId) {
-      filtered = ArrayHelper.getAll(filtered, "planTypeId", props.planTypeId);
+      return plansQuery.data || [];
     }
-    return filtered;
+    // When no planTypeId, filter by ministry only
+    return ArrayHelper.getAll(plansQuery.data || [], "ministryId", props.ministry.id);
   }, [plansQuery.data, props.ministry.id, props.planTypeId]);
 
   const addPlan = useCallback(() => {
@@ -50,18 +43,23 @@ export const PlanList = memo((props: Props) => {
     const name = DateHelper.prettyDate(date);
     setPlan({
       ministryId: props.ministry.id,
+      planTypeId: props.planTypeId,
       serviceDate: date,
       name,
       notes: "",
       serviceOrder: true,
     });
-  }, [props.ministry.id]);
+  }, [props.ministry.id, props.planTypeId]);
 
   const handleUpdated = useCallback(() => {
     setPlan(null);
     plansQuery.refetch();
+    // Invalidate both the specific plan type query and the general plans query
+    if (props.planTypeId) {
+      queryClient.invalidateQueries({ queryKey: [`/plans/types/${props.planTypeId}`, "DoingApi"] });
+    }
     queryClient.invalidateQueries({ queryKey: ["/plans", "DoingApi"] });
-  }, [plansQuery]);
+  }, [plansQuery, props.planTypeId]);
 
   if (plan && canEdit) {
     return <PlanEdit plan={plan} plans={plans} updatedFunction={handleUpdated} />;
@@ -240,7 +238,7 @@ export const PlanList = memo((props: Props) => {
         ))}
       </Stack>
 
-      <MinistryList />
+      {!props.planTypeId && <MinistryList />}
     </Box>
   );
 });

src/plans/components/PlanTypeList.tsx

@@ -18,7 +18,7 @@ export const PlanTypeList = React.memo(({ ministry }: Props) => {
   const canEdit = UserHelper.checkAccess(Permissions.membershipApi.plans.edit);
 
   const planTypes = useQuery<PlanTypeInterface[]>({
-    queryKey: [`/planTypes?ministryId=${ministry.id}`, "DoingApi"],
+    queryKey: [`/planTypes/ministryId/${ministry.id}`, "DoingApi"],
     enabled: !!ministry.id,
     placeholderData: [],
   });