feat: big major update

src/pages/Station/StationEditPage/index.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Paper,
   TextField,
   Select,
   MenuItem,
@@ -9,20 +8,28 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import {
   stationsStore,
   languageStore,
   cityStore,
+  mediaStore,
+  isMediaIdEmpty,
   LoadingSpinner,
+  SelectMediaDialog,
+  PreviewMediaDialog,
+  UploadMediaDialog,
 } from "@shared";
 import { useEffect, useState } from "react";
-import { LanguageSwitcher } from "@widgets";
+import {
+  ImageUploadCard,
+  LanguageSwitcher,
+  SaveWithoutCityAgree,
+  DeleteModal,
+} from "@widgets";
 import { LinkedSights } from "../LinkedSights";
-import { SaveWithoutCityAgree } from "@widgets";
 
 export const StationEditPage = observer(() => {
   const navigate = useNavigate();
@@ -39,6 +46,14 @@ export const StationEditPage = observer(() => {
   } = stationsStore;
   const { cities, getCities } = cityStore;
   const [coordinates, setCoordinates] = useState<string>("");
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
 
   const [isSaveWarningOpen, setIsSaveWarningOpen] = useState(false);
 
@@ -95,6 +110,23 @@ export const StationEditPage = observer(() => {
     setIsSaveWarningOpen(false);
   };
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setEditCommonData({ icon: media.id });
+  };
+
+  const selectedMedia =
+    editStationData.common.icon && !isMediaIdEmpty(editStationData.common.icon)
+      ? mediaStore.media.find((m) => m.id === editStationData.common.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(editStationData.common.icon)
+    ? null
+    : selectedMedia?.id ?? editStationData.common.icon;
+
   useEffect(() => {
     const fetchAndSetStationData = async () => {
       if (!id) {
@@ -109,6 +141,7 @@ export const StationEditPage = observer(() => {
         await getCities("ru");
         await getCities("en");
         await getCities("zh");
+        await mediaStore.getMedia();
       } finally {
         setIsLoadingData(false);
       }
@@ -133,7 +166,7 @@ export const StationEditPage = observer(() => {
   }
 
   return (
-    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+    <Box className="w-full h-full p-3 flex flex-col gap-10">
       <LanguageSwitcher />
 
       <div className="flex items-center gap-4">
@@ -239,6 +272,29 @@ export const StationEditPage = observer(() => {
           </Select>
         </FormControl>
 
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Иконка остановки"
+            imageKey="thumbnail"
+            imageUrl={effectiveIconUrl}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(effectiveIconUrl ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setIsDeleteIconModalOpen(true);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("image");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("image");
+            }}
+          />
+        </div>
+
         {id && (
           <LinkedSights
             parentId={Number(id)}
@@ -262,6 +318,38 @@ export const StationEditPage = observer(() => {
         </Button>
       </div>
 
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={editStationData[language].name || "Остановка"}
+        contextType="station"
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
+
+      <DeleteModal
+        open={isDeleteIconModalOpen}
+        onDelete={() => {
+          setEditCommonData({ icon: "" });
+          setIsDeleteIconModalOpen(false);
+        }}
+        onCancel={() => setIsDeleteIconModalOpen(false)}
+        edit
+      />
+
       {/* ИНТЕГРИРОВАННОЕ ПРЕДУПРЕЖДАЮЩЕЕ ОКНО */}
       {isSaveWarningOpen && (
         <SaveWithoutCityAgree
@@ -271,6 +359,6 @@ export const StationEditPage = observer(() => {
           }}
         />
       )}
-    </Paper>
+    </Box>
   );
 });