route edit fixed with drag and drop tool

src/components/LinkedItems.tsx

@@ -27,6 +27,16 @@ import { axiosInstance } from "../providers/data";
 import { TOKEN_KEY } from "../authProvider";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 
+function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
+  const index = pos - 1;
+  if (index >= arr.length) {
+    arr.push(value);
+  } else {
+    arr.splice(index, 0, value);
+  }
+  return arr;
+}
+
 type Field<T> = {
   label: string;
   data: keyof T;
@@ -49,6 +59,7 @@ type LinkedItemsProps<T> = {
   type: "show" | "edit";
   extraField?: ExtraFieldConfig;
   dragAllowed?: boolean;
+  onSave?: (items: T[]) => void;
 };
 
 const reorder = (list: any[], startIndex: number, endIndex: number) => {
@@ -66,7 +77,9 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
   title,
   dragAllowed = false,
   type,
+  onSave,
 }: LinkedItemsProps<T>) => {
+  const [position, setPosition] = useState<number>(1);
   const [items, setItems] = useState<T[]>([]);
   const [linkedItems, setLinkedItems] = useState<T[]>([]);
   const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
@@ -89,16 +102,11 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
     axiosInstance.post(
       `${import.meta.env.VITE_KRBL_API}/route/${parentId}/station`,
       {
-        after_station: 3,
+        stations: reorderedItems.map((item) => ({
-        offset_x: 90,
+          id: item.id,
-        offset_y: 15,
+        })),
-        station_id: linkedItems[result.destination.index].id + 1,
       }
     );
-
-    // If you need to save the new order to the backend, you would add that here
-    // For example:
-    // saveNewOrder(reorderedItems);
   };
 
   useEffect(() => {
@@ -158,9 +166,19 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
               [`${childResource}_id`]: selectedItemId,
               media_order: mediaOrder,
             }
-          : {
+          : childResource === "station"
-              [`${childResource}_id`]: selectedItemId,
+          ? {
-            };
+              stations: insertAtPosition(
+                linkedItems.map((item) => ({
+                  id: item.id,
+                })),
+                position,
+                {
+                  id: selectedItemId,
+                }
+              ),
+            }
+          : { [`${childResource}_id`]: selectedItemId };
 
       axiosInstance
         .post(
@@ -232,6 +250,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                     {type === "edit" && dragAllowed && (
                       <TableCell width="40px"></TableCell>
                     )}
+                    <TableCell key="id">№</TableCell>
                     {fields.map((field) => (
                       <TableCell key={String(field.data)}>
                         {field.label}
@@ -259,6 +278,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                             <TableRow
                               ref={provided.innerRef}
                               {...provided.draggableProps}
+                              {...provided.dragHandleProps}
                               hover
                             >
                               {type === "edit" && dragAllowed && (
@@ -268,6 +288,9 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                                   </IconButton>
                                 </TableCell>
                               )}
+                              <TableCell key={String(item.id)}>
+                                {index + 1}
+                              </TableCell>
                               {fields.map((field) => (
                                 <TableCell key={String(field.data)}>
                                   {field.render
@@ -389,6 +412,21 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
               >
                 Добавить
               </Button>
+              {childResource == "station" && (
+                <TextField
+                  type="text"
+                  label="Позиция добавляемой остановки к маршруту"
+                  value={position}
+                  onChange={(e) => {
+                    const newValue = Number(e.target.value);
+                    setPosition(
+                      newValue > linkedItems.length + 1
+                        ? linkedItems.length + 1
+                        : newValue
+                    );
+                  }}
+                ></TextField>
+              )}
             </Stack>
           )}
         </Stack>

src/pages/route/edit.tsx

@@ -17,6 +17,7 @@ import {
   stationFields,
   vehicleFields,
 } from "./types";
+import { useEffect } from "react";
 
 export const RouteEdit = () => {
   const {
@@ -24,10 +25,23 @@ export const RouteEdit = () => {
     register,
     control,
     formState: { errors },
+    refineCore: { queryResult },
+    setValue,
+    watch,
   } = useForm({});
 
   const { id: routeId } = useParams<{ id: string }>();
 
+  useEffect(() => {
+    if (queryResult?.data?.data && Array.isArray(queryResult.data.data.path)) {
+      const formattedPath = queryResult.data.data.path
+        .map((coords) => coords.join(" "))
+        .join("\n");
+
+      setValue("path", formattedPath);
+    }
+  }, [queryResult?.data?.data, setValue]);
+
   const { autocompleteProps: carrierAutocompleteProps } = useAutocomplete({
     resource: "carrier",
     onSearch: (value) => [
@@ -134,7 +148,6 @@ export const RouteEdit = () => {
           {...register("path", {
             required: "Это поле является обязательным",
             setValueAs: (value: string) => {
-              // Преобразование строки в массив координат
               try {
                 const lines = value.trim().split("\n");
                 return lines.map((line) => {

src/preview/components/route-preview/components/RoutePreviewContainer.tsx

@@ -13,11 +13,10 @@ import { LocalizedStringDefaults } from "@mt/common-types";
 import { useParams } from "react-router";
 
 export const RoutePreviewContainer = () => {
-  const { id } = useParams();
+  const { routeId } = useParams();
-  const routeId = id as string;
   const { routeData, mappedData, isLoading, isError } =
     useGetRouteData(routeId);
-  // const updateRouteView = useUpdateRouteData(routeId, routeData);
+  const updateRouteView = useUpdateRouteData(routeId, routeData);
   const [routeInfo, setRouteInfo] = useState<RouteInfoData>();
 
   const {
@@ -28,9 +27,9 @@ export const RoutePreviewContainer = () => {
     getUpdatedStations,
   } = useMapWidgetContext();
 
-  // const handleSubmit = (mapSettings: MapSettings) => {
+  const handleSubmit = (mapSettings: MapSettings) => {
-  //   updateRouteView(mapSettings, getUpdatedStations());
+    updateRouteView(mapSettings, getUpdatedStations());
-  // };
+  };
 
   useEffect(() => {
     if (!mappedData) {
@@ -42,7 +41,7 @@ export const RoutePreviewContainer = () => {
     setIsEditMode(true);
 
     setRouteInfo({
-      routeNumber: routeData.number,
+      routeNumber: routeData?.number ?? "",
       firstStationName:
         mappedData.stationsOnMap.at(0)?.shortName ?? LocalizedStringDefaults,
       lastStationName:
@@ -74,7 +73,7 @@ export const RoutePreviewContainer = () => {
 
   if (mappedData) {
     return (
-      <RoutePreviewDashboard routeInfo={routeInfo!}>
+      <RoutePreviewDashboard routeInfo={routeInfo}>
         <MapWidget />
         {/* <SettingsPanel onSubmit={handleSubmit} /> */}
       </RoutePreviewDashboard>

src/preview/components/route-preview/components/RoutePreviewDashboard/RoutePreviewDashboard.tsx

@@ -21,17 +21,24 @@ export const RoutePreviewDashboard = ({ children, routeInfo }: Props) => {
 
   return (
     <div className={styles.root}>
-      {/* <Drawer isOpen={openNav} onToggle={setOpenNav} onLocaleChange={setLocale} />
+      <Drawer
+        isOpen={openNav}
+        onToggle={setOpenNav}
+        onLocaleChange={setLocale}
+      />
 
       <div className={cn(styles.container, { [styles.pushed]: openNav })}>
         <div className={styles.leftTopWrapper}>
-          <RouteInfoWidget className={styles.routeNumber} routeInfo={routeInfo} />
+          <RouteInfoWidget
+            className={styles.routeNumber}
+            routeInfo={routeInfo}
+          />
           <WeatherWidget className={styles.weatherWidget} />
-        </div> */}
+        </div>
 
-      {children}
+        {children}
 
-      {/* <div className={styles.transferPlaceholder}>
+        <div className={styles.transferPlaceholder}>
           <Icons.InfoBtn
             className={styles.toggleTransferBtn}
             onClick={() => setOpenTransfer(!openTransfers)}
@@ -41,7 +48,7 @@ export const RoutePreviewDashboard = ({ children, routeInfo }: Props) => {
         </div>
       </div>
 
-      <div className={styles.rightSidebar} /> */}
+      <div className={styles.rightSidebar} />
     </div>
   );
 };

src/preview/components/route-preview/hooks/useGetRouteData.ts

@@ -1,62 +1,58 @@
 import { MapData } from "@mt/components";
-
-import { Route, Station } from "@mt/common-types";
 import { useEffect, useState } from "react";
 import { mapRouteFromApi } from "../mappers/mapRouteFromApi";
-import { useOne, useMany } from "@refinedev/core";
+import { useOn, Station, useOne, useMany } from "@refinedev/core";
-import { axiosInstance } from "../../../../providers/data";
+import { Route } from "@mt/common-types";
-
-const fetchStations = async (
-  routeId: string,
-  setStations: (stations: any[]) => void,
-  setSights: (sights: any[]) => void
-) => {
-  const stations = (await axiosInstance.get(`/route/${routeId}/station`)).data;
-  const sights = (await axiosInstance.get(`/route/${routeId}/sight`)).data;
-  setStations(stations);
-  setSights(sights);
-
-  const stationsPath = stations.map((station: any) => [
-    station.latitude,
-    station.longitude,
-  ]);
-  const sightsPath = sights.map((sight: any) => [
-    sight.latitude,
-    sight.longitude,
-  ]);
-
-  console.log(stationsPath, sightsPath);
-};
 
 export const useGetRouteData = (routeId: string) => {
-  const [mappedData, setMappedData] = useState<MapData>(null);
+  const [mappedData, setMappedData] = useState<MapData | null>(null);
+  const [error, setError] = useState<string | null>(null); // Handle error state
 
+  // Fetch route data
   const {
     data: routeData,
     isSuccess,
     isError,
     isLoading,
-  } = useOne<Route>({
+  } = useOne<Route>("routes", { id: routeId });
-    resource: "route",
+
-    id: routeId,
+  const { data: stations } = useMany<Station>("stations", {
+    ids: routeData?.stations.flatMap(({ stationId, transferStations }) => {
+      const transferIds = transferStations
+        .filter(({ isShowOnMap }) => isShowOnMap)
+        .map(({ stationId: id }) => id);
+      return [stationId, ...transferIds];
+    }),
   });
-
+  // Handle loading state and errors
-  const [stations, setStations] = useState<any[]>([]);
-  const [sights, setSights] = useState<any[]>([]);
-
   useEffect(() => {
-    fetchStations(routeId, setStations, setSights);
+    if (isLoading || stationsLoading) {
-  }, [routeData]);
+      setError(null); // Reset error during loading
+      return;
+    }
 
-  // useEffect(() => {
+    if (isError || stationsError) {
-  //   if (!routeData) {
+      setError("Failed to fetch route or station data.");
-  //     return;
+      return;
-  //   }
+    }
 
-  //   // const data = mapRouteFromApi(routeData, []);
+    if (!routeData || !stations) {
+      return;
+    }
 
-  //   setMappedData(data);
+    try {
-  // }, [routeData]);
+      const data = mapRouteFromApi(routeData, stations);
+      setMappedData(data); // Set the mapped data
+    } catch (err) {
+      setError("Error mapping the route data.");
+    }
+  }, [routeData, stations, isLoading, stationsLoading, isError, stationsError]);
 
-  return { routeData, mappedData, isLoading, isError };
+  return {
+    routeData,
+    mappedData,
+    isLoading: isLoading || stationsLoading, // Combine loading states
+    isError: isError || stationsError, // Combine error states
+    error, // Provide the error message
+  };
 };