analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
162 lines (160 loc) • 7.28 kB
JavaScript
import {
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
Table_default
} from "./chunk-66F2QDAX.mjs";
import {
Badge_default
} from "./chunk-OEW3ST4F.mjs";
import {
Divider_default
} from "./chunk-VN4ORBHU.mjs";
import {
Modal_default
} from "./chunk-TNLGS7SB.mjs";
import {
Button_default
} from "./chunk-LAYB7IKW.mjs";
import {
Text_default
} from "./chunk-IMCIR6TJ.mjs";
// src/components/AlertManagerView/AlertsManagerView.tsx
import { CaretLeftIcon } from "@phosphor-icons/react/dist/csr/CaretLeft";
import { CaretRightIcon } from "@phosphor-icons/react/dist/csr/CaretRight";
import { UserIcon } from "@phosphor-icons/react/dist/csr/User";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var AlertsManagerView = ({
alertData,
isOpen = false,
onClose,
imageLink,
defaultImage,
currentPage = 1,
totalPages: externalTotalPages,
onPageChange,
itemsPerPage = 10
}) => {
const totalPages = externalTotalPages ?? Math.ceil(alertData.recipients.length / itemsPerPage);
const effectiveCurrentPage = Math.min(totalPages, Math.max(1, currentPage));
const startIndex = (effectiveCurrentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedRecipients = alertData.recipients.slice(startIndex, endIndex);
const handleClose = () => {
onClose?.();
};
const formatDate = (dateInput) => {
const date = dateInput instanceof Date ? dateInput : new Date(dateInput);
if (Number.isNaN(date.getTime())) return String(dateInput);
return date.toLocaleDateString("pt-BR", {
day: "2-digit",
month: "2-digit",
year: "numeric"
});
};
return /* @__PURE__ */ jsx(
Modal_default,
{
isOpen,
onClose: handleClose,
title: alertData.title,
size: "md",
contentClassName: "p-0",
children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
/* @__PURE__ */ jsxs("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
(imageLink || alertData.image || defaultImage) && /* @__PURE__ */ jsx(
"img",
{
src: imageLink || alertData.image || defaultImage || void 0,
alt: alertData.title || "Imagem do alerta"
}
),
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-3", children: [
/* @__PURE__ */ jsx(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
/* @__PURE__ */ jsx(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
] })
] }),
/* @__PURE__ */ jsx(Divider_default, { className: "my-4" }),
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4 px-2", children: [
/* @__PURE__ */ jsx(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
/* @__PURE__ */ jsx(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
] }),
/* @__PURE__ */ jsx(Divider_default, { className: "my-4" }),
/* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxs(Table_default, { variant: "borderless", className: "table-fixed", children: [
/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { variant: "borderless", children: [
/* @__PURE__ */ jsx(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
/* @__PURE__ */ jsx(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
] }) }),
/* @__PURE__ */ jsx(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ jsxs(TableRow, { children: [
/* @__PURE__ */ jsxs(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
/* @__PURE__ */ jsx("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(UserIcon, { className: "text-primary-950", size: 18 }) }),
recipient.name
] }),
/* @__PURE__ */ jsx(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ jsx(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ jsx(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
] }, recipient.id)) })
] }) }),
totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
/* @__PURE__ */ jsxs(Text_default, { size: "sm", className: "text-text-600", children: [
"P\xE1gina ",
effectiveCurrentPage,
" de ",
totalPages
] }),
/* @__PURE__ */ jsx("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Button_default,
{
variant: "link",
size: "extra-small",
onClick: () => onPageChange(Math.max(1, effectiveCurrentPage - 1)),
disabled: effectiveCurrentPage === 1,
iconLeft: /* @__PURE__ */ jsx(CaretLeftIcon, {}),
children: "Anterior"
}
),
/* @__PURE__ */ jsx(
Button_default,
{
variant: "link",
size: "extra-small",
onClick: () => onPageChange(
Math.min(totalPages, effectiveCurrentPage + 1)
),
disabled: effectiveCurrentPage === totalPages,
iconRight: /* @__PURE__ */ jsx(CaretRightIcon, {}),
children: "Pr\xF3ximo"
}
)
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Button_default,
{
variant: "link",
size: "extra-small",
disabled: effectiveCurrentPage === 1,
iconLeft: /* @__PURE__ */ jsx(CaretLeftIcon, {}),
children: "Anterior"
}
),
/* @__PURE__ */ jsx(
Button_default,
{
variant: "link",
size: "extra-small",
disabled: effectiveCurrentPage === totalPages,
iconRight: /* @__PURE__ */ jsx(CaretRightIcon, {}),
children: "Pr\xF3ximo"
}
)
] }) })
] })
] }) })
}
);
};
export {
AlertsManagerView
};
//# sourceMappingURL=chunk-E6EPC3CR.mjs.map