Fixed edit planTypes and blocks

Author: jzongker

src/serving/components/BulkLessonSchedule.tsx

@@ -175,12 +175,12 @@ export const BulkLessonSchedule: React.FC<Props> = (props) => {
           ministryId: props.ministryId,
           planTypeId: props.planTypeId,
           serviceDate: entry.date,
-          name: `${formattedDate} - ${entry.venue!.title}`,
+          name: `${formattedDate} - ${entry.lesson.title}`,
           notes: "",
           serviceOrder: true,
           providerId: selectedProviderId,
           providerPlanId: entry.venue!.path,
-          providerPlanName: entry.venue!.title,
+          providerPlanName: entry.lesson.title,
           contentType: "provider",
           contentId: entry.venue!.id
         };

src/serving/components/LessonScheduleEdit.tsx

@@ -25,6 +25,7 @@ export const LessonScheduleEdit: React.FC<Props> = (props) => {
   // Selected lesson state
   const [selectedVenueId, setSelectedVenueId] = useState<string>("");
   const [selectedVenueName, setSelectedVenueName] = useState<string>("");
+  const [selectedLessonName, setSelectedLessonName] = useState<string>("");
   const [selectedContentPath, setSelectedContentPath] = useState<string>("");
   const [selectedProviderId, setSelectedProviderId] = useState<string>("");
 
@@ -53,9 +54,10 @@ export const LessonScheduleEdit: React.FC<Props> = (props) => {
     setScheduledDate(DateHelper.toDate(e.target.value));
   };
 
-  const handleLessonSelect = useCallback((venueId: string, venueName?: string, contentPath?: string, providerId?: string) => {
+  const handleLessonSelect = useCallback((venueId: string, venueName?: string, contentPath?: string, providerId?: string, lessonName?: string) => {
     setSelectedVenueId(venueId);
     setSelectedVenueName(venueName || "");
+    setSelectedLessonName(lessonName || "");
     setSelectedContentPath(contentPath || "");
     setSelectedProviderId(providerId || "");
     setShowLessonSelector(false);
@@ -72,7 +74,7 @@ export const LessonScheduleEdit: React.FC<Props> = (props) => {
   const handleSave = async () => {
     if (validate()) {
       const formattedDate = DateHelper.prettyDate(scheduledDate);
-      const displayName = selectedVenueName || "Lesson";
+      const displayName = selectedLessonName || selectedVenueName || "Lesson";
 
       const newPlan: PlanInterface = {
         ministryId: props.ministryId,

src/serving/components/LessonSelector.tsx

@@ -23,7 +23,7 @@ import { useProviderBrowser } from "../hooks/useProviderBrowser";
 interface Props {
   open: boolean;
   onClose: () => void;
-  onSelect: (contentId: string, contentName?: string, contentPath?: string, providerId?: string) => void;
+  onSelect: (contentId: string, contentName?: string, contentPath?: string, providerId?: string, lessonName?: string) => void;
   returnVenueName?: boolean;
   ministryId?: string;
   defaultProviderId?: string;
@@ -63,10 +63,11 @@ export const LessonSelector: React.FC<Props> = ({ open, onClose, onSelect, retur
   const handleSelect = useCallback(() => {
     if (selectedFolder) {
       const folderName = returnVenueName ? selectedFolder.title : undefined;
-      onSelect(selectedFolder.id, folderName, selectedFolder.path, browser.selectedProviderId);
+      const lessonName = browser.breadcrumbItems.length > 0 ? browser.breadcrumbItems[browser.breadcrumbItems.length - 1].label : undefined;
+      onSelect(selectedFolder.id, folderName, selectedFolder.path, browser.selectedProviderId, lessonName);
       onClose();
     }
-  }, [selectedFolder, returnVenueName, onSelect, onClose, browser.selectedProviderId]);
+  }, [selectedFolder, returnVenueName, onSelect, onClose, browser.selectedProviderId, browser.breadcrumbItems]);
 
   // Handle provider change
   const handleProviderChange = useCallback((providerId: string) => {

src/serving/components/PlanTypeEdit.tsx

@@ -18,11 +18,7 @@ export const PlanTypeEdit: React.FC<Props> = ({ planType, onClose }) => {
     setErrors([]);
 
     try {
-      const isNew = !current.id;
-      const result = isNew
-        ? await ApiHelper.post("/planTypes", [current], "DoingApi")
-        : await ApiHelper.post("/planTypes", [current], "DoingApi");
-
+      await ApiHelper.post("/planTypes", [current], "DoingApi");
       onClose();
     } catch (error: any) {
       setErrors([error.message || Locale.label("plans.planTypeEdit.errorSaving")]);
@@ -31,6 +27,18 @@ export const PlanTypeEdit: React.FC<Props> = ({ planType, onClose }) => {
     setLoading(false);
   };
 
+  const handleDelete = async () => {
+    if (!window.confirm(Locale.label("plans.planTypeEdit.confirmDelete") || "Are you sure you want to delete this plan type?")) return;
+    setLoading(true);
+    try {
+      await ApiHelper.delete("/planTypes/" + current.id, "DoingApi");
+      onClose();
+    } catch (error: any) {
+      setErrors([error.message || Locale.label("plans.planTypeEdit.errorDeleting")]);
+      setLoading(false);
+    }
+  };
+
   const handleChange = (field: keyof PlanTypeInterface, value: string) => {
     setCurrent(prev => ({ ...prev, [field]: value }));
   };
@@ -69,6 +77,11 @@ export const PlanTypeEdit: React.FC<Props> = ({ planType, onClose }) => {
         </Box>
       </DialogContent>
       <DialogActions>
+        {current.id && (
+          <Button onClick={handleDelete} disabled={loading} color="error" sx={{ mr: "auto" }}>
+            {Locale.label("common.delete")}
+          </Button>
+        )}
         <Button onClick={onClose} disabled={loading}>
           {Locale.label("common.cancel")}
         </Button>

src/site/BlocksPage.tsx

@@ -3,7 +3,7 @@ import type { JSX } from "react";
 import { ApiHelper, Loading, PageHeader, UserHelper, Permissions, Locale } from "@churchapps/apphelper";
 import type { BlockInterface } from "../helpers";
 import { TableRow, TableCell, Table, TableBody, TableHead, Box, Typography, Stack, Button, Card, Icon } from "@mui/material";
-import { SmartButton as BlockIcon, Add as AddIcon, Edit as EditIcon } from "@mui/icons-material";
+import { SmartButton as BlockIcon, Add as AddIcon, Edit as EditIcon, Settings as SettingsIcon } from "@mui/icons-material";
 import { Navigate, Link } from "react-router-dom";
 import { BlockEdit } from "./components";
 
@@ -93,7 +93,10 @@ export const BlocksPage = () => {
             </Stack>
           </TableCell>
           <TableCell align="right">
-            <Button size="small" variant="outlined" component={Link} to={`/site/blocks/${block.id}`} startIcon={<EditIcon />} data-testid={`edit-block-${block.id}-button`} sx={{ textTransform: "none", minWidth: "auto" }}>{Locale.label("common.edit")}</Button>
+            <Stack direction="row" spacing={1} justifyContent="flex-end">
+              <Button size="small" variant="outlined" component={Link} to={`/site/blocks/${block.id}`} startIcon={<EditIcon />} sx={{ textTransform: "none", minWidth: "auto" }}>{Locale.label("common.edit")}</Button>
+              <Button size="small" variant="outlined" startIcon={<SettingsIcon />} onClick={() => setEditBlock(block)} data-testid={`rename-block-${block.id}-button`} sx={{ textTransform: "none", minWidth: "auto" }}>{Locale.label("common.rename") || "Rename"}</Button>
+            </Stack>
           </TableCell>
         </TableRow>
       );