732 lines
27 KiB
TypeScript
732 lines
27 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
Paper,
|
||
Typography,
|
||
Menu,
|
||
MenuItem,
|
||
TextField,
|
||
} from "@mui/material";
|
||
import {
|
||
BackButton,
|
||
createSightStore,
|
||
editSightStore,
|
||
languageStore,
|
||
SelectArticleModal,
|
||
TabPanel,
|
||
SelectMediaDialog,
|
||
UploadMediaDialog,
|
||
Media,
|
||
} from "@shared";
|
||
import {
|
||
LanguageSwitcher,
|
||
MediaArea,
|
||
MediaAreaForSight,
|
||
ReactMarkdownComponent,
|
||
ReactMarkdownEditor,
|
||
DeleteModal,
|
||
} from "@widgets";
|
||
import { ImagePlus, Plus, Save, Trash2, Unlink, X } from "lucide-react";
|
||
import { observer } from "mobx-react-lite";
|
||
import { useState, useEffect } from "react";
|
||
import { MediaViewer } from "../../MediaViewer/index";
|
||
import { toast } from "react-toastify";
|
||
import { authInstance } from "@shared";
|
||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||
|
||
type MediaItemShared = {
|
||
id: string;
|
||
filename: string;
|
||
media_name?: string;
|
||
media_type: number;
|
||
};
|
||
|
||
export const CreateRightTab = observer(
|
||
({ value, index }: { value: number; index: number }) => {
|
||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||
const {
|
||
sight,
|
||
createNewRightArticle,
|
||
updateRightArticleInfo,
|
||
linkPreviewMedia,
|
||
unlinkPreviewMedia,
|
||
createLinkWithRightArticle,
|
||
deleteRightArticleMedia,
|
||
unlinkRightAritcle,
|
||
deleteRightArticle,
|
||
linkExistingRightArticle,
|
||
createSight,
|
||
clearCreateSight,
|
||
updateRightArticles,
|
||
} = createSightStore;
|
||
const { language } = languageStore;
|
||
const { setFileToUpload, setUploadMediaOpen, uploadMediaOpen } =
|
||
editSightStore;
|
||
|
||
const [selectArticleDialogOpen, setSelectArticleDialogOpen] =
|
||
useState(false);
|
||
const [activeArticleIndex, setActiveArticleIndex] = useState<number | null>(
|
||
null
|
||
);
|
||
const [type, setType] = useState<"article" | "media">("media");
|
||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||
const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
|
||
useState(false);
|
||
const [mediaTarget, setMediaTarget] = useState<
|
||
"sightPreview" | "rightArticle" | null
|
||
>(null);
|
||
|
||
const [previewMedia, setPreviewMedia] = useState<Media | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (sight.preview_media) {
|
||
const fetchMedia = async () => {
|
||
const response = await authInstance.get(
|
||
`/media/${sight.preview_media}`
|
||
);
|
||
setPreviewMedia(response.data);
|
||
};
|
||
fetchMedia();
|
||
}
|
||
}, [sight.preview_media]);
|
||
|
||
useEffect(() => {
|
||
if (
|
||
activeArticleIndex !== null &&
|
||
activeArticleIndex >= sight[language].right.length
|
||
) {
|
||
setActiveArticleIndex(null);
|
||
setType("media");
|
||
}
|
||
}, [language, sight[language].right, activeArticleIndex]);
|
||
|
||
const openMenu = Boolean(anchorEl);
|
||
const handleClickMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||
setAnchorEl(event.currentTarget);
|
||
};
|
||
const handleCloseMenu = () => {
|
||
setAnchorEl(null);
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
await createSight(language);
|
||
toast.success("Достопримечательность успешно создана!");
|
||
clearCreateSight();
|
||
setActiveArticleIndex(null);
|
||
setType("media");
|
||
} catch (error) {
|
||
console.error("Failed to save sight:", error);
|
||
toast.error("Ошибка при создании достопримечательности.");
|
||
}
|
||
};
|
||
|
||
const handleDisplayArticleFromList = (idx: number) => {
|
||
setActiveArticleIndex(idx);
|
||
setType("article");
|
||
};
|
||
|
||
const handleCreateNewLocalArticle = async () => {
|
||
handleCloseMenu();
|
||
try {
|
||
const newArticleId = await createNewRightArticle();
|
||
|
||
const newIndex = sight[language].right.findIndex(
|
||
(a) => a.id === newArticleId
|
||
);
|
||
if (newIndex > -1) {
|
||
setActiveArticleIndex(newIndex);
|
||
setType("article");
|
||
} else {
|
||
setActiveArticleIndex(sight[language].right.length - 1);
|
||
setType("article");
|
||
}
|
||
} catch (error) {
|
||
toast.error("Не удалось создать новую статью.");
|
||
}
|
||
};
|
||
|
||
const handleSelectExistingArticleAndLink = async (
|
||
selectedArticleId: number
|
||
) => {
|
||
try {
|
||
const linkedArticleId = await linkExistingRightArticle(
|
||
selectedArticleId
|
||
);
|
||
setSelectArticleDialogOpen(false);
|
||
const newIndex = sight[language].right.findIndex(
|
||
(a) => a.id === linkedArticleId
|
||
);
|
||
if (newIndex > -1) {
|
||
setActiveArticleIndex(newIndex);
|
||
setType("article");
|
||
}
|
||
} catch (error) {
|
||
toast.error("Не удалось привязать существующую статью.");
|
||
}
|
||
};
|
||
|
||
const currentRightArticle =
|
||
activeArticleIndex !== null && sight[language].right[activeArticleIndex]
|
||
? sight[language].right[activeArticleIndex]
|
||
: null;
|
||
|
||
const handleOpenUploadMedia = () => {
|
||
setUploadMediaOpen(true);
|
||
};
|
||
|
||
const handleOpenSelectMediaDialog = (
|
||
target: "sightPreview" | "rightArticle"
|
||
) => {
|
||
setMediaTarget(target);
|
||
setIsSelectMediaDialogOpen(true);
|
||
};
|
||
|
||
const handleMediaSelectedFromDialog = async (media: MediaItemShared) => {
|
||
setIsSelectMediaDialogOpen(false);
|
||
|
||
if (mediaTarget === "sightPreview") {
|
||
await linkPreviewMedia(media.id);
|
||
} else if (mediaTarget === "rightArticle" && currentRightArticle) {
|
||
await createLinkWithRightArticle(media, currentRightArticle.id);
|
||
}
|
||
setMediaTarget(null);
|
||
};
|
||
|
||
const handleUnlinkPreviewMedia = async () => {
|
||
await unlinkPreviewMedia();
|
||
setPreviewMedia(null);
|
||
};
|
||
|
||
const handleMediaUploaded = async (media: MediaItemShared) => {
|
||
setUploadMediaOpen(false);
|
||
setFileToUpload(null);
|
||
if (mediaTarget === "sightPreview") {
|
||
linkPreviewMedia(media.id);
|
||
} else if (mediaTarget === "rightArticle" && currentRightArticle) {
|
||
await createLinkWithRightArticle(media, currentRightArticle.id);
|
||
}
|
||
setMediaTarget(null);
|
||
};
|
||
|
||
const handleDragEnd = (result: any) => {
|
||
const { source, destination } = result;
|
||
|
||
if (!destination) return;
|
||
|
||
const sourceIndex = source.index;
|
||
const destinationIndex = destination.index;
|
||
|
||
if (sourceIndex === destinationIndex) return;
|
||
|
||
const newRightArticles = [...sight[language].right];
|
||
|
||
const [movedArticle] = newRightArticles.splice(sourceIndex, 1);
|
||
|
||
newRightArticles.splice(destinationIndex, 0, movedArticle);
|
||
|
||
updateRightArticles(newRightArticles);
|
||
};
|
||
|
||
return (
|
||
<TabPanel value={value} index={index}>
|
||
<LanguageSwitcher />
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
height: "100%",
|
||
minHeight: "calc(100vh - 200px)",
|
||
gap: 2,
|
||
paddingBottom: "70px",
|
||
position: "relative",
|
||
}}
|
||
>
|
||
<div className="flex gap-10 items-center mb-5 max-w-[80%]">
|
||
<BackButton />
|
||
<h1 className="text-3xl break-words">{sight[language].name}</h1>
|
||
</div>
|
||
|
||
<Box sx={{ display: "flex", flexGrow: 1, gap: 2.5 }}>
|
||
<Box className="flex flex-col w-[75%] gap-2">
|
||
<Box className="w-full flex gap-2 ">
|
||
<Box className="relative w-[20%] h-[70vh] flex flex-col rounded-2xl overflow-y-auto gap-3 border border-gray-300 p-3">
|
||
<Box className="flex flex-col gap-3 max-h-[60vh] overflow-y-auto">
|
||
<Box
|
||
onClick={() => {
|
||
setType("media");
|
||
}}
|
||
className={`w-full p-4 rounded-2xl cursor-pointer text-sm hover:bg-gray-300 transition-all duration-300 ${
|
||
type === "media"
|
||
? "bg-green-300 font-semibold"
|
||
: "bg-green-200"
|
||
}`}
|
||
>
|
||
<Typography>Предпросмотр медиа</Typography>
|
||
</Box>
|
||
<Box>
|
||
<DragDropContext onDragEnd={handleDragEnd}>
|
||
<Droppable droppableId="articles">
|
||
{(provided) => (
|
||
<Box
|
||
ref={provided.innerRef}
|
||
{...provided.droppableProps}
|
||
className="flex flex-col gap-2"
|
||
>
|
||
{sight[language].right.length > 0
|
||
? sight[language].right.map(
|
||
(article, index) => (
|
||
<Draggable
|
||
key={article.id.toString()}
|
||
draggableId={article.id.toString()}
|
||
index={index}
|
||
>
|
||
{(provided, snapshot) => (
|
||
<Box
|
||
ref={provided.innerRef}
|
||
{...provided.draggableProps}
|
||
className={`w-full bg-gray-200 p-4 rounded-2xl text-sm cursor-pointer hover:bg-gray-300 ${
|
||
snapshot.isDragging
|
||
? "shadow-lg"
|
||
: ""
|
||
}`}
|
||
onClick={() => {
|
||
handleDisplayArticleFromList(
|
||
index
|
||
);
|
||
setType("article");
|
||
}}
|
||
>
|
||
<Box {...provided.dragHandleProps}>
|
||
<Typography>
|
||
{article.heading}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</Draggable>
|
||
)
|
||
)
|
||
: null}
|
||
{provided.placeholder}
|
||
</Box>
|
||
)}
|
||
</Droppable>
|
||
</DragDropContext>
|
||
</Box>
|
||
</Box>
|
||
<button
|
||
className="w-10 h-10 bg-blue-500 rounded-full absolute bottom-5 left-5 flex items-center justify-center hover:bg-blue-600"
|
||
onClick={handleClickMenu}
|
||
aria-controls={openMenu ? "add-article-menu" : undefined}
|
||
aria-haspopup="true"
|
||
aria-expanded={openMenu ? "true" : undefined}
|
||
>
|
||
<Plus size={20} color="white" />
|
||
</button>
|
||
<Menu
|
||
id="add-article-menu"
|
||
anchorEl={anchorEl}
|
||
open={openMenu}
|
||
onClose={handleCloseMenu}
|
||
MenuListProps={{ "aria-labelledby": "basic-button" }}
|
||
sx={{ mt: 1 }}
|
||
>
|
||
<MenuItem onClick={handleCreateNewLocalArticle}>
|
||
<Typography>Создать новую</Typography>
|
||
</MenuItem>
|
||
<MenuItem
|
||
onClick={() => {
|
||
setSelectArticleDialogOpen(true);
|
||
handleCloseMenu();
|
||
}}
|
||
>
|
||
<Typography>Выбрать существующую статью</Typography>
|
||
</MenuItem>
|
||
</Menu>
|
||
</Box>
|
||
|
||
{type === "article" && currentRightArticle ? (
|
||
<Box className="w-[80%] border border-gray-300 p-3 flex flex-col gap-2 overflow-hidden">
|
||
<Box className="flex justify-end gap-2 mb-1 flex-shrink-0">
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
size="small"
|
||
startIcon={<Unlink color="white" size={18} />}
|
||
onClick={() => {
|
||
if (currentRightArticle) {
|
||
unlinkRightAritcle(currentRightArticle.id);
|
||
setActiveArticleIndex(null);
|
||
setType("media");
|
||
}
|
||
}}
|
||
>
|
||
Открепить
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
color="error"
|
||
size="small"
|
||
startIcon={<Trash2 size={18} />}
|
||
onClick={async () => {
|
||
setIsDeleteModalOpen(true);
|
||
}}
|
||
>
|
||
Удалить
|
||
</Button>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
flexGrow: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 2,
|
||
overflowY: "auto",
|
||
pt: 7,
|
||
}}
|
||
>
|
||
<TextField
|
||
label="Название информации (правый виджет)"
|
||
value={currentRightArticle.heading}
|
||
onChange={(e) =>
|
||
activeArticleIndex !== null &&
|
||
updateRightArticleInfo(
|
||
activeArticleIndex,
|
||
language,
|
||
e.target.value,
|
||
currentRightArticle.body
|
||
)
|
||
}
|
||
variant="outlined"
|
||
fullWidth
|
||
/>
|
||
<Box sx={{ minHeight: 200, flexGrow: 1 }}>
|
||
<ReactMarkdownEditor
|
||
value={currentRightArticle.body}
|
||
onChange={(mdValue: any) =>
|
||
activeArticleIndex !== null &&
|
||
updateRightArticleInfo(
|
||
activeArticleIndex,
|
||
language,
|
||
currentRightArticle.heading,
|
||
mdValue || ""
|
||
)
|
||
}
|
||
/>
|
||
</Box>
|
||
<MediaArea
|
||
articleId={currentRightArticle.id}
|
||
mediaIds={currentRightArticle.media || []}
|
||
onFilesDrop={(files) => {
|
||
if (files.length > 0) {
|
||
setFileToUpload(files[0]);
|
||
setMediaTarget("rightArticle");
|
||
handleOpenUploadMedia();
|
||
}
|
||
}}
|
||
deleteMedia={deleteRightArticleMedia}
|
||
setSelectMediaDialogOpen={() =>
|
||
handleOpenSelectMediaDialog("rightArticle")
|
||
}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
) : type === "media" ? (
|
||
<Box className="w-[80%] border border-gray-300 rounded-2xl relative flex items-center justify-center">
|
||
<>
|
||
{type === "media" && (
|
||
<Box className="w-[80%] h-full rounded-2xl relative flex items-center justify-center">
|
||
{previewMedia && (
|
||
<>
|
||
<Box className="absolute top-4 right-4 z-10">
|
||
<button
|
||
className="w-10 h-10 flex items-center justify-center z-10"
|
||
onClick={handleUnlinkPreviewMedia}
|
||
>
|
||
<X size={20} color="red" />
|
||
</button>
|
||
</Box>
|
||
|
||
<Box className="w-1/2 h-1/2">
|
||
<MediaViewer
|
||
media={{
|
||
id: previewMedia.id || "",
|
||
media_type: previewMedia.media_type,
|
||
filename: previewMedia.filename || "",
|
||
}}
|
||
fullWidth
|
||
fullHeight
|
||
/>
|
||
</Box>
|
||
</>
|
||
)}
|
||
|
||
{!previewMedia && (
|
||
<Box className="w-full h-full flex justify-center items-center">
|
||
<Box
|
||
sx={{
|
||
maxWidth: "500px",
|
||
maxHeight: "100%",
|
||
display: "flex",
|
||
flexGrow: 1,
|
||
margin: "0 auto",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<MediaAreaForSight
|
||
onFinishUpload={(mediaId) => {
|
||
linkPreviewMedia(mediaId);
|
||
}}
|
||
onFilesDrop={() => {}}
|
||
contextObjectName={sight[language].name}
|
||
contextType="sight"
|
||
isArticle={false}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
)}
|
||
</>
|
||
</Box>
|
||
) : (
|
||
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 flex justify-center items-center">
|
||
<Typography variant="h6" color="text.secondary">
|
||
Выберите статью слева или секцию "Предпросмотр медиа"
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box className="w-[25%] mr-10">
|
||
{type === "article" && activeArticleIndex !== null && (
|
||
<Paper
|
||
className="flex-1 flex flex-col max-w-[500px]"
|
||
sx={{
|
||
borderRadius: "10px",
|
||
overflow: "hidden",
|
||
}}
|
||
elevation={2}
|
||
>
|
||
<Box
|
||
className=" overflow-hidden"
|
||
sx={{
|
||
width: "100%",
|
||
height: "100%",
|
||
overflow: "hidden",
|
||
background: "#877361",
|
||
borderColor: "grey.300",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
{sight[language].right[activeArticleIndex].media.length >
|
||
0 ? (
|
||
<Box
|
||
sx={{
|
||
overflow: "hidden",
|
||
width: "100%",
|
||
padding: "2px 2px 0px 2px",
|
||
|
||
"& img": {
|
||
borderTopLeftRadius: "10px",
|
||
borderTopRightRadius: "10px",
|
||
width: "100%",
|
||
height: "auto",
|
||
},
|
||
}}
|
||
>
|
||
<MediaViewer
|
||
media={
|
||
sight[language].right[activeArticleIndex].media[0]
|
||
}
|
||
fullWidth
|
||
fullHeight
|
||
/>
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
height: 200,
|
||
flexShrink: 0,
|
||
|
||
backgroundColor: "rgba(0,0,0,0.1)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<ImagePlus size={48} color="white" />
|
||
</Box>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
p: 1,
|
||
wordBreak: "break-word",
|
||
fontSize: "24px",
|
||
fontWeight: 700,
|
||
lineHeight: "120%",
|
||
backdropFilter: "blur(12px)",
|
||
borderBottom: "1px solid #A89F90",
|
||
boxShadow:
|
||
"inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
}}
|
||
>
|
||
<Typography variant="h6" color="white">
|
||
{sight[language].right[activeArticleIndex].heading ||
|
||
"Выберите статью"}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
padding: 1,
|
||
minHeight: "200px",
|
||
maxHeight: "300px",
|
||
overflowY: "auto",
|
||
"&::-webkit-scrollbar": {
|
||
display: "none",
|
||
},
|
||
"&": {
|
||
scrollbarWidth: "none",
|
||
},
|
||
background:
|
||
"rgba(179, 165, 152, 0.4), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%)",
|
||
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
{sight[language].right[activeArticleIndex].body ? (
|
||
<ReactMarkdownComponent
|
||
value={sight[language].right[activeArticleIndex].body}
|
||
/>
|
||
) : (
|
||
<Typography
|
||
color="rgba(255,255,255,0.7)"
|
||
sx={{ textAlign: "center", mt: 4 }}
|
||
>
|
||
Предпросмотр статьи появится здесь
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
p: 2,
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
fontSize: "24px",
|
||
fontWeight: 700,
|
||
lineHeight: "120%",
|
||
flexWrap: "wrap",
|
||
|
||
gap: 1,
|
||
backdropFilter: "blur(12px)",
|
||
boxShadow:
|
||
"inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
}}
|
||
>
|
||
{sight[language].right.length > 0 &&
|
||
sight[language].right.map((article, index) => (
|
||
<button
|
||
className={`inline-block text-left text-xs text-white ${
|
||
activeArticleIndex === index ? "underline" : ""
|
||
}`}
|
||
onClick={() => {
|
||
setActiveArticleIndex(index);
|
||
setType("article");
|
||
}}
|
||
>
|
||
{article.heading}
|
||
</button>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
</Paper>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
position: "absolute",
|
||
bottom: "-20px",
|
||
left: 0,
|
||
right: 0,
|
||
padding: 2,
|
||
backgroundColor: "background.paper",
|
||
|
||
width: "100%",
|
||
display: "flex",
|
||
justifyContent: "flex-end",
|
||
}}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
color="success"
|
||
onClick={handleSave}
|
||
size="large"
|
||
startIcon={<Save color="white" size={18} />}
|
||
>
|
||
Сохранить
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
<SelectArticleModal
|
||
open={selectArticleDialogOpen}
|
||
onClose={() => setSelectArticleDialogOpen(false)}
|
||
onSelectArticle={handleSelectExistingArticleAndLink}
|
||
linkedArticleIds={sight[language].right.map((article) => article.id)}
|
||
/>
|
||
<UploadMediaDialog
|
||
open={uploadMediaOpen}
|
||
onClose={() => {
|
||
setUploadMediaOpen(false);
|
||
setFileToUpload(null);
|
||
setMediaTarget(null);
|
||
}}
|
||
contextObjectName={sight[language].name}
|
||
contextType="sight"
|
||
isArticle={mediaTarget === "rightArticle"}
|
||
articleName={
|
||
mediaTarget === "rightArticle" && activeArticleIndex !== null
|
||
? sight[language].right[activeArticleIndex].heading
|
||
: undefined
|
||
}
|
||
afterUpload={handleMediaUploaded}
|
||
/>
|
||
<SelectMediaDialog
|
||
open={isSelectMediaDialogOpen}
|
||
onClose={() => {
|
||
setIsSelectMediaDialogOpen(false);
|
||
setMediaTarget(null);
|
||
}}
|
||
onSelectMedia={handleMediaSelectedFromDialog}
|
||
/>
|
||
<DeleteModal
|
||
open={isDeleteModalOpen}
|
||
onDelete={async () => {
|
||
try {
|
||
await deleteRightArticle(currentRightArticle?.id || 0);
|
||
setActiveArticleIndex(null);
|
||
setType("media");
|
||
toast.success("Статья удалена");
|
||
} catch {
|
||
toast.error("Не удалось удалить статью");
|
||
}
|
||
}}
|
||
onCancel={() => setIsDeleteModalOpen(false)}
|
||
/>
|
||
</TabPanel>
|
||
);
|
||
}
|
||
);
|