Merge pull request #448 from MTES-MCT/fix-backoffice-uxui

Fix backoffice ux/ui
MTES-MCT · Jul 5, 2021 · c2f02c7 · c2f02c7
2 parents af3ec3e + 1749bae
commit c2f02c7
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 35 deletions.
diff --git a/frontend/src/components/backoffice/LawType.js b/frontend/src/components/backoffice/LawType.js
@@ -1,21 +1,27 @@
-import React, { useState } from 'react'
-import { useSelector } from 'react-redux'
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 import styled from 'styled-components'
 import { EmptyResult } from '../commonStyles/Text.style'
 import RegulatoryZoneSelectedLayer from '../regulatory_zones/RegulatoryZoneSelectedLayer'
 import { COLORS } from '../../constants/constants'
 import { ReactComponent as ChevronIconSVG } from '../icons/Chevron_simple_gris.svg'
+import { setLawTypeOpened } from '../../domain/reducers/Regulatory'
 
 const LawType = props => {
+  const dispatch = useDispatch()
   const [numberOfZonesOpened, setNumberOfZonesOpened] = useState(0)
-  const [isOpen, setIsOpen] = useState(false)
   const regulatoryZoneMetadata = useSelector(state => state.regulatory.regulatoryZoneMetadata)
-
+  const lawTypeOpened = useSelector(state => state.regulatory.lawTypeOpened)
   const {
     lawType,
     regZoneByLawType,
     isReadyToShowRegulatoryZones
   } = props
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    setIsOpen(lawTypeOpened === lawType)
+  }, [lawType, lawTypeOpened, setIsOpen])
 
   function increaseNumberOfZonesOpened (number) {
     setNumberOfZonesOpened(numberOfZonesOpened + number)
@@ -50,8 +56,17 @@ const LawType = props => {
     )
   }
 
+  const openLawTypeList = () => {
+    if (isOpen) {
+      dispatch(setLawTypeOpened(null))
+    } else {
+      dispatch(setLawTypeOpened(lawType))
+    }
+    setIsOpen(!isOpen)
+  }
+
   return (<LawTypeContainer>
-    <LawTypeName onClick={() => setIsOpen(!isOpen)}>
+    <LawTypeName onClick={openLawTypeList}>
       <LawTypeText>{lawType}</LawTypeText>
       <ChevronIcon isOpen={isOpen}/>
     </LawTypeName>

diff --git a/frontend/src/components/commonStyles/Buttons.style.js b/frontend/src/components/commonStyles/Buttons.style.js
@@ -1,13 +1,7 @@
 import { COLORS } from '../../constants/constants'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
-const button = styled.button`
-  font-size: 13px;
-  padding: 5px 12px;
-  margin: 20px ${props => props.isLast ? '20px' : '0'} 20px 10px;
-`
-
-export const BlackButton = styled(button)`
+const baseBlackButton = css`
   background: ${COLORS.grayDarkerThree};
   color: ${COLORS.grayBackground};
   :hover, :focus {
@@ -20,11 +14,43 @@ export const BlackButton = styled(button)`
   }
 `
 
-export const WhiteButton = styled(button)`
+const baseWhiteButton = css`
   border: 1px solid ${COLORS.grayDarkerThree};
   color: ${COLORS.grayDarkerThree};
   :disabled {
     border: 1px solid ${COLORS.grayDarker};
     color: ${COLORS.grayDarker};
   }
 `
+
+const Button = styled.button`
+  font-size: 13px;
+  padding: 5px 12px;
+  margin: 20px ${props => props.isLast ? '20px' : '0'} 20px 10px;
+`
+
+const BackofficeButton = styled.button`
+  font-size: 13px;
+  padding: 6px 12px;
+  margin: 15px ${props => props.isLast ? '20px' : '0'} 15px 10px;
+`
+
+export const BackofficeBottomButton = styled(BackofficeButton)`
+  ${baseBlackButton}
+  position: fixed;
+  bottom: 0;
+  left: 25%;
+  margin-left: -120px;
+`
+
+export const BlackButton = styled(Button)`
+  ${baseBlackButton}
+`
+
+export const WhiteButton = styled(Button)`
+  ${baseWhiteButton}
+`
+
+export const BackofficeWhiteButton = styled(BackofficeButton)`
+  ${baseWhiteButton}
+`
diff --git a/frontend/src/components/regulatory_zones/RegulatoryZoneSelectedLayer.js b/frontend/src/components/regulatory_zones/RegulatoryZoneSelectedLayer.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import RegulatoryZoneSelectedZone from './RegulatoryZoneSelectedZone'
 import { ReactComponent as ChevronIconSVG } from '../icons/Chevron_simple_gris.svg'
 import { getHash } from '../../utils'
@@ -152,21 +152,25 @@ const Text = styled.span`
 
 const ZoneNumber = styled.span`
   font-size: 11px;
+  color: ${COLORS.textGray}
 `
 
 const CloseIcon = styled(CloseIconSVG)`
   width: 16px;
   margin: 2px 6px 0 0;
 `
 
-const ShowIcon = styled(ShowIconSVG)`
+const baseIcon = css`
   width: 27px;
-  margin: 0 8px 0 6px;
+  margin: 0 5px 0 6px;
+`
+
+const ShowIcon = styled(ShowIconSVG)`
+  ${baseIcon}
 `
 
 const HideIcon = styled(HideIconSVG)`
-  width: 27px;
-  margin: 0 8px 0 6px;
+  ${baseIcon}
 `
 
 const Zone = styled.span`

diff --git a/frontend/src/components/regulatory_zones/RegulatoryZoneSelectedZone.js b/frontend/src/components/regulatory_zones/RegulatoryZoneSelectedZone.js
@@ -127,12 +127,14 @@ const Rectangle = styled.div`
 const Icons = styled.span`
   float: right;
   display: flex;
-  margin-right: 6px;
+  margin-right: 5px;
+  justify-content: flex-end;
+  flex: 1;
 `
 
 const SubZone = styled.span`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   line-height: 1.9em;
   padding-left: 31px;
   padding-top: 4px;

diff --git a/frontend/src/containers/Backoffice.js b/frontend/src/containers/Backoffice.js
@@ -9,11 +9,12 @@ import getAllRegulatoryZonesByRegTerritory from '../domain/use_cases/getAllRegul
 import getAllGearCodes from '../domain/use_cases/getAllGearCodes'
 import { setError } from '../domain/reducers/Global'
 import { COLORS } from '../constants/constants'
-import { BlackButton, WhiteButton } from '../components/commonStyles/Buttons.style'
+import { BackofficeBottomButton, WhiteButton } from '../components/commonStyles/Buttons.style'
 import { EmptyResult } from '../components/commonStyles/Text.style'
 import closeRegulatoryZoneMetadata from '../domain/use_cases/closeRegulatoryZoneMetadata'
 import { RegulatoryTerritory } from '../domain/entities/regulatory'
 
+
 const Backoffice = () => {
   const [foundRegulatoryZonesByRegTerritory, setFoundRegulatoryZonesByRegTerritory] = useState({})
   const [regulatoryZoneListByRegTerritory, setRegulatoryZoneListByRegTerritory] = useState({})
@@ -78,10 +79,11 @@ const Backoffice = () => {
   const displaySearchResultList = () => {
     return (
       <SearchResultList>
-        {Object.keys(RegulatoryTerritory).map(territory => {
+        {Object.keys(RegulatoryTerritory).map((territory, id) => {
+          const territoryNumber = Object.keys(RegulatoryTerritory).length
           return (
-            <Territory key={territory}>
-              <TerritoryName>{RegulatoryTerritory[territory]}</TerritoryName>
+            <Territory key={territory} isLast={territoryNumber - 1 === id }>
+              <TerritoryName >{RegulatoryTerritory[territory]}</TerritoryName>
               {displayRegulatoryZoneByRegTerritory(territory)}
             </Territory>
           )
@@ -108,12 +110,12 @@ const Backoffice = () => {
             ? displaySearchResultList()
             : <div>En attente de chargement</div>}
           <ButtonListFooter>
-            <BlackButton
+            <BackofficeBottomButton
               disabled={false}
               isLast={false}
               onClick={() => addNewRegZone()}>
               Saisir une nouvelle réglementation
-            </BlackButton>
+            </BackofficeBottomButton>
           </ButtonListFooter>
         </RegulatoryZonePanel>
         <BaseMap/>
@@ -144,9 +146,9 @@ const SearchResultList = styled.div`
   color: ${COLORS.textWhite};
   text-decoration: none;
   border-radius: 2px;
-  border-bottom: 1px solid ${COLORS.grayDarker};
-  height: calc(100vh - 300px);
+  max-height: calc(100vh - 235px);
   padding: 0 40px;
+  margin-bottom: 60px;
 `
 
 const Territory = styled.div`
@@ -155,16 +157,16 @@ const Territory = styled.div`
   flex: 1 1 1%;
   padding: 5px;
   box-sizing: border-box;
-  width: 50%;
+  max-width: 50%;
+  margin-right: ${props => props.isLast ? '0px' : '20px'}
 `
 
 const TerritoryName = styled.div`
   display: flex;
-  font-size: 16px;
+  font: normal normal bold 16px Marianne;
   text-transform: uppercase;
   text-align: left;
   color: ${COLORS.grayDarkerTwo};
-  font-weight: 600;
 `
 
 const RegulatoryZoneListByLawTypeList = styled.div`
@@ -184,7 +186,11 @@ const ButtonList = styled.div`
 
 const ButtonListFooter = styled.div`
   ${ButtonList};
-  justify-content: center;
+  border-top: 1px solid ${COLORS.grayDarker};
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  height: 60px;
 `
 
 const BackofficeContainer = styled.div`

diff --git a/frontend/src/domain/reducers/Regulatory.js b/frontend/src/domain/reducers/Regulatory.js
@@ -10,7 +10,8 @@ const regulatorySlice = createSlice({
     selectedRegulatoryZones: getLocalStorageState({}, selectedRegulatoryZonesLocalStorageKey),
     regulatoryZoneMetadata: null,
     loadingRegulatoryZoneMetadata: false,
-    regulatoryZoneMetadataPanelIsOpen: false
+    regulatoryZoneMetadataPanelIsOpen: false,
+    lawTypeOpened: null
   },
   reducers: {
     addRegulatoryZonesToSelection (state, action) {
@@ -52,6 +53,9 @@ const regulatorySlice = createSlice({
     closeRegulatoryZoneMetadataPanel (state) {
       state.regulatoryZoneMetadataPanelIsOpen = false
       state.regulatoryZoneMetadata = null
+    },
+    setLawTypeOpened (state, action) {
+      state.lawTypeOpened = action.payload
     }
   }
 })
@@ -63,7 +67,8 @@ export const {
   setLoadingRegulatoryZoneMetadata,
   resetLoadingRegulatoryZoneMetadata,
   setRegulatoryZoneMetadata,
-  closeRegulatoryZoneMetadataPanel
+  closeRegulatoryZoneMetadataPanel,
+  setLawTypeOpened
 } = regulatorySlice.actions
 
 export default regulatorySlice.reducer