feat: big major update

src/pages/Route/RouteCreatePage/index.tsx

@@ -13,22 +13,30 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer, VideoPreviewCard } from "@widgets";
+import {
+  MediaViewer,
+  VideoPreviewCard,
+  ImageUploadCard,
+} from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save, Plus, X } from "lucide-react";
 import { useEffect, useState, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { carrierStore } from "../../../shared/store/CarrierStore";
-import { articlesStore } from "../../../shared/store/ArticlesStore";
-import { Route, routeStore } from "../../../shared/store/RouteStore";
 import {
+  carrierStore,
+  articlesStore,
+  routeStore,
   languageStore,
+  mediaStore,
+  isMediaIdEmpty,
   ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   selectedCityStore,
   UploadMediaDialog,
+  PreviewMediaDialog,
 } from "@shared";
+import type { Route } from "@shared";
 
 export const RouteCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -45,18 +53,27 @@ export const RouteCreatePage = observer(() => {
   const [centerLat, setCenterLat] = useState("");
   const [centerLng, setCenterLng] = useState("");
   const [videoPreview, setVideoPreview] = useState<string>("");
+  const [icon, setIcon] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSelectArticleDialogOpen, setIsSelectArticleDialogOpen] =
     useState(false);
   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 [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;
 
   useEffect(() => {
     carrierStore.getCarriers(language);
     articlesStore.getArticleList();
+    mediaStore.getMedia();
   }, [language]);
 
   const filteredCarriers = useMemo(() => {
@@ -150,6 +167,23 @@ export const RouteCreatePage = observer(() => {
     setIsVideoPreviewOpen(true);
   };
 
+  const handleIconSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setIcon(media.id);
+    setIsSelectIconDialogOpen(false);
+  };
+
+  const selectedIconMedia =
+    icon && !isMediaIdEmpty(icon)
+      ? mediaStore.media.find((m) => m.id === icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(icon) ? null : selectedIconMedia?.id ?? icon;
+  const effectiveVideoId = isMediaIdEmpty(videoPreview) ? null : videoPreview;
+
   const handleCreateRoute = async () => {
     try {
       setIsLoading(true);
@@ -243,8 +277,8 @@ export const RouteCreatePage = observer(() => {
         center_latitude,
         center_longitude,
         path,
-        video_preview:
-          videoPreview && videoPreview !== "" ? videoPreview : undefined,
+        video_preview: !isMediaIdEmpty(videoPreview) ? videoPreview : undefined,
+        icon: !isMediaIdEmpty(icon) ? icon : undefined,
       };
 
       if (governor_appeal !== undefined) {
@@ -403,16 +437,41 @@ export const RouteCreatePage = observer(() => {
             </Button>
           </Box>
 
-          <VideoPreviewCard
-            title="Видеозаставка"
-            videoId={videoPreview}
-            onVideoClick={handleVideoPreviewClick}
-            onDeleteVideoClick={() => {
-              setVideoPreview("");
-            }}
-            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 ?? icon ?? "");
+                }}
+                onDeleteImageClick={() => {
+                  setIcon("");
+                  setActiveIconMenuType(null);
+                }}
+                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={() => setVideoPreview("")}
+                onSelectVideoClick={handleVideoFileSelect}
+                className="w-full"
+              />
+            </div>
+          </Box>
 
           <FormControl fullWidth required>
             <InputLabel>Прямой/обратный маршрут</InputLabel>
@@ -522,7 +581,7 @@ export const RouteCreatePage = observer(() => {
         onSelectMedia={handleVideoSelect}
         mediaType={2}
       />
-      {videoPreview && videoPreview !== "" && (
+      {effectiveVideoId && (
         <Dialog
           open={isVideoPreviewOpen}
           onClose={() => setIsVideoPreviewOpen(false)}
@@ -534,7 +593,7 @@ export const RouteCreatePage = observer(() => {
             <Box className="flex justify-center items-center p-4">
               <MediaViewer
                 media={{
-                  id: videoPreview,
+                  id: effectiveVideoId,
                   media_type: 2,
                   filename: "video_preview",
                 }}
@@ -560,6 +619,28 @@ export const RouteCreatePage = observer(() => {
         initialFile={fileToUpload || undefined}
         afterUpload={handleVideoUpload}
       />
+
+      <SelectMediaDialog
+        open={isSelectIconDialogOpen}
+        onClose={() => setIsSelectIconDialogOpen(false)}
+        onSelectMedia={handleIconSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadIconDialogOpen}
+        onClose={() => setIsUploadIconDialogOpen(false)}
+        contextObjectName={routeName || "Маршрут"}
+        contextType="route"
+        afterUpload={handleIconSelect}
+        hardcodeType={activeIconMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewIconOpen}
+        onClose={() => setIsPreviewIconOpen(false)}
+        mediaId={previewIconId}
+      />
     </Paper>
   );
 });