feat: DND for Articles
This commit is contained in:
parent
89488d9921
commit
1973ff4304
@ -586,6 +586,12 @@ class CreateSightStore {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
updateRightArticles = async (articles: any[], language: Language) => {
|
||||
runInAction(() => {
|
||||
this.sight[language].right = articles;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export const createSightStore = new CreateSightStore();
|
||||
|
||||
@ -121,35 +121,32 @@ class EditSightStore {
|
||||
let responseEn = await languageInstance("en").get(`/sight/${id}/article`);
|
||||
let responseZh = await languageInstance("zh").get(`/sight/${id}/article`);
|
||||
|
||||
// Function to fetch media for a given set of articles
|
||||
const fetchMediaForArticles = async (articles: any[]) => {
|
||||
const articlesWithMedia = [];
|
||||
for (const article of articles) {
|
||||
const responseMedia = await authInstance.get(
|
||||
`/article/${article.id}/media`
|
||||
);
|
||||
articlesWithMedia.push({
|
||||
...article,
|
||||
media: responseMedia.data,
|
||||
});
|
||||
}
|
||||
return articlesWithMedia;
|
||||
};
|
||||
// Create a map of article IDs to their media
|
||||
const mediaMap = new Map();
|
||||
for (const article of responseRu.data) {
|
||||
const responseMedia = await authInstance.get(
|
||||
`/article/${article.id}/media`
|
||||
);
|
||||
mediaMap.set(article.id, responseMedia.data);
|
||||
}
|
||||
|
||||
// Fetch media for articles in each language
|
||||
const ruArticlesWithMedia = await fetchMediaForArticles(responseRu.data);
|
||||
const enArticlesWithMedia = await fetchMediaForArticles(responseEn.data);
|
||||
const zhArticlesWithMedia = await fetchMediaForArticles(responseZh.data);
|
||||
// Function to add media to articles
|
||||
const addMediaToArticles = (articles: any[]) => {
|
||||
return articles.map((article) => ({
|
||||
...article,
|
||||
media: mediaMap.get(article.id),
|
||||
}));
|
||||
};
|
||||
|
||||
const data = {
|
||||
ru: {
|
||||
right: ruArticlesWithMedia,
|
||||
right: addMediaToArticles(responseRu.data),
|
||||
},
|
||||
en: {
|
||||
right: enArticlesWithMedia,
|
||||
right: addMediaToArticles(responseEn.data),
|
||||
},
|
||||
zh: {
|
||||
right: zhArticlesWithMedia,
|
||||
right: addMediaToArticles(responseZh.data),
|
||||
},
|
||||
};
|
||||
|
||||
@ -673,6 +670,16 @@ class EditSightStore {
|
||||
this.sight[language].right[index].heading = heading;
|
||||
this.sight[language].right[index].body = body;
|
||||
};
|
||||
|
||||
updateRightArticles = async (articles: any[], language: Language) => {
|
||||
this.sight[language].right = articles;
|
||||
const articleIdsInObject = articles.map((article) => ({
|
||||
id: article.id,
|
||||
}));
|
||||
await authInstance.post(`/sight/${this.sight.common.id}/article/order`, {
|
||||
articles: articleIdsInObject,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export const editSightStore = new EditSightStore();
|
||||
|
||||
@ -33,7 +33,7 @@ export function MediaViewer({
|
||||
alt={media?.filename}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
@ -45,9 +45,10 @@ export function MediaViewer({
|
||||
media?.id
|
||||
}/download?token=${token}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
borderRadius: 30,
|
||||
objectFit: "cover",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
controls
|
||||
autoPlay
|
||||
@ -63,7 +64,7 @@ export function MediaViewer({
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
objectFit: "cover",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
/>
|
||||
@ -77,7 +78,7 @@ export function MediaViewer({
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "contain",
|
||||
objectFit: "cover",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -31,6 +31,7 @@ import { useState, useEffect } from "react"; // Added useEffect
|
||||
import { MediaViewer } from "../../MediaViewer/index";
|
||||
import { toast } from "react-toastify";
|
||||
import { authInstance } from "@shared";
|
||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||
|
||||
type MediaItemShared = {
|
||||
// Define if not already available from @shared
|
||||
@ -59,6 +60,7 @@ export const CreateRightTab = observer(
|
||||
linkExistingRightArticle,
|
||||
createSight,
|
||||
clearCreateSight, // For resetting form
|
||||
updateRightArticles,
|
||||
} = createSightStore;
|
||||
const { language } = languageStore;
|
||||
|
||||
@ -210,6 +212,36 @@ export const CreateRightTab = observer(
|
||||
setMediaTarget(null); // Reset target
|
||||
};
|
||||
|
||||
const handleDragEnd = (result: any) => {
|
||||
const { source, destination } = result;
|
||||
|
||||
// 1. Guard clause: If dropped outside any droppable area, do nothing.
|
||||
if (!destination) return;
|
||||
|
||||
// Extract source and destination indices
|
||||
const sourceIndex = source.index;
|
||||
const destinationIndex = destination.index;
|
||||
|
||||
// 2. Guard clause: If dropped in the same position, do nothing.
|
||||
if (sourceIndex === destinationIndex) return;
|
||||
|
||||
// 3. Create a new array with reordered articles:
|
||||
// - Create a shallow copy of the current articles array.
|
||||
// This is important for immutability and triggering re-renders.
|
||||
const newRightArticles = [...sight[language].right];
|
||||
|
||||
// - Remove the dragged article from its original position.
|
||||
// `splice` returns an array of removed items, so we destructure the first (and only) one.
|
||||
const [movedArticle] = newRightArticles.splice(sourceIndex, 1);
|
||||
|
||||
// - Insert the moved article into its new position.
|
||||
newRightArticles.splice(destinationIndex, 0, movedArticle);
|
||||
|
||||
// 4. Update the store with the new order:
|
||||
// This will typically trigger a re-render of the component with the updated list.
|
||||
updateRightArticles(newRightArticles, language);
|
||||
};
|
||||
|
||||
return (
|
||||
<TabPanel value={value} index={index}>
|
||||
<LanguageSwitcher />
|
||||
@ -245,22 +277,56 @@ export const CreateRightTab = observer(
|
||||
>
|
||||
<Typography>Предпросмотр медиа</Typography>
|
||||
</Box>
|
||||
|
||||
{sight[language].right.map((article, artIdx) => (
|
||||
<Box
|
||||
key={article.id || artIdx} // article.id should be preferred
|
||||
className={`w-full p-4 rounded-2xl text-sm cursor-pointer hover:bg-gray-300 transition-all duration-300 ${
|
||||
type === "article" && activeArticleIndex === artIdx
|
||||
? "bg-blue-300 font-semibold"
|
||||
: "bg-gray-200"
|
||||
}`}
|
||||
onClick={() => handleDisplayArticleFromList(artIdx)}
|
||||
>
|
||||
<Typography noWrap title={article.heading}>
|
||||
{article.heading || "Без названия"}
|
||||
</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"
|
||||
@ -298,7 +364,7 @@ export const CreateRightTab = observer(
|
||||
<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="outlined"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="small"
|
||||
startIcon={<Unlink color="white" size={18} />}
|
||||
@ -381,40 +447,52 @@ export const CreateRightTab = observer(
|
||||
</Box>
|
||||
</Box>
|
||||
) : type === "media" ? (
|
||||
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 relative flex justify-center items-center">
|
||||
{type === "media" && (
|
||||
<Box className="w-[80%] border border-gray-300 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-[80%] border border-gray-300 rounded-2xl relative flex items-center justify-center">
|
||||
{sight.preview_media && (
|
||||
<>
|
||||
{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 sx={{}}>
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: previewMedia.id || "",
|
||||
media_type: previewMedia.media_type,
|
||||
filename: previewMedia.filename || "",
|
||||
<Box className="w-1/2 h-1/2">
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: previewMedia.id || "",
|
||||
media_type: previewMedia.media_type,
|
||||
filename: previewMedia.filename || "",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!previewMedia && (
|
||||
<MediaAreaForSight
|
||||
onFinishUpload={(mediaId) => {
|
||||
linkPreviewMedia(mediaId);
|
||||
}}
|
||||
onFilesDrop={() => {}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
{!previewMedia && (
|
||||
<MediaAreaForSight
|
||||
onFinishUpload={(mediaId) => {
|
||||
linkPreviewMedia(mediaId);
|
||||
}}
|
||||
onFilesDrop={() => {}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!previewMedia && (
|
||||
<MediaAreaForSight
|
||||
onFinishUpload={(mediaId) => {
|
||||
linkPreviewMedia(mediaId);
|
||||
}}
|
||||
onFilesDrop={() => {}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
@ -429,31 +507,52 @@ export const CreateRightTab = observer(
|
||||
|
||||
{/* Right Column: Live Preview */}
|
||||
<Box className="w-[25%] mr-10">
|
||||
{type === "article" && currentRightArticle && (
|
||||
{type === "article" && activeArticleIndex !== null && (
|
||||
<Paper
|
||||
className="flex-1 flex flex-col rounded-2xl"
|
||||
className="flex-1 flex flex-col max-w-[500px]"
|
||||
sx={{
|
||||
borderRadius: "16px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
elevation={2}
|
||||
sx={{ height: "75vh", overflow: "hidden" }}
|
||||
>
|
||||
<Box
|
||||
className="rounded-2xl overflow-hidden"
|
||||
className=" overflow-hidden"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "#877361", // Theme background
|
||||
|
||||
background: "#877361",
|
||||
borderColor: "grey.300",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{currentRightArticle.media &&
|
||||
currentRightArticle.media.length > 0 ? (
|
||||
<MediaViewer media={currentRightArticle.media[0]} />
|
||||
{sight[language].right[activeArticleIndex].media.length >
|
||||
0 ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "290px",
|
||||
flexShrink: 0,
|
||||
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<MediaViewer
|
||||
media={
|
||||
sight[language].right[activeArticleIndex].media[0]
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: 200,
|
||||
flexShrink: 0,
|
||||
|
||||
backgroundColor: "rgba(0,0,0,0.1)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@ -463,57 +562,85 @@ export const CreateRightTab = observer(
|
||||
<ImagePlus size={48} color="white" />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
minHeight: "70px", // Fixed height for heading container
|
||||
background: "#877361", // Consistent with theme
|
||||
display: "flex",
|
||||
flexShrink: 0,
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.1)",
|
||||
px: 2,
|
||||
py: 1,
|
||||
p: 1,
|
||||
wordBreak: "break-word",
|
||||
fontSize: "24px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "120%",
|
||||
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%)",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
noWrap
|
||||
title={currentRightArticle.heading}
|
||||
>
|
||||
{currentRightArticle.heading || "Заголовок"}
|
||||
<Typography variant="h6" color="white">
|
||||
{sight[language].right[activeArticleIndex].heading ||
|
||||
"Выберите статью"}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
padding: 1,
|
||||
minHeight: "200px",
|
||||
maxHeight: "300px",
|
||||
overflowY: "scroll",
|
||||
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,
|
||||
overflowY: "auto",
|
||||
backgroundColor: "#877361",
|
||||
color: "white",
|
||||
"&::-webkit-scrollbar": { width: "8px" },
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: "rgba(255,255,255,0.3)",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{currentRightArticle.body ? (
|
||||
{sight[language].right[activeArticleIndex].body ? (
|
||||
<ReactMarkdownComponent
|
||||
value={currentRightArticle.body}
|
||||
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>
|
||||
)}
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
authInstance,
|
||||
BackButton,
|
||||
editSightStore,
|
||||
languageStore,
|
||||
@ -17,6 +18,7 @@ import {
|
||||
UploadMediaDialog,
|
||||
} from "@shared";
|
||||
import {
|
||||
DeleteModal,
|
||||
LanguageSwitcher,
|
||||
MediaArea,
|
||||
MediaAreaForSight,
|
||||
@ -28,6 +30,12 @@ import { observer } from "mobx-react-lite";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { MediaViewer } from "../../MediaViewer/index";
|
||||
import {
|
||||
DragDropContext,
|
||||
Droppable,
|
||||
Draggable,
|
||||
DropResult,
|
||||
} from "@hello-pangea/dnd";
|
||||
|
||||
export const RightWidgetTab = observer(
|
||||
({ value, index }: { value: number; index: number }) => {
|
||||
@ -47,14 +55,21 @@ export const RightWidgetTab = observer(
|
||||
createLinkWithRightArticle,
|
||||
setFileToUpload,
|
||||
createNewRightArticle,
|
||||
updateRightArticles,
|
||||
} = editSightStore;
|
||||
|
||||
const [previewMedia, setPreviewMedia] = useState<any | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (sight.common.preview_media) {
|
||||
setPreviewMedia(sight.common.preview_media);
|
||||
}
|
||||
const fetchPreviewMedia = async () => {
|
||||
if (sight.common.preview_media) {
|
||||
const response = await authInstance.get(
|
||||
`/media/${sight.common.preview_media}`
|
||||
);
|
||||
setPreviewMedia(response.data);
|
||||
}
|
||||
};
|
||||
fetchPreviewMedia();
|
||||
}, [sight.common.preview_media]);
|
||||
|
||||
const handleUnlinkPreviewMedia = () => {
|
||||
@ -80,8 +95,15 @@ export const RightWidgetTab = observer(
|
||||
);
|
||||
const [isSelectModalOpen, setIsSelectModalOpen] = useState(false);
|
||||
const [isSelectMediaModalOpen, setIsSelectMediaModalOpen] = useState(false);
|
||||
const [isDeleteArticleModalOpen, setIsDeleteArticleModalOpen] =
|
||||
useState(false);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleDeleteArticle = () => {
|
||||
deleteRightArticle(sight[language].right[activeArticleIndex || 0].id);
|
||||
setActiveArticleIndex(null);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
@ -133,6 +155,36 @@ export const RightWidgetTab = observer(
|
||||
console.log(sight[language].right);
|
||||
}, [sight[language].right]);
|
||||
|
||||
const handleDragEnd = (result: DropResult) => {
|
||||
const { source, destination } = result;
|
||||
|
||||
// 1. Guard clause: If dropped outside any droppable area, do nothing.
|
||||
if (!destination) return;
|
||||
|
||||
// Extract source and destination indices
|
||||
const sourceIndex = source.index;
|
||||
const destinationIndex = destination.index;
|
||||
|
||||
// 2. Guard clause: If dropped in the same position, do nothing.
|
||||
if (sourceIndex === destinationIndex) return;
|
||||
|
||||
// 3. Create a new array with reordered articles:
|
||||
// - Create a shallow copy of the current articles array.
|
||||
// This is important for immutability and triggering re-renders.
|
||||
const newRightArticles = [...sight[language].right];
|
||||
|
||||
// - Remove the dragged article from its original position.
|
||||
// `splice` returns an array of removed items, so we destructure the first (and only) one.
|
||||
const [movedArticle] = newRightArticles.splice(sourceIndex, 1);
|
||||
|
||||
// - Insert the moved article into its new position.
|
||||
newRightArticles.splice(destinationIndex, 0, movedArticle);
|
||||
|
||||
// 4. Update the store with the new order:
|
||||
// This will typically trigger a re-render of the component with the updated list.
|
||||
updateRightArticles(newRightArticles, language);
|
||||
};
|
||||
|
||||
return (
|
||||
<TabPanel value={value} index={index}>
|
||||
<LanguageSwitcher />
|
||||
@ -153,26 +205,61 @@ export const RightWidgetTab = observer(
|
||||
<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 className="flex flex-col gap-3 max-h-[60vh] overflow-y-auto">
|
||||
<Box
|
||||
onClick={() => setType("media")}
|
||||
className="w-full bg-green-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>
|
||||
{sight[language].right.length > 0 &&
|
||||
sight[language].right.map((article, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
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>
|
||||
</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={() => {
|
||||
handleSelectArticle(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"
|
||||
@ -200,7 +287,7 @@ export const RightWidgetTab = observer(
|
||||
</Box>
|
||||
|
||||
{type === "article" && (
|
||||
<Box className="w-[80%] border border-gray-300 rounded-2xl p-3">
|
||||
<Box className="w-[80%] border border-gray-300 p-3">
|
||||
{activeArticleIndex !== null && (
|
||||
<>
|
||||
<Box className="flex justify-end gap-2 mb-3">
|
||||
@ -222,10 +309,7 @@ export const RightWidgetTab = observer(
|
||||
color="error"
|
||||
startIcon={<Trash2 size={18} />}
|
||||
onClick={() => {
|
||||
deleteRightArticle(
|
||||
sight[language].right[activeArticleIndex].id
|
||||
);
|
||||
setActiveArticleIndex(null);
|
||||
setIsDeleteArticleModalOpen(true);
|
||||
}}
|
||||
>
|
||||
Удалить
|
||||
@ -300,42 +384,40 @@ export const RightWidgetTab = observer(
|
||||
<Box className="w-[80%] border border-gray-300 rounded-2xl relative">
|
||||
{sight.common.preview_media && (
|
||||
<>
|
||||
<Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 relative flex justify-center items-center">
|
||||
{type === "media" && (
|
||||
<Box className="w-[80%] border border-gray-300 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>
|
||||
{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 sx={{}}>
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: previewMedia.id || "",
|
||||
media_type: previewMedia.media_type,
|
||||
filename: previewMedia.filename || "",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!previewMedia && (
|
||||
<MediaAreaForSight
|
||||
onFinishUpload={(mediaId) => {
|
||||
linkPreviewMedia(mediaId);
|
||||
}}
|
||||
onFilesDrop={() => {}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box className="w-1/2 h-1/2">
|
||||
<MediaViewer
|
||||
media={{
|
||||
id: previewMedia.id || "",
|
||||
media_type: previewMedia.media_type,
|
||||
filename: previewMedia.filename || "",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!previewMedia && (
|
||||
<MediaAreaForSight
|
||||
onFinishUpload={(mediaId) => {
|
||||
linkPreviewMedia(mediaId);
|
||||
}}
|
||||
onFilesDrop={() => {}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -369,14 +451,18 @@ export const RightWidgetTab = observer(
|
||||
<Box className="w-[25%] mr-10">
|
||||
{activeArticleIndex !== null && (
|
||||
<Paper
|
||||
className="flex-1 flex flex-col rounded-2xl"
|
||||
className="flex-1 flex flex-col max-w-[500px]"
|
||||
sx={{
|
||||
borderRadius: "16px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
elevation={2}
|
||||
>
|
||||
<Box
|
||||
className="rounded-2xl overflow-hidden"
|
||||
className=" overflow-hidden"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "75vh",
|
||||
|
||||
background: "#877361",
|
||||
borderColor: "grey.300",
|
||||
display: "flex",
|
||||
@ -385,11 +471,23 @@ export const RightWidgetTab = observer(
|
||||
>
|
||||
{sight[language].right[activeArticleIndex].media.length >
|
||||
0 ? (
|
||||
<MediaViewer
|
||||
media={
|
||||
sight[language].right[activeArticleIndex].media[0]
|
||||
}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "290px",
|
||||
flexShrink: 0,
|
||||
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<MediaViewer
|
||||
media={
|
||||
sight[language].right[activeArticleIndex].media[0]
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
@ -409,15 +507,16 @@ export const RightWidgetTab = observer(
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "70px",
|
||||
background: "#877361",
|
||||
display: "flex",
|
||||
flexShrink: 0,
|
||||
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.1)",
|
||||
px: 2,
|
||||
p: 1,
|
||||
wordBreak: "break-word",
|
||||
fontSize: "24px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "120%",
|
||||
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%)",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" color="white">
|
||||
@ -428,14 +527,14 @@ export const RightWidgetTab = observer(
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
padding: 1,
|
||||
minHeight: "200px",
|
||||
maxHeight: "300px",
|
||||
overflowY: "scroll",
|
||||
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,
|
||||
flex: 1,
|
||||
minHeight: "300px",
|
||||
overflowY: "auto",
|
||||
backgroundColor: "#877361",
|
||||
color: "white",
|
||||
py: 1,
|
||||
}}
|
||||
>
|
||||
{sight[language].right[activeArticleIndex].body ? (
|
||||
@ -453,6 +552,39 @@ export const RightWidgetTab = observer(
|
||||
</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={() => {
|
||||
handleSelectArticle(index);
|
||||
setType("article");
|
||||
}}
|
||||
>
|
||||
{article.heading}
|
||||
</button>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
)}
|
||||
@ -496,10 +628,20 @@ export const RightWidgetTab = observer(
|
||||
}}
|
||||
/>
|
||||
|
||||
<DeleteModal
|
||||
open={isDeleteArticleModalOpen}
|
||||
onCancel={() => setIsDeleteArticleModalOpen(false)}
|
||||
onDelete={() => {
|
||||
handleDeleteArticle();
|
||||
setIsDeleteArticleModalOpen(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectArticleModal
|
||||
open={isSelectModalOpen}
|
||||
onClose={handleCloseSelectModal}
|
||||
onSelectArticle={handleArticleSelect}
|
||||
linkedArticleIds={sight[language].right.map((article) => article.id)}
|
||||
/>
|
||||
<SelectMediaDialog
|
||||
open={isSelectMediaModalOpen}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user