feat: Add more pages

2025-06-06 16:08:15 +03:00
parent f2aab1ab33
commit d74789a0d8
67 changed files with 3491 additions and 787 deletions
--- a/src/pages/Carrier/CarrierCreatePage/index.tsx
+++ b/src/pages/Carrier/CarrierCreatePage/index.tsx
@ -0,0 +1,202 @@
+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 } from "react-router-dom";
+import { toast } from "react-toastify";
+import { carrierStore, cityStore, mediaStore } from "@shared";
+import { useState, useEffect } from "react";
+import { LanguageSwitcher, MediaViewer } from "@widgets";
+import { HexColorPicker } from "react-colorful";
+
+export const CarrierCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [fullName, setFullName] = useState("");
+  const [shortName, setShortName] = useState("");
+  const [cityId, setCityId] = useState<number | null>(null);
+  const [primaryColor, setPrimaryColor] = useState("#000000");
+  const [secondaryColor, setSecondaryColor] = useState("#ffffff");
+  const [accentColor, setAccentColor] = useState("#ff0000");
+  const [slogan, setSlogan] = useState("");
+  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    cityStore.getCities();
+    mediaStore.getMedia();
+  }, []);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await carrierStore.createCarrier(
+        fullName,
+        shortName,
+        cityStore.cities.find((c) => c.id === cityId)?.name!,
+        cityId!,
+        primaryColor,
+        secondaryColor,
+        accentColor,
+        slogan,
+        selectedMediaId!
+      );
+      toast.success("Перевозчик успешно создан");
+      navigate("/carrier");
+    } catch (error) {
+      toast.error("Ошибка при создании перевозчика");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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("/carrier")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <FormControl fullWidth>
+          <InputLabel>Город</InputLabel>
+          <Select
+            value={cityId || ""}
+            label="Город"
+            required
+            onChange={(e) => setCityId(e.target.value as number)}
+          >
+            {cityStore.cities.map((city) => (
+              <MenuItem key={city.id} value={city.id}>
+                {city.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <TextField
+          fullWidth
+          label="Полное название"
+          value={fullName}
+          required
+          onChange={(e) => setFullName(e.target.value)}
+        />
+
+        <TextField
+          fullWidth
+          label="Короткое название"
+          value={shortName}
+          required
+          onChange={(e) => setShortName(e.target.value)}
+        />
+
+        <div className="w-full flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <span className="w-32">Основной цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: primaryColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker color={primaryColor} onChange={setPrimaryColor} />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="w-32">Вторичный цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: secondaryColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker
+              color={secondaryColor}
+              onChange={setSecondaryColor}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="w-32">Акцентный цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: accentColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker color={accentColor} onChange={setAccentColor} />
+          </div>
+        </div>
+
+        <TextField
+          fullWidth
+          label="Слоган"
+          value={slogan}
+          onChange={(e) => setSlogan(e.target.value)}
+        />
+
+        <div className="w-full flex flex-col gap-4">
+          <FormControl fullWidth>
+            <InputLabel>Логотип</InputLabel>
+            <Select
+              value={selectedMediaId || ""}
+              label="Логотип"
+              required
+              onChange={(e) => setSelectedMediaId(e.target.value as string)}
+            >
+              {mediaStore.media.map((media) => (
+                <MenuItem key={media.id} value={media.id}>
+                  {media.media_name || media.filename}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          {selectedMediaId && (
+            <div className="w-32 h-32">
+              <MediaViewer media={{ id: selectedMediaId, media_type: 1 }} />
+            </div>
+          )}
+        </div>
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={
+            isLoading || !fullName || !shortName || !cityId || !selectedMediaId
+          }
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});