fix: Fix Map page

src/pages/Carrier/CarrierEditPage/index.tsx

@@ -14,7 +14,12 @@ import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import { carrierStore, cityStore, mediaStore } from "@shared";
 import { useState, useEffect } from "react";
-import { MediaViewer } from "@widgets";
+import { MediaViewer, ImageUploadCard } from "@widgets";
+import {
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";
 
 export const CarrierEditPage = observer(() => {
   const navigate = useNavigate();
@@ -23,22 +28,30 @@ export const CarrierEditPage = observer(() => {
     carrierStore;
 
   const [isLoading, setIsLoading] = useState(false);
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | null
+  >(null);
 
   useEffect(() => {
     (async () => {
+      await cityStore.getCities("ru");
+      await cityStore.getCities("en");
+      await cityStore.getCities("zh");
       await getCarrier(Number(id));
+
       setEditCarrierData(
         carrier?.[Number(id)]?.full_name as string,
         carrier?.[Number(id)]?.short_name as string,
-        carrier?.[Number(id)]?.city as string,
+
         carrier?.[Number(id)]?.city_id as number,
-        carrier?.[Number(id)]?.main_color as string,
-        carrier?.[Number(id)]?.left_color as string,
-        carrier?.[Number(id)]?.right_color as string,
         carrier?.[Number(id)]?.slogan as string,
         carrier?.[Number(id)]?.logo as string
       );
-      cityStore.getCities("ru");
+
       mediaStore.getMedia();
     })();
   }, [id]);
@@ -56,6 +69,26 @@ export const CarrierEditPage = observer(() => {
     }
   };
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setEditCarrierData(
+      editCarrierData.full_name,
+      editCarrierData.short_name,
+
+      editCarrierData.city_id,
+      editCarrierData.slogan,
+      media.id
+    );
+  };
+
+  const selectedMedia = editCarrierData.logo
+    ? mediaStore.media.find((m) => m.id === editCarrierData.logo)
+    : null;
+
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
       <div className="flex items-center gap-4">
@@ -79,17 +112,13 @@ export const CarrierEditPage = observer(() => {
               setEditCarrierData(
                 editCarrierData.full_name,
                 editCarrierData.short_name,
-                editCarrierData.city,
                 Number(e.target.value),
-                editCarrierData.main_color,
-                editCarrierData.left_color,
-                editCarrierData.right_color,
                 editCarrierData.slogan,
                 editCarrierData.logo
               )
             }
           >
-            {cityStore.cities.ru.map((city) => (
+            {cityStore.cities.ru.data?.map((city) => (
               <MenuItem key={city.id} value={city.id}>
                 {city.name}
               </MenuItem>
@@ -106,11 +135,8 @@ export const CarrierEditPage = observer(() => {
             setEditCarrierData(
               e.target.value,
               editCarrierData.short_name,
-              editCarrierData.city,
+
               editCarrierData.city_id,
-              editCarrierData.main_color,
-              editCarrierData.left_color,
-              editCarrierData.right_color,
               editCarrierData.slogan,
               editCarrierData.logo
             )
@@ -126,104 +152,14 @@ export const CarrierEditPage = observer(() => {
             setEditCarrierData(
               editCarrierData.full_name,
               e.target.value,
-              editCarrierData.city,
+
               editCarrierData.city_id,
-              editCarrierData.main_color,
-              editCarrierData.left_color,
-              editCarrierData.right_color,
               editCarrierData.slogan,
               editCarrierData.logo
             )
           }
         />
 
-        <div className="flex gap-4 w-full">
-          <TextField
-            fullWidth
-            label="Основной цвет"
-            value={editCarrierData.main_color}
-            className="flex-1 w-full"
-            onChange={(e) =>
-              setEditCarrierData(
-                editCarrierData.full_name,
-                editCarrierData.short_name,
-                editCarrierData.city,
-                editCarrierData.city_id,
-                e.target.value,
-                editCarrierData.left_color,
-                editCarrierData.right_color,
-                editCarrierData.slogan,
-                editCarrierData.logo
-              )
-            }
-            type="color"
-            sx={{
-              "& input": {
-                height: "50px",
-                paddingBlock: "14px",
-                paddingInline: "14px",
-                cursor: "pointer",
-              },
-            }}
-          />
-          <TextField
-            fullWidth
-            label="Цвет левого виджета"
-            value={editCarrierData.left_color}
-            className="flex-1 w-full"
-            onChange={(e) =>
-              setEditCarrierData(
-                editCarrierData.full_name,
-                editCarrierData.short_name,
-                editCarrierData.city,
-                editCarrierData.city_id,
-                editCarrierData.main_color,
-                e.target.value,
-                editCarrierData.right_color,
-                editCarrierData.slogan,
-                editCarrierData.logo
-              )
-            }
-            type="color"
-            sx={{
-              "& input": {
-                height: "50px",
-                paddingBlock: "14px",
-                paddingInline: "14px",
-                cursor: "pointer",
-              },
-            }}
-          />
-          <TextField
-            fullWidth
-            label="Цвет правого виджета"
-            value={editCarrierData.right_color}
-            className="flex-1 w-full"
-            onChange={(e) =>
-              setEditCarrierData(
-                editCarrierData.full_name,
-                editCarrierData.short_name,
-                editCarrierData.city,
-                editCarrierData.city_id,
-                editCarrierData.main_color,
-                editCarrierData.left_color,
-                e.target.value,
-                editCarrierData.slogan,
-                editCarrierData.logo
-              )
-            }
-            type="color"
-            sx={{
-              "& input": {
-                height: "50px",
-                paddingBlock: "14px",
-                paddingInline: "14px",
-                cursor: "pointer",
-              },
-            }}
-          />
-        </div>
-
         <TextField
           fullWidth
           label="Слоган"
@@ -232,54 +168,43 @@ export const CarrierEditPage = observer(() => {
             setEditCarrierData(
               editCarrierData.full_name,
               editCarrierData.short_name,
-              editCarrierData.city,
+
               editCarrierData.city_id,
-              editCarrierData.main_color,
-              editCarrierData.left_color,
-              editCarrierData.right_color,
               e.target.value,
               editCarrierData.logo
             )
           }
         />
 
-        <div className="w-full flex flex-col gap-4">
-          <FormControl fullWidth>
-            <InputLabel>Логотип</InputLabel>
-            <Select
-              value={editCarrierData.logo || ""}
-              label="Логотип"
-              required
-              onChange={(e) =>
-                setEditCarrierData(
-                  editCarrierData.full_name,
-                  editCarrierData.short_name,
-                  editCarrierData.city,
-                  editCarrierData.city_id,
-                  editCarrierData.main_color,
-                  editCarrierData.left_color,
-                  editCarrierData.right_color,
-                  editCarrierData.slogan,
-                  e.target.value as string
-                )
-              }
-            >
-              {mediaStore.media
-                .filter((media) => media.media_type === 3)
-                .map((media) => (
-                  <MenuItem key={media.id} value={media.id}>
-                    {media.media_name || media.filename}
-                  </MenuItem>
-                ))}
-            </Select>
-          </FormControl>
-          {editCarrierData.logo && (
-            <div className="w-32 h-32">
-              <MediaViewer
-                media={{ id: editCarrierData.logo, media_type: 1 }}
-              />
-            </div>
-          )}
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Логотип перевозчика"
+            imageKey="thumbnail"
+            imageUrl={selectedMedia?.id}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(selectedMedia?.id ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setEditCarrierData(
+                editCarrierData.full_name,
+                editCarrierData.short_name,
+
+                editCarrierData.city_id,
+                editCarrierData.slogan,
+                ""
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("thumbnail");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("thumbnail");
+            }}
+          />
         </div>
 
         <Button
@@ -302,6 +227,26 @@ export const CarrierEditPage = observer(() => {
           )}
         </Button>
       </div>
+
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={3}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
     </Paper>
   );
 });