fix: Fix Map page

2025-06-12 22:50:43 +03:00
parent 27cb644242
commit 300ff262ce
41 changed files with 2216 additions and 1055 deletions
--- a/src/pages/City/CityCreatePage/index.tsx
+++ b/src/pages/City/CityCreatePage/index.tsx
@@ -9,14 +9,18 @@ import {
  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save, ImagePlus } from "lucide-react";
+import { ArrowLeft, Save, ImagePlus, Minus } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { cityStore, countryStore, languageStore, mediaStore } from "@shared";
 import { useState, useEffect } from "react";
-import { LanguageSwitcher, MediaViewer } from "@widgets";
-import { SelectMediaDialog } from "@shared";
+import { LanguageSwitcher, MediaViewer, ImageUploadCard } from "@widgets";
+import {
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";

 export const CityCreatePage = observer(() => {
  const navigate = useNavigate();
@@ -24,12 +28,20 @@ export const CityCreatePage = observer(() => {
  const { createCityData, setCreateCityData } = cityStore;
  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);
  const { getCountries } = countryStore;
  const { getMedia } = mediaStore;

  useEffect(() => {
    (async () => {
-      await getCountries(language);
+      await getCountries("ru");
+      await getCountries("en");
+      await getCountries("zh");
      await getMedia();
    })();
  }, [language]);
@@ -55,7 +67,6 @@ export const CityCreatePage = observer(() => {
  }) => {
    setCreateCityData(
      createCityData[language].name,
-      createCityData.country,
      createCityData.country_code,
      media.id,
      language
@@ -80,6 +91,9 @@ export const CityCreatePage = observer(() => {
      </div>

      <div className="flex flex-col gap-10 w-full items-end">
+        <div className="flex gap-10 items-center mb-5 max-w-[80%]">
+          <h1 className="text-3xl break-words">Создание города</h1>
+        </div>
        <TextField
          fullWidth
          label="Название города"
@@ -88,7 +102,6 @@ export const CityCreatePage = observer(() => {
          onChange={(e) =>
            setCreateCityData(
              e.target.value,
-              createCityData.country,
              createCityData.country_code,
              createCityData.arms,
              language
@@ -103,19 +116,15 @@ export const CityCreatePage = observer(() => {
            label="Страна"
            required
            onChange={(e) => {
-              const selectedCountry = countryStore.countries[language]?.find(
-                (country) => country.code === e.target.value
-              );
              setCreateCityData(
                createCityData[language].name,
-                selectedCountry?.name || "",
                e.target.value,
                createCityData.arms,
                language
              );
            }}
          >
-            {countryStore.countries[language].map((country) => (
+            {countryStore.countries["ru"]?.data?.map((country) => (
              <MenuItem key={country.code} value={country.code}>
                {country.name}
              </MenuItem>
@@ -123,44 +132,39 @@ export const CityCreatePage = observer(() => {
          </Select>
        </FormControl>

-        <div className="w-full flex flex-col gap-4">
-          <label className="text-sm text-gray-600">Герб города</label>
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outlined"
-              onClick={() => setIsSelectMediaOpen(true)}
-              startIcon={<ImagePlus size={20} />}
-            >
-              Выбрать герб
-            </Button>
-            {selectedMedia && (
-              <span className="text-sm text-gray-600">
-                {selectedMedia.media_name || selectedMedia.filename}
-              </span>
-            )}
-          </div>
-          {selectedMedia && (
-            <Box
-              sx={{
-                width: "200px",
-                height: "200px",
-                border: "1px solid #e0e0e0",
-                borderRadius: "8px",
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MediaViewer
-                media={{
-                  id: selectedMedia.id,
-                  media_type: selectedMedia.media_type,
-                  filename: selectedMedia.filename,
-                }}
-              />
-            </Box>
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          {!selectedMedia && (
+            <div className="flex items-center gap-2 text-red-500">
+              <Minus size={20} />
+              <span className="text-sm">Герб города не выбран</span>
+            </div>
          )}
+          <ImageUploadCard
+            title="Герб города"
+            imageKey="thumbnail"
+            imageUrl={selectedMedia?.id}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(selectedMedia?.id ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setCreateCityData(
+                createCityData[language].name,
+                createCityData.country_code,
+                "",
+                language
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("thumbnail");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("thumbnail");
+            }}
+          />
        </div>

        <Button
@@ -184,6 +188,19 @@ export const CityCreatePage = observer(() => {
        onSelectMedia={handleMediaSelect}
        mediaType={3} // Тип медиа для иконок
      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
    </Paper>
  );
 });
--- a/src/pages/City/CityEditPage/index.tsx
+++ b/src/pages/City/CityEditPage/index.tsx
@@ -21,13 +21,23 @@ import {
  CashedCities,
 } from "@shared";
 import { useEffect, useState } from "react";
-import { LanguageSwitcher, MediaViewer } from "@widgets";
-import { SelectMediaDialog } from "@shared";
+import { LanguageSwitcher, MediaViewer, ImageUploadCard } from "@widgets";
+import {
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";

 export const CityEditPage = observer(() => {
  const navigate = useNavigate();
  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);
  const { language } = languageStore;
  const { id } = useParams();
  const { editCityData, editCity, getCity, setEditCityData } = cityStore;
@@ -49,20 +59,22 @@ export const CityEditPage = observer(() => {
  useEffect(() => {
    (async () => {
      if (id) {
-        const data = await getCity(id as string, language);
-        setEditCityData(
-          data.name,
-          data.country,
-          data.country_code,
-          data.arms,
-          language
-        );
-        await getOneMedia(data.arms as string);
+        // Fetch data for all languages
+        const ruData = await getCity(id as string, "ru");
+        const enData = await getCity(id as string, "en");
+        const zhData = await getCity(id as string, "zh");
+
+        // Set data for each language
+        setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
+        setEditCityData(enData.name, enData.country_code, enData.arms, "en");
+        setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
+
+        await getOneMedia(ruData.arms as string);
        await getCountries(language);
        await getMedia();
      }
    })();
-  }, [id, language]);
+  }, [id]);

  const handleMediaSelect = (media: {
    id: string;
@@ -72,7 +84,6 @@ export const CityEditPage = observer(() => {
  }) => {
    setEditCityData(
      editCityData[language].name,
-      editCityData.country,
      editCityData.country_code,
      media.id,
      language
@@ -97,6 +108,9 @@ export const CityEditPage = observer(() => {
      </div>

      <div className="flex flex-col gap-10 w-full items-end">
+        <div className="flex gap-10 items-center mb-5 max-w-[80%]">
+          <h1 className="text-3xl break-words">{editCityData.ru.name}</h1>
+        </div>
        <TextField
          fullWidth
          label="Название"
@@ -105,7 +119,6 @@ export const CityEditPage = observer(() => {
          onChange={(e) =>
            setEditCityData(
              e.target.value,
-              editCityData.country,
              editCityData.country_code,
              editCityData.arms,
              language
@@ -120,19 +133,15 @@ export const CityEditPage = observer(() => {
            label="Страна"
            required
            onChange={(e) => {
-              const selectedCountry = countryStore.countries[language]?.find(
-                (country) => country.code === e.target.value
-              );
              setEditCityData(
-                editCityData[language as keyof CashedCities]?.name || "",
-                selectedCountry?.name || "",
+                editCityData[language].name,
                e.target.value,
                editCityData.arms,
                language
              );
            }}
          >
-            {countryStore.countries[language].map((country) => (
+            {countryStore.countries[language].data.map((country) => (
              <MenuItem key={country.code} value={country.code}>
                {country.name}
              </MenuItem>
@@ -140,44 +149,33 @@ export const CityEditPage = observer(() => {
          </Select>
        </FormControl>

-        <div className="w-full flex flex-col gap-4">
-          <label className="text-sm text-gray-600">Герб города</label>
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outlined"
-              onClick={() => setIsSelectMediaOpen(true)}
-              startIcon={<ImagePlus size={20} />}
-            >
-              Выбрать герб
-            </Button>
-            {selectedMedia && (
-              <span className="text-sm text-gray-600">
-                {selectedMedia.media_name || selectedMedia.filename}
-              </span>
-            )}
-          </div>
-          {selectedMedia && (
-            <Box
-              sx={{
-                width: "200px",
-                height: "200px",
-                border: "1px solid #e0e0e0",
-                borderRadius: "8px",
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MediaViewer
-                media={{
-                  id: selectedMedia.id,
-                  media_type: selectedMedia.media_type,
-                  filename: selectedMedia.filename,
-                }}
-              />
-            </Box>
-          )}
+        <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={() => {
+              setEditCityData(
+                editCityData[language].name,
+                editCityData.country_code,
+                "",
+                language
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("thumbnail");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("thumbnail");
+            }}
+          />
        </div>

        <Button
@@ -201,6 +199,20 @@ export const CityEditPage = observer(() => {
        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>
  );
--- a/src/pages/City/CityListPage/index.tsx
+++ b/src/pages/City/CityListPage/index.tsx
@@ -2,9 +2,10 @@ import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { languageStore, cityStore, CashedCities } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Eye, Pencil, Trash2 } from "lucide-react";
+import { Eye, Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+import { toast } from "react-toastify";

 export const CityListPage = observer(() => {
  const { cities, getCities, deleteCity } = cityStore;
@@ -22,11 +23,33 @@ export const CityListPage = observer(() => {
      field: "country",
      headerName: "Страна",
      width: 150,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="w-full h-full flex items-center">
+            {params.value ? (
+              params.value
+            ) : (
+              <Minus size={20} className="text-red-500" />
+            )}
+          </div>
+        );
+      },
    },
    {
      field: "name",
      headerName: "Название",
      flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="w-full h-full flex items-center">
+            {params.value ? (
+              params.value
+            ) : (
+              <Minus size={20} className="text-red-500" />
+            )}
+          </div>
+        );
+      },
    },
    {
      field: "actions",
@@ -58,7 +81,7 @@ export const CityListPage = observer(() => {
    },
  ];

-  const rows = cities[language].map((city) => ({
+  const rows = cities[language]?.data?.map((city) => ({
    id: city.id,
    name: city.name,
    country: city.country,
@@ -85,7 +108,8 @@ export const CityListPage = observer(() => {
        open={isDeleteModalOpen}
        onDelete={async () => {
          if (rowId) {
-            deleteCity(rowId.toString(), language as keyof CashedCities);
+            await deleteCity(rowId.toString());
+            toast.success("Город успешно удален");
          }
          setIsDeleteModalOpen(false);
          setRowId(null);
--- a/src/pages/City/CityPreviewPage/index.tsx
+++ b/src/pages/City/CityPreviewPage/index.tsx
@@ -16,18 +16,18 @@ export const CityPreviewPage = observer(() => {
  useEffect(() => {
    (async () => {
      if (id) {
-        const cityResponse = await getCity(id as string, language);
-        setEditCityData(
-          cityResponse.name,
-          cityResponse.country,
-          cityResponse.country_code,
-          cityResponse.arms,
-          language
-        );
-        await getOneMedia(cityResponse.arms as string);
+        const ruData = await getCity(id as string, "ru");
+        const enData = await getCity(id as string, "en");
+        const zhData = await getCity(id as string, "zh");
+
+        setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
+        setEditCityData(enData.name, enData.country_code, enData.arms, "en");
+        setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
+
+        await getOneMedia(ruData.arms as string);
      }
    })();
-  }, [id, language]);
+  }, [id]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">