From 345ca7df63f35990ef108e56a8726e304ee0ddff Mon Sep 17 00:00:00 2001 From: "Mariana R. Santos" Date: Fri, 20 Oct 2023 11:31:19 +0200 Subject: [PATCH] Refactor schedule mission dialogs --- .../InspectionPage/InspectionSection.tsx | 30 ++++++++------ .../Pages/InspectionPage/InspectionTable.tsx | 37 +++++++++++++---- .../InspectionPage/ScheduleMissionDialog.tsx | 41 ++++++------------- frontend/src/language/en.json | 4 +- frontend/src/language/no.json | 4 +- 5 files changed, 65 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/Pages/InspectionPage/InspectionSection.tsx b/frontend/src/components/Pages/InspectionPage/InspectionSection.tsx index 6ed393340..a3f689a36 100644 --- 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() const [selectedMissions, setSelectedMissions] = useState() const [isDialogOpen, setIsDialogOpen] = useState(false) - const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState(false) + const [unscheduledMissions, setUnscheduledMissions] = useState([]) + const [isAlreadyScheduled, setIsAlreadyScheduled] = useState(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} /> )} @@ -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 index 11c570666..d78b2aba4 100644 --- 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(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() const [isDialogOpen, setIsDialogOpen] = useState(false) const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState(false) + const [unscheduledMissions, setUnscheduledMissions] = useState([]) + const [isAlreadyScheduled, setIsAlreadyScheduled] = useState(false) const openDialog = () => { setIsDialogOpen(true) @@ -308,6 +313,9 @@ export function AllInspectionsTable({ inspections, scheduledMissions, ongoingMis } const closeDialog = () => { + setIsAlreadyScheduled(false) + setSelectedMissions([]) + setUnscheduledMissions([]) setIsDialogOpen(false) } @@ -315,6 +323,18 @@ export function AllInspectionsTable({ inspections, scheduledMissions, ongoingMis 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 index 85a992422..edac950a2 100644 --- a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialog.tsx +++ b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialog.tsx @@ -1,4 +1,4 @@ -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' @@ -6,8 +6,6 @@ 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 { @@ -15,7 +13,8 @@ interface IProps { 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(false) - const [isAlreadyScheduled, setIsAlreadyScheduled] = useState(false) const [selectedRobot, setSelectedRobot] = useState() const [robotOptions, setRobotOptions] = useState([]) - const [unscheduledMissions, setUnscheduledMissions] = useState([]) const anchorRef = useRef(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 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 => { {TranslateText('Add mission')} - {isAlreadyScheduled && ( + {props.isAlreadyScheduled && ( - {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')} )} @@ -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')} - {isAlreadyScheduled && props.missions.length > 1 && ( + {props.isAlreadyScheduled && props.unscheduledMissions.length > 0 && (