fix: Update map with tables fixes

src/pages/City/CityCreatePage/index.tsx

@@ -157,15 +157,8 @@ export const CityCreatePage = observer(() => {
               setIsUploadMediaOpen(true);
               setActiveMenuType("image");
             }}
-            setHardcodeType={(type) => {
-              setActiveMenuType(
-                type as
-                  | "thumbnail"
-                  | "watermark_lu"
-                  | "watermark_rd"
-                  | "image"
-                  | null
-              );
+            setHardcodeType={() => {
+              setActiveMenuType("image");
             }}
           />
         </div>
@@ -195,6 +188,8 @@ export const CityCreatePage = observer(() => {
       <UploadMediaDialog
         open={isUploadMediaOpen}
         onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={createCityData[language]?.name}
+        contextType="city"
         afterUpload={handleMediaSelect}
         hardcodeType={
           activeMenuType as "thumbnail" | "watermark_lu" | "watermark_rd" | null

src/pages/City/CityEditPage/index.tsx

@@ -43,6 +43,11 @@ export const CityEditPage = observer(() => {
   const { getCountries } = countryStore;
   const { getMedia, getOneMedia } = mediaStore;
 
+  useEffect(() => {
+    // Устанавливаем русский язык при загрузке страницы
+    languageStore.setLanguage("ru");
+  }, []);
+
   const handleEdit = async () => {
     try {
       setIsLoading(true);
@@ -58,6 +63,7 @@ export const CityEditPage = observer(() => {
   useEffect(() => {
     (async () => {
       if (id) {
+        await getCountries("ru");
         // Fetch data for all languages
         const ruData = await getCity(id as string, "ru");
         const enData = await getCity(id as string, "en");
@@ -69,7 +75,7 @@ export const CityEditPage = observer(() => {
         setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
 
         await getOneMedia(ruData.arms as string);
-        await getCountries("ru");
+
         await getMedia();
       }
     })();
@@ -174,15 +180,8 @@ export const CityEditPage = observer(() => {
               setIsUploadMediaOpen(true);
               setActiveMenuType("image");
             }}
-            setHardcodeType={(type) => {
-              setActiveMenuType(
-                type as
-                  | "thumbnail"
-                  | "watermark_lu"
-                  | "watermark_rd"
-                  | "image"
-                  | null
-              );
+            setHardcodeType={() => {
+              setActiveMenuType("image");
             }}
           />
         </div>
@@ -199,7 +198,7 @@ export const CityEditPage = observer(() => {
           {isLoading ? (
             <Loader2 size={20} className="animate-spin" />
           ) : (
-            "Обновить"
+            "Сохранить"
           )}
         </Button>
       </div>
@@ -214,6 +213,8 @@ export const CityEditPage = observer(() => {
       <UploadMediaDialog
         open={isUploadMediaOpen}
         onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={editCityData[language].name}
+        contextType="city"
         afterUpload={handleMediaSelect}
         hardcodeType={
           activeMenuType as

src/pages/City/CityListPage/index.tsx

@@ -1,11 +1,13 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
-import { languageStore, cityStore } from "@shared";
+import { ruRU } from "@mui/x-data-grid/locales";
+import { languageStore, cityStore, countryStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
 import { toast } from "react-toastify";
+import { Box, CircularProgress } from "@mui/material";
 
 export const CityListPage = observer(() => {
   const { cities, getCities, deleteCity } = cityStore;
@@ -14,12 +16,43 @@ export const CityListPage = observer(() => {
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [rows, setRows] = useState<any[]>([]);
   const { language } = languageStore;
 
   useEffect(() => {
-    getCities(language);
+    const fetchData = async () => {
+      setIsLoading(true);
+      await countryStore.getCountries("ru");
+      await countryStore.getCountries("en");
+      await countryStore.getCountries("zh");
+      await getCities(language);
+      setIsLoading(false);
+    };
+    fetchData();
   }, [language]);
 
+  useEffect(() => {
+    let newRows = cities[language]?.data?.map((city) => ({
+      id: city.id,
+      name: city.name,
+      country: city.country_code,
+    }));
+
+    let newRows2: any[] = [];
+    for (const city of newRows) {
+      const name = countryStore.countries[language]?.data?.find(
+        (country) => country.code === city.country
+      )?.name;
+      if (name) {
+        newRows2.push(city);
+      }
+    }
+
+    setRows(newRows2 || []);
+    console.log(newRows2);
+  }, [cities, countryStore.countries, language, isLoading]);
+
   const columns: GridColDef[] = [
     {
       field: "country",
@@ -29,7 +62,9 @@ export const CityListPage = observer(() => {
         return (
           <div className="w-full h-full flex items-center">
             {params.value ? (
-              params.value
+              countryStore.countries[language]?.data?.find(
+                (country) => country.code === params.value
+              )?.name
             ) : (
               <Minus size={20} className="text-red-500" />
             )}
@@ -83,12 +118,6 @@ export const CityListPage = observer(() => {
     },
   ];
 
-  const rows = cities[language]?.data?.map((city) => ({
-    id: city.id,
-    name: city.name,
-    country: city.country,
-  }));
-
   return (
     <>
       <LanguageSwitcher />
@@ -115,12 +144,20 @@ export const CityListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           hideFooter
           checkboxSelection
+          loading={isLoading}
+          localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           onRowSelectionModelChange={(newSelection) => {
             setIds(Array.from(newSelection.ids as unknown as number[]));
           }}
+          slots={{
+            noRowsOverlay: () => (
+              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
+                {isLoading ? <CircularProgress size={20} /> : "Нет городов"}
+              </Box>
+            ),
+          }}
         />
       </div>