feat: update public view

BaseAdresseNationale · Oct 12, 2023 · ab45081 · ab45081
1 parent 9589249
commit ab45081
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 140 deletions.
diff --git a/components/bal/commune-tab.js b/components/bal/commune-tab.js
diff --git a/components/bal/commune-tab.tsx b/components/bal/commune-tab.tsx
@@ -0,0 +1,30 @@
+import React, {useContext} from 'react'
+import {Pane} from 'evergreen-ui'
+
+import BalDataContext from '@/contexts/bal-data'
+import TokenContext from '@/contexts/token'
+
+import CertificationInfos from './certification-infos'
+import HabilitationInfos from './habilitation-infos'
+import ReadOnlyInfos from './read-only-infos'
+import {CommmuneType} from '@/types/commune'
+
+interface CommuneTabProps {
+  commune: CommmuneType;
+}
+
+function CommuneTab({commune}: CommuneTabProps) {
+  const {baseLocale} = useContext(BalDataContext)
+  const {token} = useContext(TokenContext)
+
+  return (
+    <Pane overflowY='auto'>
+      {!token && <ReadOnlyInfos />}
+      {token && baseLocale.status !== 'demo' && <HabilitationInfos commune={commune} />}
+      <CertificationInfos />
+    </Pane>
+  )
+}
+
+export default CommuneTab
+
diff --git a/components/bal/read-only-infos.tsx b/components/bal/read-only-infos.tsx
@@ -0,0 +1,42 @@
+import React, {useState} from 'react'
+import {Pane, Alert, Text, Button} from 'evergreen-ui'
+import RecoverBALAlert from '../bal-recovery/recover-bal-alert'
+
+function BALReadOnly() {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+  return (
+    <>
+      <RecoverBALAlert isShown={isDialogOpen} onClose={() => {
+        setIsDialogOpen(false)
+      }} />
+      <Pane
+        backgroundColor='white'
+        padding={8}
+        borderRadius={10}
+        margin={8}
+      >
+        <Alert
+          intent='warning'
+          title='Vous êtes en mode consultation'
+          marginBottom={15}
+        >
+          <Text is='p'>
+            Vous ne pouvez pas modifier cette Base Adresse Locale car vous n’êtes pas authentifié comme administrateur.
+          </Text>
+          <Text is='p'>
+            Si vous êtes administrateur de cette Base Adresse Locale, vous pouvez récupérer vos accès en cliquant sur le bouton ci-dessous.
+          </Text>
+          <Button appearance='primary' onClick={() => {
+            setIsDialogOpen(true)
+          }}
+          >
+            Récupérer mes accès
+          </Button>
+        </Alert>
+      </Pane>
+    </>
+  )
+}
+
+export default BALReadOnly
diff --git a/components/bal/toponymes-list.js → components/bal/toponymes-list.tsx b/components/bal/toponymes-list.js → components/bal/toponymes-list.tsx
@@ -1,5 +1,4 @@
 import {useContext, useMemo, useState} from 'react'
-import PropTypes from 'prop-types'
 import {sortBy} from 'lodash'
 import {Table, Paragraph, Pane} from 'evergreen-ui'
 import {useRouter} from 'next/router'
@@ -16,12 +15,23 @@ import TableRow from '@/components/table-row'
 import DeleteWarning from '@/components/delete-warning'
 import InfiniteScrollList from '@/components/infinite-scroll-list'
 import CommentsContent from '@/components/comments-content'
+import RecoverBALAlert from '@/components/bal-recovery/recover-bal-alert'
+import {ToponymeType} from '@/types/toponyme'
 
-function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton}) {
+interface ToponymesListProps {
+  toponymes: ToponymeType[];
+  onRemove: () => Promise<void>;
+  onEnableEditing: (id: string) => void;
+  balId: string;
+  addButton: React.ReactNode;
+}
+
+function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton}: ToponymesListProps) {
   const {token} = useContext(TokenContext)
   const [toRemove, setToRemove] = useState(null)
   const [isDisabled, setIsDisabled] = useState(false)
   const {isEditing, reloadToponymes} = useContext(BalDataContext)
+  const [isRecoveryDialogOpen, setIsRecoveryDialogOpen] = useState(false)
   const router = useRouter()
 
   const handleRemove = async () => {
@@ -33,8 +43,8 @@ function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton})
     setIsDisabled(false)
   }
 
-  const onSelect = id => {
-    router.push(`/bal/${balId}/toponymes/${id}`)
+  const onSelect = (id: string) => {
+    void router.push(`/bal/${balId}/toponymes/${id}`)
   }
 
   const [filtered, setFilter] = useFuse(toponymes, 200, {
@@ -57,9 +67,14 @@ function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton})
           </Paragraph>
         )}
         isDisabled={isDisabled}
-        onCancel={() => setToRemove(null)}
+        onCancel={() => {
+          setToRemove(null)
+        }}
         onConfirm={handleRemove}
       />
+      <RecoverBALAlert isShown={isRecoveryDialogOpen} onClose={() => {
+        setIsRecoveryDialogOpen(false)
+      }} />
       <Pane
         flexShrink={0}
         elevation={0}
@@ -88,21 +103,31 @@ function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton})
         )}
 
         <InfiniteScrollList items={scrollableItems}>
-          {toponyme => (
+          {(toponyme: ToponymeType) => (
             <TableRow
               key={toponyme._id}
               label={toponyme.nom}
               nomAlt={toponyme.nomAlt}
-              isEditingEnabled={Boolean(!isEditing && token)}
+              isAdmin={Boolean(token)}
+              isEditing={Boolean(isEditing)}
               notifications={{
                 warning: toponyme.positions.length === 0 ? 'Ce toponyme n’a pas de position' : null,
                 comment: toponyme.commentedNumeros.length > 0 ? <CommentsContent comments={toponyme.commentedNumeros} /> : null,
                 certification: toponyme.isAllCertified ? 'Toutes les adresses de ce toponyme sont certifiées par la commune' : null
               }}
               actions={{
-                onSelect: () => onSelect(toponyme._id),
-                onEdit: () => onEnableEditing(toponyme._id),
-                onRemove: () => setToRemove(toponyme._id)
+                onSelect: () => {
+                  onSelect(toponyme._id)
+                },
+                onEdit: () => {
+                  onEnableEditing(toponyme._id)
+                },
+                onRemove: () => {
+                  setToRemove(toponyme._id)
+                }
+              }}
+              onShowRecoveryDialog={() => {
+                setIsRecoveryDialogOpen(true)
               }}
             />
           )}
@@ -112,12 +137,4 @@ function ToponymesList({toponymes, onEnableEditing, onRemove, balId, addButton})
   )
 }
 
-ToponymesList.propTypes = {
-  toponymes: PropTypes.array.isRequired,
-  onRemove: PropTypes.func,
-  onEnableEditing: PropTypes.func.isRequired,
-  balId: PropTypes.string.isRequired,
-  addButton: PropTypes.object
-}
-
 export default ToponymesList
diff --git a/components/bal/voies-list.js → components/bal/voies-list.tsx b/components/bal/voies-list.js → components/bal/voies-list.tsx
@@ -15,14 +15,26 @@ import useFuse from '@/hooks/fuse'
 import TableRow from '@/components/table-row'
 import CommentsContent from '@/components/comments-content'
 import DeleteWarning from '@/components/delete-warning'
+import RecoverBALAlert from '@/components/bal-recovery/recover-bal-alert'
 
 import InfiniteScrollList from '../infinite-scroll-list'
+import {VoieType} from '@/types/voie'
 
-function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addButton}) {
+interface VoiesListProps {
+  voies: VoieType[];
+  onRemove: () => Promise<void>;
+  onEnableEditing: (id: string) => void;
+  balId: string;
+  setToConvert: (id: string) => void;
+  addButton: React.ReactNode;
+}
+
+function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addButton}: VoiesListProps) {
   const {token} = useContext(TokenContext)
   const [toRemove, setToRemove] = useState(null)
   const {isEditing, reloadVoies} = useContext(BalDataContext)
   const [isDisabled, setIsDisabled] = useState(false)
+  const [isRecoveryDialogOpen, setIsRecoveryDialogOpen] = useState(false)
   const router = useRouter()
 
   const handleRemove = async () => {
@@ -34,8 +46,8 @@ function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addBu
     setIsDisabled(false)
   }
 
-  const onSelect = id => {
-    router.push(`/bal/${balId}/voies/${id}`)
+  const onSelect = (id: string) => {
+    void router.push(`/bal/${balId}/voies/${id}`)
   }
 
   const [filtered, setFilter] = useFuse(voies, 200, {
@@ -57,10 +69,15 @@ function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addBu
             Êtes vous bien sûr de vouloir supprimer cette voie ainsi que tous ses numéros ?
           </Paragraph>
         )}
-        onCancel={() => setToRemove(null)}
+        onCancel={() => {
+          setToRemove(null)
+        }}
         onConfirm={handleRemove}
         isDisabled={isDisabled}
       />
+      <RecoverBALAlert isShown={isRecoveryDialogOpen} onClose={() => {
+        setIsRecoveryDialogOpen(false)
+      }} />
       <Pane
         flexShrink={0}
         elevation={0}
@@ -89,27 +106,39 @@ function VoiesList({voies, onEnableEditing, setToConvert, balId, onRemove, addBu
         )}
 
         <InfiniteScrollList items={scrollableItems}>
-          {voie => (
+          {(voie: VoieType) => (
             <TableRow
               key={voie._id}
               label={voie.nom}
               nomAlt={voie.nomAlt}
-              isEditingEnabled={Boolean(!isEditing && token)}
+              isAdmin={Boolean(token)}
+              isEditing={Boolean(isEditing)}
               actions={{
-                onSelect: () => onSelect(voie._id),
-                onEdit: () => onEnableEditing(voie._id),
-                onRemove: () => setToRemove(voie._id),
+                onSelect: () => {
+                  onSelect(voie._id)
+                },
+                onEdit: () => {
+                  onEnableEditing(voie._id)
+                },
+                onRemove: () => {
+                  setToRemove(voie._id)
+                },
                 extra: voie.nbNumeros === 0 ? {
-                  callback: () => setToConvert(voie._id),
+                  callback: () => {
+                    setToConvert(voie._id)
+                  },
                   icon: KeyTabIcon,
-                  text: 'Convertir en toponyme',
+                  text: 'Convertir en toponyme'
                 } : null
               }}
               notifications={{
                 certification: voie.isAllCertified ? 'Toutes les adresses de cette voie sont certifiées par la commune' : null,
                 comment: voie.commentedNumeros.length > 0 ? <CommentsContent comments={voie.commentedNumeros} /> : null,
                 warning: voie.nbNumeros === 0 ? 'Cette voie ne contient aucun numéro' : null
               }}
+              onShowRecoveryDialog={() => {
+                setIsRecoveryDialogOpen(true)
+              }}
             />
           )}
         </InfiniteScrollList>

diff --git a/components/delete-warning.js → components/delete-warning.tsx b/components/delete-warning.js → components/delete-warning.tsx
@@ -1,7 +1,14 @@
-import PropTypes from 'prop-types'
 import {Pane, Dialog} from 'evergreen-ui'
 
-function DeleteWarning({isShown, content, onCancel, onConfirm, isDisabled}) {
+interface DeleteWarningProps {
+  isShown: boolean;
+  content: React.ReactNode;
+  onCancel: () => void;
+  onConfirm: () => void;
+  isDisabled?: boolean;
+}
+
+function DeleteWarning({isShown, content, onCancel, onConfirm, isDisabled}: DeleteWarningProps) {
   return (
     <Pane>
       <Dialog
@@ -22,17 +29,4 @@ function DeleteWarning({isShown, content, onCancel, onConfirm, isDisabled}) {
   )
 }
 
-DeleteWarning.propTypes = {
-  isShown: PropTypes.bool,
-  content: PropTypes.node.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool
-}
-
-DeleteWarning.defaultProps = {
-  isShown: false,
-  isDisabled: false
-}
-
 export default DeleteWarning
diff --git a/components/sub-header/bal-status/index.js b/components/sub-header/bal-status/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import {Pane, Tooltip, Button, Position, EditIcon} from 'evergreen-ui'
+import {Pane} from 'evergreen-ui'
 
 import {pauseSync, resumeSync} from '@/lib/bal-api'
 
@@ -29,7 +29,7 @@ function BALStatus({baseLocale, commune, token, isHabilitationValid, isRefrehSyn
         )}
       </Pane>
 
-      {token ? (
+      {token && (
         baseLocale.sync && isHabilitationValid ? (
           <BANSync
             baseLocale={baseLocale}
@@ -47,21 +47,6 @@ function BALStatus({baseLocale, commune, token, isHabilitationValid, isRefrehSyn
             />
           )
         )
-      ) : (
-        <Tooltip
-          content='Vous n’êtes pas identifié comme administrateur de cette base adresse locale, vous ne pouvez donc pas l’éditer.'
-          position={Position.BOTTOM_RIGHT}
-        >
-          <Button
-            height={24}
-            marginRight={8}
-            appearance='primary'
-            intent='danger'
-            iconBefore={EditIcon}
-          >
-            Édition impossible
-          </Button>
-        </Tooltip>
       )}
     </>
   )