Skip to content

Commit

Permalink
refacto front
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximeperrault
maximeperrault committed Oct 18, 2024
1 parent c04e73b commit ee917b0
Show file tree
Hide file tree
Showing 13 changed files with 134 additions and 148 deletions.
17 changes: 10 additions & 7 deletions ...rc/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/endpoints/bff/v1/Dashboards.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ import io.swagger.v3.oas.annotations.Operation
import io.swagger.v3.oas.annotations.tags.Tag
import jakarta.websocket.server.PathParam
import org.locationtech.jts.io.WKTReader
import org.springframework.http.HttpStatus
import org.springframework.http.ResponseEntity
import org.springframework.web.bind.annotation.*
import java.util.*
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.PathVariable
import org.springframework.web.bind.annotation.PutMapping
import org.springframework.web.bind.annotation.RequestBody
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RequestParam
import org.springframework.web.bind.annotation.RestController
import java.util.UUID

@RestController
@RequestMapping("/bff/v1/dashboards")
Expand Down Expand Up @@ -60,8 +64,7 @@ class Dashboards(
@PathParam("Dashboard id")
@PathVariable(name = "dashboardId")
dashboardId: UUID,
): ResponseEntity<DashboardDataOutput> {
return ResponseEntity.status(HttpStatus.OK)
.body(fromDashboardEntity(getDashboard.execute(dashboardId)))
): DashboardDataOutput {
return fromDashboardEntity(getDashboard.execute(dashboardId))
}
}
4 changes: 2 additions & 2 deletions frontend/src/api/dashboardsAPI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { monitorenvPrivateApi } from './api'
import type { Dashboard } from '@features/Dashboard/types'
import type { GeoJSON } from 'domain/types/GeoJSON'

const GET_DASHBOARDS_ERROR_MESSAGE = "Nous n'avons pas pu créer la liste des tableaux de bord"
const GET_DASHBOARD_ERROR_MESSAGE = "Nous n'avons pas pu créer les tableau de bord"
const GET_DASHBOARDS_ERROR_MESSAGE = "Nous n'avons pas pu récupérer la liste des tableaux de bord"
const GET_DASHBOARD_ERROR_MESSAGE = "Nous n'avons pas pu récupérer le tableau de bord"

export const dashboardsAPI = monitorenvPrivateApi.injectEndpoints({
endpoints: build => ({
Expand Down
5 changes: 1 addition & 4 deletions frontend/src/api/reportingsAPI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,6 @@ export const reportingsAPI = monitorenvPrivateApi.injectEndpoints({
transformResponse: (response: Reporting[]) => ReportingAdapter.setAll(initialState, response)
}),
getReportingsByIds: build.query<EntityState<Reporting, number | string>, number[]>({
providesTags: result =>
result?.ids
? [{ id: 'LIST', type: 'Reportings' }, ...result.ids.map(id => ({ id, type: 'Reportings' as const }))]
: [{ id: 'LIST', type: 'Reportings' }],
query: ids => ({ body: ids, method: 'POST', url: '/v1/reportings' }),
transformResponse: (response: Reporting[]) => ReportingAdapter.setAll(initialState, response)
}),
Expand All @@ -103,6 +99,7 @@ export const {
useCreateReportingMutation,
useDeleteReportingMutation,
useGetReportingQuery,
useGetReportingsByIdsQuery,
useGetReportingsQuery,
useUpdateReportingMutation
} = reportingsAPI
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/features/Dashboard/components/DashboardForm/DashboardForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das

const { data: controlUnits } = useGetControlUnitsQuery(undefined, RTK_DEFAULT_QUERY_OPTIONS)
const activeControlUnits = useMemo(() => controlUnits?.filter(isNotArchived), [controlUnits])
const selectedReportings =
dashboard.extractedArea?.reportings.filter(reporting => dashboard.dashboard.reportings.includes(+reporting.id)) ??
[]

const firstColumnRef = useRef<HTMLDivElement>(null)
const firstColumnWidth = firstColumnRef.current?.clientWidth ?? 0
Expand Down Expand Up @@ -133,7 +136,7 @@ export function DashboardForm({ dashboardForm: [key, dashboard], isActive }: Das
isExpanded={expandedAccordionSecondColumn === Dashboard.Block.REPORTINGS}
isSelectedAccordionOpen={previewSelectionFilter}
reportings={filteredReportings ?? []}
selectedReportings={dashboard.dashboard.reportings}
selectedReportings={selectedReportings}
setExpandedAccordion={() => handleAccordionClick(Dashboard.Block.REPORTINGS)}
/>
</Column>
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/features/Dashboard/components/DashboardForm/Reportings/Layer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { dashboardActions } from '@features/Dashboard/slice'
import { Dashboard } from '@features/Dashboard/types'
import { StatusActionTag } from '@features/Reportings/components/StatusActionTag'
import { getFormattedReportingId, getTargetDetailsSubText, getTargetName } from '@features/Reportings/utils'
import { useAppDispatch } from '@hooks/useAppDispatch'
Expand Down Expand Up @@ -49,10 +50,10 @@ export function Layer({ isPinned = false, isSelected = false, reporting }: Repor
e.stopPropagation()

if (isPinned) {
dispatch(dashboardActions.removeReporting(reporting))
dispatch(dashboardActions.removeItems({ itemIds: [+reporting.id], type: Dashboard.Block.REPORTINGS }))
dispatch(dashboardActions.setSelectedReporting(undefined))
} else {
dispatch(dashboardActions.addReporting(reporting))
dispatch(dashboardActions.addItems({ itemIds: [+reporting.id], type: Dashboard.Block.REPORTINGS }))

focus(e)
}
Expand All @@ -75,7 +76,7 @@ export function Layer({ isPinned = false, isSelected = false, reporting }: Repor
const remove = e => {
e.stopPropagation()

dispatch(dashboardActions.removeReporting(reporting))
dispatch(dashboardActions.removeItems({ itemIds: [+reporting.id], type: Dashboard.Block.REPORTINGS }))
}

const reportingStatusFlag = useMemo(() => {
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/features/Dashboard/components/Layers/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useGetAMPsQuery } from '@api/ampsAPI'
import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
import { useGetReportingsByIdsQuery } from '@api/reportingsAPI'
import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
import { getDashboardById } from '@features/Dashboard/slice'
import { getAMPFeature } from '@features/map/layers/AMP/AMPGeometryHelpers'
Expand Down Expand Up @@ -31,14 +32,12 @@ export function DashboardLayer({ map }: BaseMapChildrenProps) {

const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)

const dashboard = useAppSelector(state => getDashboardById(state.dashboard, activeDashboardId))
const { data: reportings } = useGetReportingsByIdsQuery(dashboard?.dashboard.reportings ?? [])
const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
const { data: ampLayers } = useGetAMPsQuery()
const { data: vigilanceAreas } = useGetVigilanceAreasQuery()

const geom = useAppSelector(state =>
activeDashboardId ? state.dashboard.dashboards?.[activeDashboardId]?.dashboard.geom : undefined
)
const dashboard = useAppSelector(state => getDashboardById(state.dashboard, activeDashboardId))
const openPanel = dashboard?.openPanel
const activeDashboard = dashboard?.dashboard

Expand Down Expand Up @@ -133,8 +132,8 @@ export function DashboardLayer({ map }: BaseMapChildrenProps) {
}

// Reportings
if (activeDashboard.reportings) {
const features = activeDashboard.reportings.reduce((feats: Feature[], reporting) => {
if (reportings) {
const features = Object.values(reportings?.entities ?? []).reduce((feats: Feature[], reporting) => {
if (reporting.geom) {
const feature = getReportingZoneFeature(reporting, Dashboard.featuresCode.DASHBOARD_REPORTINGS)
feature.setStyle(editingReportingStyleFn)
Expand All @@ -148,10 +147,10 @@ export function DashboardLayer({ map }: BaseMapChildrenProps) {
}
}

if (geom) {
if (dashboard?.dashboard.geom) {
const dashboardAreaFeature = new GeoJSON({
featureProjection: OPENLAYERS_PROJECTION
}).readFeature(geom)
}).readFeature(dashboard?.dashboard.geom)
dashboardAreaFeature.setStyle([measurementStyle, measurementStyleWithCenter])

layersVectorSourceRef.current.addFeature(dashboardAreaFeature)
Expand All @@ -160,7 +159,6 @@ export function DashboardLayer({ map }: BaseMapChildrenProps) {
}, [
activeDashboard,
ampLayers?.entities,
geom,
activeDashboard?.amps,
activeDashboard?.regulatoryAreas,
activeDashboard?.reportings,
Expand All @@ -169,7 +167,9 @@ export function DashboardLayer({ map }: BaseMapChildrenProps) {
openPanel?.id,
openPanel?.type,
regulatoryLayers,
vigilanceAreas?.entities
vigilanceAreas?.entities,
reportings,
dashboard?.dashboard.geom
])

useEffect(() => {
Expand Down
38 changes: 7 additions & 31 deletions frontend/src/features/Dashboard/slice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,8 @@ export const dashboardSlice = createSlice({
]
break
case Dashboard.Block.REPORTINGS:
state.dashboards[id].dashboard.reportings = [...state.dashboards[id].dashboard.reportings, ...itemIds]
break
case Dashboard.Block.COMMENTS:
case Dashboard.Block.TERRITORIAL_PRESSURE:
default:
Expand All @@ -162,18 +164,6 @@ export const dashboardSlice = createSlice({
const regulatoryIds = state.dashboards[id]?.regulatoryIdsToDisplay
state.dashboards[id].regulatoryIdsToDisplay = [...regulatoryIds, action.payload]
},
addReporting(state, action: PayloadAction<Reporting>) {
const reporting = action.payload
const id = state.activeDashboardId
if (!id) {
return
}

if (state.dashboards[id]) {
const selectedReportings = state.dashboards[id].dashboard.reportings
state.dashboards[id].dashboard.reportings = [...selectedReportings, reporting]
}
},
createDashboard(
state,
action: PayloadAction<{
Expand Down Expand Up @@ -260,6 +250,10 @@ export const dashboardSlice = createSlice({
)
break
case Dashboard.Block.REPORTINGS:
state.dashboards[id].dashboard.reportings = state.dashboards[id].dashboard.reportings.filter(
item => !itemIds.includes(item)
)
break
case Dashboard.Block.COMMENTS:
case Dashboard.Block.TERRITORIAL_PRESSURE:
default:
Expand All @@ -279,21 +273,6 @@ export const dashboardSlice = createSlice({
)
}
},
removeReporting(state, action: PayloadAction<Reporting>) {
const reporting = action.payload
const id = state.activeDashboardId

if (!id) {
return
}

if (state.dashboards[id]) {
const selectedReportings = state.dashboards[id].dashboard.reportings
state.dashboards[id].dashboard.reportings = selectedReportings.filter(
selectedReporting => selectedReporting.id !== reporting.id
)
}
},
removeTab(state, action: PayloadAction<string>) {
const dashboard = state.dashboards[action.payload]
if (dashboard) {
Expand Down Expand Up @@ -427,11 +406,8 @@ export const dashboardSlice = createSlice({
if (activeDashboardId) {
const dashboard = state.dashboards[activeDashboardId]
if (dashboard) {
const reportings = dashboard.extractedArea?.reportings
const dashboardToUpdate: Dashboard.Dashboard = {
...action.payload.dashboard,
reportings:
reportings?.filter(reporting => action.payload.dashboard.reportings.includes(+reporting.id)) ?? []
...action.payload.dashboard
}

state.dashboards = {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/Dashboard/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export namespace Dashboard {
inseeCode?: string
name: string
regulatoryAreas: number[]
reportings: Reporting[]
reportings: number[]
seaFront?: string
updatedAt?: string
vigilanceAreas: number[]
Expand Down
77 changes: 41 additions & 36 deletions frontend/src/features/Dashboard/useCases/createDashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { dashboardsAPI } from '@api/dashboardsAPI'
import { regulatoryLayersAPI } from '@api/regulatoryLayersAPI'
import { reportingsAPI } from '@api/reportingsAPI'
import { vigilanceAreasAPI } from '@api/vigilanceAreasAPI'
import { addMainWindowBanner } from '@features/MainWindow/useCases/addMainWindowBanner'
import { sideWindowActions } from '@features/SideWindow/slice'
import { addSideWindowBanner } from '@features/SideWindow/useCases/addSideWindowBanner'
import { customDayjs, Level } from '@mtes-mct/monitor-ui'
Expand All @@ -22,43 +21,49 @@ export const GET_EXTRACTED_AREAS_ERROR_MESSAGE = "Nous n'avons pas pu créer le
export const createDashboard =
(geometry: GeoJSON.Geometry): HomeAppThunk =>
async (dispatch, getState) => {
const { data, error } = await dispatch(dashboardsAPI.endpoints.getExtratedArea.initiate(geometry))
if (data) {
dispatch(closeDrawDashboard())
const newId = `new-${Object.keys(getState().dashboard.dashboards).length}`
const newDashboardName = `Tab ${customDayjs().format('DD/MM/YYYY')}`
const dashboard = {
amps: [],
controlUnits: [],
geom: geometry,
id: newId,
inseeCode: data.inseeCode,
name: newDashboardName,
regulatoryAreas: [],
reportings: [],
vigilanceAreas: []
}
const { data: regulatoryLayers } = await dispatch(regulatoryLayersAPI.endpoints.getRegulatoryLayers.initiate())
const { data: ampLayers } = await dispatch(ampsAPI.endpoints.getAMPs.initiate())
const { data: vigilanceAreas } = await dispatch(vigilanceAreasAPI.endpoints.getVigilanceAreas.initiate())
const { data: reportings } = await dispatch(reportingsAPI.endpoints.getReportingsByIds.initiate(data.reportings))
const extractedArea: Dashboard.ExtractedArea = {
...data,
amps: Object.values(ampLayers?.entities ?? []).filter(amp => data.amps.includes(amp.id)),
regulatoryAreas: Object.values(regulatoryLayers?.entities ?? []).filter(reg =>
data.regulatoryAreas.includes(reg.id)
),
reportings: Object.values(reportings?.entities ?? []).filter(reporting =>
data.reportings.includes(+reporting.id)
),
vigilanceAreas: Object.values(vigilanceAreas?.entities ?? []).filter(vigilanceArea =>
data.vigilanceAreas.includes(vigilanceArea.id)
try {
const { data, error } = await dispatch(dashboardsAPI.endpoints.getExtratedArea.initiate(geometry))
if (data) {
dispatch(closeDrawDashboard())
const newId = `new-${Object.keys(getState().dashboard.dashboards).length}`
const newDashboardName = `Tab ${customDayjs().format('DD/MM/YYYY')}`
const dashboard = {
amps: [],
controlUnits: [],
geom: geometry,
id: newId,
inseeCode: data.inseeCode,
name: newDashboardName,
regulatoryAreas: [],
reportings: [],
vigilanceAreas: []
}
const { data: regulatoryLayers } = await dispatch(regulatoryLayersAPI.endpoints.getRegulatoryLayers.initiate())
const { data: ampLayers } = await dispatch(ampsAPI.endpoints.getAMPs.initiate())
const { data: vigilanceAreas } = await dispatch(vigilanceAreasAPI.endpoints.getVigilanceAreas.initiate())
const { data: reportings } = await dispatch(
reportingsAPI.endpoints.getReportingsByIds.initiate(data.reportings)
)
const extractedArea: Dashboard.ExtractedArea = {
...data,
amps: Object.values(ampLayers?.entities ?? []).filter(amp => data.amps.includes(amp.id)),
regulatoryAreas: Object.values(regulatoryLayers?.entities ?? []).filter(reg =>
data.regulatoryAreas.includes(reg.id)
),
reportings: Object.values(reportings?.entities ?? []),

vigilanceAreas: Object.values(vigilanceAreas?.entities ?? []).filter(vigilanceArea =>
data.vigilanceAreas.includes(vigilanceArea.id)
)
}
dispatch(dashboardActions.createDashboard({ dashboard, defaultName: newDashboardName, extractedArea }))
dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: newId })))
}
dispatch(dashboardActions.createDashboard({ dashboard, defaultName: newDashboardName, extractedArea }))
dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: newId })))
}
if (error) {

if (error) {
throw new Error()
}
} catch (error) {
dispatch(
addSideWindowBanner({
children: GET_EXTRACTED_AREAS_ERROR_MESSAGE,
Expand Down
Loading

0 comments on commit ee917b0

Please sign in to comment.