Refactor schedule mission dialogs

equinor · Nov 1, 2023 · 345ca7d · 345ca7d
1 parent c2eb90f
commit 345ca7d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 51 deletions.
diff --git a/frontend/src/components/Pages/InspectionPage/InspectionSection.tsx b/frontend/src/components/Pages/InspectionPage/InspectionSection.tsx
@@ -170,23 +170,31 @@ export function InspectionSection({
     const [selectedDeck, setSelectedDeck] = useState<Deck>()
     const [selectedMissions, setSelectedMissions] = useState<CondensedMissionDefinition[]>()
     const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false)
-    const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState<boolean>(false)
+    const [unscheduledMissions, setUnscheduledMissions] = useState<CondensedMissionDefinition[]>([])
+    const [isAlreadyScheduled, setIsAlreadyScheduled] = useState<boolean>(false)
 
     const openDialog = () => {
         setIsDialogOpen(true)
     }
 
-    const openScheduleDialog = () => {
-        setIsScheduledDialogOpen(true)
-    }
-
     const closeDialog = () => {
+        setIsAlreadyScheduled(false)
+        setSelectedMissions([])
+        setUnscheduledMissions([])
         setIsDialogOpen(false)
     }
 
-    const closeScheduleDialog = () => {
-        setIsScheduledDialogOpen(false)
-    }
+    useEffect(() => {
+        if (selectedMissions) {
+            let unscheduledMissions: CondensedMissionDefinition[] = []
+            selectedMissions!.forEach((mission) => {
+                if (Object.keys(scheduledMissions).includes(mission.id) && scheduledMissions[mission.id])
+                    setIsAlreadyScheduled(true)
+                else unscheduledMissions = unscheduledMissions.concat([mission])
+            })
+            setUnscheduledMissions(unscheduledMissions)
+        }
+    }, [isDialogOpen])
 
     useEffect(() => {
         setSelectedDeck(undefined)
@@ -335,9 +343,6 @@ export function InspectionSection({
                         inspections={deckMissions[selectedDeck.id].inspections}
                         scheduledMissions={scheduledMissions}
                         ongoingMissions={ongoingMissions}
-                        isScheduledDialogOpen={isScheduledDialogOpen}
-                        openScheduleDialog={openScheduleDialog}
-                        closeScheduleDialog={closeScheduleDialog}
                     />
                 )}
             </StyledDeckOverview>
@@ -347,7 +352,8 @@ export function InspectionSection({
                     refreshInterval={refreshInterval}
                     closeDialog={closeDialog}
                     setMissions={setSelectedMissions}
-                    scheduledMissions={scheduledMissions}
+                    unscheduledMissions={unscheduledMissions!}
+                    isAlreadyScheduled={isAlreadyScheduled}
                 />
             )}
         </>

diff --git a/frontend/src/components/Pages/InspectionPage/InspectionTable.tsx b/frontend/src/components/Pages/InspectionPage/InspectionTable.tsx
@@ -10,7 +10,7 @@ import { Icons } from 'utils/icons'
 import { Inspection, ScheduledMissionType, compareInspections } from './InspectionSection'
 import { getDeadlineInDays } from 'utils/StringFormatting'
 import { AlreadyScheduledMissionDialog, ScheduleMissionDialog } from './ScheduleMissionDialog'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { refreshInterval } from '../FrontPage/FrontPage'
 import { TranslateTextWithContext } from 'components/Contexts/LanguageContext'
 
@@ -47,9 +47,6 @@ interface IProps {
     setSelectedMissions: (selectedMissions: CondensedMissionDefinition[]) => void
     scheduledMissions: ScheduledMissionType
     ongoingMissions: ScheduledMissionType
-    isScheduledDialogOpen: boolean
-    openScheduleDialog: () => void
-    closeScheduleDialog: () => void
 }
 
 interface ITableProps {
@@ -245,12 +242,18 @@ export function InspectionTable({
     setSelectedMissions,
     scheduledMissions,
     ongoingMissions,
-    isScheduledDialogOpen,
-    openScheduleDialog,
-    closeScheduleDialog,
 }: IProps) {
     const { TranslateText } = useLanguageContext()
     const navigate = useNavigate()
+    const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState<boolean>(false)
+
+    const openScheduleDialog = () => {
+        setIsScheduledDialogOpen(true)
+    }
+
+    const closeScheduleDialog = () => {
+        setIsScheduledDialogOpen(false)
+    }
 
     const cellValues = inspections
         .sort(compareInspections)
@@ -298,6 +301,8 @@ export function AllInspectionsTable({ inspections, scheduledMissions, ongoingMis
     const [selectedMissions, setSelectedMissions] = useState<CondensedMissionDefinition[]>()
     const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false)
     const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState<boolean>(false)
+    const [unscheduledMissions, setUnscheduledMissions] = useState<CondensedMissionDefinition[]>([])
+    const [isAlreadyScheduled, setIsAlreadyScheduled] = useState<boolean>(false)
 
     const openDialog = () => {
         setIsDialogOpen(true)
@@ -308,13 +313,28 @@ export function AllInspectionsTable({ inspections, scheduledMissions, ongoingMis
     }
 
     const closeDialog = () => {
+        setIsAlreadyScheduled(false)
+        setSelectedMissions([])
+        setUnscheduledMissions([])
         setIsDialogOpen(false)
     }
 
     const closeScheduleDialog = () => {
         setIsScheduledDialogOpen(false)
     }
 
+    useEffect(() => {
+        let unscheduledMissions: CondensedMissionDefinition[] = []
+        if (selectedMissions) {
+            selectedMissions.forEach((mission) => {
+                if (Object.keys(scheduledMissions).includes(mission.id) && scheduledMissions[mission.id])
+                    setIsAlreadyScheduled(true)
+                else unscheduledMissions = unscheduledMissions.concat([mission])
+            })
+            setUnscheduledMissions(unscheduledMissions)
+        }
+    }, [isDialogOpen])
+
     const navigate = useNavigate()
     const cellValues = inspections
         .sort(compareInspections)
@@ -349,7 +369,8 @@ export function AllInspectionsTable({ inspections, scheduledMissions, ongoingMis
                     refreshInterval={refreshInterval}
                     closeDialog={closeDialog}
                     setMissions={setSelectedMissions}
-                    scheduledMissions={scheduledMissions}
+                    unscheduledMissions={unscheduledMissions}
+                    isAlreadyScheduled={isAlreadyScheduled}
                 />
             )}
             {isScheduledDialogOpen && (

diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialog.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialog.tsx
@@ -1,21 +1,20 @@
-import { Autocomplete, Button, Dialog, Typography, Popover, TextField, Icon } from '@equinor/eds-core-react'
+import { Autocomplete, Button, Dialog, Typography, Popover, Icon } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useRef, useState, useEffect } from 'react'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { Robot } from 'models/Robot'
 import { CondensedMissionDefinition } from 'models/MissionDefinition'
 import { BackendAPICaller } from 'api/ApiCaller'
-import { ScheduledMissionType, compareInspections } from './InspectionSection'
-import { tokens } from '@equinor/eds-tokens'
 import { Icons } from 'utils/icons'
 
 interface IProps {
     missions: CondensedMissionDefinition[]
     refreshInterval: number
     closeDialog: () => void
     setMissions: (selectedMissions: CondensedMissionDefinition[] | undefined) => void
-    scheduledMissions: ScheduledMissionType
+    unscheduledMissions: CondensedMissionDefinition[]
+    isAlreadyScheduled: boolean
 }
 
 interface IScheduledProps {
@@ -62,10 +61,8 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
     const { TranslateText } = useLanguageContext()
     const { installationCode } = useInstallationContext()
     const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
-    const [isAlreadyScheduled, setIsAlreadyScheduled] = useState<boolean>(false)
     const [selectedRobot, setSelectedRobot] = useState<Robot>()
     const [robotOptions, setRobotOptions] = useState<Robot[]>([])
-    const [unscheduledMissions, setUnscheduledMissions] = useState<CondensedMissionDefinition[]>([])
     const anchorRef = useRef<HTMLButtonElement>(null)
 
     useEffect(() => {
@@ -83,21 +80,6 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
         return () => clearInterval(id)
     }, [props.refreshInterval])
 
-    useEffect(() => {
-        const id = setInterval(() => {
-            let unscheduledMissions: CondensedMissionDefinition[] = []
-
-            props.missions.forEach((mission) => {
-                if (Object.keys(props.scheduledMissions).includes(mission.id) && props.scheduledMissions[mission.id])
-                    setIsAlreadyScheduled(true)
-                else unscheduledMissions = unscheduledMissions.concat([mission])
-            })
-
-            setUnscheduledMissions(unscheduledMissions)
-        }, props.refreshInterval)
-        return () => clearInterval(id)
-    }, [props.refreshInterval])
-
     let timer: ReturnType<typeof setTimeout>
 
     const onSelectedRobot = (selectedRobot: Robot) => {
@@ -112,7 +94,6 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
         props.missions.forEach((mission) => BackendAPICaller.scheduleMissionDefinition(mission.id, selectedRobot.id))
 
         setSelectedRobot(undefined)
-        props.setMissions(undefined)
     }
 
     const closePopover = () => setIsPopoverOpen(false)
@@ -125,13 +106,11 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
     const onScheduleOnlyButtonPress = () => {
         if (selectedRobot === undefined) return
 
-        unscheduledMissions.forEach((mission) =>
+        props.unscheduledMissions.forEach((mission) =>
             BackendAPICaller.scheduleMissionDefinition(mission.id, selectedRobot.id)
         )
 
         setSelectedRobot(undefined)
-        props.setMissions(undefined)
-        setUnscheduledMissions([])
     }
 
     return (
@@ -151,11 +130,13 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
                 <StyledDialog open={true}>
                     <StyledDialogContent>
                         <Typography variant="h4">{TranslateText('Add mission')}</Typography>
-                        {isAlreadyScheduled && (
+                        {props.isAlreadyScheduled && (
                             <StyledDangerContent>
                                 <Icon name={Icons.Warning} size={16} color="red" />
                                 <Typography variant="body_short" color="red">
-                                    {TranslateText('The mission is already in the queue')}
+                                    {props.missions.length > 1
+                                        ? TranslateText('Some missions are already in the queue')
+                                        : TranslateText('The mission is already in the queue')}
                                 </Typography>
                             </StyledDangerContent>
                         )}
@@ -188,9 +169,11 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
                                     disabled={!selectedRobot}
                                 >
                                     {' '}
-                                    {TranslateText('Queue mission')}
+                                    {props.missions.length > 1
+                                        ? TranslateText('Queue all missions')
+                                        : TranslateText('Queue mission')}
                                 </Button>
-                                {isAlreadyScheduled && props.missions.length > 1 && (
+                                {props.isAlreadyScheduled && props.unscheduledMissions.length > 0 && (
                                     <Button
                                         onClick={() => {
                                             onScheduleOnlyButtonPress()

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -188,5 +188,7 @@
     "Scheduled": "Scheduled",
     "The mission is already in the queue": "The mission is already in the queue",
     "AlreadyScheduledText": "The mission is already in the queue. Are you sure you want to add the mission again?",
-    "Queue unscheduled missions": "Queue unscheduled missions"
+    "Queue unscheduled missions": "Queue unscheduled missions",
+    "Queue all missions": "Queue all missions",
+    "Some missions are already in the queue": "Some missions are already in the queue"
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -188,5 +188,7 @@
     "Scheduled": "Planlagt",
     "The mission is already in the queue": "Oppdraget er allerede i kø",
     "AlreadyScheduledText": "Oppdraget ligger allerede i køen. Er du sikker på at du vil legge til oppdraget enda en gang?",
-    "Queue unscheduled missions": "Still uplanlagte oppdrag i kø"
+    "Queue unscheduled missions": "Legg uplanlagte oppdrag i kø",
+    "Queue all missions": "Legg alle oppdragene i kø",
+    "Some missions are already in the queue": "Noen oppdrag står allerede i køen"
 }