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

sight edit update

Browse Source
This commit is contained in:
Илья Куприец 2025-04-25 05:23:07 +03:00
parent 463c593a0e
commit 9927c0afd6
22 changed files with 3011 additions and 1742 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -32,6 +32,8 @@
"i18next": "^24.2.2",
"js-cookie": "^3.0.5",
"jwt-decode": "^4.0.0",
"mobx": "^6.13.7",
"mobx-react-lite": "^4.1.0",
"react": "19.0.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "19.0.0",

165
src/components/CustomDataGrid.tsx
View File

@ -1,80 +1,132 @@
import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
import {Stack, Button, Typography} from '@mui/material'
import {ExportButton} from '@refinedev/mui'
import {useExport} from '@refinedev/core'
import React, {useState, useEffect, useMemo} from 'react'
import Cookies from 'js-cookie'
import {
DataGrid,
type DataGridProps,
type GridColumnVisibilityModel,
} from "@mui/x-data-grid";
import { Stack, Button, Typography } from "@mui/material";
import { ExportButton } from "@refinedev/mui";
import { useExport } from "@refinedev/core";
import React, { useState, useEffect, useMemo } from "react";
import Cookies from "js-cookie";
import {localeText} from '../locales/ru/localeText'
import { localeText } from "../locales/ru/localeText";
interface CustomDataGridProps extends DataGridProps {
hasCoordinates?: boolean
resource?: string // Add this prop
hasCoordinates?: boolean;
resource?: string; // Add this prop
}
const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename', 'arms', 'thumbnail', 'route_sys_number', 'governor_appeal', 'scale_min', 'scale_max', 'rotate', 'center_latitude', 'center_longitude', 'watermark_lu', 'watermark_rd', 'left_article', 'preview_article', 'offset_x', 'offset_y'] as const
const DEV_FIELDS = [
"id",
"code",
"country_code",
"city_id",
"carrier_id",
"main_color",
"left_color",
"right_color",
"logo",
"slogan",
"filename",
"arms",
"thumbnail",
"route_sys_number",
"governor_appeal",
"scale_min",
"scale_max",
"rotate",
"center_latitude",
"center_longitude",
"watermark_lu",
"watermark_rd",
"left_article",
"preview_article",
"offset_x",
"offset_y",
] as const;
export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
export const CustomDataGrid = ({
hasCoordinates = false,
columns = [],
resource,
...props
}: CustomDataGridProps) => {
// const isDev = import.meta.env.DEV
const {triggerExport, isLoading: exportLoading} = useExport({
resource: resource ?? '',
const { triggerExport, isLoading: exportLoading } = useExport({
resource: resource ?? "",
// pageSize: 100, #*
// maxItemCount: 100, #*
})
});
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
const initialShowDevData = false // Default to false in both prod and dev
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
const [showDevData, setShowDevData] = useState(Cookies.get('showDevData') === 'true')
const initialShowCoordinates = Cookies.get("showCoordinates") === "true";
const initialShowDevData = false; // Default to false in both prod and dev
const [showCoordinates, setShowCoordinates] = useState(
initialShowCoordinates
);
const [showDevData, setShowDevData] = useState(
Cookies.get("showDevData") === "true"
);
const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
const availableDevFields = useMemo(
() =>
DEV_FIELDS.filter((field) =>
columns.some((column) => column.field === field)
),
[columns]
);
const initialVisibilityModel = useMemo(() => {
const model: GridColumnVisibilityModel = {}
const model: GridColumnVisibilityModel = {};
availableDevFields.forEach((field) => {
model[field] = initialShowDevData
})
model[field] = initialShowDevData;
});
if (hasCoordinates) {
model.latitude = initialShowCoordinates
model.longitude = initialShowCoordinates
model.latitude = initialShowCoordinates;
model.longitude = initialShowCoordinates;
}
return model
}, [availableDevFields, hasCoordinates, initialShowCoordinates, initialShowDevData])
return model;
}, [
availableDevFields,
hasCoordinates,
initialShowCoordinates,
initialShowDevData,
]);
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(initialVisibilityModel)
const [columnVisibilityModel, setColumnVisibilityModel] =
useState<GridColumnVisibilityModel>(initialVisibilityModel);
useEffect(() => {
setColumnVisibilityModel((prevModel) => {
const newModel = {...prevModel}
const newModel = { ...prevModel };
availableDevFields.forEach((field) => {
newModel[field] = showDevData
})
newModel[field] = showDevData;
});
if (hasCoordinates) {
newModel.latitude = showCoordinates
newModel.longitude = showCoordinates
newModel.latitude = showCoordinates;
newModel.longitude = showCoordinates;
}
return newModel
})
return newModel;
});
if (hasCoordinates) {
Cookies.set('showCoordinates', String(showCoordinates))
Cookies.set("showCoordinates", String(showCoordinates));
}
Cookies.set('showDevData', String(showDevData))
}, [showCoordinates, showDevData, hasCoordinates, availableDevFields])
Cookies.set("showDevData", String(showDevData));
}, [showCoordinates, showDevData, hasCoordinates, availableDevFields]);
const toggleCoordinates = () => {
setShowCoordinates((prev) => !prev)
}
setShowCoordinates((prev) => !prev);
};
const toggleDevData = () => {
setShowDevData((prev) => !prev)
}
setShowDevData((prev) => !prev);
};
return (
<Stack spacing={2}>
@ -92,31 +144,38 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource,
// paginationModel: {pageSize: 25, page: 0},
// },
sorting: {
sortModel: [{field: 'id', sort: 'asc'}],
sortModel: [{ field: "id", sort: "asc" }],
},
}}
pageSizeOptions={[10, 25, 50, 100]}
/>
<Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
<Stack direction="row" spacing={2} sx={{mb: 2}}>
<Stack direction="row" spacing={2} sx={{ mb: 2 }}>
{hasCoordinates && (
<Button variant="contained" onClick={toggleCoordinates}>
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
{showCoordinates ? "Скрыть координаты" : "Показать координаты"}
</Button>
)}
{(import.meta.env.DEV || showDevData) && availableDevFields.length > 0 && (
<Button variant="contained" onClick={toggleDevData}>
{showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
</Button>
)}
{(import.meta.env.DEV || showDevData) &&
availableDevFields.length > 0 && (
<Button variant="contained" onClick={toggleDevData}>
{showDevData
? "Скрыть служебные данные"
: "Показать служебные данные"}
</Button>
)}
</Stack>
<ExportButton onClick={triggerExport} loading={exportLoading} hideText={false}>
<Typography sx={{marginLeft: '-2px'}}>Экспорт</Typography>
<ExportButton
onClick={triggerExport}
loading={exportLoading}
hideText={false}
>
<Typography sx={{ marginLeft: "-2px" }}>Экспорт</Typography>
</ExportButton>
</Stack>
</Stack>
)
}
);
};

183
src/components/LinkedItems.tsx
View File

@ -24,8 +24,9 @@ import {
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import { axiosInstance } from "../providers/data";
import { TOKEN_KEY } from "../authProvider";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
import axios from "axios";
function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
const index = pos - 1;
@ -79,6 +80,41 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
type,
onSave,
}: LinkedItemsProps<T>) => {
const [articleLanguages, setArticleLanguages] = useState<
Record<number, string>
>({});
const handleArticleLanguageChange = (
articleId: number,
languageCode: string
) => {
setArticleLanguages((prev) => ({ ...prev, [articleId]: languageCode }));
console.log(articleId, languageCode);
// Отправка запроса на сервер для сохранения языка
axios
.get(
`${import.meta.env.VITE_KRBL_API}/article/${articleId}/`, // Пример эндпоинта
{
headers: {
Authorization: `Bearer ${localStorage.getItem("refine-auth")}`,
"X-language": languageCode.toLowerCase(),
},
}
)
.then((response) => {
setLinkedItems(
linkedItems.map((item) => {
if (item.id == articleId) {
console.log(response.data);
return { ...response.data, language: languageCode };
} else {
return item;
}
})
);
});
};
const [position, setPosition] = useState<number>(1);
const [items, setItems] = useState<T[]>([]);
const [linkedItems, setLinkedItems] = useState<T[]>([]);
@ -88,6 +124,33 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
const [mediaOrder, setMediaOrder] = useState<number>(1);
const theme = useTheme();
let availableItems = items.filter(
(item) => !linkedItems.some((linked) => linked.id === item.id)
);
useEffect(() => {
if (childResource == "station") {
availableItems = availableItems.sort((a, b) =>
a.name.localeCompare(b.name)
);
}
}, [childResource, availableItems]);
useEffect(() => {
// При загрузке linkedItems можно запросить текущие языки для статей
if (childResource === "article" && linkedItems.length > 0) {
const initialLanguages: Record<number, string> = {};
linkedItems.forEach((article) => {
// Предполагается, что у объекта article есть свойство language
if (article.language) {
initialLanguages[article.id] = article.language;
} else {
initialLanguages[article.id] = "RU"; // Или другой язык по умолчанию
}
});
setArticleLanguages(initialLanguages);
}
}, [linkedItems, childResource]);
const onDragEnd = (result: any) => {
if (!result.destination) return;
@ -149,10 +212,6 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
}
}, [linkedItems, childResource, parentResource]);
const availableItems = items.filter(
(item) => !linkedItems.some((linked) => linked.id === item.id)
);
const linkItem = () => {
if (selectedItemId !== null) {
const requestData =
@ -256,12 +315,19 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
{field.label}
</TableCell>
))}
{childResource === "article" && (
<TableCell key="language">Язык</TableCell>
)}
{type === "edit" && (
<TableCell width="120px">Действие</TableCell>
)}
</TableRow>
</TableHead>
<Droppable droppableId="droppable">
<Droppable
droppableId="droppable"
isDropDisabled={type !== "edit" || !dragAllowed}
>
{(provided) => (
<TableBody
ref={provided.innerRef}
@ -272,7 +338,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
key={item.id}
draggableId={"q" + String(item.id)}
index={index}
isDragDisabled={type !== "edit" && dragAllowed}
isDragDisabled={type !== "edit" || !dragAllowed}
>
{(provided) => (
<TableRow
@ -291,13 +357,105 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
<TableCell key={String(item.id)}>
{index + 1}
</TableCell>
{fields.map((field) => (
<TableCell key={String(field.data)}>
{fields.map((field, index) => (
<TableCell
key={String(field.data) + String(index)}
>
{field.render
? field.render(item[field.data])
: item[field.data]}
</TableCell>
))}
{childResource === "article" && (
<TableCell>
<Box
display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column"
gap={1}
>
<Box
sx={{
padding: "4px",
cursor: "pointer",
background:
articleLanguages[item.id] === "RU"
? theme.palette.primary.main
: "transparent",
color:
articleLanguages[item.id] === "RU"
? theme.palette.primary.contrastText
: theme.palette.text.primary,
border:
articleLanguages[item.id] !== "RU"
? `1px solid ${theme.palette.primary.main}`
: "none",
}}
onClick={() =>
handleArticleLanguageChange(
item.id,
"RU"
)
}
>
RU
</Box>
<Box
sx={{
padding: "4px",
cursor: "pointer",
background:
articleLanguages[item.id] === "EN"
? theme.palette.primary.main
: "transparent",
color:
articleLanguages[item.id] === "EN"
? theme.palette.primary.contrastText
: theme.palette.text.primary,
border:
articleLanguages[item.id] !== "EN"
? `1px solid ${theme.palette.primary.main}`
: "none",
}}
onClick={() =>
handleArticleLanguageChange(
item.id,
"EN"
)
}
>
EN
</Box>
<Box
sx={{
padding: "4px",
cursor: "pointer",
background:
articleLanguages[item.id] === "ZH"
? theme.palette.primary.main
: "transparent",
color:
articleLanguages[item.id] === "ZH"
? theme.palette.primary.contrastText
: theme.palette.text.primary,
border:
articleLanguages[item.id] !== "ZH"
? `1px solid ${theme.palette.primary.main}`
: "none",
}}
onClick={() =>
handleArticleLanguageChange(
item.id,
"ZH"
)
}
>
ZN
</Box>
</Box>
</TableCell>
)}
{type === "edit" && (
<TableCell>
<Button
@ -334,7 +492,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
<Autocomplete
fullWidth
value={
availableItems.find((item) => item.id === selectedItemId) ||
availableItems?.find((item) => item.id === selectedItemId) ||
null
}
onChange={(_, newValue) =>
@ -366,6 +524,11 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
);
});
}}
renderOption={(props, option) => (
<li {...props} key={option.id}>
{String(option[fields[0].data])}
</li>
)}
/>
{childResource === "article" && (

381
src/components/header/index.tsx
View File

@ -1,181 +1,246 @@
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
import AppBar from '@mui/material/AppBar'
import Avatar from '@mui/material/Avatar'
import IconButton from '@mui/material/IconButton'
import Stack from '@mui/material/Stack'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import {useGetIdentity, usePermissions, useWarnAboutChange} from '@refinedev/core'
import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui'
import React, {useContext, useEffect} from 'react'
import {ColorModeContext} from '../../contexts/color-mode'
import Cookies from 'js-cookie'
import {useTranslation} from 'react-i18next'
import {Button} from '@mui/material'
import {useNavigate} from 'react-router'
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
import AppBar from "@mui/material/AppBar";
import Avatar from "@mui/material/Avatar";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import {
useGetIdentity,
useList,
usePermissions,
useWarnAboutChange,
} from "@refinedev/core";
import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
import React, { useContext, useEffect, useState } from "react";
import { ColorModeContext } from "../../contexts/color-mode";
import Cookies from "js-cookie";
import { useTranslation } from "react-i18next";
import {
Button,
Select,
MenuItem,
InputLabel,
FormControl,
SelectChangeEvent,
} from "@mui/material";
import { useNavigate } from "react-router";
import { cityStore } from "../../store/CityStore";
import { observer } from "mobx-react-lite";
type IUser = {
id: number
name: string
avatar: string
is_admin: boolean
}
id: number;
name: string;
avatar: string;
is_admin: boolean;
};
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
const {mode, setMode} = useContext(ColorModeContext)
const {data: user} = useGetIdentity<IUser>()
const {data: permissions} = usePermissions<string[]>()
const isAdmin = permissions?.includes('admin')
const {i18n} = useTranslation()
const {setWarnWhen, warnWhen} = useWarnAboutChange()
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = observer(
({ sticky }) => {
const { city_id, setCityIdAction } = cityStore;
const { data: cities } = useList({
resource: "city",
});
const navigate = useNavigate()
const { mode, setMode } = useContext(ColorModeContext);
const { data: user } = useGetIdentity<IUser>();
const { data: permissions } = usePermissions<string[]>();
const isAdmin = permissions?.includes("admin");
const { i18n } = useTranslation();
const { setWarnWhen, warnWhen } = useWarnAboutChange();
const navigate = useNavigate();
const handleLanguageChange = async (lang: string) => {
// console.log('Language change requested:', lang)
// console.log('Current warnWhen state:', warnWhen)
const handleChange = (event: SelectChangeEvent<string>) => {
setCityIdAction(event.target.value);
};
const form = document.querySelector('form')
const inputs = form?.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select')
const saveButton = document.querySelector('.refine-save-button') as HTMLButtonElement
const handleLanguageChange = async (lang: string) => {
// console.log('Language change requested:', lang)
// console.log('Current warnWhen state:', warnWhen)
// Сохраняем текущий URL перед любыми действиями
const currentLocation = window.location.pathname + window.location.search
const form = document.querySelector("form");
const inputs = form?.querySelectorAll<
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
>("input, textarea, select");
const saveButton = document.querySelector(
".refine-save-button"
) as HTMLButtonElement;
if (form && saveButton) {
const hasChanges = Array.from(inputs || []).some((input) => {
if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
return input.value !== input.defaultValue
}
if (input instanceof HTMLSelectElement) {
return input.value !== input.options[input.selectedIndex].defaultSelected.toString()
}
return false
})
// Сохраняем текущий URL перед любыми действиями
const currentLocation = window.location.pathname + window.location.search;
if (hasChanges || warnWhen) {
try {
// console.log('Attempting to save changes...')
setWarnWhen(false)
saveButton.click()
// console.log('Save button clicked')
if (form && saveButton) {
const hasChanges = Array.from(inputs || []).some((input) => {
if (
input instanceof HTMLInputElement ||
input instanceof HTMLTextAreaElement
) {
return input.value !== input.defaultValue;
}
if (input instanceof HTMLSelectElement) {
return (
input.value !==
input.options[input.selectedIndex].defaultSelected.toString()
);
}
return false;
});
await new Promise((resolve) => setTimeout(resolve, 1000))
if (hasChanges || warnWhen) {
try {
// console.log('Attempting to save changes...')
setWarnWhen(false);
saveButton.click();
// console.log('Save button clicked')
// После сохранения меняем язык и возвращаемся на ту же страницу
Cookies.set('lang', lang)
i18n.changeLanguage(lang)
navigate(currentLocation)
return
} catch (error) {
console.error('Failed to save form:', error)
setWarnWhen(true)
return
await new Promise((resolve) => setTimeout(resolve, 1000));
// После сохранения меняем язык и возвращаемся на ту же страницу
Cookies.set("lang", lang);
i18n.changeLanguage(lang);
navigate(currentLocation);
return;
} catch (error) {
console.error("Failed to save form:", error);
setWarnWhen(true);
return;
}
}
}
}
// Если нет формы или изменений, просто меняем язык
// console.log('Setting language cookie:', lang)
Cookies.set('lang', lang)
// Если нет формы или изменений, просто меняем язык
// console.log('Setting language cookie:', lang)
Cookies.set("lang", lang);
// console.log('Changing i18n language')
i18n.changeLanguage(lang)
// console.log('Changing i18n language')
i18n.changeLanguage(lang);
// Используем текущий URL для навигации
navigate(0)
}
// Используем текущий URL для навигации
navigate(0);
};
useEffect(() => {
const savedLang = Cookies.get('lang') || 'ru'
i18n.changeLanguage(savedLang)
}, [i18n])
useEffect(() => {
const savedLang = Cookies.get("lang") || "ru";
i18n.changeLanguage(savedLang);
}, [i18n]);
return (
<AppBar position={sticky ? "sticky" : "relative"}>
<Toolbar>
<Stack
direction="row"
width="100%"
justifyContent="flex-end"
alignItems="center"
>
<HamburgerMenu />
return (
<AppBar position={sticky ? 'sticky' : 'relative'}>
<Toolbar>
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center">
<HamburgerMenu />
<Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center" spacing={2}>
<Stack
direction="row"
spacing={1}
sx={{
backgroundColor: 'background.paper',
padding: '4px',
borderRadius: '4px',
}}
width="100%"
justifyContent="flex-end"
alignItems="center"
spacing={2}
>
{['ru', 'en', 'zh'].map((lang) => (
<Button
key={lang}
onClick={() => handleLanguageChange(lang)}
variant={i18n.language === lang ? 'contained' : 'outlined'}
size="small"
sx={{
minWidth: '30px',
padding: '2px 0px',
textTransform: 'uppercase',
}}
>
{lang}
</Button>
))}
</Stack>
<IconButton
color="inherit"
onClick={() => {
setMode()
}}
sx={{
marginRight: '2px',
}}
>
{mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
</IconButton>
{(user?.avatar || user?.name) && (
<Stack direction="row" gap="16px" alignItems="center" justifyContent="center">
{user?.name && (
<Stack direction="column" alignItems="start" gap="0px">
<Typography
sx={{
display: {
xs: 'none',
sm: 'inline-block',
},
}}
variant="subtitle2"
>
{user?.name}
</Typography>
<Typography
sx={{
display: {
xs: 'none',
sm: 'inline-block',
},
backgroundColor: 'primary.main',
color: 'rgba(255, 255, 255, 0.7)',
padding: '1px 4px',
borderRadius: 1,
fontSize: '0.6rem',
}}
variant="subtitle2"
>
{isAdmin ? 'Администратор' : 'Пользователь'}
</Typography>
</Stack>
<FormControl variant="standard" sx={{ width: "min-content" }}>
{city_id && cities && (
<Select
defaultValue={city_id}
value={city_id}
onChange={handleChange}
>
{cities.data?.map((city) => (
<MenuItem value={String(city.id)} key={city.id}>
{city.name}
</MenuItem>
))}
</Select>
)}
<Avatar src={user?.avatar} alt={user?.name} />
</FormControl>
<Stack
direction="row"
spacing={1}
sx={{
backgroundColor: "background.paper",
padding: "4px",
borderRadius: "4px",
}}
>
{["ru", "en", "zh"].map((lang) => (
<Button
key={lang}
onClick={() => handleLanguageChange(lang)}
variant={i18n.language === lang ? "contained" : "outlined"}
size="small"
sx={{
minWidth: "30px",
padding: "2px 0px",
textTransform: "uppercase",
}}
>
{lang}
</Button>
))}
</Stack>
)}
<IconButton
color="inherit"
onClick={() => {
setMode();
}}
sx={{
marginRight: "2px",
}}
>
{mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
</IconButton>
{(user?.avatar || user?.name) && (
<Stack
direction="row"
gap="16px"
alignItems="center"
justifyContent="center"
>
{user?.name && (
<Stack direction="column" alignItems="start" gap="0px">
<Typography
sx={{
display: {
xs: "none",
sm: "inline-block",
},
}}
variant="subtitle2"
>
{user?.name}
</Typography>
<Typography
sx={{
display: {
xs: "none",
sm: "inline-block",
},
backgroundColor: "primary.main",
color: "rgba(255, 255, 255, 0.7)",
padding: "1px 4px",
borderRadius: 1,
fontSize: "0.6rem",
}}
variant="subtitle2"
>
{isAdmin ? "Администратор" : "Пользователь"}
</Typography>
</Stack>
)}
<Avatar src={user?.avatar} alt={user?.name} />
</Stack>
)}
</Stack>
</Stack>
</Stack>
</Toolbar>
</AppBar>
)
}
</Toolbar>
</AppBar>
);
}
);

266
src/pages/article/create.tsx
View File

@ -1,72 +1,196 @@
import {Box, TextField, Typography, Paper} from '@mui/material'
import {Create} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'
import React, {useState, useEffect} from 'react'
import ReactMarkdown from 'react-markdown'
import { Box, TextField, Typography, Paper } from "@mui/material";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import Cookies from "js-cookie";
import { MarkdownEditor } from "../../components/MarkdownEditor";
import "easymde/dist/easymde.min.css";
import {MarkdownEditor} from '../../components/MarkdownEditor'
import 'easymde/dist/easymde.min.css'
const MemoizedSimpleMDE = React.memo(MarkdownEditor)
const MemoizedSimpleMDE = React.memo(MarkdownEditor);
export const ArticleCreate = () => {
const [language, setLanguage] = useState(Cookies.get("lang")!);
const [articleData, setArticleData] = useState<{
ru: { heading: string; body: string };
en: { heading: string; body: string };
zh: { heading: string; body: string };
}>({
ru: { heading: "", body: "" },
en: { heading: "", body: "" },
zh: { heading: "", body: "" },
});
const {
saveButtonProps,
refineCore: {formLoading},
refineCore: { formLoading },
register,
control,
watch,
formState: {errors},
formState: { errors },
setValue,
} = useForm({
refineCoreProps: {
resource: 'article/',
resource: "article/",
meta: {
headers: {
"Accept-Language": language,
},
},
},
})
});
const [preview, setPreview] = useState('')
const [headingPreview, setHeadingPreview] = useState('')
useEffect(() => {
const lang = Cookies.get("lang")!;
Cookies.set("lang", language);
return () => {
Cookies.set("lang", lang);
};
}, [language]);
useEffect(() => {
setValue(
"heading",
articleData[language as keyof typeof articleData]?.heading || ""
);
setValue(
"body",
articleData[language as keyof typeof articleData]?.body || ""
);
setPreview(articleData[language as keyof typeof articleData]?.body || "");
setHeadingPreview(
articleData[language as keyof typeof articleData]?.heading || ""
);
}, [language, articleData, setValue]);
const handleLanguageChange = (lang: string) => {
setArticleData((prevData) => ({
...prevData,
[language]: {
heading: watch("heading") || "",
body: watch("body") || "",
},
}));
setLanguage(lang);
Cookies.set("lang", lang);
};
const [preview, setPreview] = useState("");
const [headingPreview, setHeadingPreview] = useState("");
// Следим за изменениями в полях body и heading
const bodyContent = watch('body')
const headingContent = watch('heading')
const bodyContent = watch("body");
const headingContent = watch("heading");
useEffect(() => {
setPreview(bodyContent || '')
}, [bodyContent])
setPreview(bodyContent || "");
}, [bodyContent]);
useEffect(() => {
setHeadingPreview(headingContent || '')
}, [headingContent])
setHeadingPreview(headingContent || "");
}, [headingContent]);
const simpleMDEOptions = React.useMemo(
() => ({
placeholder: 'Введите контент в формате Markdown...',
placeholder: "Введите контент в формате Markdown...",
spellChecker: false,
}),
[],
)
[]
);
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box sx={{display: 'flex', gap: 2}}>
<Box sx={{ display: "flex", flex: 1, gap: 2 }}>
{/* Форма создания */}
<Box component="form" sx={{flex: 1, display: 'flex', flexDirection: 'column'}} autoComplete="off">
<TextField
{...register('heading', {
required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.heading}
helperText={(errors as any)?.heading?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
type="text"
label="Заголовок *"
name="heading"
/>
<Box sx={{ display: "flex", flex: 1, flexDirection: "column", gap: 2 }}>
<Box
sx={{
flex: 1,
display: "flex",
gap: 2,
}}
>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "ru" ? "primary.main" : "transparent",
color: language === "ru" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("ru")}
>
RU
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "en" ? "primary.main" : "transparent",
color: language === "en" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("en")}
>
EN
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "zh" ? "primary.main" : "transparent",
color: language === "zh" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("zh")}
>
ZH
</Box>
</Box>
<Box
component="form"
sx={{ flex: 1, display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register("heading", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.heading}
helperText={(errors as any)?.heading?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label="Заголовок *"
name="heading"
/>
<Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
<Controller
control={control}
name="body"
rules={{ required: "Это поле является обязательным" }}
defaultValue=""
render={({ field: { onChange, value } }) => (
<MemoizedSimpleMDE
value={value}
onChange={onChange}
options={simpleMDEOptions}
className="my-markdown-editor"
/>
)}
/>
</Box>
</Box>
{/* Блок предпросмотра */}
@ -74,14 +198,15 @@ export const ArticleCreate = () => {
sx={{
flex: 1,
p: 2,
maxHeight: 'calc(100vh - 200px)',
overflowY: 'auto',
position: 'sticky',
maxHeight: "calc(100vh - 200px)",
overflowY: "auto",
position: "sticky",
top: 16,
borderRadius: 2,
border: '1px solid',
borderColor: 'primary.main',
bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
border: "1px solid",
borderColor: "primary.main",
bgcolor: (theme) =>
theme.palette.mode === "dark" ? "background.paper" : "#fff",
}}
>
<Typography variant="h6" gutterBottom color="primary">
@ -93,7 +218,8 @@ export const ArticleCreate = () => {
variant="h4"
gutterBottom
sx={{
color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
mb: 3,
}}
>
@ -103,39 +229,41 @@ export const ArticleCreate = () => {
{/* Markdown контент */}
<Box
sx={{
'& img': {
maxWidth: '100%',
height: 'auto',
"& img": {
maxWidth: "100%",
height: "auto",
borderRadius: 1,
},
'& h1, & h2, & h3, & h4, & h5, & h6': {
color: 'primary.main',
"& h1, & h2, & h3, & h4, & h5, & h6": {
color: "primary.main",
mt: 2,
mb: 1,
},
'& p': {
"& p": {
mb: 2,
color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
},
'& a': {
color: 'primary.main',
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
"& a": {
color: "primary.main",
textDecoration: "none",
"&:hover": {
textDecoration: "underline",
},
},
'& blockquote': {
borderLeft: '4px solid',
borderColor: 'primary.main',
"& blockquote": {
borderLeft: "4px solid",
borderColor: "primary.main",
pl: 2,
my: 2,
color: 'text.secondary',
color: "text.secondary",
},
'& code': {
bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
"& code": {
bgcolor: (theme) =>
theme.palette.mode === "dark" ? "grey.900" : "grey.100",
p: 0.5,
borderRadius: 0.5,
color: 'primary.main',
color: "primary.main",
},
}}
>
@ -144,5 +272,5 @@ export const ArticleCreate = () => {
</Paper>
</Box>
</Create>
)
}
);
};

245
src/pages/article/edit.tsx
View File

@ -2,7 +2,7 @@ import { Box, TextField, Typography, Paper } from "@mui/material";
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { useParams } from "react-router";
import { useLocation, useParams } from "react-router";
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { useList } from "@refinedev/core";
@ -12,31 +12,90 @@ import { LinkedItems } from "../../components/LinkedItems";
import { MediaItem, mediaFields } from "./types";
import { TOKEN_KEY } from "../../authProvider";
import "easymde/dist/easymde.min.css";
import Cookies from "js-cookie";
const MemoizedSimpleMDE = React.memo(MarkdownEditor);
export const ArticleEdit = () => {
// const [initialLanguage] = useState(Cookies.get("lang")!);
// const { pathname } = useLocation();
// useEffect(() => {
// Cookies.set("lang", initialLanguage);
// }, [pathname]);
const [language, setLanguage] = useState(Cookies.get("lang")!);
const [articleData, setArticleData] = useState<{
ru: { heading: string; body: string };
en: { heading: string; body: string };
zh: { heading: string; body: string };
}>({
ru: { heading: "", body: "" },
en: { heading: "", body: "" },
zh: { heading: "", body: "" },
});
const { id: articleId } = useParams<{ id: string }>();
const [preview, setPreview] = useState("");
const [headingPreview, setHeadingPreview] = useState("");
const simpleMDEOptions = React.useMemo(
() => ({
placeholder: "Введите контент в формате Markdown...",
spellChecker: false,
}),
[]
);
const {
saveButtonProps,
register,
control,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const { id: articleId } = useParams<{ id: string }>();
const [preview, setPreview] = useState("");
const [headingPreview, setHeadingPreview] = useState("");
// Получаем привязанные медиа
const { data: mediaData } = useList<MediaItem>({
resource: `article/${articleId}/media`,
queryOptions: {
enabled: !!articleId,
setValue,
} = useForm({
refineCoreProps: {
meta: {
headers: {
"Accept-Language": language,
},
},
},
});
// Следим за изменениями в полях body и heading
useEffect(() => {
const lang = Cookies.get("lang")!;
Cookies.set("lang", language);
return () => {
Cookies.set("lang", lang);
};
}, [language]);
useEffect(() => {
setValue(
"heading",
articleData[language as keyof typeof articleData]?.heading || ""
);
setValue(
"body",
articleData[language as keyof typeof articleData]?.body || ""
);
setPreview(articleData[language as keyof typeof articleData]?.body || "");
setHeadingPreview(
articleData[language as keyof typeof articleData]?.heading || ""
);
}, [language, articleData, setValue]);
const handleLanguageChange = (lang: string) => {
setArticleData((prevData) => ({
...prevData,
[language]: {
heading: watch("heading") || "",
body: watch("body") || "",
},
}));
setLanguage(lang);
Cookies.set("lang", lang);
};
const bodyContent = watch("body");
const headingContent = watch("heading");
@ -48,62 +107,124 @@ export const ArticleEdit = () => {
setHeadingPreview(headingContent || "");
}, [headingContent]);
const simpleMDEOptions = React.useMemo(
() => ({
placeholder: "Введите контент в формате Markdown...",
spellChecker: false,
}),
[]
);
const onSubmit = (data: { heading: string; body: string }) => {
// Здесь вы будете отправлять данные на сервер,
// учитывая текущий язык (language)
console.log("Данные для сохранения:", data, language);
// ... ваша логика сохранения ...
};
const { data: mediaData } = useList<MediaItem>({
resource: `article/${articleId}/media`,
queryOptions: {
enabled: !!articleId,
},
});
return (
<Edit saveButtonProps={saveButtonProps}>
<Box sx={{ display: "flex", gap: 2 }}>
{/* Форма редактирования */}
<Box
component="form"
sx={{ flex: 1, display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register("heading", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.heading}
helperText={(errors as any)?.heading?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label="Заголовок *"
name="heading"
/>
{/* Форма создания */}
<Box sx={{ display: "flex", flex: 1, flexDirection: "column", gap: 2 }}>
<Box
sx={{
flex: 1,
display: "flex",
gap: 2,
}}
>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "ru" ? "primary.main" : "transparent",
color: language === "ru" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("ru")}
>
RU
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "en" ? "primary.main" : "transparent",
color: language === "en" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("en")}
>
EN
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "zh" ? "primary.main" : "transparent",
color: language === "zh" ? "white" : "inherit",
p: 1,
borderRadius: 1,
}}
onClick={() => handleLanguageChange("zh")}
>
ZH
</Box>
</Box>
<Box
component="form"
sx={{ flex: 1, display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register("heading", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.heading}
helperText={(errors as any)?.heading?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label="Заголовок *"
name="heading"
/>
<Controller
control={control}
name="body"
rules={{ required: "Это поле является обязательным" }}
defaultValue=""
render={({ field: { onChange, value } }) => (
<MemoizedSimpleMDE
value={value} // markdown
onChange={onChange}
options={simpleMDEOptions}
className="my-markdown-editor"
<Controller
control={control}
name="body"
rules={{ required: "Это поле является обязательным" }}
defaultValue=""
render={({ field: { onChange, value } }) => (
<MemoizedSimpleMDE
value={value} // markdown
onChange={onChange}
options={simpleMDEOptions}
className="my-markdown-editor"
/>
)}
/>
{articleId && (
<LinkedItems<MediaItem>
type="edit"
parentId={articleId}
parentResource="article"
childResource="media"
fields={mediaFields}
title="медиа"
/>
)}
/>
{articleId && (
<LinkedItems<MediaItem>
type="edit"
parentId={articleId}
parentResource="article"
childResource="media"
fields={mediaFields}
title="медиа"
/>
)}
</Box>
</Box>
{/* Блок предпросмотра */}

179
src/pages/carrier/edit.tsx
View File

@ -1,171 +1,191 @@
import {Autocomplete, Box, TextField} from '@mui/material'
import {Edit, useAutocomplete} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'
import { Autocomplete, Box, TextField } from "@mui/material";
import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
export const CarrierEdit = () => {
const {
saveButtonProps,
register,
control,
formState: {errors},
} = useForm()
formState: { errors },
} = useForm();
const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
resource: 'city',
const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
resource: "city",
onSearch: (value) => [
{
field: 'name',
operator: 'contains',
field: "name",
operator: "contains",
value,
},
],
})
});
const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
resource: 'media',
const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
resource: "media",
onSearch: (value) => [
{
field: 'media_name',
operator: 'contains',
field: "media_name",
operator: "contains",
value,
},
],
})
});
return (
<Edit saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<Controller
control={control}
name="city_id"
rules={{required: 'Это поле является обязательным'}}
rules={{ required: "Это поле является обязательным" }}
defaultValue={null}
render={({field}) => (
render={({ field }) => (
<Autocomplete
{...cityAutocompleteProps}
value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
value={
cityAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || '')
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.name : ''
return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id
return option.id === value?.id;
}}
filterOptions={(options, {inputValue}) => {
return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.name.toLowerCase().includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
renderInput={(params) => (
<TextField
{...params}
label="Выберите город"
margin="normal"
variant="outlined"
error={!!errors.city_id}
helperText={(errors as any)?.city_id?.message}
required
/>
)}
/>
)}
/>
<TextField
{...register('full_name', {
required: 'Это поле является обязательным',
{...register("full_name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.full_name}
helperText={(errors as any)?.full_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Полное имя *'}
label={"Полное имя *"}
name="full_name"
/>
<TextField
{...register('short_name', {
required: 'Это поле является обязательным',
{...register("short_name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.short_name}
helperText={(errors as any)?.short_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Короткое имя *'}
label={"Короткое имя *"}
name="short_name"
/>
<TextField
{...register('main_color', {
{...register("main_color", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.main_color}
helperText={(errors as any)?.main_color?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="color"
label={'Основной цвет'}
label={"Основной цвет"}
name="main_color"
sx={{
'& input': {
height: '50px',
paddingBlock: '14px',
paddingInline: '14px',
cursor: 'pointer',
"& input": {
height: "50px",
paddingBlock: "14px",
paddingInline: "14px",
cursor: "pointer",
},
}}
/>
<TextField
{...register('left_color', {
{...register("left_color", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.left_color}
helperText={(errors as any)?.left_color?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="color"
label={'Цвет левого виджета'}
label={"Цвет левого виджета"}
name="left_color"
sx={{
'& input': {
height: '50px',
paddingBlock: '14px',
paddingInline: '14px',
cursor: 'pointer',
"& input": {
height: "50px",
paddingBlock: "14px",
paddingInline: "14px",
cursor: "pointer",
},
}}
/>
<TextField
{...register('right_color', {
{...register("right_color", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.right_color}
helperText={(errors as any)?.right_color?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="color"
label={'Цвет правого виджета'}
label={"Цвет правого виджета"}
name="right_color"
sx={{
'& input': {
height: '50px',
paddingBlock: '14px',
paddingInline: '14px',
cursor: 'pointer',
"& input": {
height: "50px",
paddingBlock: "14px",
paddingInline: "14px",
cursor: "pointer",
},
}}
/>
<TextField
{...register('slogan', {
{...register("slogan", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.slogan}
helperText={(errors as any)?.slogan?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Слоган'}
label={"Слоган"}
name="slogan"
/>
@ -174,27 +194,44 @@ export const CarrierEdit = () => {
name="logo"
// rules={{required: 'Это поле является обязательным'}}
defaultValue={null}
render={({field}) => (
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || '')
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : ''
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id
return option.id === value?.id;
}}
filterOptions={(options, {inputValue}) => {
return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => <TextField {...params} label="Выберите логотип" margin="normal" variant="outlined" error={!!errors.logo} helperText={(errors as any)?.logo?.message} />}
renderInput={(params) => (
<TextField
{...params}
label="Выберите логотип"
margin="normal"
variant="outlined"
error={!!errors.logo}
helperText={(errors as any)?.logo?.message}
/>
)}
/>
)}
/>
</Box>
</Edit>
)
}
);
};

177
src/pages/carrier/list.tsx
View File

@ -1,110 +1,173 @@
import {type GridColDef} from '@mui/x-data-grid'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import React from 'react'
import { type GridColDef } from "@mui/x-data-grid";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import {
DeleteButton,
EditButton,
List,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import React from "react";
import { observer } from "mobx-react-lite";
import { cityStore } from "../../store/CityStore";
export const CarrierList = () => {
const {dataGridProps} = useDataGrid({})
export const CarrierList = observer(() => {
const { city_id } = cityStore;
const { dataGridProps } = useDataGrid({
resource: "carrier",
filters: {
permanent: [
{
field: "cityID",
operator: "eq",
value: city_id,
},
],
},
});
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
field: "id",
headerName: "ID",
type: "number",
minWidth: 50,
align: 'left',
headerAlign: 'left',
align: "left",
headerAlign: "left",
},
{
field: 'city_id',
headerName: 'ID Города',
type: 'number',
field: "city_id",
headerName: "ID Города",
type: "number",
minWidth: 100,
align: 'left',
headerAlign: 'left',
align: "left",
headerAlign: "left",
},
{
field: 'full_name',
headerName: 'Полное имя',
type: 'string',
field: "full_name",
headerName: "Полное имя",
type: "string",
minWidth: 200,
},
{
field: 'short_name',
headerName: 'Короткое имя',
type: 'string',
field: "short_name",
headerName: "Короткое имя",
type: "string",
minWidth: 125,
},
{
field: 'city',
headerName: 'Город',
type: 'string',
field: "city",
headerName: "Город",
type: "string",
minWidth: 125,
align: 'left',
headerAlign: 'left',
align: "left",
headerAlign: "left",
flex: 1,
},
{
field: 'main_color',
headerName: 'Основной цвет',
type: 'string',
field: "main_color",
headerName: "Основной цвет",
type: "string",
minWidth: 150,
renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
renderCell: ({ value }) => (
<div
style={{
display: "grid",
placeItems: "center",
width: "100%",
height: "100%",
backgroundColor: `${value}10`,
borderRadius: 10,
}}
>
{value}
</div>
),
},
{
field: 'left_color',
headerName: 'Цвет левого виджета',
type: 'string',
field: "left_color",
headerName: "Цвет левого виджета",
type: "string",
minWidth: 150,
renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
renderCell: ({ value }) => (
<div
style={{
display: "grid",
placeItems: "center",
width: "100%",
height: "100%",
backgroundColor: `${value}10`,
borderRadius: 10,
}}
>
{value}
</div>
),
},
{
field: 'right_color',
headerName: 'Цвет правого виджета',
type: 'string',
field: "right_color",
headerName: "Цвет правого виджета",
type: "string",
minWidth: 150,
renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
renderCell: ({ value }) => (
<div
style={{
display: "grid",
placeItems: "center",
width: "100%",
height: "100%",
backgroundColor: `${value}10`,
borderRadius: 10,
}}
>
{value}
</div>
),
},
{
field: 'logo',
headerName: 'Лого',
type: 'string',
field: "logo",
headerName: "Лого",
type: "string",
minWidth: 150,
},
{
field: 'slogan',
headerName: 'Слоган',
type: 'string',
field: "slogan",
headerName: "Слоган",
type: "string",
minWidth: 150,
},
{
field: 'actions',
headerName: 'Действия',
field: "actions",
headerName: "Действия",
minWidth: 120,
display: 'flex',
align: 'right',
headerAlign: 'center',
display: "flex",
align: "right",
headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
renderCell: function render({row}) {
renderCell: function render({ row }) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
<DeleteButton
hideText
confirmTitle="Вы уверены?"
recordItemId={row.id}
/>
</>
)
);
},
},
],
[],
)
[]
);
return (
<List>
<CustomDataGrid {...dataGridProps} columns={columns} />
</List>
)
}
);
});

211
src/pages/route/list.tsx
View File

@ -1,156 +1,175 @@
import {type GridColDef} from '@mui/x-data-grid'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Typography} from '@mui/material'
import React from 'react'
import { type GridColDef } from "@mui/x-data-grid";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import {
DeleteButton,
EditButton,
List,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import { Typography } from "@mui/material";
import React from "react";
import {localeText} from '../../locales/ru/localeText'
import { localeText } from "../../locales/ru/localeText";
export const RouteList = () => {
const {dataGridProps} = useDataGrid({
resource: 'route/',
})
const { dataGridProps } = useDataGrid({
resource: "route/",
});
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
field: "id",
headerName: "ID",
type: "number",
minWidth: 70,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'carrier_id',
headerName: 'ID перевозчика',
type: 'number',
field: "carrier_id",
headerName: "ID перевозчика",
type: "number",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'carrier',
headerName: 'Перевозчик',
type: 'string',
field: "carrier",
headerName: "Перевозчик",
type: "string",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'route_number',
headerName: 'Номер маршрута',
type: 'string',
field: "route_number",
headerName: "Номер маршрута",
type: "string",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'route_sys_number',
headerName: 'Системный номер маршрута',
type: 'string',
field: "route_sys_number",
headerName: "Системный номер маршрута",
type: "string",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'governor_appeal',
headerName: 'Обращение губернатора',
type: 'number',
field: "governor_appeal",
headerName: "Обращение губернатора",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'scale_min',
headerName: 'Масштаб (мин)',
type: 'number',
field: "scale_min",
headerName: "Масштаб (мин)",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'scale_max',
headerName: 'Масштаб (макс)',
type: 'number',
field: "scale_max",
headerName: "Масштаб (макс)",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'rotate',
headerName: 'Поворот',
type: 'number',
field: "rotate",
headerName: "Поворот",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'center_latitude',
headerName: 'Центр. широта',
type: 'number',
field: "center_latitude",
headerName: "Центр. широта",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'center_longitude',
headerName: 'Центр. долгота',
type: 'number',
field: "center_longitude",
headerName: "Центр. долгота",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'route_direction',
headerName: 'Направление маршрута',
type: 'boolean',
display: 'flex',
align: 'left',
headerAlign: 'left',
field: "route_direction",
headerName: "Направление маршрута",
type: "boolean",
display: "flex",
align: "left",
headerAlign: "left",
minWidth: 120,
flex: 1,
renderCell: ({value}) => <Typography style={{color: value ? '#48989f' : '#7f6b58'}}>{value ? 'прямое' : 'обратное'}</Typography>,
renderCell: ({ value }) => (
<Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
{value ? "прямое" : "обратное"}
</Typography>
),
},
{
field: 'actions',
headerName: 'Действия',
cellClassName: 'route-actions',
align: 'right',
headerAlign: 'center',
field: "actions",
headerName: "Действия",
cellClassName: "route-actions",
align: "right",
headerAlign: "center",
minWidth: 120,
display: 'flex',
display: "flex",
sortable: false,
filterable: false,
disableColumnMenu: true,
renderCell: function render({row}) {
renderCell: function render({ row }) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
<DeleteButton
hideText
confirmTitle="Вы уверены?"
recordItemId={row.id}
/>
</>
)
);
},
},
],
[],
)
[]
);
return (
<List>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
<CustomDataGrid
{...dataGridProps}
columns={columns}
localeText={localeText}
getRowId={(row: any) => row.id}
/>
</List>
)
}
);
};

47
src/pages/route/types.ts
View File

@ -1,35 +1,36 @@
import {VEHICLE_TYPES} from '../../lib/constants'
import { VEHICLE_TYPES } from "../../lib/constants";
export type StationItem = {
id: number
name: string
description: string
[key: string]: string | number
}
id: number;
name: string;
description: string;
[key: string]: string | number;
};
export type VehicleItem = {
id: number
tail_number: number
type: number
[key: string]: string | number
}
id: number;
tail_number: number;
type: number;
[key: string]: string | number;
};
export type FieldType<T> = {
label: string
data: keyof T
render?: (value: any) => React.ReactNode
}
label: string;
data: keyof T;
render?: (value: any) => React.ReactNode;
};
export const stationFields: Array<FieldType<StationItem>> = [
{label: 'Название', data: 'system_name'},
{label: 'Описание', data: 'description'},
]
{ label: "Название", data: "name" },
{ label: "Описание", data: "description" },
];
export const vehicleFields: Array<FieldType<VehicleItem>> = [
{label: 'Бортовой номер', data: 'tail_number'},
{ label: "Бортовой номер", data: "tail_number" },
{
label: 'Тип',
data: 'type',
render: (value: number) => VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
label: "Тип",
data: "type",
render: (value: number) =>
VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
},
]
];

763
src/pages/sight/create.tsx
View File

@ -2,25 +2,45 @@ import { Autocomplete, Box, TextField, Typography, Paper } from "@mui/material";
import { Create, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { Link } from "react-router";
import { cityStore } from "../../store/CityStore";
import React, { useState, useEffect } from "react";
import { TOKEN_KEY } from "../../authProvider";
import { observer } from "mobx-react-lite";
import Cookies from "js-cookie";
import { useLocation } from "react-router";
export const SightCreate = observer(() => {
const [language, setLanguage] = useState(Cookies.get("lang") || "ru");
// Состояния для предпросмотра
const handleLanguageChange = (lang: string) => {
setLanguage(lang);
Cookies.set("lang", lang);
};
useEffect(() => {
const lang = Cookies.get("lang")!;
Cookies.set("lang", language);
return () => {
Cookies.set("lang", lang);
};
}, [language]);
export const SightCreate = () => {
const {
saveButtonProps,
refineCore: { formLoading },
register,
control,
watch,
setValue,
formState: { errors },
} = useForm({
refineCoreProps: {
resource: "sight/",
},
});
const { city_id } = cityStore;
// Состояния для предпросмотра
const [namePreview, setNamePreview] = useState("");
const [coordinatesPreview, setCoordinatesPreview] = useState({
latitude: "",
@ -37,6 +57,16 @@ export const SightCreate = () => {
const [leftArticlePreview, setLeftArticlePreview] = useState("");
const [previewArticlePreview, setPreviewArticlePreview] = useState("");
const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
setCoordinatesPreview({
latitude: lat,
longitude: lon,
});
setValue("latitude", lat);
setValue("longitude", lon);
};
// Автокомплиты
const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
resource: "city",
@ -47,6 +77,11 @@ export const SightCreate = () => {
value,
},
],
meta: {
headers: {
"Accept-Language": language,
},
},
});
const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
@ -73,6 +108,7 @@ export const SightCreate = () => {
// Следим за изменениями во всех полях
const nameContent = watch("name");
const addressContent = watch("address");
const latitudeContent = watch("latitude");
const longitudeContent = watch("longitude");
const cityContent = watch("city_id");
@ -114,6 +150,12 @@ export const SightCreate = () => {
);
}, [thumbnailContent, mediaAutocompleteProps.options]);
useEffect(() => {
if (city_id) {
setValue("city_id", +city_id);
}
}, [city_id, setValue]);
useEffect(() => {
const selectedWatermarkLU = mediaAutocompleteProps.options.find(
(option) => option.id === watermarkLUContent
@ -157,313 +199,380 @@ export const SightCreate = () => {
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box sx={{ display: "flex", gap: 2 }}>
{/* Форма создания */}
<Box
component="form"
sx={{ flex: 1, display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register("name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.name}
helperText={(errors as any)?.name?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Название *"}
name="name"
/>
<TextField
{...register("latitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.latitude}
helperText={(errors as any)?.latitude?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Широта *"}
name="latitude"
/>
<TextField
{...register("longitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.longitude}
helperText={(errors as any)?.longitude?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="number"
label={"Долгота *"}
name="longitude"
/>
<Box sx={{ display: "flex", flexDirection: "column", flex: 1, gap: 2 }}>
{/* Форма создания */}
<Box
sx={{
flex: 1,
display: "flex",
gap: 2,
}}
>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "ru" ? "primary.main" : "transparent",
color: language === "ru" ? "white" : "inherit",
borderRadius: 1,
p: 1,
}}
onClick={() => handleLanguageChange("ru")}
>
RU
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "en" ? "primary.main" : "transparent",
color: language === "en" ? "white" : "inherit",
borderRadius: 1,
p: 1,
}}
onClick={() => handleLanguageChange("en")}
>
EN
</Box>
<Box
sx={{
cursor: "pointer",
flex: 1,
display: "flex",
justifyContent: "center",
bgcolor: language === "zh" ? "primary.main" : "transparent",
color: language === "zh" ? "white" : "inherit",
borderRadius: 1,
p: 1,
}}
onClick={() => handleLanguageChange("zh")}
>
ZH
</Box>
</Box>
<Controller
control={control}
name="city_id"
rules={{ required: "Это поле является обязательным" }}
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...cityAutocompleteProps}
value={
cityAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.name.toLowerCase().includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите город"
margin="normal"
variant="outlined"
error={!!errors.city_id}
helperText={(errors as any)?.city_id?.message}
required
/>
)}
/>
)}
/>
<Box
component="form"
sx={{ flex: 1, display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register("name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.name}
helperText={(errors as any)?.name?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Название *"}
name="name"
/>
<Controller
control={control}
name="thumbnail"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите обложку"
margin="normal"
variant="outlined"
error={!!errors.arms}
helperText={(errors as any)?.arms?.message}
required
/>
)}
/>
)}
/>
<TextField
value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
onChange={handleCoordinatesChange}
error={!!(errors as any)?.latitude}
helperText={(errors as any)?.latitude?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Координаты *"}
/>
<input
type="hidden"
{...register("longitude", {
value: coordinatesPreview.longitude,
required: "Это поле является обязательным",
valueAsNumber: true,
})}
/>
<input
type="hidden"
{...register("latitude", {
value: coordinatesPreview.latitude,
required: "Это поле является обязательным",
valueAsNumber: true,
})}
/>
<Controller
control={control}
name="watermark_lu"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите водный знак (Левый верх)"
margin="normal"
variant="outlined"
error={!!errors.arms}
helperText={(errors as any)?.arms?.message}
required
/>
)}
/>
)}
/>
<TextField
{...register("address", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.address}
helperText={(errors as any)?.address?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Адрес *"}
name="address"
/>
<Controller
control={control}
name="watermark_rd"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите водный знак (Правый низ)"
margin="normal"
variant="outlined"
error={!!errors.arms}
helperText={(errors as any)?.arms?.message}
required
/>
)}
/>
)}
/>
<Controller
control={control}
name="city_id"
rules={{ required: "Это поле является обязательным" }}
render={({ field }) => (
<Autocomplete
{...cityAutocompleteProps}
value={
cityAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите город"
margin="normal"
variant="outlined"
error={!!errors.city_id}
helperText={(errors as any)?.city_id?.message}
required
/>
)}
/>
)}
/>
<Controller
control={control}
name="left_article"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...articleAutocompleteProps}
value={
articleAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.heading : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.heading
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Левая статья"
margin="normal"
variant="outlined"
error={!!errors.arms}
helperText={(errors as any)?.arms?.message}
required
/>
)}
/>
)}
/>
<Controller
control={control}
name="thumbnail"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите обложку"
margin="normal"
variant="outlined"
error={!!errors.thumbnail}
helperText={(errors as any)?.thumbnail?.message}
required
/>
)}
/>
)}
/>
<Controller
control={control}
name="preview_article"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...articleAutocompleteProps}
value={
articleAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.heading : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.heading
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Cтатья-предпросмотр"
margin="normal"
variant="outlined"
error={!!errors.arms}
helperText={(errors as any)?.arms?.message}
required
/>
)}
/>
)}
/>
<Controller
control={control}
name="watermark_lu"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите водный знак (Левый верх)"
margin="normal"
variant="outlined"
error={!!errors.watermark_lu}
helperText={(errors as any)?.watermark_lu?.message}
/>
)}
/>
)}
/>
<Controller
control={control}
name="watermark_rd"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...mediaAutocompleteProps}
value={
mediaAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.media_name
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Выберите водный знак (Правый верх)"
margin="normal"
variant="outlined"
error={!!errors.watermark_rd}
helperText={(errors as any)?.watermark_rd?.message}
/>
)}
/>
)}
/>
<Controller
control={control}
name="left_article"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...articleAutocompleteProps}
value={
articleAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.heading : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.heading
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Левая статья"
margin="normal"
variant="outlined"
error={!!errors.left_article}
helperText={(errors as any)?.left_article?.message}
/>
)}
/>
)}
/>
<Controller
control={control}
name="preview_article"
defaultValue={null}
render={({ field }) => (
<Autocomplete
{...articleAutocompleteProps}
value={
articleAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.heading : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id;
}}
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.heading
.toLowerCase()
.includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Cтатья-предпросмотр"
margin="normal"
variant="outlined"
error={!!errors.preview_article}
helperText={(errors as any)?.preview_article?.message}
/>
)}
/>
)}
/>
</Box>
</Box>
{/* Блок предпросмотра */}
{/* Preview Panel */}
<Paper
sx={{
flex: 1,
@ -483,13 +592,14 @@ export const SightCreate = () => {
Предпросмотр
</Typography>
{/* Название */}
{/* Название достопримечательности */}
<Typography
variant="h4"
gutterBottom
sx={{
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
mb: 3,
}}
>
{namePreview}
@ -511,6 +621,22 @@ export const SightCreate = () => {
</Box>
</Typography>
{/* Адрес */}
<Typography variant="body1" sx={{ mb: 2 }}>
<Box component="span" sx={{ color: "text.secondary" }}>
Адрес:{" "}
</Box>
<Box
component="span"
sx={{
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
}}
>
{addressContent}
</Box>
</Typography>
{/* Координаты */}
<Typography variant="body1" sx={{ mb: 2 }}>
<Box component="span" sx={{ color: "text.secondary" }}>
@ -523,7 +649,7 @@ export const SightCreate = () => {
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
}}
>
{coordinatesPreview.latitude}, {coordinatesPreview.longitude}
{`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
</Box>
</Typography>
@ -543,8 +669,8 @@ export const SightCreate = () => {
alt="Обложка"
sx={{
maxWidth: "100%",
height: "auto",
borderRadius: 1,
height: "40vh",
borderRadius: 2,
border: "1px solid",
borderColor: "primary.main",
}}
@ -593,7 +719,7 @@ export const SightCreate = () => {
gutterBottom
sx={{ color: "text.secondary" }}
>
Правый нижний:
Правый верхний:
</Typography>
<Box
component="img"
@ -615,28 +741,16 @@ export const SightCreate = () => {
{/* Связанные статьи */}
<Box>
<Typography
variant="body1"
gutterBottom
sx={{ color: "text.secondary" }}
>
Связанные статьи:
</Typography>
{leftArticlePreview && (
<Typography variant="body1" gutterBottom>
<Box component="span" sx={{ color: "text.secondary" }}>
Левая статья:{" "}
</Box>
<Box
component={Link}
to={`/article/show/${watch("left_article")}`}
component="span"
sx={{
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
textDecoration: "none",
"&:hover": {
textDecoration: "underline",
},
}}
>
{leftArticlePreview}
@ -649,15 +763,10 @@ export const SightCreate = () => {
Статья-предпросмотр:{" "}
</Box>
<Box
component={Link}
to={`/article/show/${watch("preview_article")}`}
component="span"
sx={{
color: (theme) =>
theme.palette.mode === "dark" ? "grey.300" : "grey.800",
textDecoration: "none",
"&:hover": {
textDecoration: "underline",
},
}}
>
{previewArticlePreview}
@ -669,4 +778,4 @@ export const SightCreate = () => {
</Box>
</Create>
);
};
});

1201
src/pages/sight/edit.tsx
View File

File diff suppressed because it is too large Load Diff

172
src/pages/sight/list.tsx
View File

@ -1,128 +1,158 @@
import React from 'react'
import {type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Stack} from '@mui/material'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {localeText} from '../../locales/ru/localeText'
import React from "react";
import { type GridColDef } from "@mui/x-data-grid";
import {
DeleteButton,
EditButton,
List,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import { Stack } from "@mui/material";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import { localeText } from "../../locales/ru/localeText";
import { cityStore } from "../../store/CityStore";
import { observer } from "mobx-react-lite";
export const SightList = () => {
const {dataGridProps} = useDataGrid({resource: 'sight/'})
export const SightList = observer(() => {
const { city_id } = cityStore;
const { dataGridProps } = useDataGrid({
resource: "sight/",
filters: {
permanent: [
{
field: "cityID",
operator: "eq",
value: city_id,
},
],
},
});
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
field: "id",
headerName: "ID",
type: "number",
minWidth: 70,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'name',
headerName: 'Название',
type: 'string',
field: "name",
headerName: "Название",
type: "string",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'latitude',
headerName: 'Широта',
type: 'number',
field: "latitude",
headerName: "Широта",
type: "number",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'longitude',
headerName: 'Долгота',
type: 'number',
field: "longitude",
headerName: "Долгота",
type: "number",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'city_id',
headerName: 'ID города',
type: 'number',
field: "city_id",
headerName: "ID города",
type: "number",
minWidth: 70,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'city',
headerName: 'Город',
type: 'string',
field: "city",
headerName: "Город",
type: "string",
minWidth: 100,
align: 'left',
headerAlign: 'left',
align: "left",
headerAlign: "left",
flex: 1,
},
{
field: 'thumbnail',
headerName: 'Карточка',
type: 'string',
field: "thumbnail",
headerName: "Карточка",
type: "string",
minWidth: 150,
},
{
field: 'watermark_lu',
headerName: 'Вод. знак (lu)',
type: 'string',
field: "watermark_lu",
headerName: "Вод. знак (lu)",
type: "string",
minWidth: 150,
},
{
field: 'watermark_rd',
headerName: 'Вод. знак (rd)',
type: 'string',
field: "watermark_rd",
headerName: "Вод. знак (rd)",
type: "string",
minWidth: 150,
},
{
field: 'left_article',
headerName: 'Левая статья',
type: 'number',
field: "left_article",
headerName: "Левая статья",
type: "number",
minWidth: 150,
},
{
field: 'preview_article',
headerName: 'Пред. просмотр статьи',
type: 'number',
field: "preview_article",
headerName: "Пред. просмотр статьи",
type: "number",
minWidth: 150,
},
{
field: 'actions',
headerName: 'Действия',
field: "actions",
headerName: "Действия",
minWidth: 120,
display: 'flex',
align: 'right',
headerAlign: 'center',
display: "flex",
align: "right",
headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
renderCell: function render({row}) {
renderCell: function render({ row }) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
<DeleteButton
hideText
confirmTitle="Вы уверены?"
recordItemId={row.id}
/>
</>
)
);
},
},
],
[],
)
[]
);
return (
<List>
<Stack gap={2.5}>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
<CustomDataGrid
{...dataGridProps}
columns={columns}
localeText={localeText}
getRowId={(row: any) => row.id}
hasCoordinates
/>
</Stack>
</List>
)
}
);
});

40
src/pages/sight/show.tsx
View File

@ -1,27 +1,28 @@
import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent} from '@refinedev/mui'
import {LinkedItems} from '../../components/LinkedItems'
import {ArticleItem, articleFields} from './types'
import { Stack, Typography } from "@mui/material";
import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent } from "@refinedev/mui";
import { LinkedItems } from "../../components/LinkedItems";
import { ArticleItem, articleFields } from "./types";
export const SightShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const { query } = useShow({});
const { data, isLoading } = query;
const record = data?.data;
const fields = [
// {label: 'ID', data: 'id'},
{label: 'Название', data: 'name'},
{ label: "Название", data: "name" },
// {label: 'Широта', data: 'latitude'}, #*
// {label: 'Долгота', data: 'longitude'}, #*
// {label: 'ID города', data: 'city_id'},
{label: 'Город', data: 'city'},
]
{ label: "Адрес", data: "address" },
{ label: "Город", data: "city" },
];
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{fields.map(({label, data}) => (
{fields.map(({ label, data }) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
@ -30,8 +31,17 @@ export const SightShow = () => {
</Stack>
))}
{record?.id && <LinkedItems<ArticleItem> type="show" parentId={record.id} parentResource="sight" childResource="article" fields={articleFields} title="статьи" />}
{record?.id && (
<LinkedItems<ArticleItem>
type="show"
parentId={record.id}
parentResource="sight"
childResource="article"
fields={articleFields}
title="статьи"
/>
)}
</Stack>
</Show>
)
}
);
};

194
src/pages/station/create.tsx
View File

@ -1,183 +1,253 @@
import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
import {Create, useAutocomplete} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'
import {
Autocomplete,
Box,
TextField,
Typography,
FormControlLabel,
Checkbox,
Grid,
Paper,
} from "@mui/material";
import { Create, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
const TRANSFER_FIELDS = [
{name: 'bus', label: 'Автобус'},
{name: 'metro_blue', label: 'Метро (синяя)'},
{name: 'metro_green', label: 'Метро (зеленая)'},
{name: 'metro_orange', label: 'Метро (оранжевая)'},
{name: 'metro_purple', label: 'Метро (фиолетовая)'},
{name: 'metro_red', label: 'Метро (красная)'},
{name: 'train', label: 'Электричка'},
{name: 'tram', label: 'Трамвай'},
{name: 'trolleybus', label: 'Троллейбус'},
]
{ name: "bus", label: "Автобус" },
{ name: "metro_blue", label: "Метро (синяя)" },
{ name: "metro_green", label: "Метро (зеленая)" },
{ name: "metro_orange", label: "Метро (оранжевая)" },
{ name: "metro_purple", label: "Метро (фиолетовая)" },
{ name: "metro_red", label: "Метро (красная)" },
{ name: "train", label: "Электричка" },
{ name: "tram", label: "Трамвай" },
{ name: "trolleybus", label: "Троллейбус" },
];
export const StationCreate = () => {
const {
saveButtonProps,
refineCore: {formLoading},
refineCore: { formLoading },
register,
control,
formState: {errors},
formState: { errors },
} = useForm({
refineCoreProps: {
resource: 'station/',
resource: "station/",
},
})
});
const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
resource: 'city',
const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
resource: "city",
onSearch: (value) => [
{
field: 'name',
operator: 'contains',
field: "name",
operator: "contains",
value,
},
],
})
});
return (
<Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register('name', {
required: 'Это поле является обязательным',
{...register("name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.name}
helperText={(errors as any)?.name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Название *'}
label={"Название *"}
name="name"
/>
<TextField
{...register('system_name', {
required: 'Это поле является обязательным',
{...register("system_name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.system_name}
helperText={(errors as any)?.system_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Системное название *'}
label={"Системное название *"}
name="system_name"
/>
<TextField
{...register('description', {
{...register("address", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.address}
helperText={(errors as any)?.address?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Адрес"}
name="address"
/>
<TextField
{...register("description", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.description}
helperText={(errors as any)?.description?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Описание'}
label={"Описание"}
name="description"
/>
<Controller
name="direction" // boolean
control={control}
defaultValue={false}
render={({ field }: { field: any }) => (
<FormControlLabel
label="Прямой маршрут?"
control={
<Checkbox
{...field}
checked={field.value}
onChange={(e) => field.onChange(e.target.checked)}
/>
}
/>
)}
/>
<TextField
{...register('latitude', {
required: 'Это поле является обязательным',
{...register("latitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.latitude}
helperText={(errors as any)?.latitude?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Широта *'}
label={"Широта *"}
name="latitude"
/>
<TextField
{...register('longitude', {
required: 'Это поле является обязательным',
{...register("longitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.longitude}
helperText={(errors as any)?.longitude?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Долгота *'}
label={"Долгота *"}
name="longitude"
/>
<Controller
control={control}
name="city_id"
rules={{required: 'Это поле является обязательным'}}
rules={{ required: "Это поле является обязательным" }}
defaultValue={null}
render={({field}) => (
render={({ field }) => (
<Autocomplete
{...cityAutocompleteProps}
value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
value={
cityAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || '')
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.name : ''
return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id
return option.id === value?.id;
}}
filterOptions={(options, {inputValue}) => {
return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.name.toLowerCase().includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
renderInput={(params) => (
<TextField
{...params}
label="Выберите город"
margin="normal"
variant="outlined"
error={!!errors.city_id}
helperText={(errors as any)?.city_id?.message}
required
/>
)}
/>
)}
/>
<TextField
{...register('offset_x', {
{...register("offset_x", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.offset_x}
helperText={(errors as any)?.offset_x?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Смещение (X)'}
label={"Смещение (X)"}
name="offset_x"
/>
<TextField
{...register('offset_y', {
{...register("offset_y", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.offset_y}
helperText={(errors as any)?.offset_y?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Смещение (Y)'}
label={"Смещение (Y)"}
name="offset_y"
/>
{/* Группа полей пересадок */}
<Paper sx={{p: 2, mt: 2}}>
<Paper sx={{ p: 2, mt: 2 }}>
<Typography variant="h6" gutterBottom>
Пересадки
</Typography>
<Grid container spacing={2}>
{TRANSFER_FIELDS.map((field) => (
<Grid item xs={12} sm={6} md={4} key={field.name}>
<TextField {...register(`transfers.${field.name}`)} error={!!(errors as any)?.transfers?.[field.name]} helperText={(errors as any)?.transfers?.[field.name]?.message} margin="normal" fullWidth InputLabelProps={{shrink: true}} type="text" label={field.label} name={`transfers.${field.name}`} />
<TextField
{...register(`transfers.${field.name}`)}
error={!!(errors as any)?.transfers?.[field.name]}
helperText={(errors as any)?.transfers?.[field.name]?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={field.label}
name={`transfers.${field.name}`}
/>
</Grid>
))}
</Grid>
</Paper>
</Box>
</Create>
)
}
);
};

198
src/pages/station/edit.tsx
View File

@ -1,179 +1,248 @@
import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
import {Edit, useAutocomplete} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'
import {
Autocomplete,
Box,
TextField,
Typography,
FormControlLabel,
Paper,
Grid,
Checkbox,
} from "@mui/material";
import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import {useParams} from 'react-router'
import {LinkedItems} from '../../components/LinkedItems'
import {type SightItem, sightFields} from './types'
import { useParams } from "react-router";
import { LinkedItems } from "../../components/LinkedItems";
import { type SightItem, sightFields } from "./types";
const TRANSFER_FIELDS = [
{name: 'bus', label: 'Автобус'},
{name: 'metro_blue', label: 'Метро (синяя)'},
{name: 'metro_green', label: 'Метро (зеленая)'},
{name: 'metro_orange', label: 'Метро (оранжевая)'},
{name: 'metro_purple', label: 'Метро (фиолетовая)'},
{name: 'metro_red', label: 'Метро (красная)'},
{name: 'train', label: 'Электричка'},
{name: 'tram', label: 'Трамвай'},
{name: 'trolleybus', label: 'Троллейбус'},
]
{ name: "bus", label: "Автобус" },
{ name: "metro_blue", label: "Метро (синяя)" },
{ name: "metro_green", label: "Метро (зеленая)" },
{ name: "metro_orange", label: "Метро (оранжевая)" },
{ name: "metro_purple", label: "Метро (фиолетовая)" },
{ name: "metro_red", label: "Метро (красная)" },
{ name: "train", label: "Электричка" },
{ name: "tram", label: "Трамвай" },
{ name: "trolleybus", label: "Троллейбус" },
];
export const StationEdit = () => {
const {
saveButtonProps,
register,
control,
formState: {errors},
} = useForm({})
formState: { errors },
} = useForm({});
const {id: stationId} = useParams<{id: string}>()
const { id: stationId } = useParams<{ id: string }>();
const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
resource: 'city',
const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
resource: "city",
onSearch: (value) => [
{
field: 'name',
operator: 'contains',
field: "name",
operator: "contains",
value,
},
],
})
});
return (
<Edit saveButtonProps={saveButtonProps}>
<Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
{...register('name', {
required: 'Это поле является обязательным',
{...register("name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.name}
helperText={(errors as any)?.name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Название *'}
label={"Название *"}
name="name"
/>
<TextField
{...register('system_name', {
required: 'Это поле является обязательным',
{...register("system_name", {
required: "Это поле является обязательным",
})}
error={!!(errors as any)?.system_name}
helperText={(errors as any)?.system_name?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Системное название *'}
label={"Системное название *"}
name="system_name"
/>
<Controller
name="direction" // boolean
control={control}
defaultValue={false}
render={({ field }: { field: any }) => (
<FormControlLabel
label="Прямой маршрут?"
control={
<Checkbox
{...field}
checked={field.value}
onChange={(e) => field.onChange(e.target.checked)}
/>
}
/>
)}
/>
<TextField
{...register('description', {
{...register("description", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.description}
helperText={(errors as any)?.description?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="text"
label={'Описание'}
label={"Описание"}
name="description"
/>
<TextField
{...register('latitude', {
required: 'Это поле является обязательным',
{...register("address", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.address}
helperText={(errors as any)?.address?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={"Адрес"}
name="address"
/>
<TextField
{...register("latitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.latitude}
helperText={(errors as any)?.latitude?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Широта *'}
label={"Широта *"}
name="latitude"
/>
<TextField
{...register('longitude', {
required: 'Это поле является обязательным',
{...register("longitude", {
required: "Это поле является обязательным",
valueAsNumber: true,
})}
error={!!(errors as any)?.longitude}
helperText={(errors as any)?.longitude?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Долгота *'}
label={"Долгота *"}
name="longitude"
/>
<Controller
control={control}
name="city_id"
rules={{required: 'Это поле является обязательным'}}
rules={{ required: "Это поле является обязательным" }}
defaultValue={null}
render={({field}) => (
render={({ field }) => (
<Autocomplete
{...cityAutocompleteProps}
value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
value={
cityAutocompleteProps.options.find(
(option) => option.id === field.value
) || null
}
onChange={(_, value) => {
field.onChange(value?.id || '')
field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
return item ? item.name : ''
return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
return option.id === value?.id
return option.id === value?.id;
}}
filterOptions={(options, {inputValue}) => {
return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
filterOptions={(options, { inputValue }) => {
return options.filter((option) =>
option.name.toLowerCase().includes(inputValue.toLowerCase())
);
}}
renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
renderInput={(params) => (
<TextField
{...params}
label="Выберите город"
margin="normal"
variant="outlined"
error={!!errors.city_id}
helperText={(errors as any)?.city_id?.message}
required
/>
)}
/>
)}
/>
<TextField
{...register('offset_x', {
{...register("offset_x", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.offset_x}
helperText={(errors as any)?.offset_x?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Смещение (X)'}
label={"Смещение (X)"}
name="offset_x"
/>
<TextField
{...register('offset_y', {
{...register("offset_y", {
// required: 'Это поле является обязательным',
})}
error={!!(errors as any)?.offset_y}
helperText={(errors as any)?.offset_y?.message}
margin="normal"
fullWidth
InputLabelProps={{shrink: true}}
InputLabelProps={{ shrink: true }}
type="number"
label={'Смещение (Y)'}
label={"Смещение (Y)"}
name="offset_y"
/>
{/* Группа полей пересадок */}
<Paper sx={{p: 2, mt: 2}}>
<Paper sx={{ p: 2, mt: 2 }}>
<Typography variant="h6" gutterBottom>
Пересадки
</Typography>
<Grid container spacing={2}>
{TRANSFER_FIELDS.map((field) => (
<Grid item xs={12} sm={6} md={4} key={field.name}>
<TextField {...register(`transfers.${field.name}`)} error={!!(errors as any)?.transfers?.[field.name]} helperText={(errors as any)?.transfers?.[field.name]?.message} margin="normal" fullWidth InputLabelProps={{shrink: true}} type="text" label={field.label} name={`transfers.${field.name}`} />
<TextField
{...register(`transfers.${field.name}`)}
error={!!(errors as any)?.transfers?.[field.name]}
helperText={(errors as any)?.transfers?.[field.name]?.message}
margin="normal"
fullWidth
InputLabelProps={{ shrink: true }}
type="text"
label={field.label}
name={`transfers.${field.name}`}
/>
</Grid>
))}
</Grid>
@ -188,8 +257,9 @@ export const StationEdit = () => {
childResource="sight"
fields={sightFields}
title="достопримечательности"
dragAllowed={false}
/>
)}
</Edit>
)
}
);
};

185
src/pages/station/list.tsx
View File

@ -1,126 +1,157 @@
import React from 'react'
import {type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Stack} from '@mui/material'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {localeText} from '../../locales/ru/localeText'
import React, { useMemo } from "react";
import { type GridColDef } from "@mui/x-data-grid";
import {
DeleteButton,
EditButton,
List,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import { Stack } from "@mui/material";
import { CustomDataGrid } from "../../components/CustomDataGrid";
import { localeText } from "../../locales/ru/localeText";
import { cityStore } from "../../store/CityStore";
import { observer } from "mobx-react-lite";
export const StationList = () => {
const {dataGridProps} = useDataGrid({resource: 'station/'})
export const StationList = observer(() => {
const { city_id } = cityStore;
const { dataGridProps } = useDataGrid({
resource: "station",
filters: {
permanent: [
{
field: "cityID",
operator: "eq",
value: city_id,
},
],
},
});
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: 'id',
headerName: 'ID',
type: 'number',
field: "id",
headerName: "ID",
type: "number",
minWidth: 70,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'name',
headerName: 'Название',
type: 'string',
field: "name",
headerName: "Название",
type: "string",
minWidth: 300,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'system_name',
headerName: 'Системное название',
type: 'string',
field: "system_name",
headerName: "Системное название",
type: "string",
minWidth: 200,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'latitude',
headerName: 'Широта',
type: 'number',
field: "latitude",
headerName: "Широта",
type: "number",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'longitude',
headerName: 'Долгота',
type: 'number',
field: "longitude",
headerName: "Долгота",
type: "number",
minWidth: 150,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'city_id',
headerName: 'ID города',
type: 'number',
field: "city_id",
headerName: "ID города",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'offset_x',
headerName: 'Смещение (X)',
type: 'number',
field: "offset_x",
headerName: "Смещение (X)",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'offset_y',
headerName: 'Смещение (Y)',
type: 'number',
field: "offset_y",
headerName: "Смещение (Y)",
type: "number",
minWidth: 120,
display: 'flex',
align: 'left',
headerAlign: 'left',
display: "flex",
align: "left",
headerAlign: "left",
},
{
field: 'description',
headerName: 'Описание',
type: 'string',
display: 'flex',
align: 'left',
headerAlign: 'left',
field: "description",
headerName: "Описание",
type: "string",
display: "flex",
align: "left",
headerAlign: "left",
flex: 1,
},
{
field: 'actions',
headerName: 'Действия',
cellClassName: 'station-actions',
align: 'right',
headerAlign: 'center',
field: "actions",
headerName: "Действия",
cellClassName: "station-actions",
align: "right",
headerAlign: "center",
minWidth: 120,
display: 'flex',
display: "flex",
sortable: false,
filterable: false,
disableColumnMenu: true,
renderCell: function render({row}) {
renderCell: function render({ row }) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
<DeleteButton
hideText
confirmTitle="Вы уверены?"
recordItemId={row.id}
/>
</>
)
);
},
},
],
[],
)
[]
);
return (
<List>
<List key={city_id}>
<Stack gap={2.5}>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
<CustomDataGrid
{...dataGridProps}
columns={columns}
localeText={localeText}
getRowId={(row: any) => row.id}
hasCoordinates
/>
</Stack>
</List>
)
}
);
});

32
src/pages/station/show.tsx
View File

@ -1,23 +1,31 @@
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
import {Stack, Typography} from '@mui/material'
import {LinkedItems} from '../../components/LinkedItems'
import {type SightItem, sightFields, stationFields} from './types'
import { useShow } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { Box, Stack, Typography } from "@mui/material";
import { LinkedItems } from "../../components/LinkedItems";
import { type SightItem, sightFields, stationFields } from "./types";
export const StationShow = () => {
const {query} = useShow({})
const {data, isLoading} = query
const record = data?.data
const { query } = useShow({});
const { data, isLoading } = query;
const record = data?.data;
return (
<Show isLoading={isLoading}>
<Stack gap={4}>
{stationFields.map(({label, data}) => (
{stationFields.map(({ label, data }) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
{label}
{label === "Системное название" && (
<Box>
<TextField
value={record?.direction ? "(Прямой)" : "(Обратный)"}
/>
</Box>
)}
</Typography>
<TextField value={record?.[data] || ''} />
<TextField value={record?.[data] || ""} />
</Stack>
))}
@ -33,5 +41,5 @@ export const StationShow = () => {
)}
</Stack>
</Show>
)
}
);
};

55
src/pages/station/types.ts
View File

@ -1,44 +1,45 @@
import React from 'react'
import React from "react";
export type StationItem = {
id: number
name: string
description: string
latitude: number
longitude: number
[key: string]: string | number
}
id: number;
name: string;
description: string;
latitude: number;
longitude: number;
[key: string]: string | number;
};
export type SightItem = {
id: number
name: string
latitude: number
longitude: number
city_id: number
city: string
[key: string]: string | number
}
id: number;
name: string;
latitude: number;
longitude: number;
city_id: number;
city: string;
[key: string]: string | number;
};
export type FieldType<T> = {
label: string
data: keyof T
render?: (value: any) => React.ReactNode
}
label: string;
data: keyof T;
render?: (value: any) => React.ReactNode;
};
export const stationFields: Array<FieldType<StationItem>> = [
// {label: 'ID', data: 'id'},
{label: 'Название', data: 'name'},
{label: 'Системное название', data: 'system_name'},
{ label: "Название", data: "name" },
{ label: "Системное название", data: "system_name" },
{ label: "Адрес", data: "address" },
// {label: 'Широта', data: 'latitude'},
// {label: 'Долгота', data: 'longitude'},
{label: 'Описание', data: 'description'},
]
{ label: "Описание", data: "description" },
];
export const sightFields: Array<FieldType<SightItem>> = [
// {label: 'ID', data: 'id'},
{label: 'Название', data: 'name'},
{ label: "Название", data: "name" },
// {label: 'Широта', data: 'latitude'},
// {label: 'Долгота', data: 'longitude'},
// {label: 'ID города', data: 'city_id'},
{label: 'Город', data: 'city'},
]
{ label: "Город", data: "city" },
];

24
src/providers/data.ts
View File

@ -1,14 +1,22 @@
import dataProvider from "@refinedev/simple-rest";
import axios from "axios";
import axios, { InternalAxiosRequestConfig } from "axios";
import { TOKEN_KEY } from "../authProvider";
import Cookies from "js-cookie";
interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
meta?: {
headers?: {
"X-Language"?: string;
};
};
}
export const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_KRBL_API,
});
axiosInstance.interceptors.request.use((config) => {
axiosInstance.interceptors.request.use((config: CustomAxiosRequestConfig) => {
// Добавляем токен авторизации
const token = localStorage.getItem(TOKEN_KEY);
if (token) {
@ -16,9 +24,15 @@ axiosInstance.interceptors.request.use((config) => {
}
// Добавляем язык в кастомный заголовок
const lang = Cookies.get("lang") || "ru";
config.headers["X-Language"] = lang; // или 'Accept-Language'
const metaLang = config.meta?.headers?.["X-Language"];
if (metaLang) {
console.log("metaLang", metaLang);
config.headers["X-Language"] = metaLang;
} else {
const lang = Cookies.get("lang") || "ru";
console.log("lang", lang);
config.headers["X-Language"] = lang;
}
// console.log('Request headers:', config.headers)
return config;

21
src/store/CityStore.ts Normal file
View File

@ -0,0 +1,21 @@
import { makeAutoObservable } from "mobx";
class CityStore {
city_id: string = "";
constructor() {
makeAutoObservable(this);
this.initialize();
}
initialize() {
this.city_id = localStorage.getItem("city_id") || "1";
}
setCityIdAction = (city_id: string) => {
this.city_id = city_id;
localStorage.setItem("city_id", city_id);
};
}
export const cityStore = new CityStore();

12
yarn.lock
View File

@ -4789,6 +4789,18 @@ mkdirp@^0.5.1:
dependencies:
minimist "^1.2.6"
mobx-react-lite@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.1.0.tgz#6a03ed2d94150848213cfebd7d172e123528a972"
integrity sha512-QEP10dpHHBeQNv1pks3WnHRCem2Zp636lq54M2nKO2Sarr13pL4u6diQXf65yzXUn0mkk18SyIDCm9UOJYTi1w==
dependencies:
use-sync-external-store "^1.4.0"
mobx@^6.13.7:
version "6.13.7"
resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.13.7.tgz#70e5dda7a45da947f773b3cd3b065dfe7c8a75de"
integrity sha512-aChaVU/DO5aRPmk1GX8L+whocagUUpBQqoPtJk+cm7UOXUk87J4PeWCh6nNmTTIfEhiR9DI/+FnA8dln/hTK7g==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"