From 177653d84a8cbeaa54e5a0a1a25a54b28817b756 Mon Sep 17 00:00:00 2001 From: Spynder <19329095+Spynder@users.noreply.github.com> Date: Wed, 7 May 2025 00:02:24 +0300 Subject: [PATCH] remaining fixes --- src/components/CreateSightArticle.tsx | 2 + src/components/LinkedItems.tsx | 41 ++++++-- .../modals/ArticleEditModal/index.tsx | 99 +++++++++++-------- src/pages/sight/edit.tsx | 4 +- 4 files changed, 94 insertions(+), 52 deletions(-) diff --git a/src/components/CreateSightArticle.tsx b/src/components/CreateSightArticle.tsx index 940fd5e..bc90c51 100644 --- a/src/components/CreateSightArticle.tsx +++ b/src/components/CreateSightArticle.tsx @@ -18,6 +18,8 @@ import { ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, } from "../components/media/MediaFormUtils"; +import { LinkedItems } from "./LinkedItems"; +import { mediaFields, MediaItem } from "../pages/article/types"; const MemoizedSimpleMDE = React.memo(MarkdownEditor); diff --git a/src/components/LinkedItems.tsx b/src/components/LinkedItems.tsx index 86252db..b9a6be8 100644 --- a/src/components/LinkedItems.tsx +++ b/src/components/LinkedItems.tsx @@ -69,6 +69,8 @@ type LinkedItemsProps = { extraField?: ExtraFieldConfig; dragAllowed?: boolean; onSave?: (items: T[]) => void; + onUpdate?: () => void; + dontRecurse?: boolean; }; const reorder = (list: any[], startIndex: number, endIndex: number) => { @@ -88,6 +90,8 @@ export const LinkedItems = ({ dragAllowed = false, type, onSave, + onUpdate, + dontRecurse = false, }: LinkedItemsProps) => { const { language } = languageStore; const { setArticleModalOpenAction, setArticleIdAction } = articleStore; @@ -130,14 +134,25 @@ export const LinkedItems = ({ setLinkedItems(reorderedItems); - axiosInstance.post( - `${import.meta.env.VITE_KRBL_API}/route/${parentId}/station`, - { - stations: reorderedItems.map((item) => ({ - id: item.id, - })), - } - ); + if(parentResource === "sight" && childResource === "article") { + axiosInstance.post( + `${import.meta.env.VITE_KRBL_API}/sight/${parentId}/article/order`, + { + articles: reorderedItems.map((item) => ({ + id: item.id, + })), + } + ); + } else { + axiosInstance.post( + `${import.meta.env.VITE_KRBL_API}/route/${parentId}/station`, + { + stations: reorderedItems.map((item) => ({ + id: item.id, + })), + } + ); + } }; useEffect(() => { @@ -227,6 +242,7 @@ export const LinkedItems = ({ if (childResource === "article") { setPageNum(pageNum + 1); } + onUpdate?.(); }); }) .catch((error) => { @@ -247,6 +263,7 @@ export const LinkedItems = ({ ) .then(() => { setLinkedItems((prev) => prev.filter((item) => item.id !== itemId)); + onUpdate?.(); }) .catch((error) => { console.error("Error unlinking item:", error); @@ -495,8 +512,12 @@ export const LinkedItems = ({ - - + {!dontRecurse && + <> + + + + } ); }; diff --git a/src/components/modals/ArticleEditModal/index.tsx b/src/components/modals/ArticleEditModal/index.tsx index ae11f03..de9c74b 100644 --- a/src/components/modals/ArticleEditModal/index.tsx +++ b/src/components/modals/ArticleEditModal/index.tsx @@ -18,6 +18,8 @@ import { } from "../../media/MediaFormUtils"; import { axiosInstance } from "../../../providers/data"; import { TOKEN_KEY } from "../../../authProvider"; +import { LinkedItems } from "../../../components/LinkedItems"; +import { mediaFields, MediaItem } from "../../../pages/article/types"; const MemoizedSimpleMDE = memo(MarkdownEditor); @@ -29,15 +31,17 @@ type MediaFile = { }; const style = { - position: "absolute", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", + marginLeft: "auto", + marginRight: "auto", + //position: "absolute", + //top: "50%", + //left: "50%", + //transform: "translate(-50%, -50%)", width: "60%", bgcolor: "background.paper", border: "2px solid #000", boxShadow: 24, - p: 4, + p: 4 }; export const ArticleEditModal = observer(() => { @@ -68,46 +72,47 @@ export const ArticleEditModal = observer(() => { }, []); // Load existing media files when editing an article - useEffect(() => { - const loadExistingMedia = async () => { - if (selectedArticleId) { - try { - const response = await axiosInstance.get( - `${ - import.meta.env.VITE_KRBL_API - }/article/${selectedArticleId}/media` - ); - const existingMedia = response.data; + const loadExistingMedia = async () => { + console.log("Called loadExistingMedia") + if (selectedArticleId) { + try { + const response = await axiosInstance.get( + `${ + import.meta.env.VITE_KRBL_API + }/article/${selectedArticleId}/media` + ); + const existingMedia = response.data; - // Convert existing media to MediaFile format - const mediaFiles = await Promise.all( - existingMedia.map(async (media: any) => { - const response = await fetch( - `${import.meta.env.VITE_KRBL_MEDIA}${ - media.id - }/download?token=${localStorage.getItem(TOKEN_KEY)}` - ); - const blob = await response.blob(); - const file = new File([blob], media.filename, { - type: media.media_type === 1 ? "image/jpeg" : "video/mp4", - }); + // Convert existing media to MediaFile format + const mediaFiles = await Promise.all( + existingMedia.map(async (media: any) => { + const response = await fetch( + `${import.meta.env.VITE_KRBL_MEDIA}${ + media.id + }/download?token=${localStorage.getItem(TOKEN_KEY)}` + ); + const blob = await response.blob(); + const file = new File([blob], media.filename, { + type: media.media_type === 1 ? "image/jpeg" : "video/mp4", + }); - return { - file, - preview: URL.createObjectURL(blob), - uploading: false, - mediaId: media.id, - }; - }) - ); + return { + file, + preview: URL.createObjectURL(blob), + uploading: false, + mediaId: media.id, + }; + }) + ); - setMediaFiles(mediaFiles); - } catch (error) { - console.error("Error loading existing media:", error); - } + setMediaFiles(mediaFiles); + } catch (error) { + console.error("Error loading existing media:", error); } - }; + } + }; + useEffect(() => { loadExistingMedia(); }, [selectedArticleId]); @@ -264,6 +269,7 @@ export const ArticleEditModal = observer(() => { onClose={() => setArticleModalOpenAction(false)} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" + sx={{overflow: "auto"}} > { /> )} /> + + {selectedArticleId && ( + + type="edit" + parentId={selectedArticleId} + parentResource="article" + childResource="media" + fields={mediaFields} + title="медиа" + dontRecurse + onUpdate={loadExistingMedia} + /> + )} {/* Dropzone для медиа файлов */} diff --git a/src/pages/sight/edit.tsx b/src/pages/sight/edit.tsx index ab14d92..4a33e02 100644 --- a/src/pages/sight/edit.tsx +++ b/src/pages/sight/edit.tsx @@ -978,14 +978,14 @@ export const SightEdit = observer(() => { - {!leftArticleId && ( + {/* {!leftArticleId && ( - )} + )} */} {leftArticleId && (