ajout du type d'environnement dans l'IHM

benjaminpochat · Dec 1, 2024 · 75b71d3 · 75b71d3
1 parent 4b93eb7
commit 75b71d3
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 12 deletions.
diff --git a/frontend/app/src/domains/commons/service/EnvironmentTypeService.ts b/frontend/app/src/domains/commons/service/EnvironmentTypeService.ts
@@ -0,0 +1,21 @@
+export class EnvironmentTypeService {
+
+    environmentType: {label: String, color: String} | undefined = undefined
+
+    async getEnvironmentType() {
+        if (!this.environmentType) {
+            await this.loadEnvironmentType()
+        }
+        return this.environmentType        
+    }
+
+    private async loadEnvironmentType() {
+        if (process.env.REACT_APP_MOCK_API) {
+            this.environmentType = {label: 'MOCK', color: 'red'}
+        } else {
+            let response = await fetch(window.location.origin + '/config/viandeendirect.json')
+            let config = await response.json()
+            this.environmentType = {label: config.environmentTypeLabel, color: config.environmentTypeColor}
+        }
+    }
+}
diff --git a/frontend/app/src/domains/commons/service/UrlService.ts b/frontend/app/src/domains/commons/service/UrlService.ts
@@ -1,8 +1,8 @@
 export class UrlService {
 
-    backendUrl = undefined
-    customerFrontendUrl = undefined
-    producerFrontendUrl = undefined
+    backendUrl: String | undefined = undefined
+    customerFrontendUrl: String | undefined = undefined
+    producerFrontendUrl: String | undefined = undefined
 
     async getBackendUrl() {
         if (!this.backendUrl) {

diff --git a/frontend/app/src/layouts/customer/CustomerLayout.tsx b/frontend/app/src/layouts/customer/CustomerLayout.tsx
@@ -9,6 +9,7 @@ import { Navigate, Outlet, useLoaderData, useNavigate } from 'react-router-dom'
 import { ApiBuilder } from '../../api/ApiBuilder.ts'
 import { UrlService } from '../../domains/commons/service/UrlService.ts'
 import Footer from '../../domains/commons/components/Footer.tsx'
+import { EnvironmentTypeService } from '../../domains/commons/service/EnvironmentTypeService.ts'
 
 
 export default function CustomerLayout() {
@@ -28,6 +29,16 @@ export default function CustomerLayout() {
         return <Navigate to='/customer/registration'/>
     }
 
+    function getTitle() {
+        if(environmentType) {
+            return <>
+                <span>Viande en direct</span>
+                <span style={{color: environmentType.color, marginLeft: '1rem'}}>{environmentType.label}</span>
+            </>
+        }
+        return <>Viande en direct</>
+    }
+
     async function logout() {
         const frontendUrl = await urlService.getCustomerFrontentUrl()
         keycloak.logout({redirectUri: frontendUrl})
@@ -59,7 +70,7 @@ export default function CustomerLayout() {
                 >
                     <Toolbar>
                         <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
-                            Viande en direct
+                            {getTitle()}
                         </Typography>
                         {displayAuthenticationButton()}
                     </Toolbar>
@@ -76,9 +87,19 @@ export async function loadCustomerLayoutData(keycloak) {
     const authenticatedAsProducer = await authenticationService.isAuthenticatedAsProducer()
     const apiBuilder = new ApiBuilder()
     const api = await apiBuilder.getAuthenticatedApi(keycloak)
+    const environmentTypeService = new EnvironmentTypeService();
+    const environmentType = await environmentTypeService.getEnvironmentType()  
     if(!authenticatedAsProducer && authenticationService.isAuthenticated()) {
         const customer = await api.getCustomer({email: authenticationService.getCurrentUserEmail()})
-        return {authenticatedAsProducer: authenticatedAsProducer, customer: customer}
+        return {
+            authenticatedAsProducer: authenticatedAsProducer, 
+            customer: customer,
+            environmentType: environmentType,
+        }
+    }
+    return {
+        authenticatedAsProducer: authenticatedAsProducer, 
+        customer: undefined,
+        environmentType: environmentType
     }
-    return {authenticatedAsProducer: authenticatedAsProducer, customer: undefined}
 }
diff --git a/frontend/app/src/layouts/producer/AnonymousLayout.tsx b/frontend/app/src/layouts/producer/AnonymousLayout.tsx
@@ -1,16 +1,27 @@
 import { styled } from '@mui/material/styles';
 import { AppBar, Box, Typography, CssBaseline, Toolbar, Grid, Paper, Button, IconButton } from "@mui/material";
 import { useKeycloak } from '@react-keycloak/web'
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import Footer from '../../domains/commons/components/Footer.tsx';
 import { Login } from '@mui/icons-material';
+import { EnvironmentTypeService } from '../../domains/commons/service/EnvironmentTypeService.ts';
 
 export default function AnonymousLayout() {
 
+    const environmentTypeService = new EnvironmentTypeService()
     const { keycloak, initialized } = useKeycloak()
+    const [environmentType, setEnvironmentType] = useState<{label: String, color: String} | undefined>(undefined)
     const navigate = useNavigate()
 
+    useEffect(() => {
+        const loadEnvironmentType = async () => {
+            setEnvironmentType(await environmentTypeService.getEnvironmentType())
+        }
+        console.log('loadEnvironmentType')
+        loadEnvironmentType()
+    }, [environmentTypeService])
+
     const Item = styled(Paper)(({ theme }) => ({
         backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
         ...theme.typography.body2,
@@ -19,6 +30,16 @@ export default function AnonymousLayout() {
         color: theme.palette.text.secondary,
     }));
 
+    function getTitle() {
+        if(environmentType) {
+            return <>
+                <span>Viande en direct</span>
+                <span style={{color: environmentType.color, marginLeft: '1rem'}}>{environmentType.label}</span>
+            </>
+        }
+        return <>Viande en direct</>
+    }
+
     function login() {
         keycloak.login()
     }
@@ -51,7 +72,7 @@ export default function AnonymousLayout() {
             >
                 <Toolbar>
                     <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
-                        Viande en direct
+                        {getTitle()}
                     </Typography>
                     <IconButton onClick={login} color="inherit">
                         <Login/>

diff --git a/frontend/app/src/layouts/producer/AuthenticatedLayout.tsx b/frontend/app/src/layouts/producer/AuthenticatedLayout.tsx
@@ -10,6 +10,7 @@ import SideMenu from './SideMenu.jsx'
 import { AuthenticationService } from '../../authentication/service/AuthenticationService.ts';
 import { Navigate, Outlet, useLoaderData } from 'react-router-dom';
 import { UrlService } from '../../domains/commons/service/UrlService.ts';
+import { EnvironmentTypeService } from '../../domains/commons/service/EnvironmentTypeService.ts';
 
 
 export default function AuthenticatedLayout() {
@@ -18,7 +19,7 @@ export default function AuthenticatedLayout() {
   const authenticationService = new AuthenticationService(keycloak)
   const urlService = new UrlService()
 
-  const authenticatedAsCustomer: boolean = useLoaderData()
+  const {authenticatedAsCustomer, environmentType}: {isAuthenticatedAsCustomer: boolean, environmentType: {label: String, color: String} | undefined} = useLoaderData()
 
   const sideMenuWidth = 240;
 
@@ -34,6 +35,16 @@ export default function AuthenticatedLayout() {
     }
   }
 
+  function getTitle() {
+    if(environmentType) {
+        return <>
+            <span>Viande en direct</span>
+            <span style={{color: environmentType.color, marginLeft: '1rem'}}>{environmentType.label}</span>
+        </>
+    }
+    return <>Viande en direct</>
+  }
+
   async function logout() {
     const frontendUrl = await urlService.getProducerFrontentUrl()
     keycloak.logout({ redirectUri: `${frontendUrl}/authentication` })
@@ -63,7 +74,7 @@ export default function AuthenticatedLayout() {
             {getIcon()}
           </IconButton>
           <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
-            Viande en direct
+            {getTitle()}
           </Typography>
           <Typography>{authenticationService.getCurrentUserFirstName()} {authenticationService.getCurrentUserLastName()}</Typography>
           <IconButton onClick={logout} color="inherit">
@@ -96,7 +107,10 @@ export default function AuthenticatedLayout() {
   return getAuthenticatedLayout()
 }
 
-export async function loadAuthenticatedLayoutData(keycloak): Promise<boolean> {
+export async function loadAuthenticatedLayoutData(keycloak): Promise<{isAuthenticatedAsCustomer: boolean, environmentType: {label: String, color: String} | undefined}> {
   const authenticationService = new AuthenticationService(keycloak)
-  return await authenticationService.isAuthenticatedAsCustomer()
+  const isAuthenticatedAsCustomer = await authenticationService.isAuthenticatedAsCustomer()
+  const environmentTypeService = new EnvironmentTypeService();
+  const environmentType = await environmentTypeService.getEnvironmentType()
+  return { isAuthenticatedAsCustomer: isAuthenticatedAsCustomer, environmentType: environmentType }
 }