feat: Refactor old code with delete modal and icons for buttons

src/shared/const/index.ts

@@ -7,3 +7,14 @@ export const MEDIA_TYPE_LABELS = {
   5: "Панорама",
   6: "3Д-модель",
 };
+
+export const MEDIA_TYPE_VALUES = {
+  photo: 1,
+  video: 2,
+  icon: 3,
+  thumbnail: 3,
+  watermark_lu: 4,
+  watermark_rd: 4,
+  panorama: 5,
+  model: 6,
+};

src/shared/modals/SelectArticleDialog/index.tsx

@@ -1,4 +1,4 @@
-import { articlesStore, authInstance, languageStore } from "@shared";
+import { articlesStore, authInstance, Language, languageStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import {
@@ -17,7 +17,7 @@ import {
   InputAdornment,
 } from "@mui/material";
 import { ImagePlus, Search } from "lucide-react";
-import { ReactMarkdownComponent } from "@widgets";
+import { MediaViewer, ReactMarkdownComponent } from "@widgets";
 
 interface SelectArticleModalProps {
   open: boolean;
@@ -128,10 +128,12 @@ export const SelectArticleModal = observer(
             height: "600px",
             display: "flex",
             flexDirection: "row",
+            alignItems: "center",
+
             p: 2,
           }}
         >
-          <Paper className="w-[66%] flex flex-col" elevation={2}>
+          <Paper className="w-[66%] flex flex-col h-full" elevation={2}>
             <TextField
               fullWidth
               placeholder="Поиск статей..."
@@ -201,108 +203,86 @@ export const SelectArticleModal = observer(
               )}
             </List>
           </Paper>
-          <Paper className="flex-1 flex flex-col" elevation={2}>
+          <Paper
+            elevation={3}
+            sx={{
+              width: "100%",
+              minWidth: 320,
+              maxWidth: 310,
+
+              background:
+                "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+
+              padding: 0,
+              margin: "0px auto",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
             <Box
-              className="rounded-2xl overflow-hidden"
               sx={{
                 width: "100%",
-                height: "100%",
-                background: "#877361",
-                borderColor: "grey.300",
+                height: 175,
                 display: "flex",
-                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "3px",
               }}
             >
-              {isLoading ? (
-                <Box
-                  sx={{
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
+              {articlesStore.articleMedia ? (
+                <MediaViewer
+                  media={{
+                    id: articlesStore.articleMedia.id,
+                    media_type: articlesStore.articleMedia.media_type,
+                    filename: articlesStore.articleMedia.filename,
                   }}
-                >
-                  <Typography color="white">Загрузка...</Typography>
-                </Box>
+                />
               ) : (
-                <>
-                  {articlesStore.articleMedia && (
-                    <Box sx={{ p: 2, backgroundColor: "rgba(0,0,0,0.1)" }}>
-                      <img
-                        src={`${import.meta.env.VITE_KRBL_MEDIA}${
-                          articlesStore.articleMedia.id
-                        }/download?token=${token}`}
-                        alt={articlesStore.articleMedia.filename}
-                        style={{
-                          maxWidth: "100%",
-                          height: "auto",
-                          maxHeight: "300px",
-                          objectFit: "contain",
-                          borderRadius: 8,
-                        }}
-                      />
-                    </Box>
-                  )}
-                  {!articlesStore.articleMedia && (
-                    <Box
-                      sx={{
-                        width: "100%",
-                        height: 200,
-                        flexShrink: 0,
-                        backgroundColor: "rgba(0,0,0,0.1)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                    >
-                      <ImagePlus size={48} color="white" />
-                    </Box>
-                  )}
-
-                  <Box
-                    sx={{
-                      width: "100%",
-                      minHeight: "70px",
-                      background: "#877361",
-                      display: "flex",
-                      flexShrink: 0,
-                      alignItems: "center",
-                      borderBottom: "1px solid rgba(255,255,255,0.1)",
-                      px: 2,
-                    }}
-                  >
-                    <Typography variant="h6" color="white">
-                      {articlesStore.articleData?.heading || "Выберите статью"}
-                    </Typography>
-                  </Box>
-
-                  <Box
-                    sx={{
-                      px: 2,
-                      flexGrow: 1,
-                      overflowY: "auto",
-                      backgroundColor: "#877361",
-                      color: "white",
-                      py: 1,
-                    }}
-                  >
-                    {articlesStore.articleData?.body ? (
-                      <ReactMarkdownComponent
-                        value={articlesStore.articleData.body}
-                      />
-                    ) : (
-                      <Typography
-                        color="rgba(255,255,255,0.7)"
-                        sx={{ textAlign: "center", mt: 4 }}
-                      >
-                        Предпросмотр статьи появится здесь
-                      </Typography>
-                    )}
-                  </Box>
-                </>
+                <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%",
+                }}
+              >
+                {articlesStore.articleData?.heading || "Название cтатьи"}
+              </Typography>
+            </Box>
+
+            {articlesStore.articleData?.body && (
+              <Box
+                sx={{
+                  padding: 1,
+                  maxHeight: "200px",
+                  overflowY: "scroll",
+                  background:
+                    "#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
+                }}
+              >
+                <ReactMarkdownComponent
+                  value={articlesStore.articleData?.body || "Описание"}
+                />
+              </Box>
+            )}
           </Paper>
         </DialogContent>
         <DialogActions sx={{ p: 2 }}>

src/shared/modals/SelectMediaDialog/index.tsx

@@ -1,4 +1,4 @@
-import { mediaStore } from "@shared";
+import { Media, mediaStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import {
@@ -29,6 +29,7 @@ interface SelectMediaDialogProps {
   }) => void; // Renamed from onSelectArticle
   onSelectForSightMedia?: (mediaId: string) => void;
   linkedMediaIds?: string[]; // Renamed from linkedArticleIds, assuming it refers to media already in use
+  mediaType?: number;
 }
 
 export const SelectMediaDialog = observer(
@@ -38,12 +39,29 @@ export const SelectMediaDialog = observer(
     onSelectMedia, // Renamed prop
     onSelectForSightMedia,
     linkedMediaIds = [], // Default to empty array if not provided, renamed
+    mediaType,
   }: SelectMediaDialogProps) => {
     const { media, getMedia } = mediaStore;
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredMediaId, setHoveredMediaId] = useState<string | null>(null);
+    const [currentHoveredMedia, setCurrentHoveredMedia] =
+      useState<Media | null>(null);
+
+    useEffect(() => {
+      if (hoveredMediaId) {
+        setCurrentHoveredMedia(
+          media.find((m) => m.id === hoveredMediaId) ?? null
+        );
+      }
+    }, [hoveredMediaId]);
+
+    const handleClose = () => {
+      setHoveredMediaId(null);
+      setCurrentHoveredMedia(null);
+      onClose();
+      setSearchQuery("");
+    };
 
-    // Fetch media on component mount
     useEffect(() => {
       getMedia();
     }, [getMedia]);
@@ -63,7 +81,7 @@ export const SelectMediaDialog = observer(
                 onSelectMedia(mediaItem);
               }
             }
-            onClose();
+            handleClose();
           }
         }
       };
@@ -74,19 +92,21 @@ export const SelectMediaDialog = observer(
       };
     }, [hoveredMediaId, onSelectMedia, onClose]); // Dependencies for keyboard listener
 
-    const filteredMedia = media
+    let filteredMedia = media
       .filter((mediaItem) => !linkedMediaIds.includes(mediaItem.id)) // Use mediaItem to avoid name collision
       .filter((mediaItem) =>
         mediaItem.media_name.toLowerCase().includes(searchQuery.toLowerCase())
       );
 
-    // Find the currently hovered media object for MediaViewer
-    const currentHoveredMedia = hoveredMediaId
-      ? media.find((m) => m.id === hoveredMediaId)
-      : null;
+    if (mediaType) {
+      filteredMedia = filteredMedia.filter(
+        (mediaItem) => mediaItem.media_type === mediaType
+      );
+      console.log(filteredMedia);
+    }
 
     return (
-      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+      <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
         <DialogTitle>Выберите существующее медиа</DialogTitle>
         <DialogContent
           className="flex gap-4"
@@ -125,14 +145,22 @@ export const SelectMediaDialog = observer(
                         } else if (onSelectMedia) {
                           onSelectMedia(mediaItem);
                         }
-                        onClose();
+                        handleClose();
                       }}
+                      selected={hoveredMediaId === mediaItem.id}
                       sx={{
                         borderRadius: 1,
                         mb: 0.5,
                         "&:hover": {
                           backgroundColor: "action.hover",
                         },
+                        "&.Mui-selected": {
+                          backgroundColor: "primary.main",
+                          color: "primary.contrastText",
+                          "&:hover": {
+                            backgroundColor: "primary.dark",
+                          },
+                        },
                       }}
                     >
                       <ListItemText primary={mediaItem.media_name} />
@@ -149,7 +177,7 @@ export const SelectMediaDialog = observer(
               )}
             </List>
           </Paper>
-          {currentHoveredMedia ? ( // Only render MediaViewer if currentHoveredMedia is found
+          {currentHoveredMedia !== null && hoveredMediaId !== null ? ( // Only render MediaViewer if currentHoveredMedia is found
             <Paper className="w-[33%] h-[100%] flex justify-center items-center">
               <MediaViewer
                 media={{
@@ -167,8 +195,28 @@ export const SelectMediaDialog = observer(
             </Paper>
           )}
         </DialogContent>
-        <DialogActions>
-          <Button onClick={onClose}>Отмена</Button>
+
+        <DialogActions sx={{ p: 2 }}>
+          <Button onClick={handleClose}>Отмена</Button>
+          <Button
+            variant="contained"
+            onClick={() => {
+              if (hoveredMediaId) {
+                const mediaItem = media.find((m) => m.id === hoveredMediaId);
+                if (mediaItem) {
+                  if (onSelectForSightMedia) {
+                    onSelectForSightMedia(mediaItem.id);
+                  } else if (onSelectMedia) {
+                    onSelectMedia(mediaItem);
+                  }
+                }
+                handleClose();
+              }
+            }}
+            disabled={hoveredMediaId === null}
+          >
+            Выбрать
+          </Button>
         </DialogActions>
       </Dialog>
     );

src/shared/store/MediaStore/index.tsx

@@ -1,7 +1,7 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import { authInstance } from "@shared";
 
-type Media = {
+export type Media = {
   id: string;
   filename: string;
   media_name: string;