-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(pam): uncouple timeline and action
- Create a specific pam timeline hook to return only timeline needs - refactor pam components to use the new hook
- Loading branch information
1 parent
e483020
commit b812177
Showing
7 changed files
with
197 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 8 additions & 7 deletions
15
frontend/src/v2/features/pam/components/element/mission-action-pam-body.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 13 additions & 2 deletions
15
frontend/src/v2/features/pam/components/element/mission-timeline-header-pam.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,24 @@ | ||
| import { FC } from 'react' | ||
| import { ModuleType } from '../../../common/types/module-type' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import MissionTimelineHeaderWrapper from '../../../mission-timeline/components/layout/mission-timeline-Header-wrapper' | ||
| import { usePamTimelineRegistry } from '../../hooks/use-pam-timeline-registry' | ||
|
|
||
| interface MissionTimelineHeaderPamProps { | ||
| missionId: number | ||
| } | ||
|
|
||
| const MissionTimelineHeaderPam: FC<MissionTimelineHeaderPamProps> = ({ missionId }) => { | ||
| return <MissionTimelineHeaderWrapper missionId={missionId} moduleType={ModuleType.PAM} /> | ||
| const navigate = useNavigate() | ||
| const { timelineDropdownItems } = usePamTimelineRegistry() | ||
| const handleOnSubmit = (id?: string) => navigate(`/v2/pam/missions/${missionId}/${id}`) | ||
|
|
||
| return ( | ||
| <MissionTimelineHeaderWrapper | ||
| missionId={missionId} | ||
| onSubmit={handleOnSubmit} | ||
| dropdownItems={timelineDropdownItems} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default MissionTimelineHeaderPam |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 6 additions & 15 deletions
21
frontend/src/v2/features/pam/hooks/use-pam-action-registry.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
frontend/src/v2/features/pam/hooks/use-pam-timeline-registry.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { Icon, THEME } from '@mtes-mct/monitor-ui' | ||
| import { ActionGroupType, ActionType } from '../../common/types/action-type' | ||
| import MissionTimelineItemControlCard from '../../mission-timeline/components/elements/mission-timeline-item-control-card' | ||
| import MissionTimelineItemGenericCard from '../../mission-timeline/components/elements/mission-timeline-item-generic-card' | ||
| import MissionTimelineItemRescueCard from '../../mission-timeline/components/elements/mission-timeline-item-rescue-card' | ||
| import MissionTimelineItemStatusCard from '../../mission-timeline/components/elements/mission-timeline-item-status-card' | ||
| import MissionTimelineItemSurveillanceCard from '../../mission-timeline/components/elements/mission-timeline-item-surveillance-card' | ||
| import { Timeline, TimelineDropdownItem, TimelineRegistry } from '../../mission-timeline/hooks/use-timeline' | ||
|
|
||
| const TIME_LINE_DROPDOWN_PAM_ITEMS: TimelineDropdownItem[] = [ | ||
| { type: ActionType.CONTROL, icon: Icon.ControlUnit, dropdownText: 'Ajouter des contrôles' }, | ||
| { type: ActionType.NOTE, icon: Icon.Note, dropdownText: 'Ajouter une note libre' }, | ||
| { type: ActionType.RESCUE, icon: Icon.Rescue, dropdownText: 'Ajouter une assistance / sauvetage' }, | ||
| { | ||
| icon: Icon.More, | ||
| type: ActionGroupType.OTHER_GROUP, | ||
| dropdownText: 'Ajouter une autre activité de mission', | ||
| subItems: [ | ||
| { type: ActionType.NAUTICAL_EVENT, dropdownText: 'Sécu de manifestation nautique' }, | ||
| { type: ActionType.BAAEM_PERMANENCE, dropdownText: 'Permanence BAAEM' }, | ||
| { type: ActionType.VIGIMER, dropdownText: 'Permanence Vigimer' }, | ||
| { type: ActionType.ANTI_POLLUTION, dropdownText: 'Opération de lutte anti-pollution' }, | ||
| { type: ActionType.ILLEGAL_IMMIGRATION, dropdownText: `Lutte contre l'immigration illégale` }, | ||
| { type: ActionType.PUBLIC_ORDER, dropdownText: `Maintien de l'ordre public` }, | ||
| { type: ActionType.REPRESENTATION, dropdownText: 'Représentation' } | ||
| ] | ||
| } | ||
| ] | ||
|
|
||
| const TIMELINE_PAM_REGISTRY: TimelineRegistry = { | ||
| [ActionType.STATUS]: { | ||
| noPadding: true, | ||
| style: { minHeight: 0 }, | ||
| title: 'Statut du navire', | ||
| component: MissionTimelineItemStatusCard | ||
| }, | ||
| [ActionType.CONTROL]: { | ||
| style: { backgroundColor: THEME.color.white, borderColor: THEME.color.lightGray }, | ||
| title: 'Contrôles', | ||
| icon: Icon.ControlUnit, | ||
| component: MissionTimelineItemControlCard | ||
| }, | ||
| [ActionType.SURVEILLANCE]: { | ||
| style: { backgroundColor: '#e5e5eb', borderColor: THEME.color.lightGray }, | ||
| icon: Icon.Observation, | ||
| title: 'Surveillance Environnement', | ||
| component: MissionTimelineItemSurveillanceCard | ||
| }, | ||
| [ActionType.NOTE]: { | ||
| style: { backgroundColor: THEME.color.blueYonder25, borderColor: THEME.color.lightGray }, | ||
| title: 'Note libre', | ||
| icon: Icon.Note, | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.VIGIMER]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: 'Permanence Vigimer', | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.NAUTICAL_EVENT]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: 'Manifestation nautique', | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.RESCUE]: { | ||
| style: { | ||
| backgroundColor: THEME.color.goldenPoppy25, | ||
| borderColor: THEME.color.blueYonder25 | ||
| }, | ||
| title: 'Assistance et sauvetage', | ||
| icon: Icon.Rescue, | ||
| component: MissionTimelineItemRescueCard | ||
| }, | ||
| [ActionType.REPRESENTATION]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: 'Représentation', | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.PUBLIC_ORDER]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: `Maintien de l'ordre public`, | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.ANTI_POLLUTION]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: 'Opération de lutte anti-pollution', | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.BAAEM_PERMANENCE]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: 'Permanence BAAEM', | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.ILLEGAL_IMMIGRATION]: { | ||
| style: { | ||
| backgroundColor: THEME.color.blueGray25, | ||
| borderColor: THEME.color.lightGray | ||
| }, | ||
| icon: Icon.More, | ||
| title: `Lutte contre l'immigration illégale`, | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.OTHER]: { | ||
| style: {}, | ||
| icon: Icon.More, | ||
| component: MissionTimelineItemGenericCard | ||
| }, | ||
| [ActionType.CONTACT]: { | ||
| style: { backgroundColor: THEME.color.blueYonder25, borderColor: THEME.color.lightGray }, | ||
| icon: Icon.Observation, | ||
| title: 'Contact', | ||
| component: MissionTimelineItemGenericCard | ||
| } | ||
| } | ||
|
|
||
| interface PamTimelineRegistrHook { | ||
| timelineDropdownItems: TimelineDropdownItem[] | ||
| getTimeline: (actionType: ActionType) => Timeline | ||
| } | ||
|
|
||
| export function usePamTimelineRegistry(): PamTimelineRegistrHook { | ||
| const getTimeline = (actionType: ActionType) => TIMELINE_PAM_REGISTRY[actionType] ?? ({} as Timeline) | ||
| return { timelineDropdownItems: TIME_LINE_DROPDOWN_PAM_ITEMS, getTimeline } | ||
| } |