mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -1,116 +1,163 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog, AlertDialogAction, AlertDialogCancel,
|
||||
AlertDialogContent, AlertDialogDescription,
|
||||
AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useAdminNotifications } from "@/contexts/AdminNotificationContext";
|
||||
import { NotificationIcon, getTypeAccent, resolveStickyStyle } from "@/components/generic/notificationDisplay";
|
||||
import { getTierColor, getContrastText } from "@/utils/tierColors";
|
||||
import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
|
||||
|
||||
const ROTATE_INTERVAL_MS = 6000;
|
||||
|
||||
// Admin counterpart to StickyAnnouncementBar (client). Only supports the
|
||||
// explicit link_url from the "On Open" section — the type-based fallback
|
||||
// resolver in notificationDisplay.jsx points at client-only routes
|
||||
// (/course/:id, /plans, /group/:id), which don't exist in the admin app.
|
||||
function resolveClickAction(stickyAnnouncement) {
|
||||
const linkUrl = stickyAnnouncement.data?.linkUrl || null;
|
||||
if (!linkUrl) return null;
|
||||
return {
|
||||
label: stickyAnnouncement.data?.linkLabel || "Open Link",
|
||||
go: (navigate) => (linkUrl.startsWith("/")
|
||||
? navigate(linkUrl)
|
||||
: window.open(linkUrl, "_blank", "noopener,noreferrer")),
|
||||
};
|
||||
}
|
||||
|
||||
export default function AdminStickyAnnouncementBar() {
|
||||
const navigate = useNavigate();
|
||||
const { stickyAnnouncement, markSeen } = useAdminNotifications();
|
||||
const { stickyAnnouncements, bannerImage, markSeen } = useAdminNotifications();
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
|
||||
const count = stickyAnnouncements.length;
|
||||
// Derived rather than clamped via effect — safe the instant the array
|
||||
// shrinks (e.g. after a dismiss), no render with a stale out-of-range index.
|
||||
const safeIndex = count ? Math.min(activeIndex, count - 1) : 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (count <= 1) return;
|
||||
const id = setInterval(() => {
|
||||
setActiveIndex((i) => (i + 1) % count);
|
||||
}, ROTATE_INTERVAL_MS);
|
||||
return () => clearInterval(id);
|
||||
}, [count]);
|
||||
|
||||
const current = stickyAnnouncements[safeIndex];
|
||||
|
||||
const onDismiss = useCallback(async () => {
|
||||
if (!stickyAnnouncement) return;
|
||||
await markSeen(stickyAnnouncement.notification_id);
|
||||
}, [stickyAnnouncement, markSeen]);
|
||||
if (!current) return;
|
||||
await markSeen(current.notification_id);
|
||||
}, [current, markSeen]);
|
||||
|
||||
// Opening the dialog must NOT mark it seen — markSeen clears
|
||||
// stickyAnnouncement, which would unmount this component (dialog included)
|
||||
// before it ever shows. Only the X button dismisses/marks seen.
|
||||
// Opening the dialog must NOT mark it seen — markSeen removes the row from
|
||||
// stickyAnnouncements, which would unmount this component (dialog included)
|
||||
// before it ever shows.
|
||||
const onClickBanner = useCallback(() => {
|
||||
if (!stickyAnnouncement) return;
|
||||
if (!current) return;
|
||||
setDetailsOpen(true);
|
||||
}, [stickyAnnouncement]);
|
||||
}, [current]);
|
||||
|
||||
if (!stickyAnnouncement) return null;
|
||||
// Closing the details dialog (X, Escape, overlay click — any reason)
|
||||
// dismisses whichever announcement was being viewed at the time. This is
|
||||
// the only dismiss path when multiple are active (no per-item X on the bar
|
||||
// itself — see the count > 1 branch below).
|
||||
const onDialogOpenChange = useCallback((open) => {
|
||||
setDetailsOpen(open);
|
||||
if (!open) void onDismiss();
|
||||
}, [onDismiss]);
|
||||
|
||||
const accentClass = getTypeAccent(stickyAnnouncement.type);
|
||||
const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
|
||||
const linkUrl = stickyAnnouncement.data?.linkUrl || null;
|
||||
if (!current) return null;
|
||||
|
||||
const openLink = () => {
|
||||
if (!linkUrl) return;
|
||||
if (linkUrl.startsWith("/")) navigate(linkUrl);
|
||||
else window.open(linkUrl, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
const swatch = getTierColor(current.color || "indigo").swatch;
|
||||
const textColor = getContrastText(swatch, current.color || "indigo");
|
||||
const clickAction = resolveClickAction(current);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
role="status"
|
||||
className="w-full border-b shadow-sm px-4 md:px-6"
|
||||
>
|
||||
<div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
|
||||
<div
|
||||
onClick={onClickBanner}
|
||||
className="w-full cursor-pointer bg-card rounded-none py-3 flex items-center justify-between gap-4"
|
||||
style={inlineStyle ?? undefined}
|
||||
className="relative w-full cursor-pointer rounded-none py-3 flex items-center justify-center gap-4 px-10"
|
||||
>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate" style={{ color: textColor }}>
|
||||
{current.title || "Announcement"}
|
||||
</p>
|
||||
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate">
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-snug line-clamp-2">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</div>
|
||||
{clickAction && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="shrink-0 text-foreground"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
clickAction.go(navigate);
|
||||
}}
|
||||
>
|
||||
{clickAction.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
{count > 1 && (
|
||||
<div className="absolute right-2 flex items-center gap-1.5">
|
||||
{stickyAnnouncements.map((a, i) => (
|
||||
<button
|
||||
key={a.notification_id}
|
||||
type="button"
|
||||
aria-label={`Show announcement ${i + 1}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setActiveIndex(i);
|
||||
}}
|
||||
className="size-1.5 rounded-full transition-opacity"
|
||||
style={{ backgroundColor: textColor, opacity: i === safeIndex ? 1 : 0.35 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dismiss-X only makes sense for a single active announcement —
|
||||
with multiple, the dialog's own close button (shadcn Dialog)
|
||||
is the way to close/step away, no per-item dismiss from the bar. */}
|
||||
{count <= 1 && (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== "Enter" && e.key !== " ") return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={detailsOpen} onOpenChange={setDetailsOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded shrink-0 ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-4 w-4" />
|
||||
</div>
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription asChild>
|
||||
<p className="whitespace-pre-wrap text-left pt-1 text-foreground">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Close</AlertDialogCancel>
|
||||
{linkUrl && (
|
||||
<AlertDialogAction onClick={openLink}>
|
||||
Open Link
|
||||
</AlertDialogAction>
|
||||
)}
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<AnnouncementCarouselDialog
|
||||
open={detailsOpen}
|
||||
onOpenChange={onDialogOpenChange}
|
||||
announcements={stickyAnnouncements}
|
||||
activeIndex={safeIndex}
|
||||
onIndexChange={setActiveIndex}
|
||||
resolveClickAction={resolveClickAction}
|
||||
navigate={navigate}
|
||||
bannerImage={bannerImage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { resolveAssetSrc } from "@/utils/media.util";
|
||||
|
||||
// Shared details view for the sticky announcement bar (client + admin
|
||||
// variants) — pages through every currently-active sticky announcement (max
|
||||
// 3, see notificationBroadcasts.controller.js's countActiveSticky) with a
|
||||
// segmented progress bar. bannerImage is ONE shared image for the whole set
|
||||
// (not per-announcement) — see NotificationBroadcastList.jsx's banner picker
|
||||
// and the sticky_banner_settings singleton.
|
||||
export default function AnnouncementCarouselDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
announcements,
|
||||
activeIndex,
|
||||
onIndexChange,
|
||||
resolveClickAction,
|
||||
navigate,
|
||||
bannerImage,
|
||||
}) {
|
||||
const current = announcements[activeIndex];
|
||||
if (!current) return null;
|
||||
|
||||
const clickAction = resolveClickAction(current);
|
||||
const imageSrc = resolveAssetSrc(bannerImage);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl p-0 overflow-hidden gap-0">
|
||||
<div className="grid sm:grid-cols-2">
|
||||
<div className="p-6 flex flex-col gap-3 min-w-0">
|
||||
<DialogHeader className="text-left">
|
||||
<DialogTitle className="text-lg">
|
||||
{current.title || "Announcement"}
|
||||
</DialogTitle>
|
||||
<DialogDescription asChild>
|
||||
<p className="whitespace-pre-wrap text-left text-foreground">
|
||||
{current.message || ""}
|
||||
</p>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-auto flex flex-col gap-2 pt-4">
|
||||
{clickAction && (
|
||||
<Button
|
||||
className="self-start"
|
||||
onClick={() => clickAction.go(navigate)}
|
||||
>
|
||||
{clickAction.label}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{announcements.length > 1 && (
|
||||
<div className="flex gap-1.5">
|
||||
{announcements.map((a, i) => (
|
||||
<button
|
||||
key={a.notification_id}
|
||||
type="button"
|
||||
aria-label={`Show announcement ${i + 1}`}
|
||||
onClick={() => onIndexChange(i)}
|
||||
className={[
|
||||
"h-1.5 flex-1 rounded-full transition-colors",
|
||||
i === activeIndex ? "bg-foreground" : "bg-muted-foreground/25 hover:bg-muted-foreground/40",
|
||||
].join(" ")}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="aspect-video sm:aspect-auto sm:h-96 bg-muted flex items-center justify-center overflow-hidden">
|
||||
{imageSrc ? (
|
||||
<img src={imageSrc} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">No image</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// components/blocks/Popup.jsx
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import ResponsiveModal from "@/components/generic/ResponsiveModal";
|
||||
import { resolveAssetSrc } from "@/utils/media.util";
|
||||
|
||||
// ── Popup ────────────────────────────────────────────────────────────────────
|
||||
/**
|
||||
* Generic popup advertisement block.
|
||||
* Modal-style placement shown on page load — wraps ResponsiveModal so it gets
|
||||
* dialog/drawer behavior for free. Caller owns the `open` state (typically set
|
||||
* to true once an active popup ad resolves from the API).
|
||||
*
|
||||
* Props:
|
||||
* ad — advertisement object { headline, description, ctas, image, image_url, advertisement_id }
|
||||
* open — boolean, modal visibility
|
||||
* onOpenChange — (open: boolean) => void
|
||||
* onCtaClick — (ad, cta) => void, called when a footer CTA button is clicked
|
||||
* onDismissForever — () => void, called when the user picks "Don't show this ad again"
|
||||
*/
|
||||
export function Popup({ ad, open, onOpenChange, onCtaClick, onDismissForever }) {
|
||||
if (!ad) return null;
|
||||
|
||||
const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
|
||||
const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
|
||||
|
||||
const handleDismissForever = () => {
|
||||
onOpenChange?.(false);
|
||||
onDismissForever?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<ResponsiveModal
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={ad.headline || "Announcement"}
|
||||
description={ad.description || undefined}
|
||||
footer={
|
||||
ctas.length > 0 ? (
|
||||
<>
|
||||
{ctas.map((cta, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
variant={cta.variant === "outline" ? "outline" : "default"}
|
||||
onClick={() => onCtaClick?.(ad, cta)}
|
||||
>
|
||||
{cta.label}
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{imageSrc && (
|
||||
<div className="rounded-lg bg-muted aspect-video flex items-center justify-center overflow-hidden pointer-events-none select-none">
|
||||
<img src={imageSrc} alt={ad.headline || "Advertisement"} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{onDismissForever && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDismissForever}
|
||||
className="w-fit justify-self-start rounded text-xs text-muted-foreground hover:text-foreground underline underline-offset-2 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
Don't show this ad again
|
||||
</button>
|
||||
)}
|
||||
</ResponsiveModal>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
// components/blocks/Sidebar.jsx
|
||||
|
||||
import { Megaphone } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { resolveAssetSrc } from "@/utils/media.util";
|
||||
|
||||
// ── Sidebar ──────────────────────────────────────────────────────────────────
|
||||
/**
|
||||
* Generic sidebar advertisement block.
|
||||
* Compact vertical card — image on top, optional short headline/description and
|
||||
* a single CTA below. Meant to sit in a narrow column (sidebars, rail layouts),
|
||||
* not stretch full-width like Hero/Banner.
|
||||
*
|
||||
* Props:
|
||||
* ad — advertisement object { headline, description, ctas, image, image_url, advertisement_id }
|
||||
* onCtaClick — (ad, cta) => void, called when the CTA button (or card, if no CTA) is clicked
|
||||
*/
|
||||
export function Sidebar({ ad, onCtaClick }) {
|
||||
if (!ad) return null;
|
||||
|
||||
const imageSrc = resolveAssetSrc(ad.image) || ad.image_url || null;
|
||||
const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
|
||||
const primaryCta = ctas[0];
|
||||
|
||||
const handleCardClick = () => {
|
||||
if (!primaryCta) onCtaClick?.(ad, undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full max-w-xs rounded-lg border bg-card overflow-hidden flex flex-col cursor-pointer"
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
<div className="aspect-square bg-muted flex items-center justify-center overflow-hidden pointer-events-none select-none">
|
||||
{imageSrc ? (
|
||||
<img src={imageSrc} alt={ad.headline || "Advertisement"} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<Megaphone className="size-6 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(ad.headline || ad.description || primaryCta) && (
|
||||
<div className="p-3 flex flex-col gap-1.5">
|
||||
{ad.headline && <p className="text-sm font-medium leading-snug pointer-events-none select-none">{ad.headline}</p>}
|
||||
{ad.description && <p className="text-xs text-muted-foreground line-clamp-2 pointer-events-none select-none">{ad.description}</p>}
|
||||
{primaryCta && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="mt-1 w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCtaClick?.(ad, primaryCta);
|
||||
}}
|
||||
>
|
||||
{primaryCta.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── SidebarSkeleton ──────────────────────────────────────────────────────────
|
||||
|
||||
export function SidebarSkeleton() {
|
||||
return (
|
||||
<div className="w-full max-w-xs rounded-lg border bg-card overflow-hidden flex flex-col">
|
||||
<Skeleton className="aspect-square w-full" />
|
||||
<div className="p-3 flex flex-col gap-1.5">
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-3 w-full" />
|
||||
<Skeleton className="h-8 w-full mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -32,7 +32,7 @@ const TARGET_CONFIGS = {
|
||||
},
|
||||
};
|
||||
|
||||
export function BroadcastTargetPicker({ targetType, value, onChange }) {
|
||||
export function BroadcastTargetPicker({ targetType, value, onChange, onLabelResolved }) {
|
||||
const config = TARGET_CONFIGS[targetType];
|
||||
|
||||
const [items, setItems] = useState([]);
|
||||
@@ -57,9 +57,17 @@ export function BroadcastTargetPicker({ targetType, value, onChange }) {
|
||||
return items.filter((item) => String(item[config.labelKey] ?? "").toLowerCase().includes(q));
|
||||
}, [items, query, config]);
|
||||
|
||||
if (!config) return null;
|
||||
const selected = config ? items.find((item) => String(item[config.idKey]) === String(value)) : undefined;
|
||||
|
||||
const selected = items.find((item) => String(item[config.idKey]) === String(value));
|
||||
// Lets the parent (Review step summaries, etc.) show the resolved name
|
||||
// instead of just the raw id — fires whenever the matched item changes,
|
||||
// including on initial load once the fetched list resolves `value`.
|
||||
useEffect(() => {
|
||||
onLabelResolved?.(selected ? selected[config.labelKey] : null);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selected]);
|
||||
|
||||
if (!config) return null;
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={(v) => { setOpen(v); if (!v) setQuery(""); }}>
|
||||
|
||||
@@ -15,14 +15,22 @@ const FIELD_DISPLAY_MAP = {
|
||||
const BOOLEAN_FIELDS = Object.keys(FIELD_DISPLAY_MAP);
|
||||
|
||||
// ─── Generic formatter ────────────────────────────────────────────────────────
|
||||
// Audit fields (createdBy/updatedBy/deletedBy) come back from the field-values
|
||||
// API as { value: user_id, label: full_name } — filtering has to select on the
|
||||
// id, but the sheet should still display the name. Every other field type
|
||||
// still hands this plain primitives, which pass through unchanged.
|
||||
const itemValue = (item) => (item && typeof item === "object" && "value" in item) ? item.value : item;
|
||||
const itemLabel = (item) => (item && typeof item === "object" && "label" in item) ? item.label : item;
|
||||
|
||||
const formatFilterItem = (item, field, type, fmtDate) => {
|
||||
const label = itemLabel(item);
|
||||
if (FIELD_DISPLAY_MAP[field]) {
|
||||
return FIELD_DISPLAY_MAP[field][String(item)] ?? item;
|
||||
return FIELD_DISPLAY_MAP[field][String(label)] ?? label;
|
||||
}
|
||||
if (type === "date" && item) {
|
||||
return fmtDate(item);
|
||||
if (type === "date" && label) {
|
||||
return fmtDate(label);
|
||||
}
|
||||
return item;
|
||||
return label;
|
||||
};
|
||||
|
||||
// ─── Reusable empty state ─────────────────────────────────────────────────────
|
||||
@@ -37,17 +45,20 @@ const FilterList = ({ items, field, type, selected, onToggle, inputType = "check
|
||||
const { fmtDate } = useDateFormat();
|
||||
if (items.length === 0) return <EmptyState />;
|
||||
|
||||
return items.map((item) => (
|
||||
<label key={item} className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input
|
||||
type={inputType}
|
||||
name={inputType === "radio" ? field : undefined}
|
||||
checked={selected.includes(String(item))}
|
||||
onChange={() => onToggle(item)}
|
||||
/>
|
||||
{formatFilterItem(item, field, type, fmtDate)}
|
||||
</label>
|
||||
));
|
||||
return items.map((item) => {
|
||||
const value = itemValue(item);
|
||||
return (
|
||||
<label key={value} className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input
|
||||
type={inputType}
|
||||
name={inputType === "radio" ? field : undefined}
|
||||
checked={selected.includes(String(value))}
|
||||
onChange={() => onToggle(value)}
|
||||
/>
|
||||
{formatFilterItem(item, field, type, fmtDate)}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
export function FilterSheet({ open, onOpenChange, column, attr, data = [], loading }) {
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog, AlertDialogAction, AlertDialogCancel,
|
||||
AlertDialogContent, AlertDialogDescription,
|
||||
AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useClientNotifications } from "@/contexts/ClientNotificationContext";
|
||||
import { NotificationIcon, getTypeAccent, resolveNotificationLink, resolveStickyStyle } from "@/components/generic/notificationDisplay";
|
||||
import { resolveNotificationLink } from "@/components/generic/notificationDisplay";
|
||||
import { getTierColor, getContrastText } from "@/utils/tierColors";
|
||||
import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
|
||||
|
||||
// Explicit link_url (from the admin "On Open" section) always wins. Falls back
|
||||
// to the type-based resolver for broadcasts sent before that field existed.
|
||||
const ROTATE_INTERVAL_MS = 6000;
|
||||
|
||||
// Explicit link_url (from the admin "On Open" section) always wins, using the
|
||||
// admin-authored button label when set. Falls back to the type-based resolver
|
||||
// for broadcasts sent before that field existed.
|
||||
function resolveClickAction(stickyAnnouncement) {
|
||||
const explicitUrl = stickyAnnouncement.data?.linkUrl || null;
|
||||
if (explicitUrl) {
|
||||
return {
|
||||
label: "Open Link",
|
||||
label: stickyAnnouncement.data?.linkLabel || "Open Link",
|
||||
go: (navigate) => (explicitUrl.startsWith("/")
|
||||
? navigate(explicitUrl)
|
||||
: window.open(explicitUrl, "_blank", "noopener,noreferrer")),
|
||||
@@ -27,99 +27,140 @@ function resolveClickAction(stickyAnnouncement) {
|
||||
|
||||
export default function StickyAnnouncementBar() {
|
||||
const navigate = useNavigate();
|
||||
const { stickyAnnouncement, markSeen } = useClientNotifications();
|
||||
const { stickyAnnouncements, bannerImage, markSeen } = useClientNotifications();
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
|
||||
const count = stickyAnnouncements.length;
|
||||
// Derived rather than clamped via effect — safe the instant the array
|
||||
// shrinks (e.g. after a dismiss), no render with a stale out-of-range index.
|
||||
const safeIndex = count ? Math.min(activeIndex, count - 1) : 0;
|
||||
|
||||
// Auto-rotate through active announcements while more than one is live.
|
||||
useEffect(() => {
|
||||
if (count <= 1) return;
|
||||
const id = setInterval(() => {
|
||||
setActiveIndex((i) => (i + 1) % count);
|
||||
}, ROTATE_INTERVAL_MS);
|
||||
return () => clearInterval(id);
|
||||
}, [count]);
|
||||
|
||||
const current = stickyAnnouncements[safeIndex];
|
||||
|
||||
const onDismiss = useCallback(async () => {
|
||||
if (!stickyAnnouncement) return;
|
||||
await markSeen(stickyAnnouncement.notification_id);
|
||||
}, [stickyAnnouncement, markSeen]);
|
||||
if (!current) return;
|
||||
await markSeen(current.notification_id);
|
||||
}, [current, markSeen]);
|
||||
|
||||
// Opening the dialog must NOT mark it seen — markSeen clears
|
||||
// stickyAnnouncement, which would unmount this component (dialog included)
|
||||
// before it ever shows. Only the X button dismisses/marks seen.
|
||||
// Opening the dialog must NOT mark it seen — markSeen removes the row from
|
||||
// stickyAnnouncements, which would unmount this component (dialog included)
|
||||
// before it ever shows.
|
||||
const onClickBanner = useCallback(() => {
|
||||
if (!stickyAnnouncement) return;
|
||||
if (!current) return;
|
||||
setDetailsOpen(true);
|
||||
}, [stickyAnnouncement]);
|
||||
}, [current]);
|
||||
|
||||
if (!stickyAnnouncement) return null;
|
||||
// Closing the details dialog (X, Escape, overlay click — any reason)
|
||||
// dismisses whichever announcement was being viewed at the time. This is
|
||||
// the only dismiss path when multiple are active (no per-item X on the bar
|
||||
// itself — see the count > 1 branch below).
|
||||
const onDialogOpenChange = useCallback((open) => {
|
||||
setDetailsOpen(open);
|
||||
if (!open) void onDismiss();
|
||||
}, [onDismiss]);
|
||||
|
||||
const accentClass = getTypeAccent(stickyAnnouncement.type);
|
||||
const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
|
||||
const clickAction = resolveClickAction(stickyAnnouncement);
|
||||
if (!current) return null;
|
||||
|
||||
const swatch = getTierColor(current.color || "indigo").swatch;
|
||||
const textColor = getContrastText(swatch, current.color || "indigo");
|
||||
const clickAction = resolveClickAction(current);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
role="status"
|
||||
className="w-full border-b shadow-sm px-4 md:px-6"
|
||||
>
|
||||
<div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
|
||||
<div
|
||||
onClick={onClickBanner}
|
||||
className="w-full cursor-pointer bg-card rounded-none py-3 flex items-center justify-between gap-4"
|
||||
style={inlineStyle ?? undefined}
|
||||
className="relative w-full cursor-pointer rounded-none py-3 flex items-center justify-center gap-4 px-10"
|
||||
>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate" style={{ color: textColor }}>
|
||||
{current.title || "Announcement"}
|
||||
</p>
|
||||
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate">
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-snug line-clamp-2">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</div>
|
||||
{clickAction && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="shrink-0 text-foreground"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
clickAction.go(navigate);
|
||||
}}
|
||||
>
|
||||
{clickAction.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
{count > 1 && (
|
||||
<div className="absolute right-2 flex items-center gap-1.5">
|
||||
{stickyAnnouncements.map((a, i) => (
|
||||
<button
|
||||
key={a.notification_id}
|
||||
type="button"
|
||||
aria-label={`Show announcement ${i + 1}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setActiveIndex(i);
|
||||
}}
|
||||
className="size-1.5 rounded-full transition-opacity"
|
||||
style={{ backgroundColor: textColor, opacity: i === safeIndex ? 1 : 0.35 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dismiss-X only makes sense for a single active announcement —
|
||||
with multiple, the dialog's own close button (shadcn Dialog)
|
||||
is the way to close/step away, no per-item dismiss from the bar. */}
|
||||
{count <= 1 && (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== "Enter" && e.key !== " ") return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full-content view — plain text info, or with an Open Link action
|
||||
when the announcement was created with a link (see AddNotificationBroadcast's
|
||||
"On Open" section). */}
|
||||
<AlertDialog open={detailsOpen} onOpenChange={setDetailsOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded shrink-0 ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-4 w-4" />
|
||||
</div>
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription asChild>
|
||||
<p className="whitespace-pre-wrap text-left pt-1 text-foreground">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Close</AlertDialogCancel>
|
||||
{clickAction && (
|
||||
<AlertDialogAction onClick={() => clickAction.go(navigate)}>
|
||||
{clickAction.label}
|
||||
</AlertDialogAction>
|
||||
)}
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<AnnouncementCarouselDialog
|
||||
open={detailsOpen}
|
||||
onOpenChange={onDialogOpenChange}
|
||||
announcements={stickyAnnouncements}
|
||||
activeIndex={safeIndex}
|
||||
onIndexChange={setActiveIndex}
|
||||
resolveClickAction={resolveClickAction}
|
||||
navigate={navigate}
|
||||
bannerImage={bannerImage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -97,6 +97,15 @@ export default function DataTable({
|
||||
const handleOpenFilterSheet = async (e, column, attr) => {
|
||||
e.preventDefault();
|
||||
setActiveColumn(null);
|
||||
|
||||
// Enum/boolean columns already carry their full value set in
|
||||
// attr.options.choices (see FilterSheet.jsx's sourceData) — hitting
|
||||
// the field-values endpoint for them is a wasted round-trip.
|
||||
if (attr?.type === "enum") {
|
||||
setFilterState({ open: true, column, attr, data: [] });
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await onFetchFilterData(attr.field);
|
||||
setFilterState({ open: true, column, attr, data });
|
||||
};
|
||||
|
||||
@@ -22,26 +22,6 @@ const TYPE_ACCENT = {
|
||||
assessment: "bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400",
|
||||
};
|
||||
|
||||
// Shared by StickyAnnouncementBar (client) and AdminStickyAnnouncementBar —
|
||||
// supports multiple possible admin-authored shapes without tightly coupling
|
||||
// to one admin UI.
|
||||
export function resolveStickyStyle(data) {
|
||||
const style = data?.sticky_style ?? data?.stickyStyle ?? data?.stickyColors ?? data?.colors ?? null;
|
||||
if (!style) return null;
|
||||
|
||||
const background = style.background ?? style.bg ?? style.backgroundColor ?? null;
|
||||
const text = style.text ?? style.color ?? style.foreground ?? null;
|
||||
const border = style.border ?? style.borderColor ?? null;
|
||||
|
||||
if (!background && !text && !border) return null;
|
||||
|
||||
return {
|
||||
...(background ? { backgroundColor: background } : null),
|
||||
...(text ? { color: text } : null),
|
||||
...(border ? { borderColor: border } : null),
|
||||
};
|
||||
}
|
||||
|
||||
export function NotificationIcon({ type, className }) {
|
||||
const Icon = TYPE_ICON[type] ?? Bell;
|
||||
return <Icon className={cn("shrink-0", className)} />;
|
||||
|
||||
Reference in New Issue
Block a user