- create TimetableItemAction

OpenRailAssociation · Feb 6, 2025 · 6ef4022 · 6ef4022
1 parent f38fb01
commit 6ef4022
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 35 deletions.
diff --git a/front/src/modules/trainschedule/components/Timetable/PacedTrain/PacedTrainItem.tsx b/front/src/modules/trainschedule/components/Timetable/PacedTrain/PacedTrainItem.tsx
@@ -4,6 +4,7 @@ import { Checkbox } from '@osrd-project/ui-core';
 import { ChevronDown, Manchette } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 
+import TimetableItemActions from '../TimetableItemActions';
 import type { TrainScheduleWithDetails } from '../types';
 
 export type PacedTrain = TrainScheduleWithDetails & {
@@ -31,6 +32,10 @@ const PacedTrainItem = ({
   const [isOpened, setIsOpened] = useState(false);
 
   const toggle = () => setIsOpened((open) => !open);
+  const selectPathProjection = async () => {};
+  const duplicatePacedTrain = async () => {};
+  const editPacedTrain = () => {};
+  const deletePacedTrain = async () => {};
 
   return (
     <div
@@ -66,6 +71,12 @@ const PacedTrainItem = ({
             <span className="train-name">{pacedTrain.trainName}</span>
           </div>
         </div>
+        <TimetableItemActions
+          selectPathProjection={selectPathProjection}
+          duplicateTimetableItem={duplicatePacedTrain}
+          editTimetableItem={editPacedTrain}
+          deleteTimetableItem={deletePacedTrain}
+        />
       </div>
       <div className="occurancies" />
     </div>

diff --git a/front/src/modules/trainschedule/components/Timetable/TimetableItemActions.tsx b/front/src/modules/trainschedule/components/Timetable/TimetableItemActions.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Duplicate, Pencil, Trash } from '@osrd-project/ui-icons';
+import { useTranslation } from 'react-i18next';
+import { GiPathDistance } from 'react-icons/gi';
+
+type TimetableItemActionsProps = {
+  selectPathProjection: () => Promise<void>;
+  duplicateTimetableItem: () => Promise<void>;
+  editTimetableItem: () => void;
+  deleteTimetableItem: () => Promise<void>;
+};
+
+const TimetableItemActions = ({
+  selectPathProjection,
+  duplicateTimetableItem,
+  editTimetableItem,
+  deleteTimetableItem,
+}: TimetableItemActionsProps) => {
+  const { t } = useTranslation(['operationalStudies/scenario']);
+  return (
+    <div className="action-buttons">
+      <button
+        type="button"
+        aria-label={t('timetable.choosePath')}
+        title={t('timetable.choosePath')}
+        onClick={selectPathProjection}
+      >
+        <GiPathDistance />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.duplicate')}
+        title={t('timetable.duplicate')}
+        onClick={duplicateTimetableItem}
+      >
+        <Duplicate />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.update')}
+        title={t('timetable.update')}
+        onClick={editTimetableItem}
+        data-testid="edit-train"
+      >
+        <Pencil />
+      </button>
+      <button
+        type="button"
+        aria-label={t('timetable.delete')}
+        title={t('timetable.delete')}
+        onClick={deleteTimetableItem}
+      >
+        <Trash />
+      </button>
+    </div>
+  );
+};
+
+export default TimetableItemActions;
diff --git a/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx b/front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx
@@ -21,6 +21,7 @@ import { useAppDispatch } from 'store';
 import { formatToIsoDate, isoDateToMs } from 'utils/date';
 import { castErrorToFailure } from 'utils/error';
 
+import TimetableItemActions from './TimetableItemActions';
 import type { TrainScheduleWithDetails } from './types';
 
 type TimetableTrainCardProps = {
@@ -256,41 +257,12 @@ const TimetableTrainCard = ({
           </div>
         )}
       </div>
-      <div className="action-buttons">
-        <button
-          type="button"
-          aria-label={t('timetable.choosePath')}
-          title={t('timetable.choosePath')}
-          onClick={selectPathProjection}
-        >
-          <GiPathDistance />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.duplicate')}
-          title={t('timetable.duplicate')}
-          onClick={duplicateTrain}
-        >
-          <Duplicate />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.update')}
-          title={t('timetable.update')}
-          onClick={editTrainSchedule}
-          data-testid="edit-train"
-        >
-          <Pencil />
-        </button>
-        <button
-          type="button"
-          aria-label={t('timetable.delete')}
-          title={t('timetable.delete')}
-          onClick={deleteTrain}
-        >
-          <Trash />
-        </button>
-      </div>
+      <TimetableItemActions
+        selectPathProjection={selectPathProjection}
+        duplicateTimetableItem={duplicateTrain}
+        editTimetableItem={editTrainSchedule}
+        deleteTimetableItem={deleteTrain}
+      />
     </div>
   );
 };