Page d'accueil producteur #35

frontend/app/src/App.js

@@ -11,12 +11,16 @@ import { CookiesProvider } from 'react-cookie';
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import ProducerLayoutWrapper from './layouts/producer/ProducerLayoutWrapper.js';
 import CustomerLayout from './layouts/customer/CustomerLayout.tsx';
 import CustomerOrderView from './layouts/customer/PaymentLayout.tsx'
 
 import './App.css';
 import PaymentLayout from './layouts/customer/PaymentLayout.tsx';
+import Dashboard from './domains/dashboard/views/Dashboard.tsx';
+import ProductionController from './domains/production/ProductionController.tsx';
+import SaleController from './domains/sale/SaleController.tsx';
+import CustomerController from './domains/customer/CustomerController.tsx';
+import ProducerController from './domains/producer/ProducerController.tsx';
 
 
 function App() {
@@ -67,8 +71,24 @@ function App() {
       element: getLayoutWrapper(),
     },
     {
-      path: "/accounts",
-      element: <ProducerLayoutWrapper routedMainContent='account'/>
+      path: "/dashboard",
+      element: <Dashboard/>
+    },
+    {
+      path: "/productions",
+      element: <ProductionController/>
+    },
+    {
+      path: "/sales",
+      element: <SaleController/>
+    },
+    {
+      path: "/customers",
+      element: <CustomerController/>
+    },
+    {
+      path: "/account",
+      element: <ProducerController/>
     },
     {
       path: "/orders/:orderId/payment",
@@ -81,7 +101,7 @@ function App() {
       return <CustomerLayout/>
     }
     if(process.env.REACT_APP_MODE === 'PRODUCER') {
-      return <ProducerLayoutWrapper/>
+      return <Dashboard/>
     }
     return <div>Configuration du mode client ou producteur absent ou non reconnu</div>
   }

frontend/app/src/api/mock/MockApiProducers.ts

@@ -1,17 +1,24 @@
 import Customer from "viandeendirect_eu/dist/model/Customer"
 import Producer from "viandeendirect_eu/dist/model/Producer"
 import ProducerStatus from "viandeendirect_eu/dist/model/ProducerStatus"
+import Sale from "viandeendirect_eu/dist/model/Sale"
 
 export class MockApiProducers {
 
     getProducer(): Producer {
         return {
             id: 1,
-            user: undefined,
+            user: {
+                id: 1,
+                firstName: "Bob",
+                lastName: "MARCEL",
+                email: "[email protected]"
+            },
             status: 'ACTIVE',
             salesCredits: undefined,
             sales: undefined,
-            productions: undefined
+            productions: undefined,
+            stripeAccount: undefined
         }
     }
 

frontend/app/src/domains/commons/service/ProducerService.ts

@@ -0,0 +1,41 @@
+import Keycloak from "keycloak-js"
+import Producer from "viandeendirect_eu/dist/model/Producer.js";
+import { ApiInvoker } from "../../../api/ApiInvoker.ts";
+import { AuthenticationService } from "../../../authentication/service/AuthenticationService.ts";
+
+export class ProducerService {
+    keycloak: Keycloak
+    static producer: Producer
+    static unauthorized: boolean
+
+    constructor(keycloak: Keycloak) {
+        this.keycloak = keycloak
+    }
+
+    loadProducer(setProducer, setUnauthorized = unauthorized => {}) {
+        if(!ProducerService.producer) {
+            const apiInvoker = new ApiInvoker()
+            const authenticationService = new AuthenticationService(this.keycloak)
+        apiInvoker.callApiAuthenticatedly(
+            this.keycloak, 
+            api => api.getProducer, 
+            {'email': authenticationService.getCurrentUserEmail()}, 
+            producer => {
+                ProducerService.producer = producer
+                ProducerService.unauthorized = false
+                setProducer(ProducerService.producer)
+                setUnauthorized(ProducerService.unauthorized)        
+                }, 
+            error => {
+                console.error(error)
+                ProducerService.unauthorized = true
+                setProducer(ProducerService.producer)
+                setUnauthorized(ProducerService.unauthorized)        
+                }
+            )
+        } else {
+            setProducer(ProducerService.producer)
+            setUnauthorized(ProducerService.unauthorized)
+        }
+    }
+}

frontend/app/src/domains/customer/CustomerController.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import CustomersList from './views/CustomersList.tsx'
+import React from 'react'
+import { useKeycloak } from '@react-keycloak/web'
+import { ProducerService } from '../commons/service/ProducerService.ts'
+import Producer from 'viandeendirect_eu/dist/model/Producer.js'
+import AuthenticatedLayout from '../../layouts/producer/AuthenticatedLayout.tsx'
+
+export default function CustomerController() {
+
+    const { keycloak } = useKeycloak()
+    const producerService = new ProducerService(keycloak)
+    const [producer, setProducer] = useState<Producer>()
+
+    const NONE = 'NONE'
+
+    const [currentAction, setCurrentAction] = useState(NONE)
+
+    useEffect(() => {
+        producerService.loadProducer(setProducer)
+    })
+
+    return <AuthenticatedLayout>{getContent()}</AuthenticatedLayout>
+
+    function getContent() {
+        if(producer) {
+            switch (currentAction) {
+                case 'NONE': return <CustomersList producer={producer}/>
+            }
+        }
+    }
+}

frontend/app/src/domains/dashboard/components/DashboardAccount.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Typography } from "@mui/material"
+import Producer from 'viandeendirect_eu/dist/model/Producer.js'
+import { ApiInvoker } from '../../../api/ApiInvoker.ts'
+import { useKeycloak } from '@react-keycloak/web'
+import { AuthenticationService } from '../../../authentication/service/AuthenticationService.ts'
+import { ProducerService } from '../../commons/service/ProducerService.ts'
+
+
+function DashboardAccount() {
+
+  const { keycloak } = useKeycloak()
+  const producerService = new ProducerService(keycloak)
+  const [producer, setProducer] = useState<Producer>()
+
+  useEffect(() => {
+    producerService.loadProducer(setProducer)
+  }, [keycloak])
+
+
+  return <>
+    <div>Bienvenue {producer?.user.firstName}</div>
+    <Button onClick={() => window.open('./account', '_self')}>Gérer mon compte</Button>
+  </>
+}
+
+export default DashboardAccount

frontend/app/src/domains/dashboard/components/DashboardProductions.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Typography } from "@mui/material"
+import Producer from 'viandeendirect_eu/dist/model/Producer.js'
+import { ApiInvoker } from '../../../api/ApiInvoker.ts'
+import { useKeycloak } from '@react-keycloak/web'
+import { AuthenticationService } from '../../../authentication/service/AuthenticationService.ts'
+
+
+function DashboardProductions() {
+
+    return <><div>Mes prochaines productions</div>
+      <Button onClick={() => window.open('./productions', '_self')}>Gérer mes productions</Button>
+    </>
+}
+
+export default DashboardProductions

frontend/app/src/domains/dashboard/components/DashboardSales.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Typography } from "@mui/material"
+import Producer from 'viandeendirect_eu/dist/model/Producer.js'
+import { ApiInvoker } from '../../../api/ApiInvoker.ts'
+import { useKeycloak } from '@react-keycloak/web'
+import { AuthenticationService } from '../../../authentication/service/AuthenticationService.ts'
+
+
+function DashboardSales() {
+
+    return <><div>Mes prochaines ventes</div>
+      <Button onClick={() => window.open('./sales', '_self')}>Gérer mes ventes</Button>
+    </>
+}
+
+export default DashboardSales

frontend/app/src/domains/dashboard/views/Dashboard.css

@@ -0,0 +1,9 @@
+.dashboard-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.dashboard-item {
+    min-width: 20rem;
+    flex: 1 1 50%;
+}

frontend/app/src/domains/dashboard/views/Dashboard.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Typography } from "@mui/material"
+import './Dashboard.css'
+import DashboardAccount from '../components/DashboardAccount.tsx'
+import AuthenticatedLayout from '../../../layouts/producer/AuthenticatedLayout.tsx'
+import DashboardProductions from '../components/DashboardProductions.tsx'
+import DashboardSales from '../components/DashboardSales.tsx'
+
+function Dashboard() {
+    return <AuthenticatedLayout>
+        <Typography variant="h6">Tableau de bord</Typography>
+        <div className="dashboard-container">
+            <div className="dashboard-item"><DashboardAccount/></div>
+            <div className="dashboard-item">Mes derniers versements</div>
+            <div className="dashboard-item"><DashboardProductions/></div>
+            <div className="dashboard-item"><DashboardSales/></div>
+        </div>
+    </AuthenticatedLayout>
+}
+
+export default Dashboard

frontend/app/src/domains/producer/ProducerController.tsx

@@ -7,35 +7,32 @@ import { ApiInvoker } from '../../api/ApiInvoker.ts';
 import { useKeycloak } from '@react-keycloak/web';
 import Producer from 'viandeendirect_eu/dist/model/Producer.js';
 import { AuthenticationService } from '../../authentication/service/AuthenticationService.ts';
+import AuthenticatedLayout from '../../layouts/producer/AuthenticatedLayout.tsx';
+import { ProducerService } from '../commons/service/ProducerService.ts';
 
 
 function ProducerController() {
 
   const apiInvoker = new ApiInvoker()
   const {keycloak} = useKeycloak()
+  const producerService = new ProducerService(keycloak)
   const authenticationService = new AuthenticationService(keycloak)
+  const [producer, setProducer] = useState<Producer>()
+  const [stripeAccountCreationPending, setStripeAccountCreationPending] = useState<boolean>(false)
 
   useEffect(() => {
-    apiInvoker.callApiAuthenticatedly(
-      keycloak, 
-      api => api.getProducer, 
-      {'email': authenticationService.getCurrentUserEmail()}, 
-      producer => {
-        setProducer(producer)
-        if(producer.stripeAccount) {
-          loadStripeAccount(producer.id)
-        }
-      }, 
-      console.error)
-  }, [keycloak])
-
-  const [producer, setProducer] = useState<Producer>();
-  const [stripeAccountCreationPending, setStripeAccountCreationPending] = useState<boolean>(false)
+    producerService.loadProducer(producer => {
+      setProducer(producer)
+      if(producer.stripeAccount) {
+        loadStripeAccount(producer.id)
+      }
+    })
+  })
 
-  return <>
-          <Typography variant="h6">Gestion du compte</Typography>
-          {displayStripeAccount()}
-          </>
+  return <AuthenticatedLayout>
+            <Typography variant="h6">Gestion du compte</Typography>
+            {displayStripeAccount()}
+          </AuthenticatedLayout>
 
   function loadStripeAccount(producerId: number) {
     apiInvoker.callApiAuthenticatedly(

frontend/app/src/domains/production/ProductionController.tsx

@@ -4,6 +4,7 @@ import BeefProductionCreator from './views/beefProduction/BeefProductionCreator.
 import PackageLotsCreator from './views/PackageLotsCreator.tsx'
 import ProductionsList from './views/ProductionsList.tsx'
 import BeefProductionView from './views/beefProduction/BeefProductionView.tsx'
+import AuthenticatedLayout from '../../layouts/producer/AuthenticatedLayout.tsx'
 
 export default function ProductionController({producer: producer}) {
 
@@ -14,7 +15,7 @@ export default function ProductionController({producer: producer}) {
     const [currentAction, setCurrentAction] = useState(PRODUCTIONS_LIST)
     const [context, setContext] = useState(undefined)
 
-    return <>{getContent()}</>
+    return <AuthenticatedLayout>{getContent()}</AuthenticatedLayout>
 
     function getContent() {
         switch (currentAction) {