KRBL/WhiteNightsAdminPanel
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add correct edit right widget

Browse Source
This commit is contained in:
Илья Куприец
2025-06-03 12:31:47 +03:00
parent 5814e65953
commit f0e03c3a1d
10 changed files with 806 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/widgets/SightTabs/CreateRightTab/index.tsx
View File

@ -7,7 +7,13 @@ import {
MenuItem,
TextField,
} from "@mui/material";
import { BackButton, createSightStore, languageStore, TabPanel } from "@shared";
import {
BackButton,
createSightStore,
languageStore,
SelectArticleModal,
TabPanel,
} from "@shared";
import {
LanguageSwitcher,
ReactMarkdownComponent,
@ -16,6 +22,7 @@ import {
import { ImagePlus, Plus } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import { MediaViewer } from "../../MediaViewer/index";
// --- RightWidgetTab (Parent) Component ---
export const CreateRightTab = observer(
@ -24,10 +31,11 @@ export const CreateRightTab = observer(
const { sight, createNewRightArticle, updateRightArticleInfo } =
createSightStore;
const { language } = languageStore;
const [articleDialogOpen, setArticleDialogOpen] = useState(false);
const [activeArticleIndex, setActiveArticleIndex] = useState<number | null>(
null
);
const [type, setType] = useState<"article" | "media">("media");
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
@ -66,9 +74,9 @@ export const CreateRightTab = observer(
<Box className="flex flex-col gap-3 max-h-[60vh] overflow-y-auto">
<Box
onClick={() => {
// setMediaType("preview");
setType("media");
}}
className="w-full bg-gray-200 p-4 rounded-2xl cursor-pointer text-sm hover:bg-gray-300 transition-all duration-300"
className="w-full bg-green-200 p-4 rounded-2xl cursor-pointer text-sm hover:bg-gray-300 transition-all duration-300"
>
<Typography>Предпросмотр медиа</Typography>
</Box>
@ -79,6 +87,7 @@ export const CreateRightTab = observer(
className="w-full bg-gray-200 p-4 rounded-2xl text-sm cursor-pointer hover:bg-gray-300 transition-all duration-300"
onClick={() => {
handleSelectArticle(index);
setType("article");
}}
>
<Typography>{article.heading}</Typography>
@ -113,6 +122,7 @@ export const CreateRightTab = observer(
</MenuItem>
<MenuItem
onClick={() => {
setArticleDialogOpen(true);
handleClose();
}}
>
@ -120,63 +130,65 @@ export const CreateRightTab = observer(
</MenuItem>
</Menu>
</Box>
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3">
{activeArticleIndex !== null && (
<>
<Box className="flex justify-end gap-2 mb-3">
<Button variant="contained" color="primary">
Открепить
</Button>
{type === "article" && (
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3">
{activeArticleIndex !== null && (
<>
<Box className="flex justify-end gap-2 mb-3">
<Button variant="contained" color="primary">
Открепить
</Button>
<Button variant="contained" color="success">
Удалить
</Button>
</Box>
<Box sx={{ display: "flex", gap: 3, flexGrow: 1 }}>
{/* Левая колонка: Редактирование */}
<Box
sx={{
flex: 2,
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<TextField
label="Название информации"
value={
sight[language].right[activeArticleIndex].heading
}
onChange={(e) =>
updateRightArticleInfo(
activeArticleIndex,
language,
e.target.value,
sight[language].right[activeArticleIndex].body
)
}
variant="outlined"
fullWidth
/>
<ReactMarkdownEditor
value={
sight[language].right[activeArticleIndex].body
}
onChange={(value) =>
updateRightArticleInfo(
activeArticleIndex,
language,
sight[language].right[activeArticleIndex]
.heading,
value
)
}
/>
<Button variant="contained" color="success">
Удалить
</Button>
</Box>
{/* Блок МЕДИА для статьи */}
{/* <Paper elevation={1} sx={{ padding: 2, mt: 1 }}>
<Box sx={{ display: "flex", gap: 3, flexGrow: 1 }}>
{/* Левая колонка: Редактирование */}
<Box
sx={{
flex: 2,
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<TextField
label="Название информации"
value={
sight[language].right[activeArticleIndex]
.heading
}
onChange={(e) =>
updateRightArticleInfo(
activeArticleIndex,
language,
e.target.value,
sight[language].right[activeArticleIndex].body
)
}
variant="outlined"
fullWidth
/>
<ReactMarkdownEditor
value={
sight[language].right[activeArticleIndex].body
}
onChange={(value) =>
updateRightArticleInfo(
activeArticleIndex,
language,
sight[language].right[activeArticleIndex]
.heading,
value
)
}
/>
</Box>
{/* Блок МЕДИА для статьи */}
{/* <Paper elevation={1} sx={{ padding: 2, mt: 1 }}>
<Typography variant="h6" gutterBottom>
МЕДИА
</Typography>
@ -241,10 +253,22 @@ export const CreateRightTab = observer(
</Button>
)}
</Paper> */}
</Box>
</>
)}
</Box>
</Box>
</>
)}
</Box>
)}
{type === "media" && (
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 flex justify-center items-center">
<MediaViewer
media={{
id: sight.preview_media || "",
media_type: 1,
filename: sight.preview_media || "",
}}
/>
</Box>
)}
</Box>
</Box>
<Box className="w-[25%] mr-10">
@ -264,7 +288,7 @@ export const CreateRightTab = observer(
flexDirection: "column",
}}
>
{false ? (
{type === "media" ? (
<Box
sx={{
width: "100%",
@ -368,6 +392,12 @@ export const CreateRightTab = observer(
onSelectArticle={handleSelectArticle}
linkedArticleIds={linkedArticleIds}
/> */}
<SelectArticleModal
open={articleDialogOpen}
onClose={() => setArticleDialogOpen(false)}
onSelectArticle={handleSelectArticle}
linkedArticleIds={sight[language].right.map((article) => article.id)}
/>
</TabPanel>
);
}