feat: Add edit pages with cache

2025-06-08 08:33:43 +03:00
parent e37f9e14bc
commit b09c1b3214
37 changed files with 2223 additions and 772 deletions
--- a/src/pages/City/CityCreatePage/index.tsx
+++ b/src/pages/City/CityCreatePage/index.tsx
@@ -13,33 +13,31 @@ import { ArrowLeft, Save, ImagePlus } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { cityStore, countryStore, mediaStore } from "@shared";
+import { cityStore, countryStore, languageStore, mediaStore } from "@shared";
 import { useState, useEffect } from "react";
 import { LanguageSwitcher, MediaViewer } from "@widgets";
 import { SelectMediaDialog } from "@shared";

 export const CityCreatePage = observer(() => {
  const navigate = useNavigate();
-  const [name, setName] = useState("");
-  const [countryCode, setCountryCode] = useState("");
-  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
+  const { language } = languageStore;
+  const { createCityData, setCreateCityData } = cityStore;
  const [isLoading, setIsLoading] = useState(false);
  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const { getCountries } = countryStore;
+  const { getMedia } = mediaStore;

  useEffect(() => {
-    countryStore.getCountries();
-    mediaStore.getMedia();
-  }, []);
+    (async () => {
+      await getCountries(language);
+      await getMedia();
+    })();
+  }, [language]);

  const handleCreate = async () => {
    try {
      setIsLoading(true);
-      await cityStore.createCity(
-        name,
-        countryStore.countries.find((c) => c.code === countryCode)?.name!,
-        countryCode,
-        selectedMediaId!
-      );
+      await cityStore.createCity();
      toast.success("Город успешно создан");
      navigate("/city");
    } catch (error) {
@@ -55,11 +53,17 @@ export const CityCreatePage = observer(() => {
    media_name?: string;
    media_type: number;
  }) => {
-    setSelectedMediaId(media.id);
+    setCreateCityData(
+      createCityData[language].name,
+      createCityData.country,
+      createCityData.country_code,
+      media.id,
+      language
+    );
  };

-  const selectedMedia = selectedMediaId
-    ? mediaStore.media.find((m) => m.id === selectedMediaId)
+  const selectedMedia = createCityData.arms
+    ? mediaStore.media.find((m) => m.id === createCityData.arms)
    : null;

  return (
@@ -79,20 +83,39 @@ export const CityCreatePage = observer(() => {
        <TextField
          fullWidth
          label="Название города"
-          value={name}
+          value={createCityData[language]?.name || ""}
          required
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) =>
+            setCreateCityData(
+              e.target.value,
+              createCityData.country,
+              createCityData.country_code,
+              createCityData.arms,
+              language
+            )
+          }
        />

        <FormControl fullWidth>
          <InputLabel>Страна</InputLabel>
          <Select
-            value={countryCode}
+            value={createCityData.country_code || ""}
            label="Страна"
            required
-            onChange={(e) => setCountryCode(e.target.value)}
+            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.map((country) => (
+            {countryStore.countries[language].map((country) => (
              <MenuItem key={country.code} value={country.code}>
                {country.name}
              </MenuItem>
@@ -145,7 +168,7 @@ export const CityCreatePage = observer(() => {
          className="w-min flex gap-2 items-center"
          startIcon={<Save size={20} />}
          onClick={handleCreate}
-          disabled={isLoading || !name || !countryCode}
+          disabled={isLoading || !createCityData[language]?.name}
        >
          {isLoading ? (
            <Loader2 size={20} className="animate-spin" />
--- a/src/pages/City/CityEditPage/index.tsx
+++ b/src/pages/City/CityEditPage/index.tsx
@@ -0,0 +1,207 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Box,
+} from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save, ImagePlus } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import {
+  cityStore,
+  countryStore,
+  languageStore,
+  mediaStore,
+  CashedCities,
+} from "@shared";
+import { useEffect, useState } from "react";
+import { LanguageSwitcher, MediaViewer } from "@widgets";
+import { SelectMediaDialog } from "@shared";
+
+export const CityEditPage = observer(() => {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const { language } = languageStore;
+  const { id } = useParams();
+  const { editCityData, editCity, getCity, setEditCityData } = cityStore;
+  const { getCountries } = countryStore;
+  const { getMedia, getOneMedia, oneMedia } = mediaStore;
+
+  const handleEdit = async () => {
+    try {
+      setIsLoading(true);
+      await editCity(id as string);
+      toast.success("Город успешно обновлен");
+    } catch (error) {
+      toast.error("Ошибка при обновлении города");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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);
+        await getCountries(language);
+        await getMedia();
+      }
+    })();
+  }, [id, language]);
+
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setEditCityData(
+      editCityData[language].name,
+      editCityData.country,
+      editCityData.country_code,
+      media.id,
+      language
+    );
+  };
+
+  const selectedMedia = editCityData.arms
+    ? mediaStore.media.find((m) => m.id === editCityData.arms)
+    : null;
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/city")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          fullWidth
+          label="Название"
+          value={editCityData[language].name}
+          required
+          onChange={(e) =>
+            setEditCityData(
+              e.target.value,
+              editCityData.country,
+              editCityData.country_code,
+              editCityData.arms,
+              language
+            )
+          }
+        />
+
+        <FormControl fullWidth>
+          <InputLabel>Страна</InputLabel>
+          <Select
+            value={editCityData.country_code || ""}
+            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 || "",
+                e.target.value,
+                editCityData.arms,
+                language
+              );
+            }}
+          >
+            {countryStore.countries[language].map((country) => (
+              <MenuItem key={country.code} value={country.code}>
+                {country.name}
+              </MenuItem>
+            ))}
+          </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>
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleEdit}
+          disabled={
+            isLoading || !editCityData[language as keyof CashedCities]?.name
+          }
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Обновить"
+          )}
+        </Button>
+      </div>
+
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+      />
+    </Paper>
+  );
+});
--- a/src/pages/City/CityListPage/index.tsx
+++ b/src/pages/City/CityListPage/index.tsx
@@ -1,8 +1,8 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
-import { cityStore, languageStore } from "@shared";
+import { languageStore, cityStore, CashedCities } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Eye, Trash2 } from "lucide-react";
+import { Eye, Pencil, Trash2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";

@@ -14,7 +14,7 @@ export const CityListPage = observer(() => {
  const { language } = languageStore;

  useEffect(() => {
-    getCities();
+    getCities(language);
  }, [language]);

  const columns: GridColDef[] = [
@@ -33,10 +33,14 @@ export const CityListPage = observer(() => {
      headerName: "Действия",
      align: "center",
      headerAlign: "center",
+      width: 200,

      renderCell: (params: GridRenderCellParams) => {
        return (
          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/city/${params.row.id}/edit`)}>
+              <Pencil size={20} className="text-blue-500" />
+            </button>
            <button onClick={() => navigate(`/city/${params.row.id}`)}>
              <Eye size={20} className="text-green-500" />
            </button>
@@ -54,7 +58,7 @@ export const CityListPage = observer(() => {
    },
  ];

-  const rows = cities.map((city) => ({
+  const rows = cities[language].map((city) => ({
    id: city.id,
    name: city.name,
    country: city.country,
@@ -81,7 +85,7 @@ export const CityListPage = observer(() => {
        open={isDeleteModalOpen}
        onDelete={async () => {
          if (rowId) {
-            deleteCity(rowId);
+            deleteCity(rowId.toString(), language as keyof CashedCities);
          }
          setIsDeleteModalOpen(false);
          setRowId(null);
--- a/src/pages/City/CityPreviewPage/index.tsx
+++ b/src/pages/City/CityPreviewPage/index.tsx
@@ -1,6 +1,6 @@
 import { Paper } from "@mui/material";
-import { cityStore, mediaStore } from "@shared";
-import { MediaViewer } from "@widgets";
+import { cityStore, languageStore, mediaStore } from "@shared";
+import { LanguageSwitcher, MediaViewer } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft } from "lucide-react";
 import { useEffect } from "react";
@@ -8,19 +8,30 @@ import { useNavigate, useParams } from "react-router-dom";

 export const CityPreviewPage = observer(() => {
  const { id } = useParams();
-  const { getCity, city } = cityStore;
+  const { getCity, city, setEditCityData } = cityStore;
  const { oneMedia, getOneMedia } = mediaStore;
  const navigate = useNavigate();
+  const { language } = languageStore;

  useEffect(() => {
    (async () => {
-      const cityResponse = await getCity(id as string);
-      await getOneMedia(cityResponse.arms as string);
+      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);
+      }
    })();
-  }, [id]);
+  }, [id, language]);

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
      <div className="flex justify-between items-center">
        <button
          className="flex items-center gap-2"
@@ -29,36 +40,18 @@ export const CityPreviewPage = observer(() => {
          <ArrowLeft size={20} />
          Назад
        </button>
-        {/* <div className="flex gap-2">
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => navigate(`/city/${id}/edit`)}
-            startIcon={<Pencil size={20} />}
-          >
-            Редактировать
-          </Button>
-          <Button
-            variant="contained"
-            color="error"
-            onClick={() => navigate(`/city/${id}/edit`)}
-            startIcon={<Trash2 size={20} />}
-          >
-            Удалить
-          </Button>
-        </div> */}
      </div>
      <div className="flex flex-col gap-10 w-full">
        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Название</h1>
-          <p>{city?.name}</p>
+          <p>{city[id!]?.[language]?.name}</p>
        </div>

        <div className="flex flex-col gap-2">
          <h1 className="text-lg font-bold">Страна</h1>
-          <p>{city?.country}</p>
+          <p>{city[id!]?.[language]?.country}</p>
        </div>
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 pb-10">
          <h1 className="text-lg font-bold">Герб</h1>
          <div className="w-[300px] h-[200px]">
            <MediaViewer
--- a/src/pages/City/index.ts
+++ b/src/pages/City/index.ts
@@ -1,3 +1,4 @@
 export * from "./CityListPage";
 export * from "./CityPreviewPage";
 export * from "./CityCreatePage";
+export * from "./CityEditPage";