KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add scrollable menu with fade hints and home button transition

Browse Source
This commit is contained in:
Илья Куприец
2026-05-20 12:48:00 +03:00
parent 7e539f550b
commit 1bb3f43979
21 changed files with 211 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/Article/ArticleCreatePage/index.tsx
View File

@@ -1,12 +1,17 @@
import React from "react";
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { LanguageSwitcher } from "@widgets";
import { articlesStore } from "@shared";
import { articlesStore, selectedCityStore } from "@shared";
const ArticleCreatePage: React.FC = () => {
const navigate = useNavigate();
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
const { articleData } = articlesStore;
return (

7
src/pages/Article/ArticleEditPage/index.tsx
View File

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { LanguageSwitcher } from "@widgets";
import { articlesStore, languageStore } from "@shared";
import { articlesStore, languageStore, selectedCityStore } from "@shared";
import { observer } from "mobx-react-lite";
const ArticleEditPage: React.FC = observer(() => {
@@ -11,6 +11,11 @@ const ArticleEditPage: React.FC = observer(() => {
const { articleData, getArticle } = articlesStore;
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
// Устанавливаем русский язык при загрузке страницы
languageStore.setLanguage("ru");

6
src/pages/Carrier/CarrierCreatePage/index.tsx
View File

@@ -20,6 +20,7 @@ import {
languageStore,
isMediaIdEmpty,
useSelectedCity,
selectedCityStore,
SelectMediaDialog,
UploadMediaDialog,
PreviewMediaDialog,
@@ -93,6 +94,11 @@ export const CarrierCreatePage = observer(() => {
"thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
>(null);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
const fetchCities = async () => {
if (!authStore.me) {

6
src/pages/Carrier/CarrierEditPage/index.tsx
View File

@@ -21,6 +21,7 @@ import {
languageStore,
isMediaIdEmpty,
LoadingSpinner,
selectedCityStore,
} from "@shared";
import { useState, useEffect } from "react";
import { ImageUploadCard, LanguageSwitcher, DeleteModal } from "@widgets";
@@ -103,6 +104,11 @@ export const CarrierEditPage = observer(() => {
"thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
>(null);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
(async () => {
if (!id) {

22
src/pages/City/CityListPage/index.tsx
View File

@@ -1,6 +1,6 @@
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import { ruRU } from "@mui/x-data-grid/locales";
import { authStore, languageStore, cityStore, countryStore, selectedCityStore, SearchInput } from "@shared";
import { authStore, languageStore, cityStore, countryStore, SearchInput } from "@shared";
import { useEffect, useState, useMemo } from "react";
import { observer } from "mobx-react-lite";
import { Pencil, Trash2, Minus } from "lucide-react";
@@ -59,21 +59,16 @@ export const CityListPage = observer(() => {
}, [cities, countryStore.countries, language, isLoading]);
const filteredRows = useMemo(() => {
const { selectedCityId } = selectedCityStore;
if (!selectedCityId) return [];
const query = searchQuery.trim().toLowerCase();
const result = rows.filter((row) => row.id === selectedCityId);
if (!query) return result;
return result.filter((row) => {
if (!query) return rows;
return rows.filter((row) => {
const cityName = (row.name ?? "").toLowerCase();
const countryName = (
countryStore.countries[language]?.data?.find((c) => c.code === row.country)?.name ?? ""
).toLowerCase();
return cityName.includes(query) || countryName.includes(query);
});
}, [rows, searchQuery, countryStore.countries, language, selectedCityStore.selectedCityId]);
}, [rows, searchQuery, countryStore.countries, language]);
const columns: GridColDef[] = [
{
@@ -145,10 +140,9 @@ export const CityListPage = observer(() => {
<div className="flex justify-between items-center mb-10">
<h1 className="text-2xl">Города</h1>
{canWriteCities && (
<CreateButton
label="Создать город"
path="/city/create"
disabled={!selectedCityStore.selectedCityId}
<CreateButton
label="Создать город"
path="/city/create"
/>
)}
</div>
@@ -214,8 +208,6 @@ export const CityListPage = observer(() => {
<Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
{isLoading ? (
<CircularProgress size={20} />
) : !selectedCityStore.selectedCityId ? (
"Выберите город"
) : (
"Нет городов"
)}

18
src/pages/Country/CountryListPage/index.tsx
View File

@@ -1,6 +1,6 @@
import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import { ruRU } from "@mui/x-data-grid/locales";
import { authStore, countryStore, languageStore, selectedCityStore, SearchInput } from "@shared";
import { authStore, countryStore, languageStore, SearchInput } from "@shared";
import { useEffect, useState, useMemo } from "react";
import { observer } from "mobx-react-lite";
import { Trash2, Minus } from "lucide-react";
@@ -74,20 +74,15 @@ export const CountryListPage = observer(() => {
];
const rows = useMemo(() => {
const { selectedCity } = selectedCityStore;
if (!selectedCity) {
return [];
}
const query = searchQuery.trim().toLowerCase();
return (countries[language]?.data ?? [])
.filter((country) => country.code === selectedCity.country_code)
.filter((country) => !query || (country.name ?? "").toLowerCase().includes(query))
.map((country) => ({
id: country.code,
code: country.code,
name: country.name,
}));
}, [countries[language]?.data, searchQuery, selectedCityStore.selectedCity]);
}, [countries[language]?.data, searchQuery]);
return (
<>
@@ -97,10 +92,9 @@ export const CountryListPage = observer(() => {
<div className="flex justify-between items-center mb-10">
<h1 className="text-2xl">Страны</h1>
{canWriteCountries && (
<CreateButton
label="Добавить страну"
path="/country/add"
disabled={!selectedCityStore.selectedCityId}
<CreateButton
label="Добавить страну"
path="/country/add"
/>
)}
</div>
@@ -161,8 +155,6 @@ export const CountryListPage = observer(() => {
<Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
{isLoading ? (
<CircularProgress size={20} />
) : !selectedCityStore.selectedCityId ? (
"Выберите город"
) : (
"Нет стран"
)}

18
src/pages/CreateSightPage/index.tsx
View File

@@ -37,16 +37,6 @@ export const CreateSightPage = observer(() => {
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
const { selectedCityId, selectedCity } = selectedCityStore;
if (selectedCityId && selectedCity && !createSightStore.sight.city_id) {
runInAction(() => {
createSightStore.sight.city_id = selectedCityId;
createSightStore.sight.city = selectedCity.name;
});
}
}, []);
const handleChange = (_: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
@@ -73,6 +63,14 @@ export const CreateSightPage = observer(() => {
await authStore.fetchMeCities().catch(() => undefined);
}
await getArticles(languageStore.language);
const { selectedCityId, selectedCity } = selectedCityStore;
if (selectedCityId && selectedCity && !createSightStore.sight.city_id) {
runInAction(() => {
createSightStore.sight.city_id = selectedCityId;
createSightStore.sight.city = selectedCity.name;
});
}
};
fetchData();
}, []);

7
src/pages/Media/MediaCreatePage/index.tsx
View File

@@ -10,7 +10,7 @@ import {
import { mediaStore, MEDIA_TYPE_LABELS, selectedCityStore } from "@shared";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Loader2, Save } from "lucide-react";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
@@ -20,6 +20,11 @@ export const MediaCreatePage = observer(() => {
const [type, setType] = useState("");
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
const handleCreate = async () => {
try {
setIsLoading(true);

6
src/pages/Media/MediaEditPage/index.tsx
View File

@@ -22,6 +22,7 @@ import {
MEDIA_TYPE_LABELS,
languageStore,
LoadingSpinner,
selectedCityStore,
} from "@shared";
import { MediaViewer } from "@widgets";
@@ -42,6 +43,11 @@ export const MediaEditPage = observer(() => {
const [mediaType, setMediaType] = useState(media?.media_type ?? 1);
const [availableMediaTypes, setAvailableMediaTypes] = useState<number[]>([]);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
if (id) {
mediaStore.getOneMedia(id);

7
src/pages/Route/RouteListPage/index.tsx
View File

@@ -251,10 +251,9 @@ export const RouteListPage = observer(() => {
<div className="flex justify-between items-center mb-10">
<h1 className="text-2xl">Маршруты</h1>
{canWriteRoutes && (
<CreateButton
label="Создать маршрут"
path="/route/create"
disabled={!selectedCityStore.selectedCityId}
<CreateButton
label="Создать маршрут"
path="/route/create"
/>
)}
</div>

1
src/pages/Sight/SightListPage/index.tsx
View File

@@ -165,7 +165,6 @@ export const SightListPage = observer(() => {
<CreateButton
label="Создать достопримечательность"
path="/sight/create"
disabled={!selectedCityStore.selectedCityId}
/>
)}
</div>

10
src/pages/Snapshot/SnapshotCreatePage/index.tsx
View File

@@ -6,10 +6,10 @@ import {
DialogContent,
DialogActions,
} from "@mui/material";
import { snapshotStore, authStore, routeStore } from "@shared";
import { snapshotStore, authStore, routeStore, selectedCityStore } from "@shared";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Loader2, Save } from "lucide-react";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { runInAction } from "mobx";
@@ -17,6 +17,12 @@ import { runInAction } from "mobx";
export const SnapshotCreatePage = observer(() => {
const { createSnapshot, getSnapshotStatus, getStorageInfo, snapshotStatus } = snapshotStore;
const navigate = useNavigate();
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
const [name, setName] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [duplicateWarningOpen, setDuplicateWarningOpen] = useState(false);

7
src/pages/Station/StationListPage/index.tsx
View File

@@ -206,10 +206,9 @@ export const StationListPage = observer(() => {
<div className="flex justify-between items-center mb-10">
<h1 className="text-2xl">Остановки</h1>
{canWriteStations && (
<CreateButton
label="Создать остановку"
path="/station/create"
disabled={!selectedCityStore.selectedCityId}
<CreateButton
label="Создать остановку"
path="/station/create"
/>
)}
</div>

6
src/pages/User/UserCreatePage/index.tsx
View File

@@ -25,6 +25,7 @@ import {
SelectMediaDialog,
UploadMediaDialog,
PreviewMediaDialog,
selectedCityStore,
} from "@shared";
import { useState, useEffect } from "react";
import { ImageUploadCard } from "@widgets";
@@ -79,6 +80,11 @@ export const UserCreatePage = observer(() => {
createUserData.roles ?? ["articles_ro", "articles_rw", "media_ro", "media_rw"]
);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
mediaStore.getMedia();
}, []);

6
src/pages/User/UserEditPage/index.tsx
View File

@@ -30,6 +30,7 @@ import {
authStore,
cityStore,
MultiSelect,
selectedCityStore,
type User,
type UserCity,
} from "@shared";
@@ -92,6 +93,11 @@ export const UserEditPage = observer(() => {
"thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
>(null);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
languageStore.setLanguage("ru");
}, []);

5
src/pages/Vehicle/VehicleCreatePage/index.tsx
View File

@@ -32,6 +32,11 @@ export const VehicleCreatePage = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const { language } = languageStore;
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
carrierStore.getCarriers(language);
cityStore.getCities("ru");

5
src/pages/Vehicle/VehicleEditPage/index.tsx
View File

@@ -40,6 +40,11 @@ export const VehicleEditPage = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const [isLoadingData, setIsLoadingData] = useState(true);
useEffect(() => {
selectedCityStore.setIsLocked(true);
return () => selectedCityStore.setIsLocked(false);
}, []);
useEffect(() => {
// Устанавливаем русский язык при загрузке страницы
languageStore.setLanguage("ru");

1
src/pages/Vehicle/VehicleListPage/index.tsx
View File

@@ -170,7 +170,6 @@ export const VehicleListPage = observer(() => {
<CreateButton
label="Создать транспортное средство"
path="/vehicle/create"
disabled={!selectedCityId}
/>
</div>