[Layers] Sorted layers (regulatory areas, vigilance areas and amp) by…

… name

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/database/repositories/JpaAMPRepository.kt

@@ -10,7 +10,7 @@ import org.springframework.stereotype.Repository
 class JpaAMPRepository(private val dbAMPRepository: IDBAMPRepository) :
     IAMPRepository {
     override fun findAll(): List<AMPEntity> {
-        return dbAMPRepository.findAll().map { it.toAMP() }
+        return dbAMPRepository.findAll().map { it.toAMP() }.sortedBy { it.name.lowercase() }
     }
 
     override fun count(): Long {

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/database/repositories/JpaRegulatoryAreaRepository.kt

@@ -11,6 +11,7 @@ class JpaRegulatoryAreaRepository(private val dbRegulatoryAreaRepository: IDBReg
     IRegulatoryAreaRepository {
     override fun findAll(): List<RegulatoryAreaEntity> {
         return dbRegulatoryAreaRepository.findAll().map { it.toRegulatoryArea() }
+            .sortedBy { it.layer_name?.lowercase() }
     }
 
     override fun findById(id: Int): RegulatoryAreaEntity {

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/database/repositories/JpaVigilanceAreaRepository.kt

@@ -49,6 +49,7 @@ class JpaVigilanceAreaRepository(
     @Transactional
     override fun findAll(): List<VigilanceAreaEntity> {
         return dbVigilanceAreaRepository.findAllByIsDeletedIsFalse().map { it.toVigilanceAreaEntity() }
+            .sortedBy { it.name?.lowercase() }
     }
 
     override fun findAllIdsByGeometry(geometry: Geometry): List<Int> {

frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx

@@ -29,12 +29,17 @@ export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
 
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-    const ampsByLayerName = groupBy(amps, r => r.name)
+    const ampsByLayerName = groupBy(
+      [...amps].sort((a, b) => a.name.localeCompare(b.name)),
+      r => r.name
+    )
 
     const { selectedAmpByLayerName } = useGetAMPsQuery(undefined, {
       selectFromResult: ({ data }) => ({
         selectedAmpByLayerName: groupBy(
-          Object.values(data?.entities ?? []).filter(amp => selectedAmpIds.includes(amp.id)),
+          Object.values(data?.entities ?? [])
+            .filter(amp => selectedAmpIds.includes(amp.id))
+            .sort((a, b) => a.name.localeCompare(b.name)),
           amp => amp.name
         )
       })

frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx

@@ -38,12 +38,17 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
     const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.REGULATORY_AREAS))
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
-    const regulatoryAreasByLayerName = groupBy(regulatoryAreas, r => r.layer_name)
+    const regulatoryAreasByLayerName = groupBy(
+      [...regulatoryAreas].sort((a, b) => a?.layer_name.localeCompare(b?.layer_name)) ?? [],
+      regulatory => regulatory.layer_name
+    )
 
     const { selectedRegulatoryAreasByLayerName } = useGetRegulatoryLayersQuery(undefined, {
       selectFromResult: ({ data }) => ({
         selectedRegulatoryAreasByLayerName: groupBy(
-          Object.values(data?.entities ?? []).filter(regulatory => selectedRegulatoryAreaIds.includes(regulatory.id)),
+          Object.values(data?.entities ?? [])
+            .filter(regulatory => selectedRegulatoryAreaIds.includes(regulatory.id))
+            .sort((a, b) => a.layer_name.localeCompare(b.layer_name)),
           regulatory => regulatory.layer_name
         )
       })

frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx

@@ -36,11 +36,13 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
     const openPanel = useAppSelector(state => getOpenedPanel(state.dashboard, Dashboard.Block.VIGILANCE_AREAS))
     const [isExpandedSelectedAccordion, setExpandedSelectedAccordion] = useState(false)
 
+    const sortedVigilanecAreas = [...vigilanceAreas].sort((a, b) => a.name.localeCompare(b.name))
+
     const { selectedVigilanceAreas } = useGetVigilanceAreasQuery(undefined, {
       selectFromResult: ({ data }) => ({
-        selectedVigilanceAreas: Object.values(data?.entities ?? []).filter(vigilanceArea =>
-          selectedVigilanceAreaIds.includes(vigilanceArea.id)
-        )
+        selectedVigilanceAreas: Object.values(data?.entities ?? [])
+          .filter(vigilanceArea => selectedVigilanceAreaIds.includes(vigilanceArea.id))
+          .sort((a, b) => a.name.localeCompare(b.name))
       })
     })
 
@@ -61,11 +63,11 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
           titleRef={ref}
         >
           <StyledLayerList
-            $baseLayersLength={vigilanceAreas.length}
+            $baseLayersLength={sortedVigilanecAreas.length}
             $showBaseLayers={isExpanded}
             data-cy="dashboard-vigilance-areas-list"
           >
-            {vigilanceAreas.map(vigilanceArea => (
+            {sortedVigilanecAreas.map(vigilanceArea => (
               <Layer
                 key={vigilanceArea.id}
                 isPinned={selectedVigilanceAreaIds.includes(vigilanceArea.id)}

frontend/src/features/VigilanceArea/types.ts

@@ -49,7 +49,7 @@ export namespace VigilanceArea {
     linkedAMPs?: number[]
     linkedRegulatoryAreas?: number[]
     links?: Link[]
-    name: string | undefined
+    name: string
     seaFront: string | undefined
     source?: string
     startDatePeriod?: string