various fixes

MTES-MCT · Dec 2, 2024 · fa1ca0b · fa1ca0b
1 parent be02bf5
commit fa1ca0b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 33 deletions.
diff --git a/frontend/src/v2/features/common/components/elements/export-file-button.tsx b/frontend/src/v2/features/common/components/elements/export-file-button.tsx
@@ -1,8 +1,6 @@
-import { Mission } from '@common/types/mission-types.ts'
 import React from 'react'
 import { Accent, Button, ButtonProps, Icon, THEME } from '@mtes-mct/monitor-ui'
 import GearIcon from '@rsuite/icons/Gear'
-import { useMissionAEMExport } from '../../hooks/use-mission-aem-export.tsx'
 
 type ExportFileButtonProps = ButtonProps & {
   isLoading: boolean
@@ -29,7 +27,6 @@ const ExportFileButton: React.FC<ExportFileButtonProps> = ({ onClick, isLoading,
       {...props}
       accent={Accent.PRIMARY}
       Icon={isLoading ? LoadingIcon : Icon.Download}
-      style={{ position: 'absolute', right: '20px' }}
       onClick={() => triggerExport()}
       data-testid={'export-btn'}
     >

diff --git a/frontend/src/v2/features/common/hooks/use-download-file.tsx b/frontend/src/v2/features/common/hooks/use-download-file.tsx
@@ -4,46 +4,51 @@ import * as Sentry from '@sentry/react'
 export enum BLOBTYPE {
   ODS = 'application/vnd.oasis.opendocument.spreadsheet',
   ODT = 'application/vnd.oasis.opendocument.text',
-  ZIP = 'application/zip'
+  ZIP = 'application/zip',
+  DEFAULT = 'application/octet-stream'
 }
 
 interface DownloadFileHook {
-  handleDownload: (blobType: string, fileToDownload?: MissionExport) => Promise<void>
+  handleDownload: (blobType: BLOBTYPE, fileToDownload?: MissionExport) => Promise<void>
 }
 
 export function useDownloadFile(): DownloadFileHook {
-  const handleDownload = async (blobType: string, fileToDownload?: MissionExport) => {
-    if (!fileToDownload) return
+  const handleDownload = async (blobType: BLOBTYPE, fileToDownload?: MissionExport) => {
+    if (!fileToDownload) {
+      console.warn('No file provided for download.')
+      return
+    }
 
     try {
       const { fileContent, fileName } = fileToDownload
 
-      // Decode Base64
+      // Decode Base64 string to binary data
       const decodedContent = atob(fileContent)
 
-      // Convert to Uint8Array
+      // Convert binary string to Uint8Array
       const uint8Array = new Uint8Array(decodedContent.length)
       for (let i = 0; i < decodedContent.length; i++) {
         uint8Array[i] = decodedContent.charCodeAt(i)
       }
 
-      // Create Blob
-      const blob = new Blob([uint8Array], { type: blobType || 'application/octet-stream' })
+      // Create a Blob object for the file
+      const blob = new Blob([uint8Array], { type: blobType || BLOBTYPE.DEFAULT })
 
-      // Create temporary link and trigger download
+      // Generate a temporary URL for the Blob
       const url = window.URL.createObjectURL(blob)
+
+      // Create an anchor element and trigger the download
       const link = document.createElement('a')
       link.href = url
-      link.download = fileName
-
+      link.download = fileName || 'download'
       document.body.appendChild(link)
       link.click()
       document.body.removeChild(link)
 
-      // Revoke Object URL to prevent memory leaks
+      // Revoke the Blob URL to release memory
       window.URL.revokeObjectURL(url)
     } catch (error) {
-      console.error('handleDownload error:', { error, fileToDownload })
+      console.error('Error during file download:', { error, fileToDownload })
       Sentry.captureException(error)
     }
   }

diff --git a/frontend/src/v2/features/pam/components/element/mission-list-export.tsx b/frontend/src/v2/features/pam/components/element/mission-list-export.tsx
@@ -120,22 +120,34 @@ const MissionListExportDialog: FC<MissionListExportDialogProps> = ({
           </Stack.Item>
         </Stack>
       </Dialog.Body>
-      <Dialog.Action style={{ justifyContent: 'flex-end', paddingRight: '1.5rem' }}>
-        <Button
-          accent={Accent.SECONDARY}
-          size={Size.NORMAL}
-          onClick={toggleDialog}
-          Icon={() => <svg height={20} width={0} />}
+      <Dialog.Action>
+        <Stack
+          direction={'row'}
+          style={{ width: '100%' }}
+          justifyContent={'flex-end'}
+          alignItems={'center'}
+          spacing={'1rem'}
         >
-          Annuler
-        </Button>
-        <ExportFileButton
-          onClick={() => onExport()}
-          disabled={(!exportAsZip && !mainMissionId) || exportInProgress}
-          isLoading={exportInProgress}
-          label={'Exporter'}
-          accent={Accent.PRIMARY}
-        />
+          <Stack.Item>
+            <Button
+              accent={Accent.SECONDARY}
+              size={Size.NORMAL}
+              onClick={toggleDialog}
+              Icon={() => <svg height={20} width={0} />}
+            >
+              Annuler
+            </Button>
+          </Stack.Item>
+          <Stack.Item>
+            <ExportFileButton
+              onClick={() => onExport()}
+              disabled={(!exportAsZip && !mainMissionId) || exportInProgress}
+              isLoading={exportInProgress}
+              label={'Exporter'}
+              accent={Accent.PRIMARY}
+            />
+          </Stack.Item>
+        </Stack>
       </Dialog.Action>
     </Dialog>
   )

diff --git a/frontend/src/v2/features/pam/components/element/mission-list-pam.tsx b/frontend/src/v2/features/pam/components/element/mission-list-pam.tsx
@@ -21,14 +21,15 @@ const groupMissionsByMonth = (missions: Mission[]) => {
 
   missions.forEach(mission => {
     const startDate = new Date(mission.startDateTimeUtc)
-    const monthKey = `${startDate.getFullYear()}-${startDate.getMonth()}` // Unique key for each month
+    const monthKey = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}`
     if (!grouped[monthKey]) {
       grouped[monthKey] = []
     }
     grouped[monthKey].push(mission)
   })
 
-  return Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)) // Sort by monthKey
+  // Sort by monthKey in descending order and return as array of [key, missions]
+  return Object.entries(grouped).sort(([a], [b]) => b.localeCompare(a))
 }
 
 const MissionListPam: React.FC<MissionListPamProps> = ({ missions, dateRangeNavigator }) => {