510 lines
18 KiB
TypeScript
510 lines
18 KiB
TypeScript
import { Box, Button, TextField, Paper, Typography } from "@mui/material";
|
||
import {
|
||
BackButton,
|
||
TabPanel,
|
||
languageStore,
|
||
SelectMediaDialog,
|
||
editSightStore,
|
||
createSightStore,
|
||
SelectArticleModal,
|
||
UploadMediaDialog,
|
||
Language,
|
||
} from "@shared";
|
||
import {
|
||
LanguageSwitcher,
|
||
MediaArea,
|
||
ReactMarkdownComponent,
|
||
ReactMarkdownEditor,
|
||
MediaViewer,
|
||
DeleteModal,
|
||
} from "@widgets";
|
||
import { Trash2, ImagePlus, Unlink, Plus, Save, Search } from "lucide-react";
|
||
import { useState, useCallback } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { observer } from "mobx-react-lite";
|
||
import { toast } from "react-toastify";
|
||
|
||
export const CreateLeftTab = observer(
|
||
({ value, index }: { value: number; index: number }) => {
|
||
const {
|
||
sight,
|
||
updateSightInfo,
|
||
updateLeftArticle,
|
||
createSight,
|
||
deleteLeftArticle,
|
||
createLeftArticle,
|
||
unlinkLeftArticle,
|
||
createLinkWithLeftArticle,
|
||
} = createSightStore;
|
||
const {
|
||
deleteMedia,
|
||
setFileToUpload,
|
||
uploadMediaOpen,
|
||
setUploadMediaOpen,
|
||
} = editSightStore;
|
||
const navigate = useNavigate();
|
||
|
||
const { language } = languageStore;
|
||
const token = localStorage.getItem("token");
|
||
const [isSelectArticleDialogOpen, setIsSelectArticleDialogOpen] =
|
||
useState(false);
|
||
const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
|
||
useState(false);
|
||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||
|
||
const handleCloseArticleDialog = useCallback(() => {
|
||
setIsSelectArticleDialogOpen(false);
|
||
}, []);
|
||
|
||
const handleCloseMediaDialog = useCallback(() => {
|
||
setIsSelectMediaDialogOpen(false);
|
||
}, []);
|
||
|
||
const handleMediaSelected = useCallback(
|
||
async (media: {
|
||
id: string;
|
||
filename: string;
|
||
media_name?: string;
|
||
media_type: number;
|
||
}) => {
|
||
await createLinkWithLeftArticle(media);
|
||
setIsSelectMediaDialogOpen(false);
|
||
},
|
||
[createLinkWithLeftArticle]
|
||
);
|
||
|
||
const handleArticleSelect = useCallback(
|
||
(articleId: number) => {
|
||
updateLeftArticle(articleId);
|
||
},
|
||
[updateLeftArticle]
|
||
);
|
||
|
||
return (
|
||
<TabPanel value={value} index={index}>
|
||
<LanguageSwitcher />
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 3,
|
||
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.replace(/\n/g, " ")}</h1>
|
||
</div>
|
||
<Paper
|
||
elevation={2}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
paddingX: 2.5,
|
||
paddingY: 1.5,
|
||
borderRadius: 2,
|
||
border: "1px solid",
|
||
borderColor: "divider",
|
||
}}
|
||
>
|
||
<Typography variant="h6">Левая статья</Typography>
|
||
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||
{sight.left_article ? (
|
||
<>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
size="small"
|
||
style={{ transition: "0" }}
|
||
startIcon={<Unlink size={18} />}
|
||
onClick={() => {
|
||
unlinkLeftArticle();
|
||
toast.success("Статья откреплена");
|
||
}}
|
||
>
|
||
Открепить
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
color="error"
|
||
style={{ transition: "0" }}
|
||
startIcon={<Trash2 size={18} />}
|
||
size="small"
|
||
onClick={() => setIsDeleteModalOpen(true)}
|
||
>
|
||
Удалить
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
size="small"
|
||
startIcon={<Search color="white" size={18} />}
|
||
onClick={() => setIsSelectArticleDialogOpen(true)}
|
||
>
|
||
Выбрать статью
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
size="small"
|
||
startIcon={<Plus color="white" size={18} />}
|
||
style={{ transition: "0" }}
|
||
onClick={createLeftArticle}
|
||
>
|
||
Создать статью
|
||
</Button>
|
||
</>
|
||
)}
|
||
</Box>
|
||
</Paper>
|
||
{sight.left_article > 0 && (
|
||
<>
|
||
<Box sx={{ display: "flex", gap: 3, flexGrow: 1 }}>
|
||
{/* Левая колонка: Редактирование */}
|
||
|
||
<Box
|
||
sx={{
|
||
flex: 2,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<TextField
|
||
label="Название информации"
|
||
value={sight[language].left.heading}
|
||
onChange={(e) =>
|
||
updateSightInfo(
|
||
{
|
||
left: {
|
||
heading: e.target.value,
|
||
body: sight[language].left.body,
|
||
media: sight[language].left.media,
|
||
},
|
||
},
|
||
language
|
||
)
|
||
}
|
||
variant="outlined"
|
||
fullWidth
|
||
/>
|
||
|
||
<ReactMarkdownEditor
|
||
value={sight[language].left.body}
|
||
onChange={(value: any) =>
|
||
updateSightInfo(
|
||
{
|
||
left: {
|
||
heading: sight[language].left.heading,
|
||
body: value,
|
||
media: sight[language].left.media,
|
||
},
|
||
},
|
||
language
|
||
)
|
||
}
|
||
/>
|
||
|
||
<MediaArea
|
||
articleId={sight.left_article}
|
||
mediaIds={sight[language].left.media}
|
||
deleteMedia={deleteMedia}
|
||
setSelectMediaDialogOpen={setIsSelectMediaDialogOpen}
|
||
onFilesDrop={(files) => {
|
||
setFileToUpload(files[0]);
|
||
setUploadMediaOpen(true);
|
||
}}
|
||
/>
|
||
|
||
{/* Блок МЕДИА для статьи */}
|
||
{/* <Paper elevation={1} sx={{ padding: 2, mt: 1 }}>
|
||
<Typography variant="h6" gutterBottom>
|
||
МЕДИА
|
||
</Typography>
|
||
{data.left.media ? (
|
||
<Box sx={{ mb: 1 }}>
|
||
<img
|
||
src={data.left.media.filename}
|
||
alt="Selected media"
|
||
style={{
|
||
maxWidth: "100%",
|
||
maxHeight: "150px",
|
||
objectFit: "contain",
|
||
}}
|
||
/>
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
height: 100,
|
||
backgroundColor: "grey.100",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
borderRadius: 1,
|
||
mb: 1,
|
||
border: "2px dashed",
|
||
borderColor: "grey.300",
|
||
}}
|
||
>
|
||
<Typography color="text.secondary">Нет медиа</Typography>
|
||
</Box>
|
||
)}
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<ImagePlus size={18} />}
|
||
onClick={handleOpenMediaDialog}
|
||
>
|
||
Выбрать/Загрузить медиа
|
||
</Button>
|
||
{data.left.media && (
|
||
<Button
|
||
variant="outlined"
|
||
color="error"
|
||
size="small"
|
||
sx={{ ml: 1 }}
|
||
onClick={() =>
|
||
updateSightInfo(
|
||
languageStore.language,
|
||
{
|
||
left: {
|
||
heading: data.left.heading,
|
||
body: data.left.body,
|
||
media: null,
|
||
},
|
||
},
|
||
false
|
||
)
|
||
}
|
||
>
|
||
Удалить медиа
|
||
</Button>
|
||
)}
|
||
</Paper> */}
|
||
</Box>
|
||
|
||
{/* Правая колонка: Предпросмотр */}
|
||
<Box
|
||
sx={{
|
||
flex: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
maxWidth: "320px",
|
||
gap: 0.5,
|
||
}}
|
||
>
|
||
<Paper
|
||
elevation={3}
|
||
sx={{
|
||
width: "100%",
|
||
minWidth: 320,
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
overflowY: "auto",
|
||
display: "flex",
|
||
|
||
flexDirection: "column",
|
||
borderRadius: "10px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
overflow: "hidden",
|
||
position: "relative",
|
||
width: "100%",
|
||
minHeight: 100,
|
||
padding: "3px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
|
||
"& img": {
|
||
borderTopLeftRadius: "10px",
|
||
borderTopRightRadius: "10px",
|
||
width: "100%",
|
||
height: "auto",
|
||
objectFit: "contain",
|
||
},
|
||
}}
|
||
>
|
||
{sight[language].left.media.length > 0 ? (
|
||
<>
|
||
<MediaViewer
|
||
media={{
|
||
id: sight[language].left.media[0].id,
|
||
media_type:
|
||
sight[language].left.media[0].media_type,
|
||
filename: sight[language].left.media[0].filename,
|
||
}}
|
||
fullWidth
|
||
/>
|
||
{sight.watermark_lu && (
|
||
<img
|
||
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||
sight.watermark_lu
|
||
}/download?token=${token}`}
|
||
alt="preview"
|
||
className="absolute top-4 left-4 z-10"
|
||
style={{
|
||
width: "30px",
|
||
height: "30px",
|
||
objectFit: "contain",
|
||
}}
|
||
/>
|
||
)}
|
||
{sight.watermark_rd && (
|
||
<img
|
||
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||
sight.watermark_rd
|
||
}/download?token=${token}`}
|
||
alt="preview"
|
||
className="absolute bottom-4 right-4 z-10"
|
||
style={{
|
||
width: "30px",
|
||
height: "30px",
|
||
objectFit: "contain",
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
) : (
|
||
<ImagePlus size={48} color="white" />
|
||
)}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
color: "white",
|
||
margin: "5px 0px 5px 0px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 1,
|
||
padding: 1,
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h5"
|
||
component="h2"
|
||
sx={{
|
||
wordBreak: "break-word",
|
||
fontSize: "24px",
|
||
fontWeight: 700,
|
||
lineHeight: "120%",
|
||
}}
|
||
>
|
||
{sight[language].left.heading || "Название информации"}
|
||
</Typography>
|
||
<Typography
|
||
variant="h6"
|
||
component="h2"
|
||
sx={{
|
||
wordBreak: "break-word",
|
||
fontSize: "18px",
|
||
|
||
lineHeight: "120%",
|
||
}}
|
||
>
|
||
{sight[language as Language].address}
|
||
</Typography>
|
||
</Box>
|
||
|
||
{sight[language].left.body && (
|
||
<Box
|
||
sx={{
|
||
padding: 1,
|
||
maxHeight: "300px",
|
||
overflowY: "auto",
|
||
"&::-webkit-scrollbar": {
|
||
display: "none",
|
||
},
|
||
"&": {
|
||
scrollbarWidth: "none",
|
||
},
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
<ReactMarkdownComponent
|
||
value={sight[language].left.body}
|
||
/>
|
||
</Box>
|
||
)}
|
||
</Paper>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{ position: "absolute", bottom: 0, right: 0, padding: 2 }}
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
color="success"
|
||
startIcon={<Save color="white" size={18} />}
|
||
onClick={async () => {
|
||
try {
|
||
const newSightId = await createSight(language);
|
||
toast.success("Страница создана");
|
||
navigate(`/sight/${newSightId}/edit`);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
}}
|
||
>
|
||
Сохранить
|
||
</Button>
|
||
</Box>
|
||
</>
|
||
)}
|
||
</Box>
|
||
|
||
{/* <SelectMediaDialog
|
||
open={isSelectMediaDialogOpen}
|
||
onClose={handleCloseMediaDialog}
|
||
onSelectMedia={handleArticleSelect}
|
||
/> */}
|
||
<SelectMediaDialog
|
||
open={isSelectMediaDialogOpen}
|
||
onClose={handleCloseMediaDialog}
|
||
onSelectMedia={handleMediaSelected}
|
||
/>
|
||
<UploadMediaDialog
|
||
open={uploadMediaOpen}
|
||
onClose={() => setUploadMediaOpen(false)}
|
||
contextObjectName={sight[language].name}
|
||
contextType="sight"
|
||
isArticle={true}
|
||
articleName={sight[language].left.heading || "Левая статья"}
|
||
afterUpload={async (media) => {
|
||
setUploadMediaOpen(false);
|
||
setFileToUpload(null);
|
||
await createLinkWithLeftArticle(media);
|
||
}}
|
||
/>
|
||
<SelectArticleModal
|
||
open={isSelectArticleDialogOpen}
|
||
onClose={handleCloseArticleDialog}
|
||
onSelectArticle={handleArticleSelect}
|
||
/>
|
||
<DeleteModal
|
||
open={isDeleteModalOpen}
|
||
onDelete={() => {
|
||
deleteLeftArticle(sight.left_article);
|
||
setIsDeleteModalOpen(false);
|
||
toast.success("Статья откреплена");
|
||
}}
|
||
onCancel={() => setIsDeleteModalOpen(false)}
|
||
/>
|
||
</TabPanel>
|
||
);
|
||
}
|
||
);
|