478 lines
14 KiB
TypeScript
478 lines
14 KiB
TypeScript
import {
|
||
Button,
|
||
Paper,
|
||
TextField,
|
||
Select,
|
||
MenuItem,
|
||
FormControl,
|
||
InputLabel,
|
||
Box,
|
||
} from "@mui/material";
|
||
import { observer } from "mobx-react-lite";
|
||
import { ArrowLeft, Save } from "lucide-react";
|
||
import { Loader2 } from "lucide-react";
|
||
import { useNavigate, useParams } from "react-router-dom";
|
||
import { toast } from "react-toastify";
|
||
import {
|
||
carrierStore,
|
||
cityStore,
|
||
authStore,
|
||
mediaStore,
|
||
languageStore,
|
||
isMediaIdEmpty,
|
||
LoadingSpinner,
|
||
} from "@shared";
|
||
import { useState, useEffect } from "react";
|
||
import { ImageUploadCard, LanguageSwitcher, DeleteModal } from "@widgets";
|
||
import {
|
||
SelectMediaDialog,
|
||
PreviewMediaDialog,
|
||
UploadMediaDialog,
|
||
} from "@shared";
|
||
|
||
type ColorFields = { main_color: string; left_color: string; right_color: string };
|
||
|
||
const colorFields = (data: ColorFields) => ({
|
||
main_color: data.main_color,
|
||
left_color: data.left_color,
|
||
right_color: data.right_color,
|
||
});
|
||
|
||
const ColorPickerField = ({
|
||
label,
|
||
value,
|
||
onChange,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
onChange: (val: string) => void;
|
||
}) => (
|
||
<div className="flex items-center gap-3 w-full">
|
||
<div
|
||
className="w-10 h-10 rounded border border-gray-300 flex-shrink-0 cursor-pointer overflow-hidden relative"
|
||
style={{ backgroundColor: value || "#ffffff" }}
|
||
>
|
||
<input
|
||
type="color"
|
||
value={value || "#ffffff"}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||
/>
|
||
</div>
|
||
<TextField
|
||
fullWidth
|
||
label={label}
|
||
value={value}
|
||
placeholder="#000000"
|
||
onChange={(e) => onChange(e.target.value)}
|
||
InputProps={{
|
||
endAdornment: value ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => onChange("")}
|
||
className="text-gray-400 hover:text-gray-600 text-xs px-1"
|
||
>
|
||
✕
|
||
</button>
|
||
) : undefined,
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
|
||
export const CarrierEditPage = observer(() => {
|
||
const navigate = useNavigate();
|
||
const { id } = useParams();
|
||
const { getCarrier, setEditCarrierData, editCarrierData } = carrierStore;
|
||
const { language } = languageStore;
|
||
const canReadCities = authStore.canRead("cities");
|
||
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [isLoadingData, setIsLoadingData] = useState(true);
|
||
const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
|
||
const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
|
||
const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
|
||
const [mediaId, setMediaId] = useState("");
|
||
const [isDeleteLogoModalOpen, setIsDeleteLogoModalOpen] = useState(false);
|
||
const [initialCityName, setInitialCityName] = useState("");
|
||
const [activeMenuType, setActiveMenuType] = useState<
|
||
"thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
|
||
>(null);
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
if (!id) {
|
||
setIsLoadingData(false);
|
||
return;
|
||
}
|
||
setIsLoadingData(true);
|
||
try {
|
||
if (!authStore.me) {
|
||
await authStore.getMeAction().catch(() => undefined);
|
||
}
|
||
if (authStore.canRead("cities")) {
|
||
await cityStore.getCities("ru");
|
||
} else {
|
||
await authStore.fetchMeCities().catch(() => undefined);
|
||
}
|
||
const carrierData = await getCarrier(Number(id));
|
||
|
||
if (carrierData) {
|
||
const colors = {
|
||
main_color: carrierData.ru?.main_color || "",
|
||
left_color: carrierData.ru?.left_color || "",
|
||
right_color: carrierData.ru?.right_color || "",
|
||
};
|
||
setEditCarrierData(
|
||
carrierData.ru?.full_name || "",
|
||
carrierData.ru?.short_name || "",
|
||
carrierData.ru?.city_id || 0,
|
||
carrierData.ru?.slogan || "",
|
||
carrierData.ru?.logo || "",
|
||
"ru",
|
||
colors
|
||
);
|
||
setEditCarrierData(
|
||
carrierData.en?.full_name || "",
|
||
carrierData.en?.short_name || "",
|
||
carrierData.en?.city_id || 0,
|
||
carrierData.en?.slogan || "",
|
||
carrierData.en?.logo || "",
|
||
"en"
|
||
);
|
||
setEditCarrierData(
|
||
carrierData.zh?.full_name || "",
|
||
carrierData.zh?.short_name || "",
|
||
carrierData.zh?.city_id || 0,
|
||
carrierData.zh?.slogan || "",
|
||
carrierData.zh?.logo || "",
|
||
"zh"
|
||
);
|
||
setInitialCityName(carrierData.ru?.city || "");
|
||
}
|
||
|
||
await mediaStore.getMedia();
|
||
} finally {
|
||
setIsLoadingData(false);
|
||
}
|
||
})();
|
||
|
||
languageStore.setLanguage("ru");
|
||
}, [id]);
|
||
|
||
const handleEdit = async () => {
|
||
try {
|
||
setIsLoading(true);
|
||
await carrierStore.editCarrier(Number(id));
|
||
toast.success("Перевозчик успешно обновлен");
|
||
navigate("/carrier");
|
||
} catch (error) {
|
||
toast.error("Ошибка при обновлении перевозчика");
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleMediaSelect = (media: {
|
||
id: string;
|
||
filename: string;
|
||
media_name?: string;
|
||
media_type: number;
|
||
}) => {
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
media.id,
|
||
language
|
||
);
|
||
};
|
||
|
||
const selectedMedia =
|
||
editCarrierData.logo && !isMediaIdEmpty(editCarrierData.logo)
|
||
? mediaStore.media.find((m) => m.id === editCarrierData.logo)
|
||
: null;
|
||
const effectiveLogoUrl = isMediaIdEmpty(editCarrierData.logo)
|
||
? null
|
||
: (selectedMedia?.id ?? editCarrierData.logo);
|
||
|
||
const baseCities = canReadCities
|
||
? cityStore.cities["ru"].data
|
||
: authStore.meCities["ru"].map((city) => ({
|
||
id: city.city_id,
|
||
name: city.name,
|
||
country: "",
|
||
country_code: "",
|
||
arms: "",
|
||
}));
|
||
|
||
const availableCities =
|
||
editCarrierData.city_id &&
|
||
!baseCities.some((city) => city.id === editCarrierData.city_id)
|
||
? [
|
||
{
|
||
id: editCarrierData.city_id,
|
||
name: initialCityName || `Город ${editCarrierData.city_id}`,
|
||
country: "",
|
||
country_code: "",
|
||
arms: "",
|
||
},
|
||
...baseCities,
|
||
]
|
||
: baseCities;
|
||
|
||
if (isLoadingData) {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
minHeight: "60vh",
|
||
}}
|
||
>
|
||
<LoadingSpinner message="Загрузка данных перевозчика..." />
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Paper className="w-full h-full p-3 flex flex-col gap-10">
|
||
<LanguageSwitcher />
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
className="flex items-center gap-2"
|
||
onClick={() => navigate(-1)}
|
||
>
|
||
<ArrowLeft size={20} />
|
||
Назад
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex gap-10 items-center mb-5 max-w-[80%] self-start">
|
||
<h1 className="text-3xl break-words">{editCarrierData.ru.full_name}</h1>
|
||
</div>
|
||
<div className="flex flex-col gap-10 w-full items-end">
|
||
<FormControl fullWidth>
|
||
<InputLabel>Город</InputLabel>
|
||
<Select
|
||
value={editCarrierData.city_id || ""}
|
||
label="Город"
|
||
required
|
||
onChange={(e) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
Number(e.target.value),
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language
|
||
)
|
||
}
|
||
>
|
||
{availableCities.map((city) => (
|
||
<MenuItem key={city.id} value={city.id}>
|
||
{city.name}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<TextField
|
||
fullWidth
|
||
label="Полное название"
|
||
value={editCarrierData[language].full_name}
|
||
required
|
||
onChange={(e) =>
|
||
setEditCarrierData(
|
||
e.target.value,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language
|
||
)
|
||
}
|
||
/>
|
||
|
||
<TextField
|
||
fullWidth
|
||
label="Короткое название"
|
||
value={editCarrierData[language].short_name}
|
||
required
|
||
onChange={(e) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
e.target.value,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language
|
||
)
|
||
}
|
||
/>
|
||
|
||
<TextField
|
||
fullWidth
|
||
label="Слоган"
|
||
value={editCarrierData[language].slogan}
|
||
onChange={(e) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
e.target.value,
|
||
editCarrierData.logo,
|
||
language
|
||
)
|
||
}
|
||
/>
|
||
|
||
<div className="w-full flex flex-col gap-6">
|
||
<div className="flex flex-col gap-1">
|
||
<ColorPickerField
|
||
label="Основной цвет"
|
||
value={editCarrierData.main_color}
|
||
onChange={(val) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language,
|
||
{ ...colorFields(editCarrierData), main_color: val }
|
||
)
|
||
}
|
||
/>
|
||
<p className="text-xs text-gray-500 pl-1">
|
||
Используется в: виджет маршрута, виджет обращений, значки на карте, скопление достопримечательностей на карте, информационный виджет
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<ColorPickerField
|
||
label="Левый цвет"
|
||
value={editCarrierData.left_color}
|
||
onChange={(val) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language,
|
||
{ ...colorFields(editCarrierData), left_color: val }
|
||
)
|
||
}
|
||
/>
|
||
<p className="text-xs text-gray-500 pl-1">
|
||
Используется в: боковое меню, левый виджет достопримечательности
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<ColorPickerField
|
||
label="Правый цвет"
|
||
value={editCarrierData.right_color}
|
||
onChange={(val) =>
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
editCarrierData.logo,
|
||
language,
|
||
{ ...colorFields(editCarrierData), right_color: val }
|
||
)
|
||
}
|
||
/>
|
||
<p className="text-xs text-gray-500 pl-1">
|
||
Используется в: список достопримечательностей, страница достопримечательности
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
|
||
<ImageUploadCard
|
||
title="Логотип перевозчика"
|
||
imageKey="thumbnail"
|
||
imageUrl={effectiveLogoUrl}
|
||
onImageClick={() => {
|
||
setIsPreviewMediaOpen(true);
|
||
setMediaId(effectiveLogoUrl ?? "");
|
||
}}
|
||
onDeleteImageClick={() => {
|
||
setIsDeleteLogoModalOpen(true);
|
||
}}
|
||
onSelectFileClick={() => {
|
||
setActiveMenuType("image");
|
||
setIsSelectMediaOpen(true);
|
||
}}
|
||
setUploadMediaOpen={() => {
|
||
setIsUploadMediaOpen(true);
|
||
setActiveMenuType("image");
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<Button
|
||
variant="contained"
|
||
className="w-min flex gap-2 items-center"
|
||
startIcon={<Save size={20} />}
|
||
onClick={handleEdit}
|
||
disabled={
|
||
isLoading ||
|
||
!editCarrierData[language].full_name ||
|
||
!editCarrierData.city_id
|
||
}
|
||
>
|
||
{isLoading ? (
|
||
<Loader2 size={20} className="animate-spin" />
|
||
) : (
|
||
"Сохранить"
|
||
)}
|
||
</Button>
|
||
</div>
|
||
|
||
<SelectMediaDialog
|
||
open={isSelectMediaOpen}
|
||
onClose={() => setIsSelectMediaOpen(false)}
|
||
onSelectMedia={handleMediaSelect}
|
||
mediaType={1}
|
||
/>
|
||
|
||
<UploadMediaDialog
|
||
open={isUploadMediaOpen}
|
||
onClose={() => setIsUploadMediaOpen(false)}
|
||
contextObjectName={editCarrierData[language].full_name}
|
||
contextType="carrier"
|
||
afterUpload={handleMediaSelect}
|
||
hardcodeType={activeMenuType}
|
||
/>
|
||
|
||
<PreviewMediaDialog
|
||
open={isPreviewMediaOpen}
|
||
onClose={() => setIsPreviewMediaOpen(false)}
|
||
mediaId={mediaId}
|
||
/>
|
||
|
||
<DeleteModal
|
||
open={isDeleteLogoModalOpen}
|
||
onDelete={() => {
|
||
setEditCarrierData(
|
||
editCarrierData[language].full_name,
|
||
editCarrierData[language].short_name,
|
||
editCarrierData.city_id,
|
||
editCarrierData[language].slogan,
|
||
"",
|
||
language
|
||
);
|
||
setIsDeleteLogoModalOpen(false);
|
||
}}
|
||
onCancel={() => setIsDeleteLogoModalOpen(false)}
|
||
edit
|
||
/>
|
||
</Paper>
|
||
);
|
||
});
|