Announcement Preview and Link Button

client/src/pages/both/homepage/AnnouncementCard.tsx

@@ -1,19 +1,37 @@
-import { Card, CardContent, Typography, useTheme } from "@mui/material";
+import { Button, Card, CardActions, CardContent, Typography, useTheme } from "@mui/material";
 import { Announcement } from "../../../queries/announcementsQueries";
 import ThemedMarkdown from "../../../common/ThemedMarkdown";
 
 interface AnnouncementCardProps {
-    announcement: Announcement;
+  announcement: Announcement;
 }
 
 export default function AnnouncementCard(props: AnnouncementCardProps) {
-    const theme = useTheme();
-    return (
-        <Card sx={{ height: "100%" }}>
-            <CardContent>
-                <Typography color={theme.palette.primary.main} variant="h5">{props.announcement.title}</Typography>
-                <Typography variant="body1"><ThemedMarkdown>{props.announcement.description}</ThemedMarkdown></Typography>
-            </CardContent>
-        </Card>
-    );
-}
+  const theme = useTheme();
+  return (
+    <Card sx={{ height: "100%" }}>
+      <CardContent>
+        <Typography color={theme.palette.primary.main} variant="h5">
+          {props.announcement.title}
+        </Typography>
+        <Typography variant="body1">
+          <ThemedMarkdown>{props.announcement.description}</ThemedMarkdown>
+        </Typography>
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'flex-end' }}>
+        {props.announcement.linkUrl ? (
+          <Button
+            variant="contained"
+            color="info"
+            size="small"
+            href={props.announcement.linkUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {props.announcement.linkText}
+          </Button>
+        ) : null}
+      </CardActions>
+    </Card>
+  );
+}

client/src/pages/lab_management/announcements/AnnouncementModalContents.tsx

@@ -1,18 +1,17 @@
-import { ChangeEvent, useState } from "react";
-import {
-  Button,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import React, { ChangeEvent, useState } from "react";
+import { Button, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from "@mui/material";
 import SaveIcon from "@mui/icons-material/Save";
 import { Announcement } from "../../../queries/announcementsQueries";
 import { useNavigate } from "react-router-dom";
 import DeleteAnnouncementButton from "./button/DeleteAnnouncementButton";
+import AnnouncementCard from "../../both/homepage/AnnouncementCard.js";
+import { toast } from "react-toastify";
 
 interface InputErrors {
   title?: boolean;
   description?: boolean;
+  linkText?: boolean;
+  linkUrl?: boolean;
 }
 
 interface AnnouncementPageProps {
@@ -32,44 +31,73 @@ export default function AnnouncementModalContents({
   onDelete,
   loading,
 }: AnnouncementPageProps) {
-
   const navigate = useNavigate();
-
+
+  const [showLinkFields, setShowLinkFields] = useState(!!announcementDraft.linkUrl || !!announcementDraft.linkText);
   const [inputErrors, setInputErrors] = useState<InputErrors>({});
 
-  const handleStringChange =
-    (property: keyof Announcement) =>
-    (e: ChangeEvent<HTMLInputElement>) =>
-      setAnnouncementDraft({ ...announcementDraft, [property]: e.target.value });
+  const handleStringChange = (property: keyof Announcement) => (e: ChangeEvent<HTMLInputElement>) =>
+    setAnnouncementDraft({ ...announcementDraft, [property]: e.target.value });
+
+  const handleHasLinkSwitch = (e: ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+    setShowLinkFields(checked);
+    if (!checked) {
+      setAnnouncementDraft({
+        ...announcementDraft,
+        linkText: "",
+        linkUrl: "",
+      });
+    }
+  };
+
+  const normalizeUrl = (url: string) => {
+    if (!url) return "";
+    return /^https?:\/\//.test(url) ? url : "https://" + url;
+  };
+
+  const handleUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const raw = e.target.value.trim();
+    const normalized = normalizeUrl(raw);
+
+    setAnnouncementDraft({ ...announcementDraft, linkUrl: normalized });
+  };
 
   const handleSaveClick = async () => {
     const updatedInputErrors: InputErrors = {
       title: !announcementDraft.title,
       description: !announcementDraft.description,
+      linkText: showLinkFields && !announcementDraft.linkText,
+      linkUrl: showLinkFields && !announcementDraft.linkUrl,
     };
 
     setInputErrors(updatedInputErrors);
 
     const hasInputErrors = Object.values(updatedInputErrors).some((e) => e);
     if (hasInputErrors) return;
 
-    await onSave();
-
-    navigate("/admin/announcements");
+    try {
+      await onSave();
+      navigate("/admin/announcements");
+    } catch (error) {
+      toast.error("Failed to save announcement. " + (error instanceof Error ? error.message : ""));
+    }
   };
 
   const handleDeleteClick = async () => {
-    await onDelete()
-    navigate("/admin/announcements");
-  }
+    try {
+      await onDelete();
+      navigate("/admin/announcements");
+    } catch (error) {
+      toast.error("Failed to delete announcement." + (error instanceof Error ? error.message : ""));
+    }
+  };
 
   const title = `${isNewAnnouncement ? "New" : "Edit"} Announcement`;
 
   return (
     <Stack padding="25px" spacing={2}>
-      <Typography variant="h5">
-        {title}
-      </Typography>
+      <Typography variant="h5">{title}</Typography>
       <Stack direction="row" spacing={2}>
         <Stack spacing={2} flexGrow={1}>
           <TextField
@@ -90,15 +118,40 @@ export default function AnnouncementModalContents({
               minRows={3}
             />
           </Stack>
+          <FormControlLabel
+            control={<Switch checked={showLinkFields} onChange={handleHasLinkSwitch} />}
+            label={<b>Link Button</b>}
+            labelPlacement="top"
+          />
+          {showLinkFields && (
+            <>
+              <TextField
+                label="Link Text"
+                type="string"
+                value={announcementDraft.linkText ?? ""}
+                error={inputErrors.linkText}
+                onChange={handleStringChange("linkText")}
+                required
+              />
+              <TextField
+                helperText="Please enter a valid URL, including 'http://' or 'https://'. If you leave it out, we'll assume 'https://'."
+                label="Link URL"
+                type="url"
+                value={announcementDraft.linkUrl ?? ""}
+                error={inputErrors.linkUrl}
+                onChange={handleStringChange("linkUrl")}
+                onBlur={handleUrlBlur}
+                required
+              />
+            </>
+          )}
         </Stack>
       </Stack>
 
       <Stack direction="row" justifyContent="flex-end" spacing={2}>
         {!isNewAnnouncement && (
           <Stack direction="row" spacing={2}>
-            <DeleteAnnouncementButton 
-              onDelete={handleDeleteClick}
-            />
+            <DeleteAnnouncementButton onDelete={handleDeleteClick} />
           </Stack>
         )}
 
@@ -114,6 +167,11 @@ export default function AnnouncementModalContents({
           Save
         </Button>
       </Stack>
+      <Grid margin="10px" display="flex" justifyContent="center" alignItems="center">
+        <Grid width="400px">
+          <AnnouncementCard announcement={announcementDraft} />
+        </Grid>
+      </Grid>
     </Stack>
   );
 }

client/src/pages/lab_management/announcements/EditAnnouncement.tsx

@@ -7,7 +7,6 @@ import { useParams } from "react-router-dom";
 
 
 export default function EditAnnouncement() {
-
   const { id } = useParams<{ id: string }>();
 
   const [announcementDraft, setAnnouncementDraft] = useState<Partial<Announcement>>({});
@@ -17,19 +16,20 @@ export default function EditAnnouncement() {
   });
 
   const [updateAnnouncement, mutation] = useMutation(UPDATE_ANNOUNCEMENT, {
-    variables: { id: id, title: announcementDraft.title, description: announcementDraft.description },
-    refetchQueries: [
-      { query: GET_ANNOUNCEMENTS },
-      { query: GET_ANNOUNCEMENT, variables: { id } },
-    ],
+    variables: {
+      id: id,
+      title: announcementDraft.title,
+      description: announcementDraft.description,
+      linkText: announcementDraft.linkText,
+      linkUrl: announcementDraft.linkUrl,
+    },
+    refetchQueries: [{ query: GET_ANNOUNCEMENTS }, { query: GET_ANNOUNCEMENT, variables: { id } }],
   });
 
   const [deleteAnnouncement, del] = useMutation(DELETE_ANNOUNCEMENT, {
     variables: { id: id },
-    refetchQueries: [
-      { query: GET_ANNOUNCEMENTS }
-    ],
-  })
+    refetchQueries: [{ query: GET_ANNOUNCEMENTS }],
+  });
 
   // After the item has been fetched, fill in the draft
   useEffect(() => {
@@ -40,7 +40,6 @@ export default function EditAnnouncement() {
     });
   }, [query.data, setAnnouncementDraft]);
 
-
   return (
     <RequestWrapper loading={query.loading || del.loading} error={query.error || del.error} minHeight={322}>
       <>