review: verifying if dashboard has default name

MTES-MCT · Oct 15, 2024 · 6e20d11 · 6e20d11
1 parent 0eacdff
commit 6e20d11
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Footer/index.tsx
@@ -12,20 +12,30 @@ export function Footer() {
   const dashboardForm = useAppSelector(state =>
     activeDashboardId ? state.dashboard.dashboards[activeDashboardId] : undefined
   )
-  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [updatedName, setUpdatedName] = useState<string | undefined>(dashboardForm?.dashboard.name)
   if (!dashboardForm) {
     return null
   }
 
   const save = () => {
     dispatch(saveDashboard({ ...dashboardForm.dashboard, name: updatedName ?? dashboardForm.dashboard.name }))
-    setIsModalOpen(false)
+    setIsDialogOpen(false)
+  }
+
+  const handleSave = () => {
+    const hasDefaultName =
+      dashboardForm.defaultName === dashboardForm.dashboard.name && !dashboardForm.dashboard.createdAt
+    if (hasDefaultName) {
+      setIsDialogOpen(true)
+    } else {
+      dispatch(saveDashboard({ ...dashboardForm.dashboard }))
+    }
   }
 
   return (
     <>
-      {isModalOpen && (
+      {isDialogOpen && (
         <Dialog isAbsolute>
           <Dialog.Title as="h2">Enregistrer le tableau de bord</Dialog.Title>
           <Dialog.Body $color={THEME.color.gunMetal}>
@@ -41,7 +51,7 @@ export function Footer() {
             />
           </Dialog.Body>
           <StyledDialogActions>
-            <Button accent={Accent.SECONDARY} onClick={() => setIsModalOpen(false)}>
+            <Button accent={Accent.SECONDARY} onClick={() => setIsDialogOpen(false)}>
               Annuler
             </Button>
             <Button Icon={Icon.Save} onClick={save}>
@@ -51,12 +61,7 @@ export function Footer() {
         </Dialog>
       )}
       <Wrapper>
-        <SaveButton
-          accent={Accent.SECONDARY}
-          disabled={!activeDashboardId}
-          Icon={Icon.Save}
-          onClick={() => setIsModalOpen(true)}
-        >
+        <SaveButton accent={Accent.SECONDARY} disabled={!activeDashboardId} Icon={Icon.Save} onClick={handleSave}>
           Enregistrer le tableau
         </SaveButton>
       </Wrapper>

diff --git a/frontend/src/features/Dashboard/slice.ts b/frontend/src/features/Dashboard/slice.ts
@@ -26,6 +26,7 @@ const initialDashboard: DashboardType = {
     reportings: [],
     vigilanceAreas: []
   },
+  defaultName: '',
   extractedArea: undefined,
   filters: {},
   isBannerDisplayed: false,
@@ -66,6 +67,7 @@ export type DashboardType = {
   ampIdsToDisplay: number[]
   controlUnitFilters: ControlUnitFilters
   dashboard: Dashboard.Dashboard
+  defaultName: string | undefined
   extractedArea?: Dashboard.ExtractedArea
   filters: DashboardFilters
   isBannerDisplayed: boolean
@@ -177,13 +179,18 @@ export const dashboardSlice = createSlice({
 
     createDashboard(
       state,
-      action: PayloadAction<{ dashboard: Dashboard.Dashboard; extractedArea: Dashboard.ExtractedArea }>
+      action: PayloadAction<{
+        dashboard: Dashboard.Dashboard
+        defaultName: string
+        extractedArea: Dashboard.ExtractedArea
+      }>
     ) {
       state.activeDashboardId = action.payload.dashboard.id
 
       state.dashboards[action.payload.dashboard.id] = {
         ...initialDashboard,
         dashboard: action.payload.dashboard,
+        defaultName: action.payload.defaultName,
         extractedArea: action.payload.extractedArea
       }
     },

diff --git a/frontend/src/features/Dashboard/useCases/createDashboard.ts b/frontend/src/features/Dashboard/useCases/createDashboard.ts
@@ -5,8 +5,8 @@ import { customDayjs, Level } from '@mtes-mct/monitor-ui'
 import { sideWindowPaths } from 'domain/entities/sideWindow'
 import { generatePath } from 'react-router'
 
-import { dashboardActions } from '../slice'
 import { closeDrawDashboard } from './closeDrawDashboard'
+import { dashboardActions } from '../slice'
 
 import type { HomeAppThunk } from '@store/index'
 import type { GeoJSON } from 'domain/types/GeoJSON'
@@ -20,8 +20,7 @@ export const createDashboard =
     if (data) {
       dispatch(closeDrawDashboard())
       const newId = `new-${Object.keys(getState().dashboard.dashboards).length}`
-      const date = customDayjs().format('DD/MM/YYYY')
-      const newDashboardName = `Tab ${date}`
+      const newDashboardName = `Tab ${customDayjs().format('DD/MM/YYYY')}`
       const dashboard = {
         amps: [],
         controlUnits: [],
@@ -33,7 +32,7 @@ export const createDashboard =
         reportings: [],
         vigilanceAreas: []
       }
-      dispatch(dashboardActions.createDashboard({ dashboard, extractedArea: data }))
+      dispatch(dashboardActions.createDashboard({ dashboard, defaultName: newDashboardName, extractedArea: data }))
       dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: newId })))
     }
     if (error) {