feat: Sight Page update

src/shared/modals/SelectArticleDialog/index.tsx

@@ -1,4 +1,4 @@
-import { articlesStore } from "@shared";
+import { articlesStore, authInstance, languageStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import {
@@ -22,8 +22,13 @@ import { ReactMarkdownComponent } from "@widgets";
 interface SelectArticleModalProps {
   open: boolean;
   onClose: () => void;
-  onSelectArticle: (articleId: string) => void;
-  linkedArticleIds?: string[]; // Add optional prop for linked articles
+  onSelectArticle: (
+    articleId: number,
+    heading: string,
+    body: string,
+    media: { id: string; media_type: number; filename: string }[]
+  ) => void;
+  linkedArticleIds?: number[]; // Add optional prop for linked articles
 }
 
 export const SelectArticleModal = observer(
@@ -35,7 +40,7 @@ export const SelectArticleModal = observer(
   }: SelectArticleModalProps) => {
     const { articles, getArticle, getArticleMedia } = articlesStore;
     const [searchQuery, setSearchQuery] = useState("");
-    const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
+    const [selectedArticleId, setSelectedArticleId] = useState<number | null>(
       null
     );
     const [isLoading, setIsLoading] = useState(false);
@@ -50,12 +55,21 @@ export const SelectArticleModal = observer(
     }, [open]);
 
     useEffect(() => {
-      const handleKeyPress = (event: KeyboardEvent) => {
+      const handleKeyPress = async (event: KeyboardEvent) => {
         if (event.key.toLowerCase() === "enter") {
           event.preventDefault();
           if (selectedArticleId) {
-            onSelectArticle(selectedArticleId);
+            const media = await authInstance.get(
+              `/article/${selectedArticleId}/media`
+            );
+            onSelectArticle(
+              selectedArticleId,
+              articlesStore.articleData?.heading || "",
+              articlesStore.articleData?.body || "",
+              media.data || []
+            );
             onClose();
+            setSelectedArticleId(null);
           }
         }
       };
@@ -66,9 +80,7 @@ export const SelectArticleModal = observer(
       };
     }, [selectedArticleId, onSelectArticle, onClose]);
 
-    const handleArticleClick = async (articleId: string) => {
-      if (selectedArticleId === articleId) return;
-
+    const handleArticleClick = async (articleId: number) => {
       setSelectedArticleId(articleId);
       setIsLoading(true);
 
@@ -86,14 +98,13 @@ export const SelectArticleModal = observer(
         setIsLoading(false);
       }
     };
-    // @ts-ignore
-    const filteredArticles = articles
-      // @ts-ignore
-      .filter((article) => !linkedArticleIds.includes(article.id))
-      // @ts-ignore
-      .filter((article) =>
-        article.service_name.toLowerCase().includes(searchQuery.toLowerCase())
-      );
+
+    const filteredArticles = articles[languageStore.language].filter(
+      (article) => !linkedArticleIds.includes(article.id)
+    );
+    // .filter((article) =>
+    //   article.service_name.toLowerCase().includes(searchQuery.toLowerCase())
+    // );
 
     const token = localStorage.getItem("token");
     return (
@@ -150,7 +161,17 @@ export const SelectArticleModal = observer(
                   <ListItemButton
                     key={article.id}
                     onClick={() => handleArticleClick(article.id)}
-                    onDoubleClick={() => onSelectArticle(article.id)}
+                    onDoubleClick={async () => {
+                      const media = await authInstance.get(
+                        `/article/${article.id}/media`
+                      );
+                      onSelectArticle(
+                        article.id,
+                        article.heading,
+                        article.body,
+                        media.data
+                      );
+                    }}
                     selected={selectedArticleId === article.id}
                     disabled={isLoading}
                     sx={{
@@ -288,9 +309,22 @@ export const SelectArticleModal = observer(
           <Button onClick={onClose}>Отмена</Button>
           <Button
             variant="contained"
-            onClick={() =>
-              selectedArticleId && onSelectArticle(selectedArticleId)
-            }
+            onClick={async () => {
+              if (selectedArticleId) {
+                const media = await authInstance.get(
+                  `/article/${selectedArticleId}/media`
+                );
+
+                onSelectArticle(
+                  selectedArticleId,
+                  articlesStore.articleData?.heading || "",
+                  articlesStore.articleData?.body || "",
+                  media.data
+                );
+                onClose();
+                setSelectedArticleId(null);
+              }
+            }}
             disabled={!selectedArticleId || isLoading}
           >
             Выбрать

src/shared/modals/SelectMediaDialog/index.tsx

@@ -1,6 +1,6 @@
 import { mediaStore } from "@shared";
 import { observer } from "mobx-react-lite";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogTitle,
@@ -21,7 +21,12 @@ import { MediaViewer } from "@widgets";
 interface SelectMediaDialogProps {
   open: boolean; // Corrected prop name
   onClose: () => void;
-  onSelectMedia: (mediaId: string) => void; // Renamed from onSelectArticle
+  onSelectMedia: (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => void; // Renamed from onSelectArticle
   linkedMediaIds?: string[]; // Renamed from linkedArticleIds, assuming it refers to media already in use
 }
 
@@ -32,15 +37,14 @@ export const SelectMediaDialog = observer(
     onSelectMedia, // Renamed prop
     linkedMediaIds = [], // Default to empty array if not provided, renamed
   }: SelectMediaDialogProps) => {
-    const { media, getMedia } = mediaStore; // Confirmed: using mediaStore for media
+    const { media, getMedia } = mediaStore;
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredMediaId, setHoveredMediaId] = useState<string | null>(null);
-    const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
 
     // Fetch media on component mount
     useEffect(() => {
       getMedia();
-    }, [getMedia]); // getMedia should be a dependency to avoid lint warnings if it's not stable
+    }, [getMedia]);
 
     // Keyboard event listener for "Enter" key to select hovered media
     useEffect(() => {
@@ -49,7 +53,10 @@ export const SelectMediaDialog = observer(
           event.preventDefault(); // Prevent browser default action (e.g., form submission)
 
           if (hoveredMediaId) {
-            onSelectMedia(hoveredMediaId); // Call onSelectMedia
+            const mediaItem = media.find((m) => m.id === hoveredMediaId);
+            if (mediaItem) {
+              onSelectMedia(mediaItem);
+            }
             onClose();
           }
         }
@@ -61,26 +68,6 @@ export const SelectMediaDialog = observer(
       };
     }, [hoveredMediaId, onSelectMedia, onClose]); // Dependencies for keyboard listener
 
-    // Effect for handling hover timeout (if you want to clear the preview after a delay)
-    // Based on the original code, it seemed like you wanted a delay for showing,
-    // but typically for a preview, it's immediate on hover and cleared on mouse leave.
-    // I've removed the 5-second timeout for setting the ID as it's counter-intuitive for a live preview.
-    // If you intend for the preview to disappear after a short while *after* the mouse leaves,
-    // you would implement a mouseleave timer. For now, it will clear on mouseleave.
-
-    const handleMouseEnter = (mediaId: string) => {
-      if (hoverTimerRef.current) {
-        clearTimeout(hoverTimerRef.current);
-      }
-      setHoveredMediaId(mediaId);
-    };
-
-    const handleMouseLeave = () => {
-      // You can add a small delay here if you want the preview to linger for a moment
-      // before disappearing, e.g., setTimeout(() => setHoveredMediaId(null), 200);
-      setHoveredMediaId(null);
-    };
-
     const filteredMedia = media
       .filter((mediaItem) => !linkedMediaIds.includes(mediaItem.id)) // Use mediaItem to avoid name collision
       .filter((mediaItem) =>
@@ -125,9 +112,11 @@ export const SelectMediaDialog = observer(
                   ) => (
                     <ListItemButton
                       key={mediaItem.id}
-                      onClick={() => onSelectMedia(mediaItem.id)} // Call onSelectMedia
-                      onMouseEnter={() => handleMouseEnter(mediaItem.id)}
-                      onMouseLeave={handleMouseLeave}
+                      onClick={() => setHoveredMediaId(mediaItem.id)} // Call onSelectMedia
+                      onDoubleClick={() => {
+                        onSelectMedia(mediaItem);
+                        onClose();
+                      }}
                       sx={{
                         borderRadius: 1,
                         mb: 0.5,

src/shared/modals/UploadMediaDialog/index.tsx

@@ -0,0 +1,259 @@
+import { MEDIA_TYPE_LABELS, editSightStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Paper,
+  Box,
+  CircularProgress,
+  Alert,
+  Snackbar,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+import { Save } from "lucide-react";
+import { ModelViewer3D } from "@widgets";
+
+interface UploadMediaDialogProps {
+  open: boolean;
+  onClose: () => void;
+  afterUpload: (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => void;
+}
+
+export const UploadMediaDialog = observer(
+  ({ open, onClose, afterUpload }: UploadMediaDialogProps) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+    const [mediaName, setMediaName] = useState("");
+    const [mediaFilename, setMediaFilename] = useState("");
+    const [mediaType, setMediaType] = useState(0);
+    const [mediaFile, setMediaFile] = useState<File | null>(null);
+    const { fileToUpload, uploadMedia } = editSightStore;
+    const [mediaUrl, setMediaUrl] = useState<string | null>(null);
+    const [availableMediaTypes, setAvailableMediaTypes] = useState<number[]>(
+      []
+    );
+
+    useEffect(() => {
+      if (fileToUpload) {
+        setMediaFile(fileToUpload);
+        setMediaFilename(fileToUpload.name);
+        // Try to determine media type from file extension
+        const extension = fileToUpload.name.split(".").pop()?.toLowerCase();
+        if (extension) {
+          if (["glb", "gltf"].includes(extension)) {
+            setAvailableMediaTypes([6]);
+            setMediaType(6);
+          }
+          if (["jpg", "jpeg", "png", "gif"].includes(extension)) {
+            // Для изображений доступны все типы кроме видео
+            setAvailableMediaTypes([1, 3, 4, 5]); // Фото, Иконка, Водяной знак, Панорама, 3Д-модель
+            setMediaType(1); // По умолчанию Фото
+          } else if (["mp4", "webm", "mov"].includes(extension)) {
+            // Для видео только тип Видео
+            setAvailableMediaTypes([2]);
+            setMediaType(2);
+          }
+        }
+      }
+    }, [fileToUpload]);
+
+    useEffect(() => {
+      if (mediaFile) {
+        setMediaUrl(URL.createObjectURL(mediaFile as Blob));
+      }
+    }, [mediaFile]);
+
+    // const fileFormat = useEffect(() => {
+    //   const handleKeyPress = (event: KeyboardEvent) => {
+    //     if (event.key.toLowerCase() === "enter" && !event.ctrlKey) {
+    //       event.preventDefault();
+    //       onClose();
+    //     }
+    //   };
+
+    //   window.addEventListener("keydown", handleKeyPress);
+    //   return () => window.removeEventListener("keydown", handleKeyPress);
+    // }, [onClose]);
+
+    const handleSave = async () => {
+      if (!mediaFile) return;
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const media = await uploadMedia(
+          mediaFilename,
+          mediaType,
+          mediaFile,
+          mediaName
+        );
+        if (media) {
+          await afterUpload(media);
+        }
+        setSuccess(true);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to save media");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const handleClose = () => {
+      setError(null);
+      setSuccess(false);
+      onClose();
+    };
+
+    return (
+      <>
+        <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+          <DialogTitle>Просмотр медиа</DialogTitle>
+          <DialogContent
+            className="flex gap-4"
+            dividers
+            sx={{
+              height: "600px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              pt: 2,
+            }}
+          >
+            <Box className="flex flex-col gap-4">
+              <Box className="flex gap-2">
+                <TextField
+                  fullWidth
+                  value={mediaName}
+                  onChange={(e) => setMediaName(e.target.value)}
+                  label="Название медиа"
+                  disabled={isLoading}
+                />
+                <TextField
+                  fullWidth
+                  value={mediaFilename}
+                  onChange={(e) => setMediaFilename(e.target.value)}
+                  label="Название файла"
+                  disabled={isLoading}
+                />
+              </Box>
+
+              <FormControl fullWidth sx={{ width: "50%" }}>
+                <InputLabel>Тип медиа</InputLabel>
+                <Select
+                  value={mediaType}
+                  label="Тип медиа"
+                  onChange={(e) => setMediaType(Number(e.target.value))}
+                  disabled={isLoading}
+                >
+                  {availableMediaTypes.map((type) => (
+                    <MenuItem key={type} value={type}>
+                      {
+                        MEDIA_TYPE_LABELS[
+                          type as keyof typeof MEDIA_TYPE_LABELS
+                        ]
+                      }
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+
+              <Box className="flex gap-4 h-full">
+                <Paper
+                  elevation={2}
+                  sx={{
+                    flex: 1,
+                    p: 2,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: 400,
+                  }}
+                >
+                  {/* <MediaViewer
+                    media={{
+                      id: "",
+                      media_type: mediaType,
+                      filename: mediaFilename,
+                    }}
+                  /> */}
+                  {mediaType === 6 && mediaUrl && (
+                    <ModelViewer3D fileUrl={mediaUrl} height="100%" />
+                  )}
+                  {mediaType !== 6 && mediaType !== 2 && mediaUrl && (
+                    <img
+                      src={mediaUrl ?? ""}
+                      alt="Uploaded media"
+                      style={{
+                        maxWidth: "100%",
+                        maxHeight: "100%",
+                        objectFit: "contain",
+                      }}
+                    />
+                  )}
+                </Paper>
+
+                <Box className="flex flex-col gap-2 self-end">
+                  <Button
+                    variant="contained"
+                    color="success"
+                    startIcon={
+                      isLoading ? (
+                        <CircularProgress size={16} />
+                      ) : (
+                        <Save size={16} />
+                      )
+                    }
+                    onClick={handleSave}
+                    disabled={isLoading || (!mediaName && !mediaFilename)}
+                  >
+                    Сохранить
+                  </Button>
+                </Box>
+              </Box>
+            </Box>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} disabled={isLoading}>
+              Отмена
+            </Button>
+          </DialogActions>
+        </Dialog>
+
+        <Snackbar
+          open={!!error}
+          autoHideDuration={6000}
+          onClose={() => setError(null)}
+        >
+          <Alert severity="error" onClose={() => setError(null)}>
+            {error}
+          </Alert>
+        </Snackbar>
+
+        <Snackbar
+          open={success}
+          autoHideDuration={3000}
+          onClose={() => setSuccess(false)}
+        >
+          <Alert severity="success" onClose={() => setSuccess(false)}>
+            Медиа успешно сохранено
+          </Alert>
+        </Snackbar>
+      </>
+    );
+  }
+);

src/shared/modals/index.ts

@@ -1,3 +1,4 @@
 export * from "./SelectArticleDialog";
 export * from "./SelectMediaDialog";
 export * from "./PreviewMediaDialog";
+export * from "./UploadMediaDialog";