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

feat: update color carrier

Browse Source
This commit is contained in:
Илья Куприец
2026-05-05 15:07:18 +03:00
parent e3469763ce
commit 6af95bb449
25 changed files with 620 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,8 @@ import {
FormControl,
InputLabel,
Box,
ToggleButtonGroup,
ToggleButton,
} from "@mui/material";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Save } from "lucide-react";
@@ -30,6 +32,57 @@ import {
UploadMediaDialog,
} from "@shared";
type ColorFields = { main_color: string; left_color: string; right_color: string; rgb_color: string };
const colorFields = (data: ColorFields) => ({
main_color: data.main_color,
left_color: data.left_color,
right_color: data.right_color,
rgb_color: data.rgb_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();
@@ -37,6 +90,7 @@ export const CarrierEditPage = observer(() => {
const { language } = languageStore;
const canReadCities = authStore.canRead("cities");
const [colorMode, setColorMode] = useState<"rgb" | "three">("rgb");
const [isLoading, setIsLoading] = useState(false);
const [isLoadingData, setIsLoadingData] = useState(true);
const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
@@ -68,13 +122,25 @@ export const CarrierEditPage = observer(() => {
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 || "",
rgb_color: carrierData.ru?.rgb_color || "",
};
if (colors.rgb_color) {
setColorMode("rgb");
} else {
setColorMode("three");
}
setEditCarrierData(
carrierData.ru?.full_name || "",
carrierData.ru?.short_name || "",
carrierData.ru?.city_id || 0,
carrierData.ru?.slogan || "",
carrierData.ru?.logo || "",
"ru"
"ru",
colors
);
setEditCarrierData(
carrierData.en?.full_name || "",
@@ -273,6 +339,114 @@ export const CarrierEditPage = observer(() => {
}
/>
<div className="w-full flex flex-col gap-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="text-sm font-medium">Режим цвета:</span>
<ToggleButtonGroup
size="small"
exclusive
value={colorMode}
onChange={(_, val) => {
if (!val) return;
setColorMode(val);
if (val === "rgb") {
setEditCarrierData(
editCarrierData[language].full_name,
editCarrierData[language].short_name,
editCarrierData.city_id,
editCarrierData[language].slogan,
editCarrierData.logo,
language,
{ main_color: "", left_color: "", right_color: "", rgb_color: editCarrierData.rgb_color }
);
} else {
setEditCarrierData(
editCarrierData[language].full_name,
editCarrierData[language].short_name,
editCarrierData.city_id,
editCarrierData[language].slogan,
editCarrierData.logo,
language,
{ main_color: editCarrierData.main_color, left_color: editCarrierData.left_color, right_color: editCarrierData.right_color, rgb_color: "" }
);
}
}}
>
<ToggleButton value="rgb">Один цвет</ToggleButton>
<ToggleButton value="three">Три цвета</ToggleButton>
</ToggleButtonGroup>
</div>
<span className="text-xs text-gray-400">* при переключении цвет сбрасывается</span>
</div>
{colorMode === "rgb" ? (
<ColorPickerField
label="Один цвет"
value={editCarrierData.rgb_color}
onChange={(val) =>
setEditCarrierData(
editCarrierData[language].full_name,
editCarrierData[language].short_name,
editCarrierData.city_id,
editCarrierData[language].slogan,
editCarrierData.logo,
language,
{ ...colorFields(editCarrierData), rgb_color: val }
)
}
/>
) : (
<>
<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 }
)
}
/>
<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 }
)
}
/>
<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 }
)
}
/>
</>
)}
</div>
<div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
<ImageUploadCard
title="Логотип перевозчика"