feat: big major update

src/pages/Route/RouteEditPage/index.tsx

@@ -13,24 +13,31 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer, VideoPreviewCard } from "@widgets";
+import {
+  MediaViewer,
+  VideoPreviewCard,
+  ImageUploadCard,
+  DeleteModal,
+} from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Copy, Save, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-
-import { carrierStore } from "../../../shared/store/CarrierStore";
-import { articlesStore } from "../../../shared/store/ArticlesStore";
+import { toast } from "react-toastify";
 import {
+  carrierStore,
+  articlesStore,
   routeStore,
   languageStore,
+  mediaStore,
+  isMediaIdEmpty,
+  stationsStore,
   ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   UploadMediaDialog,
+  PreviewMediaDialog,
   LoadingSpinner,
 } from "@shared";
-import { toast } from "react-toastify";
-import { stationsStore } from "@shared";
 import { LinkedItems } from "../LinekedStations";
 
 export const RouteEditPage = observer(() => {
@@ -44,6 +51,14 @@ export const RouteEditPage = observer(() => {
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
   const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [isSelectIconDialogOpen, setIsSelectIconDialogOpen] = useState(false);
+  const [isUploadIconDialogOpen, setIsUploadIconDialogOpen] = useState(false);
+  const [isPreviewIconOpen, setIsPreviewIconOpen] = useState(false);
+  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
+  const [previewIconId, setPreviewIconId] = useState("");
+  const [activeIconMenuType, setActiveIconMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
   const [coordinates, setCoordinates] = useState<string>("");
@@ -71,10 +86,32 @@ export const RouteEditPage = observer(() => {
       await carrierStore.getCarriers(language);
       await stationsStore.getStations();
       await articlesStore.getArticleList();
+      await mediaStore.getMedia();
     };
     fetchData();
   }, [id, language]);
 
+  const handleIconSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    routeStore.setEditRouteData({ icon: media.id });
+    setIsSelectIconDialogOpen(false);
+  };
+
+  const selectedIconMedia =
+    editRouteData.icon && !isMediaIdEmpty(editRouteData.icon)
+      ? mediaStore.media.find((m) => m.id === editRouteData.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(editRouteData.icon)
+    ? null
+    : (selectedIconMedia?.id ?? editRouteData.icon);
+  const effectiveVideoId = isMediaIdEmpty(editRouteData.video_preview)
+    ? null
+    : editRouteData.video_preview;
+
   useEffect(() => {
     if (editRouteData.path && editRouteData.path.length > 0) {
       const formattedPath = editRouteData.path
@@ -552,16 +589,42 @@ export const RouteEditPage = observer(() => {
             </Button>
           </Box>
 
-          <VideoPreviewCard
-            title="Видеозаставка"
-            videoId={editRouteData.video_preview}
-            onVideoClick={handleVideoPreviewClick}
-            onDeleteVideoClick={() => {
-              routeStore.setEditRouteData({ video_preview: "" });
-            }}
-            onSelectVideoClick={handleVideoFileSelect}
-            className="w-full"
-          />
+          <Box className="w-full flex justify-center gap-4 flex-wrap">
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <ImageUploadCard
+                title="Иконка маршрута"
+                imageKey="thumbnail"
+                imageUrl={effectiveIconUrl}
+                onImageClick={() => {
+                  setIsPreviewIconOpen(true);
+                  setPreviewIconId(
+                    selectedIconMedia?.id ?? editRouteData.icon ?? ""
+                  );
+                }}
+                onDeleteImageClick={() => setIsDeleteIconModalOpen(true)}
+                onSelectFileClick={() => {
+                  setActiveIconMenuType("image");
+                  setIsSelectIconDialogOpen(true);
+                }}
+                setUploadMediaOpen={() => {
+                  setIsUploadIconDialogOpen(true);
+                  setActiveIconMenuType("image");
+                }}
+              />
+            </div>
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <VideoPreviewCard
+                title="Видеозаставка"
+                videoId={effectiveVideoId}
+                onVideoClick={handleVideoPreviewClick}
+                onDeleteVideoClick={() => {
+                  routeStore.setEditRouteData({ video_preview: "" });
+                }}
+                onSelectVideoClick={handleVideoFileSelect}
+                className="w-full"
+              />
+            </div>
+          </Box>
         </Box>
 
         <LinkedItems
@@ -621,10 +684,10 @@ export const RouteEditPage = observer(() => {
         <DialogTitle>Предпросмотр видео</DialogTitle>
         <DialogContent>
           <Box className="flex justify-center items-center p-4">
-            {editRouteData.video_preview && (
+            {effectiveVideoId && (
               <MediaViewer
                 media={{
-                  id: editRouteData.video_preview,
+                  id: effectiveVideoId,
                   media_type: 2,
                   filename: "video_preview",
                 }}
@@ -648,6 +711,38 @@ export const RouteEditPage = observer(() => {
         initialFile={fileToUpload || undefined}
         afterUpload={handleVideoUpload}
       />
+
+      <SelectMediaDialog
+        open={isSelectIconDialogOpen}
+        onClose={() => setIsSelectIconDialogOpen(false)}
+        onSelectMedia={handleIconSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadIconDialogOpen}
+        onClose={() => setIsUploadIconDialogOpen(false)}
+        contextObjectName={editRouteData.route_name || "Маршрут"}
+        contextType="route"
+        afterUpload={handleIconSelect}
+        hardcodeType={activeIconMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewIconOpen}
+        onClose={() => setIsPreviewIconOpen(false)}
+        mediaId={previewIconId}
+      />
+
+      <DeleteModal
+        open={isDeleteIconModalOpen}
+        onDelete={() => {
+          routeStore.setEditRouteData({ icon: "" });
+          setIsDeleteIconModalOpen(false);
+        }}
+        onCancel={() => setIsDeleteIconModalOpen(false)}
+        edit
+      />
     </Paper>
   );
 });