From 6d9718b11d0dd40fae8b9d4997cdb676f5cae887 Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 29 Jan 2025 10:20:46 +0100 Subject: [PATCH 1/5] Correct InspectionReportPage folder name --- .../InspectionStyles.tsx | 0 .../InspectionView.tsx | 0 frontend/src/components/Pages/MissionPage/MissionPage.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename frontend/src/components/Pages/{InspectionReportPage.tsx => InspectionReportPage}/InspectionStyles.tsx (100%) rename frontend/src/components/Pages/{InspectionReportPage.tsx => InspectionReportPage}/InspectionView.tsx (100%) diff --git a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx similarity index 100% rename from frontend/src/components/Pages/InspectionReportPage.tsx/InspectionStyles.tsx rename to frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx diff --git a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx similarity index 100% rename from frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx rename to frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 800abdaa..44a2ee23 100644 --- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx +++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx @@ -17,7 +17,7 @@ import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext' import { tokens } from '@equinor/eds-tokens' import { StyledPage } from 'components/Styles/StyledComponents' -import { InspectionDialogView, InspectionsViewSection } from '../InspectionReportPage.tsx/InspectionView' +import { InspectionDialogView, InspectionsViewSection } from '../InspectionReportPage/InspectionView' import { useInspectionsContext } from 'components/Contexts/InpectionsContext' import { Typography } from '@equinor/eds-core-react' From cbf8f62c78dc0d199fb5183f8d1038bb1c9826e4 Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 29 Jan 2025 10:32:25 +0100 Subject: [PATCH 2/5] Improve readability of InspectionView --- .../InspectionReportPage/InspectionView.tsx | 123 +++++++++--------- .../Pages/MissionPage/MissionPage.tsx | 2 +- 2 files changed, 60 insertions(+), 65 deletions(-) diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx index 0f715775..8f08293c 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx @@ -26,15 +26,15 @@ import { BackendAPICaller } from 'api/ApiCaller' import { useQuery } from '@tanstack/react-query' interface InspectionDialogViewProps { - task: Task + selectedTask: Task tasks: Task[] } -export const InspectionDialogView = ({ task, tasks }: InspectionDialogViewProps) => { +export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogViewProps) => { const { TranslateText } = useLanguageContext() const { installationName } = useInstallationContext() const { switchSelectedInspectionTask } = useInspectionsContext() - const { data } = FetchImageData(task) + const { data } = fetchImageData(selectedTask) const closeDialog = () => { switchSelectedInspectionTask(undefined) @@ -63,23 +63,23 @@ export const InspectionDialogView = ({ task, tasks }: InspectionDialogViewProps) {TranslateText('Tag') + ':'} - {task.tagId} + {selectedTask.tagId} - {task.description && ( + {selectedTask.description && ( {TranslateText('Description') + ':'} - {task.description} + {selectedTask.description} )} - {task.endTime && ( + {selectedTask.endTime && ( {TranslateText('Timestamp') + ':'} - {formatDateTime(task.endTime, 'dd.MM.yy - HH:mm')} + {formatDateTime(selectedTask.endTime, 'dd.MM.yy - HH:mm')} )} @@ -104,66 +104,64 @@ export const InspectionsViewSection = ({ tasks, dialogView }: InspectionsViewSec const { switchSelectedInspectionTask } = useInspectionsContext() return ( - <> - - {!dialogView && {TranslateText('Last completed inspection')}} - - - {Object.keys(tasks).length > 0 && - tasks.map( - (task) => - task.status === TaskStatus.Successful && ( - switchSelectedInspectionTask(task)} - > - - - {task.tagId && ( - - - {TranslateText('Tag') + ':'} - - {task.tagId} - - )} - {task.endTime && ( - - - {TranslateText('Timestamp') + ':'} - - - {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} - - - )} - - - ) - )} - - - - + + {!dialogView && {TranslateText('Last completed inspection')}} + + + {Object.keys(tasks).length > 0 && + tasks.map( + (task) => + task.status === TaskStatus.Successful && ( + switchSelectedInspectionTask(task)} + > + + + {task.tagId && ( + + + {TranslateText('Tag') + ':'} + + {task.tagId} + + )} + {task.endTime && ( + + + {TranslateText('Timestamp') + ':'} + + + {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} + + + )} + + + ) + )} + + + ) } -const FetchImageData = (task: Task) => { +const fetchImageData = (task: Task) => { const data = useQuery({ queryKey: ['fetchInspectionData', task.isarTaskId], queryFn: async () => { const imageBlob = await BackendAPICaller.getInspection(task.inspection.isarInspectionId) return URL.createObjectURL(imageBlob) }, - retryDelay: 60 * 1000, // Will always wait 1 min to retry, regardless of how many retries - staleTime: 10 * 60 * 1000, // I don't want an API call for 10 min after the first time I get data + retryDelay: 60 * 1000, // Waits 1 min before retrying, regardless of how many retries + staleTime: 10 * 60 * 1000, // If data is received, stale time is 10 min before making new API call enabled: task.status === TaskStatus.Successful && task.isarTaskId !== undefined && @@ -172,11 +170,8 @@ const FetchImageData = (task: Task) => { return data } -interface IGetInspectionImageProps { - task: Task -} -const GetInspectionImage = ({ task }: IGetInspectionImageProps) => { - const { data } = FetchImageData(task) +const GetInspectionImage = ({ task }: { task: Task }) => { + const { data } = fetchImageData(task) return <>{data !== undefined && } } diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 44a2ee23..7dc60469 100644 --- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx +++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx @@ -145,7 +145,7 @@ export const MissionPage = () => { )} {selectedInspectionTask && selectedInspectionTask.isarTaskId && ( - + )} From 8d8058bcaf7edcc307e297342eaebf377b2aee1a Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 29 Jan 2025 10:43:06 +0100 Subject: [PATCH 3/5] Split into smaller files --- .../InspectionOverview.tsx | 73 ++++++++++++++ .../InspectionReportUtilities.tsx | 26 +++++ .../InspectionReportPage/InspectionView.tsx | 97 +------------------ .../Pages/MissionPage/MissionPage.tsx | 5 +- 4 files changed, 106 insertions(+), 95 deletions(-) create mode 100644 frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx create mode 100644 frontend/src/components/Pages/InspectionReportPage/InspectionReportUtilities.tsx diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx new file mode 100644 index 00000000..9ed341a4 --- /dev/null +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx @@ -0,0 +1,73 @@ +import { useInspectionsContext } from 'components/Contexts/InpectionsContext' +import { useLanguageContext } from 'components/Contexts/LanguageContext' +import { Task, TaskStatus } from 'models/Task' +import { + StyledImageCard, + StyledImagesSection, + StyledInspectionCards, + StyledInspectionContent, + StyledInspectionData, + StyledSection, +} from './InspectionStyles' +import { Typography } from '@equinor/eds-core-react' +import { GetInspectionImage } from './InspectionReportUtilities' +import { formatDateTime } from 'utils/StringFormatting' + +interface InspectionsOverviewProps { + tasks: Task[] + dialogView?: boolean | undefined +} + +export const InspectionOverview = ({ tasks, dialogView }: InspectionsOverviewProps) => { + const { TranslateText } = useLanguageContext() + const { switchSelectedInspectionTask } = useInspectionsContext() + + return ( + + {!dialogView && {TranslateText('Last completed inspection')}} + + + {Object.keys(tasks).length > 0 && + tasks.map( + (task) => + task.status === TaskStatus.Successful && ( + switchSelectedInspectionTask(task)} + > + + + {task.tagId && ( + + + {TranslateText('Tag') + ':'} + + {task.tagId} + + )} + {task.endTime && ( + + + {TranslateText('Timestamp') + ':'} + + + {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} + + + )} + + + ) + )} + + + + ) +} diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionReportUtilities.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionReportUtilities.tsx new file mode 100644 index 00000000..fb7626e1 --- /dev/null +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionReportUtilities.tsx @@ -0,0 +1,26 @@ +import { useQuery } from '@tanstack/react-query' +import { BackendAPICaller } from 'api/ApiCaller' +import { Task, TaskStatus } from 'models/Task' +import { StyledInspectionImage } from './InspectionStyles' + +export const fetchImageData = (task: Task) => { + const data = useQuery({ + queryKey: ['fetchInspectionData', task.isarTaskId], + queryFn: async () => { + const imageBlob = await BackendAPICaller.getInspection(task.inspection.isarInspectionId) + return URL.createObjectURL(imageBlob) + }, + retryDelay: 60 * 1000, // Waits 1 min before retrying, regardless of how many retries + staleTime: 10 * 60 * 1000, // If data is received, stale time is 10 min before making new API call + enabled: + task.status === TaskStatus.Successful && + task.isarTaskId !== undefined && + task.inspection.isarInspectionId !== undefined, + }) + return data +} + +export const GetInspectionImage = ({ task }: { task: Task }) => { + const { data } = fetchImageData(task) + return <>{data !== undefined && } +} diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx index 8f08293c..b57dd4f4 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx @@ -1,5 +1,5 @@ import { Icon, Typography } from '@equinor/eds-core-react' -import { Task, TaskStatus } from 'models/Task' +import { Task } from 'models/Task' import { useInstallationContext } from 'components/Contexts/InstallationContext' import { Icons } from 'utils/icons' import { useLanguageContext } from 'components/Contexts/LanguageContext' @@ -12,18 +12,11 @@ import { StyledDialogContent, StyledDialogHeader, StyledDialogInspectionView, - StyledImageCard, - StyledImagesSection, StyledInfoContent, StyledInspection, - StyledInspectionCards, - StyledInspectionContent, - StyledInspectionData, - StyledInspectionImage, - StyledSection, } from './InspectionStyles' -import { BackendAPICaller } from 'api/ApiCaller' -import { useQuery } from '@tanstack/react-query' +import { InspectionOverview } from './InspectionOverview' +import { fetchImageData } from './InspectionReportUtilities' interface InspectionDialogViewProps { selectedTask: Task @@ -85,7 +78,7 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi )} - + @@ -93,85 +86,3 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi ) } - -interface InspectionsViewSectionProps { - tasks: Task[] - dialogView?: boolean | undefined -} - -export const InspectionsViewSection = ({ tasks, dialogView }: InspectionsViewSectionProps) => { - const { TranslateText } = useLanguageContext() - const { switchSelectedInspectionTask } = useInspectionsContext() - - return ( - - {!dialogView && {TranslateText('Last completed inspection')}} - - - {Object.keys(tasks).length > 0 && - tasks.map( - (task) => - task.status === TaskStatus.Successful && ( - switchSelectedInspectionTask(task)} - > - - - {task.tagId && ( - - - {TranslateText('Tag') + ':'} - - {task.tagId} - - )} - {task.endTime && ( - - - {TranslateText('Timestamp') + ':'} - - - {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} - - - )} - - - ) - )} - - - - ) -} - -const fetchImageData = (task: Task) => { - const data = useQuery({ - queryKey: ['fetchInspectionData', task.isarTaskId], - queryFn: async () => { - const imageBlob = await BackendAPICaller.getInspection(task.inspection.isarInspectionId) - return URL.createObjectURL(imageBlob) - }, - retryDelay: 60 * 1000, // Waits 1 min before retrying, regardless of how many retries - staleTime: 10 * 60 * 1000, // If data is received, stale time is 10 min before making new API call - enabled: - task.status === TaskStatus.Successful && - task.isarTaskId !== undefined && - task.inspection.isarInspectionId !== undefined, - }) - return data -} - - -const GetInspectionImage = ({ task }: { task: Task }) => { - const { data } = fetchImageData(task) - return <>{data !== undefined && } -} diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 7dc60469..4478fc9f 100644 --- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx +++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx @@ -17,9 +17,10 @@ import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext' import { tokens } from '@equinor/eds-tokens' import { StyledPage } from 'components/Styles/StyledComponents' -import { InspectionDialogView, InspectionsViewSection } from '../InspectionReportPage/InspectionView' +import { InspectionDialogView } from '../InspectionReportPage/InspectionView' import { useInspectionsContext } from 'components/Contexts/InpectionsContext' import { Typography } from '@equinor/eds-core-react' +import { InspectionOverview } from '../InspectionReportPage/InspectionOverview' const StyledMissionPage = styled(StyledPage)` background-color: ${tokens.colors.ui.background__light.hex}; @@ -147,7 +148,7 @@ export const MissionPage = () => { {selectedInspectionTask && selectedInspectionTask.isarTaskId && ( )} - + )} From 396b47f1134333b65f14e4b4ee0234489952afa7 Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 29 Jan 2025 11:37:28 +0100 Subject: [PATCH 4/5] Split into smaller functions --- .../InspectionOverview.tsx | 108 ++++++++++-------- .../InspectionReportPage/InspectionView.tsx | 4 +- .../Pages/MissionPage/MissionPage.tsx | 4 +- 3 files changed, 66 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx index 9ed341a4..13c60696 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx @@ -13,61 +13,77 @@ import { Typography } from '@equinor/eds-core-react' import { GetInspectionImage } from './InspectionReportUtilities' import { formatDateTime } from 'utils/StringFormatting' -interface InspectionsOverviewProps { - tasks: Task[] - dialogView?: boolean | undefined +const InspectionOverview = ({ tasks }: { tasks: Task[] }) => { + const { TranslateText } = useLanguageContext() + const { switchSelectedInspectionTask } = useInspectionsContext() + + return ( + + + {Object.keys(tasks).length > 0 && + tasks.map( + (task) => + task.status === TaskStatus.Successful && ( + switchSelectedInspectionTask(task)} + > + + + {task.tagId && ( + + {TranslateText('Tag') + ':'} + {task.tagId} + + )} + {task.endTime && ( + + + {TranslateText('Timestamp') + ':'} + + + {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} + + + )} + + + ) + )} + + + ) } -export const InspectionOverview = ({ tasks, dialogView }: InspectionsOverviewProps) => { +export const InspectionOverviewSection = ({ tasks }: { tasks: Task[] }) => { const { TranslateText } = useLanguageContext() - const { switchSelectedInspectionTask } = useInspectionsContext() return ( + {TranslateText('Last completed inspection')} + + + ) +} + +export const InspectionOverviewDialogView = ({ tasks }: { tasks: Task[] }) => { + return ( + - {!dialogView && {TranslateText('Last completed inspection')}} - - - {Object.keys(tasks).length > 0 && - tasks.map( - (task) => - task.status === TaskStatus.Successful && ( - switchSelectedInspectionTask(task)} - > - - - {task.tagId && ( - - - {TranslateText('Tag') + ':'} - - {task.tagId} - - )} - {task.endTime && ( - - - {TranslateText('Timestamp') + ':'} - - - {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')} - - - )} - - - ) - )} - - + ) } diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx index b57dd4f4..b2c6514f 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx @@ -15,7 +15,7 @@ import { StyledInfoContent, StyledInspection, } from './InspectionStyles' -import { InspectionOverview } from './InspectionOverview' +import { InspectionOverviewDialogView } from './InspectionOverview' import { fetchImageData } from './InspectionReportUtilities' interface InspectionDialogViewProps { @@ -78,7 +78,7 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi )} - + diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx index 4478fc9f..e26906e4 100644 --- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx +++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx @@ -20,7 +20,7 @@ import { StyledPage } from 'components/Styles/StyledComponents' import { InspectionDialogView } from '../InspectionReportPage/InspectionView' import { useInspectionsContext } from 'components/Contexts/InpectionsContext' import { Typography } from '@equinor/eds-core-react' -import { InspectionOverview } from '../InspectionReportPage/InspectionOverview' +import { InspectionOverviewSection } from '../InspectionReportPage/InspectionOverview' const StyledMissionPage = styled(StyledPage)` background-color: ${tokens.colors.ui.background__light.hex}; @@ -148,7 +148,7 @@ export const MissionPage = () => { {selectedInspectionTask && selectedInspectionTask.isarTaskId && ( )} - + )} From e1de8a7227c13ec073ee7b621aa8e2673ec7f66a Mon Sep 17 00:00:00 2001 From: Eddasol Date: Wed, 29 Jan 2025 11:46:45 +0100 Subject: [PATCH 5/5] Reduce inline styling --- .../InspectionOverview.tsx | 25 +++++-------------- .../InspectionReportPage/InspectionStyles.tsx | 13 ++++++++-- 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx index 13c60696..83124011 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx @@ -7,7 +7,8 @@ import { StyledInspectionCards, StyledInspectionContent, StyledInspectionData, - StyledSection, + StyledInspectionOverviewDialogView, + StyledInspectionOverviewSection, } from './InspectionStyles' import { Typography } from '@equinor/eds-core-react' import { GetInspectionImage } from './InspectionReportUtilities' @@ -59,31 +60,17 @@ export const InspectionOverviewSection = ({ tasks }: { tasks: Task[] }) => { const { TranslateText } = useLanguageContext() return ( - + {TranslateText('Last completed inspection')} - + ) } export const InspectionOverviewDialogView = ({ tasks }: { tasks: Task[] }) => { return ( - + - + ) } diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx index 2d15a5f5..97d1bece 100644 --- a/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx +++ b/frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx @@ -60,7 +60,7 @@ export const StyledInfoContent = styled.div` align-items: flex-start; ` -export const StyledSection = styled.div` +export const StyledInspectionOverviewSection = styled.div` display: flex; padding: 24px; min-width: 240px; @@ -68,8 +68,17 @@ export const StyledSection = styled.div` align-items: flex-start; gap: 8px; border-radius: 6px; - border: 1.194px solid ${tokens.colors.ui.background__medium.hex}; + border: 1px solid ${tokens.colors.ui.background__medium.hex}; background: ${tokens.colors.ui.background__default.hex}; +` + +export const StyledInspectionOverviewDialogView = styled.div` + display: flex; + max-height: 60vh; + width: 350px; + flex-direction: column; + align-items: flex-start; + gap: 8px; overflow-y: scroll; `