feat: Select article list in sight

src/shared/modals/SelectArticleDialog/index.tsx

@@ -0,0 +1,188 @@
+import { articlesStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Box,
+  Typography,
+  InputAdornment,
+} from "@mui/material";
+import { ImagePlus, Search } from "lucide-react";
+import { ReactMarkdownComponent } from "@widgets";
+
+interface SelectArticleModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelectArticle: (articleId: string) => void;
+  linkedArticleIds?: string[]; // Add optional prop for linked articles
+}
+
+export const SelectArticleModal = observer(
+  ({
+    open,
+    onClose,
+    onSelectArticle,
+
+    linkedArticleIds = [], // Default to empty array if not provided
+  }: SelectArticleModalProps) => {
+    const { articles, getArticle } = articlesStore; // articles here refers to fetched articles from store
+    const [searchQuery, setSearchQuery] = useState("");
+    const [hoveredArticleId, setHoveredArticleId] = useState<string | null>(
+      null
+    );
+    const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+      if (hoveredArticleId) {
+        hoverTimerRef.current = setTimeout(() => {
+          getArticle(hoveredArticleId);
+        }, 200);
+      }
+
+      return () => {
+        if (hoverTimerRef.current) {
+          clearTimeout(hoverTimerRef.current);
+        }
+      };
+    }, [hoveredArticleId, getArticle]);
+
+    const handleArticleHover = (articleId: string) => {
+      setHoveredArticleId(articleId);
+    };
+
+    const handleArticleLeave = () => {
+      setHoveredArticleId(null);
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+
+    const filteredArticles = articles
+      .filter((article) => !linkedArticleIds.includes(article.id))
+      .filter((article) =>
+        article.service_name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+
+    return (
+      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+        <DialogTitle>Выберите существующую статью</DialogTitle>
+        <DialogContent
+          className="flex gap-4"
+          dividers // Adds a divider below the title and above the actions
+          sx={{ height: "600px", display: "flex", flexDirection: "row" }} // Fixed height for DialogContent
+        >
+          <Paper className="w-[66%] flex flex-col">
+            <TextField
+              fullWidth
+              placeholder="Поиск статей..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              sx={{ mb: 2, mt: 1 }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search size={20} />
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <List sx={{ flexGrow: 1, overflowY: "auto" }}>
+              {filteredArticles.map((article) => (
+                <ListItemButton
+                  key={article.id}
+                  onClick={() => onSelectArticle(article.id)}
+                  onMouseEnter={() => handleArticleHover(article.id)}
+                  onMouseLeave={handleArticleLeave}
+                  sx={{
+                    borderRadius: 1,
+                    mb: 0.5,
+                    "&:hover": {
+                      backgroundColor: "action.hover",
+                    },
+                  }}
+                >
+                  <ListItemText primary={article.service_name} />
+                </ListItemButton>
+              ))}
+            </List>
+          </Paper>
+          <Paper className="flex-1 flex flex-col">
+            <Box
+              className="rounded-2xl overflow-hidden"
+              sx={{
+                width: "100%",
+                height: "100%",
+                background: "#877361",
+                borderColor: "grey.300",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              {/* Media Preview Area */}
+              <Box
+                sx={{
+                  width: "100%",
+                  height: 200,
+                  flexShrink: 0,
+                  backgroundColor: "grey.300",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <ImagePlus size={48} color="grey" />
+              </Box>
+
+              {/* Title Area */}
+              <Box
+                sx={{
+                  width: "100%",
+                  height: "70px",
+                  background: "#877361",
+                  display: "flex",
+                  flexShrink: 0,
+                  alignItems: "center",
+                  borderBottom: "1px solid",
+                  px: 2,
+                }}
+              >
+                <Typography variant="h6" color="white">
+                  {articlesStore.articleData?.heading ||
+                    "Нет данных для предпросмотра"}
+                </Typography>
+              </Box>
+
+              {/* Body Preview Area */}
+              <Box
+                sx={{
+                  px: 2,
+                  flexGrow: 1,
+                  overflowY: "auto",
+                  backgroundColor: "#877361", // To make markdown readable
+                  color: "white",
+                  py: 1,
+                }}
+              >
+                <ReactMarkdownComponent
+                  value={articlesStore.articleData?.body || ""}
+                />
+              </Box>
+            </Box>
+          </Paper>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>Отмена</Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+);