Add edit button in autoSchedule view

Author: Eddasol

frontend/src/pages/FrontPage/AutoScheduleSection/AutoScheduleCalendar.tsx

@@ -11,10 +11,13 @@ import { tokens } from '@equinor/eds-tokens'
 import { useNavigate } from 'react-router-dom'
 import { config } from 'config'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
-import { Button, Typography } from '@equinor/eds-core-react'
+import { Button, Icon, Typography } from '@equinor/eds-core-react'
 import { StyledDialog } from 'components/Styles/StyledComponents'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { useBackendApi } from 'api/UseBackendApi'
+import { Icons } from 'utils/icons'
+import { MissionSchedulingEditDialog } from 'components/Dialogs/MissionEditDialog'
+import { MissionDefinition } from 'models/MissionDefinition'
 
 const locales = { nb }
 const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales })
@@ -174,6 +177,13 @@ const StyledDialogActions = styled(StyledDialog.Actions)`
     gap: 6px;
 `
 
+const StyledEditButton = styled(Button)`
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    height: 25px;
+`
+
 const legendItems = [
     { color: CalendarColors.Planned, label: 'Planned today' },
     { color: CalendarColors.Future, label: 'Future missions' },
@@ -187,7 +197,8 @@ export const CalendarPro = () => {
     const { installationCode } = useAssetContext()
     const backendApi = useBackendApi()
     const navigate = useNavigate()
-    const [dialogOpen, setDialogOpen] = useState<boolean>(false)
+    const [skipDialogOpen, setSkipDialogOpen] = useState<boolean>(false)
+    const [selectedMissionToEdit, setSelectedMissionToEdit] = useState<MissionDefinition>()
     const [selectedEvent, setSelectedEvent] = useState<any>(null)
 
     const getTargetDate = (day: DaysOfWeek, time: string) => {
@@ -239,25 +250,29 @@ export const CalendarPro = () => {
             })
     }, [missionDefinitions])
 
-    const handleCloseDialog = () => {
-        setDialogOpen(false)
+    const handleCloseSkipDialog = () => {
+        setSkipDialogOpen(false)
     }
 
-    const handleSelectEvent = (event: any) => {
+    const handleSelectSkipEvent = (event: any) => {
         setSelectedEvent(event)
-        setDialogOpen(true)
+        setSkipDialogOpen(true)
+    }
+
+    const handleSelectEditEvent = (event: any) => {
+        setSelectedMissionToEdit(missionDefinitions.find((m) => m.id === event.metadata.missionId))
     }
 
     const handleAutoScheduleSkip = () => {
         if (selectedEvent) {
             backendApi.skipAutoScheduledMission(selectedEvent.metadata.missionId, selectedEvent.metadata.time)
         }
-        setDialogOpen(false)
+        setSkipDialogOpen(false)
         setSelectedEvent(null)
     }
 
-    const renderDialog = () => (
-        <StyledDialog open={dialogOpen} onClose={handleCloseDialog}>
+    const renderSkipDialog = () => (
+        <StyledDialog open={skipDialogOpen} onClose={handleCloseSkipDialog}>
             <StyledDialog.Header>
                 <Typography variant="h3">
                     {TranslateText('SkipAutoMission') + ' ' + TranslateText('Mission')}
@@ -270,7 +285,7 @@ export const CalendarPro = () => {
                 ])}
             </StyledDialog.Content>
             <StyledDialogActions>
-                <Button onClick={handleCloseDialog} variant="outlined" color="primary">
+                <Button onClick={handleCloseSkipDialog} variant="outlined" color="primary">
                     {TranslateText('Cancel')}
                 </Button>
                 <Button onClick={handleAutoScheduleSkip} variant="outlined" color="danger">
@@ -284,8 +299,11 @@ export const CalendarPro = () => {
         return (
             <StyledEvent>
                 <span>{event.title}</span>
+                <StyledEditButton variant="ghost_icon" onClick={() => handleSelectEditEvent(event)}>
+                    <Icon name={Icons.Edit} size={16} />
+                </StyledEditButton>
                 {event.skip && (
-                    <StyledSkipButton onClick={() => handleSelectEvent(event)}>
+                    <StyledSkipButton onClick={() => handleSelectSkipEvent(event)}>
                         {TranslateText('SkipAutoMission')}
                     </StyledSkipButton>
                 )}
@@ -352,7 +370,14 @@ export const CalendarPro = () => {
                     }
                 />
             </CalendarWrapper>
-            {dialogOpen && renderDialog()}
+            {skipDialogOpen && renderSkipDialog()}
+            {selectedMissionToEdit && (
+                <MissionSchedulingEditDialog
+                    mission={selectedMissionToEdit}
+                    isOpen={!!selectedMissionToEdit}
+                    onClose={() => setSelectedMissionToEdit(undefined)}
+                />
+            )}
         </>
     )
 }

frontend/src/pages/FrontPage/AutoScheduleSection/AutoScheduleMissionTableRow.tsx

@@ -12,12 +12,13 @@ import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { useBackendApi } from 'api/UseBackendApi'
+import { MissionSchedulingEditDialog } from 'components/Dialogs/MissionEditDialog'
 
 const StyledTableRow = styled.div`
     display: grid;
     align-items: center;
     gap: 1rem;
-    grid-template-columns: 100px auto 100px;
+    grid-template-columns: 100px auto 16px 100px;
 `
 
 const StyledDialogActions = styled(StyledDialog.Actions)`
@@ -79,7 +80,8 @@ export const AutoScheduleMissionTableRow = ({
     const { TranslateText } = useLanguageContext()
     const backendApi = useBackendApi()
     const { installationCode } = useAssetContext()
-    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false)
+    const [isSkipDialogOpen, setIsSkipDialogOpen] = useState<boolean>(false)
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false)
     const referenceElement = useRef<HTMLButtonElement>(null)
     const [isOpen, setIsOpen] = useState(false)
 
@@ -99,7 +101,7 @@ export const AutoScheduleMissionTableRow = ({
 
     const handleAutoScheduleSkip = () => {
         backendApi.skipAutoScheduledMission(mission.id, time)
-        setIsDialogOpen(false)
+        setIsSkipDialogOpen(false)
     }
 
     return (
@@ -143,20 +145,27 @@ export const AutoScheduleMissionTableRow = ({
                             </>
                         )}
                     </StyledMissionInfo>
+                    <Button
+                        style={{ maxWidth: '100px' }}
+                        variant="ghost_icon"
+                        onClick={() => setIsEditDialogOpen(true)}
+                    >
+                        <Icon name={Icons.Edit} size={16} color={typographyColor} />
+                    </Button>
                     {(missionStatusType === MissionStatusType.ScheduledJob ||
                         missionStatusType === MissionStatusType.SkippedJob) && (
                         <Button
                             style={{ maxWidth: '100px' }}
                             variant="ghost"
                             disabled={missionStatusType === MissionStatusType.SkippedJob}
-                            onClick={() => setIsDialogOpen(true)}
+                            onClick={() => setIsSkipDialogOpen(true)}
                         >
                             {missionStatusType === MissionStatusType.ScheduledJob
                                 ? TranslateText('SkipAutoMission')
                                 : TranslateText('Skipped')}
                         </Button>
                     )}
-                    <StyledDialog open={isDialogOpen}>
+                    <StyledDialog open={isSkipDialogOpen}>
                         <StyledDialog.Header>
                             <StyledDialog.Title>
                                 {TranslateText('SkipAutoMission') + ' ' + TranslateText('Mission')}
@@ -171,14 +180,19 @@ export const AutoScheduleMissionTableRow = ({
                             </Typography>
                         </StyledDialog.CustomContent>
                         <StyledDialogActions>
-                            <Button onClick={() => setIsDialogOpen(false)} variant="outlined" color="primary">
+                            <Button onClick={() => setIsSkipDialogOpen(false)} variant="outlined" color="primary">
                                 {TranslateText('Close')}
                             </Button>
                             <Button onClick={handleAutoScheduleSkip} variant="outlined" color="danger">
                                 {TranslateText('SkipAutoMission')}
                             </Button>
                         </StyledDialogActions>
                     </StyledDialog>
+                    <MissionSchedulingEditDialog
+                        mission={mission}
+                        isOpen={isEditDialogOpen}
+                        onClose={() => setIsEditDialogOpen(false)}
+                    />
                 </StyledTableRow>
             </Table.Cell>
         </Table.Row>