change selectedTimetableItemIdsByType by selectedTimetableItemIds

OpenRailAssociation · Feb 24, 2025 · c2b8031 · c2b8031
1 parent ef850d6
commit c2b8031
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 92 deletions.
diff --git a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
@@ -11,12 +11,7 @@ import type { Conflict, InfraState } from 'common/api/osrdEditoastApi';
 import i18n from 'i18n';
 import ConflictsList from 'modules/conflict/components/ConflictsList';
 import { selectTrainToEdit } from 'reducers/osrdconf/operationalStudiesConf';
-import type {
-  PacedTrainId,
-  TimetableItemId,
-  TrainScheduleId,
-  TrainScheduleResultWithTrainId,
-} from 'reducers/osrdconf/types';
+import type { TimetableItemId, TrainScheduleResultWithTrainId } from 'reducers/osrdconf/types';
 import { updateSelectedTrainId } from 'reducers/simulationResults';
 import {
   getSelectedTrainId,
@@ -34,12 +29,7 @@ import {
 import PacedTrainItem from './PacedTrain/PacedTrainItem';
 import TimetableToolbar from './TimetableToolbar';
 import TrainScheduleItem from './TrainScheduleItem';
-import type {
-  PacedTrainWithResult,
-  SelectedTimetableIdsByType,
-  TimetableItemResult,
-  TrainScheduleWithDetails,
-} from './types';
+import type { PacedTrainWithResult, TimetableItemResult, TrainScheduleWithDetails } from './types';
 
 type TimetableProps = {
   setDisplayTrainScheduleManagement: (mode: string) => void;
@@ -73,11 +63,7 @@ const Timetable = ({
 
   const [displayedTimetableItems, setDisplayedTimetableItems] = useState<TimetableItemResult[]>([]);
   const [conflictsListExpanded, setConflictsListExpanded] = useState(false);
-  const [selectedTimetableItemIdsByType, setSelectedTimetableItemIdsByType] =
-    useState<SelectedTimetableIdsByType>({
-      selectedTrainScheduleIds: [],
-      selectedPacedTrainIds: [],
-    });
+  const [selectedTimetableItemIds, setSelectedTimetableItemIds] = useState<TimetableItemId[]>([]);
   const [showTrainDetails, setShowTrainDetails] = useState(false);
   const [timetableItems, setTimetableItems] = useState<TimetableItemResult[]>([]);
   const selectedTrainId = useSelector(getSelectedTrainId);
@@ -90,7 +76,7 @@ const Timetable = ({
 
   const removeAndUnselectTrains = useCallback((trainIds: TimetableItemId[]) => {
     removeTrains(trainIds);
-    setSelectedTimetableItemIdsByType({ selectedTrainScheduleIds: [], selectedPacedTrainIds: [] });
+    setSelectedTimetableItemIds([]);
     dtoImport();
   }, []);
 
@@ -100,22 +86,18 @@ const Timetable = ({
 
   const handleSelectTimetableItem = useCallback(
     (id: TimetableItemId) => {
-      const itemType = isTrainSchedule(id) ? 'selectedTrainScheduleIds' : 'selectedPacedTrainIds';
-      const currentSelectedTrainIds: TimetableItemId[] = selectedTimetableItemIdsByType[itemType];
-      const index = currentSelectedTrainIds.indexOf(id as TrainScheduleId);
+      const currentSelectedTrainIds: TimetableItemId[] = selectedTimetableItemIds;
+      const index = currentSelectedTrainIds.indexOf(id);
 
       if (index === -1) {
-        currentSelectedTrainIds.push(id as TrainScheduleId);
+        currentSelectedTrainIds.push(id);
       } else {
         currentSelectedTrainIds.splice(index, 1);
       }
 
-      setSelectedTimetableItemIdsByType({
-        ...selectedTimetableItemIdsByType,
-        [itemType]: currentSelectedTrainIds,
-      });
+      setSelectedTimetableItemIds([...currentSelectedTrainIds]);
     },
-    [selectedTimetableItemIdsByType]
+    [selectedTimetableItemIds]
   );
 
   const handleConflictClick = (conflict: Conflict) => {
@@ -142,12 +124,12 @@ const Timetable = ({
     });
   }, [currentDepartureDates]);
 
-  const selectTimetableItemToEdit = (itemToEdit: TimetableItemResult) => {
+  const selectTimetableItemToEdit = useCallback((itemToEdit: TimetableItemResult) => {
     dispatch(selectTrainToEdit(itemToEdit));
     // TODO Paced train : Adapt this to handle paced trains in issue https://github.com/OpenRailAssociation/osrd/issues/10615
     setItemIdToEdit(itemToEdit.id);
     setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.edit);
-  };
+  }, []);
 
   // TODO PACED TRAIN : Remove this after adapting the code to handle paced trains in issue
   useEffect(() => {
@@ -200,16 +182,11 @@ const Timetable = ({
           timetableItems={timetableItems}
           displayedTimetableItems={displayedTimetableItems}
           setDisplayedTimetableItems={setDisplayedTimetableItems}
-          selectedTimetableItemIdsByType={selectedTimetableItemIdsByType}
-          setSelectedTimetableItemIdsByType={setSelectedTimetableItemIdsByType}
+          selectedTimetableItemIds={selectedTimetableItemIds}
+          setSelectedTimetableItemIds={setSelectedTimetableItemIds}
           removeTrains={removeAndUnselectTrains}
           trainSchedules={trainSchedules}
-          isInSelection={
-            [
-              ...selectedTimetableItemIdsByType.selectedPacedTrainIds,
-              ...selectedTimetableItemIdsByType.selectedTrainScheduleIds,
-            ].length > 0
-          }
+          isInSelection={selectedTimetableItemIds.length > 0}
         />
         <Virtualizer overscan={15}>
           {displayedTimetableItems.map((timetableItem, index) => (
@@ -223,9 +200,7 @@ const Timetable = ({
             https://github.com/OpenRailAssociation/osrd/issues/10615 */}
               {isTrainSchedule(timetableItem.id) ? (
                 <TrainScheduleItem
-                  isInSelection={selectedTimetableItemIdsByType.selectedTrainScheduleIds.includes(
-                    timetableItem.id
-                  )}
+                  isInSelection={selectedTimetableItemIds.includes(timetableItem.id)}
                   handleSelectTrain={handleSelectTimetableItem}
                   train={timetableItem as TrainScheduleWithDetails}
                   isSelected={infraState === 'CACHED' && selectedTrainId === timetableItem.id}
@@ -241,9 +216,7 @@ const Timetable = ({
               ) : (
                 <PacedTrainItem
                   pacedTrain={timetableItem as PacedTrainWithResult}
-                  isInSelection={selectedTimetableItemIdsByType.selectedPacedTrainIds.includes(
-                    timetableItem.id
-                  )}
+                  isInSelection={selectedTimetableItemIds.includes(timetableItem.id)}
                   selectPacedTrainToEdit={selectTimetableItemToEdit}
                   handleSelectPacedTrain={handleSelectTimetableItem}
                   isOnEdit={timetableItem.id === itemIdToEdit}

diff --git a/front/src/modules/trainschedule/components/Timetable/TimetableToolbar.tsx b/front/src/modules/trainschedule/components/Timetable/TimetableToolbar.tsx
@@ -24,12 +24,7 @@ import { useDebounce } from 'utils/helpers';
 import { formatTrainScheduleIdToEditoastTrainId, isTrainSchedule } from 'utils/trainId';
 
 import FilterPanel from './FilterPanel';
-import type {
-  ScheduledPointsHonoredFilter,
-  SelectedTimetableIdsByType,
-  TimetableItemResult,
-  ValidityFilter,
-} from './types';
+import type { ScheduledPointsHonoredFilter, TimetableItemResult, ValidityFilter } from './types';
 import useFilterTrainSchedules from './useFilterTrainSchedules';
 import { timetableHasInvalidTrain } from './utils';
 
@@ -39,8 +34,8 @@ type TimetableToolbarProps = {
   timetableItems: TimetableItemResult[];
   displayedTimetableItems: TimetableItemResult[];
   setDisplayedTimetableItems: (trainSchedulesDetails: TimetableItemResult[]) => void;
-  selectedTimetableItemIdsByType: SelectedTimetableIdsByType;
-  setSelectedTimetableItemIdsByType: (selectedTimetableIds: SelectedTimetableIdsByType) => void;
+  selectedTimetableItemIds: TimetableItemId[];
+  setSelectedTimetableItemIds: (selectedTimetableIds: TimetableItemId[]) => void;
   removeTrains: (trainIds: TimetableItemId[]) => void;
   trainSchedules: TrainScheduleResultWithTrainId[];
   isInSelection: boolean;
@@ -52,8 +47,8 @@ const TimetableToolbar = ({
   timetableItems,
   displayedTimetableItems,
   setDisplayedTimetableItems,
-  selectedTimetableItemIdsByType,
-  setSelectedTimetableItemIdsByType,
+  selectedTimetableItemIds,
+  setSelectedTimetableItemIds,
   removeTrains,
   trainSchedules,
   isInSelection,
@@ -73,6 +68,25 @@ const TimetableToolbar = ({
     useState<ScheduledPointsHonoredFilter>('both');
   const [selectedTags, setSelectedTags] = useState<Set<string | null>>(new Set());
 
+  const { selectedTrainScheduleIds, selectedPacedTrainIds } = useMemo(
+    () =>
+      selectedTimetableItemIds.reduce(
+        (acc, timetableItemId) => {
+          if (isTrainSchedule(timetableItemId)) {
+            acc.selectedTrainScheduleIds.push(timetableItemId);
+          } else {
+            acc.selectedPacedTrainIds.push(timetableItemId);
+          }
+          return acc;
+        },
+        { selectedTrainScheduleIds: [], selectedPacedTrainIds: [] } as {
+          selectedTrainScheduleIds: TrainScheduleId[];
+          selectedPacedTrainIds: PacedTrainId[];
+        }
+      ),
+    [selectedTimetableItemIds]
+  );
+
   const { totalPacedTrainCount, totalTrainScheduleCount } = useMemo(
     () =>
       timetableItems.reduce(
@@ -95,9 +109,6 @@ const TimetableToolbar = ({
 
   const [deleteTrainSchedules] = osrdEditoastApi.endpoints.deleteTrainSchedule.useMutation();
 
-  const { selectedTrainScheduleIds, selectedPacedTrainIds } = selectedTimetableItemIdsByType;
-  const selectedTimetableItemIds = [...selectedTrainScheduleIds, ...selectedPacedTrainIds];
-
   // TODO: move this hook in Timetable
   const { uniqueTags } = useFilterTrainSchedules(
     timetableItems,
@@ -115,26 +126,10 @@ const TimetableToolbar = ({
 
   const toggleAllTrainsSelecton = () => {
     if (displayedTimetableItems.length === selectedTimetableItemIds.length) {
-      setSelectedTimetableItemIdsByType({
-        selectedTrainScheduleIds: [],
-        selectedPacedTrainIds: [],
-      });
+      setSelectedTimetableItemIds([]);
     } else {
-      const timetableItemsDisplayed = displayedTimetableItems.reduce(
-        (acc, { id }) => {
-          if (isTrainSchedule(id)) {
-            acc.selectedTrainScheduleIds.push(id);
-          } else {
-            acc.selectedPacedTrainIds.push(id);
-          }
-          return acc;
-        },
-        {
-          selectedTrainScheduleIds: [] as TrainScheduleId[],
-          selectedPacedTrainIds: [] as PacedTrainId[],
-        }
-      );
-      setSelectedTimetableItemIdsByType(timetableItemsDisplayed);
+      const timetableItemsDisplayed = displayedTimetableItems.map(({ id }) => id);
+      setSelectedTimetableItemIds(timetableItemsDisplayed);
     }
   };
 

diff --git a/front/src/modules/trainschedule/components/Timetable/types.ts b/front/src/modules/trainschedule/components/Timetable/types.ts
@@ -57,8 +57,3 @@ export type PacedTrainWithResult = TimetableItemWithDetails & {
 };
 
 export type TimetableItemResult = TrainScheduleWithDetails | PacedTrainWithResult;
-
-export type SelectedTimetableIdsByType = {
-  selectedTrainScheduleIds: TrainScheduleId[];
-  selectedPacedTrainIds: PacedTrainId[];
-};
diff --git a/front/src/styles/scss/applications/operationalStudies/_pacedTrain.scss b/front/src/styles/scss/applications/operationalStudies/_pacedTrain.scss
@@ -44,6 +44,7 @@
     height: 24px;
     width: 100%;
     align-items: center;
+    overflow: hidden;
 
     .train-projected {
       height: 20px;

diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -335,17 +335,6 @@
           margin-left: 8px;
           position: relative;
           line-height: 24px;
-
-          &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: -24px;
-            width: 24px;
-            height: 22px;
-            background: linear-gradient(270deg, rgba(247, 246, 238, 0), rgba(247, 246, 238, 1));
-            z-index: 1;
-          }
         }
 
           .custom-checkbox.small {
@@ -518,6 +507,20 @@
                 align-items: center;
                 overflow: hidden;
                 height: 24px;
+                position: relative;
+
+                &:has(img) {
+                  &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 24px;
+                    height: 22px;
+                    background: linear-gradient(270deg, rgba(247, 246, 238, 0), rgba(247, 246, 238, 1));
+                    z-index: 1;
+                  }
+                }
 
                 .status-invalid {
                   width: 4px;
@@ -636,7 +639,7 @@
           &.selected:not(.invalid) {
             background-color: var(--selection20);
             box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.25);
-            .checkbox-title::after {
+            .rolling-stock::after {
               background: linear-gradient(
                 270deg,
                 rgba(255, 242, 179, 0),