#14 Перепись редактирования и создания маршрута (#16)

Добавлено новое поле route_name:

Текстовые поля на двух страницах
Поле в списке маршрутов

Добавлено выбор видео на двух страниц вместе с редактором статей в виде модального окна

Модальное окно позволяет создать статью, выбрать готовую, отредактировать выбранную сразу на трех языках

Микаэл:

Пожалуйста, перепроверь код, вдруг чего найдешь как улучшить

+

захости локально и потыкай пж:

создай с 0 маршрут и прикрепи к нему созданную / какую-нибудь статью с видео, можешь попробовать загрузить либо взять готовое

после того как создашь, попробуй потыкать и поменять чего-нибудь

(проще обьясню: представь, что ты Руслан)

Reviewed-on: #16
Reviewed-by: Микаэл Оганесян <15lu.akari@unprism.ru>
Co-authored-by: fisenko <kkzemeow@gmail.com>
Co-committed-by: fisenko <kkzemeow@gmail.com>

src/pages/Route/RouteEditPage/index.tsx

@@ -13,7 +13,7 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer } from "@widgets";
+import { MediaViewer, VideoPreviewCard } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Copy, Save, Plus } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -24,8 +24,9 @@ import { articlesStore } from "../../../shared/store/ArticlesStore";
 import {
   routeStore,
   languageStore,
-  SelectArticleModal,
+  ArticleSelectOrCreateDialog,
   SelectMediaDialog,
+  UploadMediaDialog,
 } from "@shared";
 import { toast } from "react-toastify";
 import { stationsStore } from "@shared";
@@ -40,12 +41,13 @@ export const RouteEditPage = observer(() => {
     useState(false);
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
+  const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
   const [coordinates, setCoordinates] = useState<string>("");
 
   useEffect(() => {
     const fetchData = async () => {
-      // Устанавливаем русский язык при загрузке страницы
       const response = await routeStore.getRoute(Number(id));
       routeStore.setEditRouteData(response);
       languageStore.setLanguage("ru");
@@ -125,6 +127,8 @@ export const RouteEditPage = observer(() => {
       governor_appeal: articleId,
     });
     setIsSelectArticleDialogOpen(false);
+    // Обновляем список статей после создания новой
+    articlesStore.getArticleList();
   };
 
   const handleVideoSelect = (media: {
@@ -139,6 +143,28 @@ export const RouteEditPage = observer(() => {
     setIsSelectVideoDialogOpen(false);
   };
 
+  const handleVideoFileSelect = (file?: File) => {
+    if (file) {
+      setFileToUpload(file);
+      setIsUploadVideoDialogOpen(true);
+    } else {
+      setIsSelectVideoDialogOpen(true);
+    }
+  };
+
+  const handleVideoUpload = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    routeStore.setEditRouteData({
+      video_preview: media.id,
+    });
+    setIsUploadVideoDialogOpen(false);
+    setFileToUpload(null);
+  };
+
   const handleVideoPreviewClick = () => {
     if (editRouteData.video_preview && editRouteData.video_preview !== "") {
       setIsVideoPreviewOpen(true);
@@ -164,6 +190,17 @@ export const RouteEditPage = observer(() => {
 
       <div className="flex flex-col gap-10 w-full items-end">
         <Box className="flex flex-col gap-6 w-full">
+          <TextField
+            className="w-full"
+            label="Название маршрута"
+            required
+            value={editRouteData.route_name || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                route_name: e.target.value,
+              })
+            }
+          />
           <FormControl fullWidth required>
             <InputLabel>Выберите перевозчика</InputLabel>
             <Select
@@ -235,7 +272,6 @@ export const RouteEditPage = observer(() => {
                 const lines = coordinates.split("\n");
                 const lastLine = lines[lines.length - 1];
 
-                // Если мы на последней строке и она не пустая
                 if (lastLine && lastLine.trim()) {
                   e.preventDefault();
                   const newValue = coordinates + "\n";
@@ -279,110 +315,6 @@ export const RouteEditPage = observer(() => {
             }
           />
 
-          {/* Заменяем Select на кнопку для выбора статьи */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Обращение к пассажирам
-            </label>
-            <Box className="flex gap-2">
-              <TextField
-                className="flex-1"
-                value={selectedArticle?.heading || "Статья не выбрана"}
-                placeholder="Выберите статью"
-                disabled
-                sx={{
-                  "& .MuiInputBase-input": {
-                    color: selectedArticle ? "inherit" : "#999",
-                  },
-                }}
-              />
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectArticleDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
-          </Box>
-
-          {/* Селектор видеозаставки */}
-          <Box className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-gray-700">
-              Видеозаставка
-            </label>
-            <Box className="flex gap-2">
-              <Box
-                className="flex-1"
-                onClick={handleVideoPreviewClick}
-                sx={{
-                  cursor:
-                    editRouteData.video_preview &&
-                    editRouteData.video_preview !== ""
-                      ? "pointer"
-                      : "default",
-                }}
-              >
-                <Box
-                  className="w-full h-[50px] border border-gray-400 rounded-sm flex items-center justify-between px-4"
-                  sx={{
-                    "& .MuiInputBase-input": {
-                      color:
-                        editRouteData.video_preview &&
-                        editRouteData.video_preview !== ""
-                          ? "inherit"
-                          : "#999",
-                      cursor:
-                        editRouteData.video_preview &&
-                        editRouteData.video_preview !== ""
-                          ? "pointer"
-                          : "default",
-                    },
-                  }}
-                >
-                  <Typography variant="body1" className="text-sm">
-                    {editRouteData.video_preview &&
-                    editRouteData.video_preview !== ""
-                      ? "Видео выбрано"
-                      : "Видео не выбрано"}
-                  </Typography>
-                  {editRouteData.video_preview &&
-                    editRouteData.video_preview !== "" && (
-                      <Box
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          routeStore.setEditRouteData({ video_preview: "" });
-                        }}
-                        sx={{
-                          cursor: "pointer",
-                          color: "#999",
-                          "&:hover": {
-                            color: "#666",
-                          },
-                        }}
-                      >
-                        <Typography
-                          variant="body1"
-                          className="text-lg font-bold"
-                        >
-                          ×
-                        </Typography>
-                      </Box>
-                    )}
-                </Box>
-              </Box>
-              <Button
-                variant="outlined"
-                onClick={() => setIsSelectVideoDialogOpen(true)}
-                startIcon={<Plus size={16} />}
-                sx={{ minWidth: "auto", px: 2 }}
-              >
-                Выбрать
-              </Button>
-            </Box>
-          </Box>
-
           <FormControl fullWidth required>
             <InputLabel>Прямой/обратный маршрут</InputLabel>
             <Select
@@ -453,6 +385,43 @@ export const RouteEditPage = observer(() => {
               })
             }
           />
+
+          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+            Обращение к пассажирам
+          </Typography>
+          <Box className="flex gap-2">
+            <TextField
+              className="flex-1"
+              value={selectedArticle?.heading || "Статья не выбрана"}
+              placeholder="Выберите статью"
+              disabled
+              fullWidth
+              sx={{
+                "& .MuiInputBase-input": {
+                  color: selectedArticle ? "inherit" : "#999",
+                },
+              }}
+            />
+            <Button
+              variant="outlined"
+              onClick={() => setIsSelectArticleDialogOpen(true)}
+              startIcon={<Plus size={16} />}
+              sx={{ minWidth: "auto", px: 2 }}
+            >
+              Выбрать
+            </Button>
+          </Box>
+
+          <VideoPreviewCard
+            title="Видеозаставка"
+            videoId={editRouteData.video_preview}
+            onVideoClick={handleVideoPreviewClick}
+            onDeleteVideoClick={() => {
+              routeStore.setEditRouteData({ video_preview: "" });
+            }}
+            onSelectVideoClick={handleVideoFileSelect}
+            className="w-full"
+          />
         </Box>
 
         <LinkedItems
@@ -493,23 +462,17 @@ export const RouteEditPage = observer(() => {
           </Button>
         </div>
       </div>
-
-      {/* Модальное окно выбора статьи */}
-      <SelectArticleModal
+      <ArticleSelectOrCreateDialog
         open={isSelectArticleDialogOpen}
         onClose={() => setIsSelectArticleDialogOpen(false)}
         onSelectArticle={handleArticleSelect}
       />
-
-      {/* Модальное окно выбора видео */}
       <SelectMediaDialog
         open={isSelectVideoDialogOpen}
         onClose={() => setIsSelectVideoDialogOpen(false)}
         onSelectMedia={handleVideoSelect}
         mediaType={2}
       />
-
-      {/* Модальное окно предпросмотра видео */}
       <Dialog
         open={isVideoPreviewOpen}
         onClose={() => setIsVideoPreviewOpen(false)}
@@ -519,19 +482,33 @@ export const RouteEditPage = observer(() => {
         <DialogTitle>Предпросмотр видео</DialogTitle>
         <DialogContent>
           <Box className="flex justify-center items-center p-4">
-            <MediaViewer
-              media={{
-                id: editRouteData.video_preview,
-                media_type: 2,
-                filename: "video_preview",
-              }}
-            />
+            {editRouteData.video_preview && (
+              <MediaViewer
+                media={{
+                  id: editRouteData.video_preview,
+                  media_type: 2,
+                  filename: "video_preview",
+                }}
+              />
+            )}
           </Box>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setIsVideoPreviewOpen(false)}>Закрыть</Button>
         </DialogActions>
       </Dialog>
+      <UploadMediaDialog
+        open={isUploadVideoDialogOpen}
+        onClose={() => {
+          setIsUploadVideoDialogOpen(false);
+          setFileToUpload(null);
+        }}
+        hardcodeType="video_preview"
+        contextObjectName={editRouteData.route_name || "Маршрут"}
+        contextType="sight"
+        initialFile={fileToUpload || undefined}
+        afterUpload={handleVideoUpload}
+      />
     </Paper>
   );
 });