generalize routing

benjaminpochat · Aug 7, 2024 · b02d416 · b02d416
1 parent c27757a
commit b02d416
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 102 deletions.
diff --git a/frontend/app/src/domains/production/ProductionController.tsx b/frontend/app/src/domains/production/ProductionController.tsx
diff --git a/frontend/app/src/domains/production/components/BeefProductionCard.tsx b/frontend/app/src/domains/production/components/BeefProductionCard.tsx
@@ -8,8 +8,8 @@ import { useNavigate } from 'react-router-dom';
 
 export default function BeefProductionCard({
     production: production, 
-    showActions: showActions, 
-    clickCallback: clickCallback}) {
+    showActions: showActions,
+    onClick: onClick = undefined}) {
 
     const navigate = useNavigate()
     const [beefProduction, setBeefProduction] = useState(production)
@@ -33,7 +33,7 @@ export default function BeefProductionCard({
 
     return (
         <Card>
-            <CardActionArea onClick={() => navigate(`/beefProduction/${production.id}`)}>
+            <CardActionArea onClick={onClick || (() => navigate(`/beefProduction/${production.id}`))}>
                 <CardContent>
                     <Typography color="text.secondary" gutterBottom>
                         Abattage bovin

diff --git a/frontend/app/src/domains/production/views/ProductionsList.tsx b/frontend/app/src/domains/production/views/ProductionsList.tsx
@@ -9,12 +9,11 @@ import { Button, Typography } from "@mui/material"
 import ProductionCard from '../components/ProductionCard.tsx'
 import { useNavigate } from 'react-router-dom'
 
-export default function ProductionsList({
-    createBeefProductionCallback: createBeefProductionCallback,
-    viewBeefProductionCallback: viewBeefProductionCallback}) {
+export default function ProductionsList() {
 
     const [productions, setProductions] = useState([])
     const { keycloak, initialized } = useKeycloak()
+    const navigate = useNavigate()
     const apiBuilder = new ApiBuilder()
 
     useEffect(() => {
@@ -41,16 +40,15 @@ export default function ProductionsList({
         <div className='card-list'>
             {getProductionCards()}
         </div>
-        <Button variant="contained" size="small" onClick={createBeefProductionCallback}>Ajouter un abattage bovin</Button>
+        <Button variant="contained" size="small" onClick={() => navigate('/beefProduction/creation')}>Ajouter un abattage bovin</Button>
     </>
 
 
     function getProductionCards() {
         return productions.map(production => <div className='card-clickable'>
                                                 <ProductionCard 
                                                     production={production} 
-                                                    showActions={true} 
-                                                    clickCallback={viewBeefProductionCallback}> 
+                                                    showActions={true} > 
                                                 </ProductionCard>
                                             </div>)
     }

diff --git a/frontend/app/src/domains/production/views/beefProduction/BeefProductionCreator.tsx b/frontend/app/src/domains/production/views/beefProduction/BeefProductionCreator.tsx
@@ -14,15 +14,17 @@ import CuttingPropertiesForm, { mapCuttingFormDataToBeefProduction } from "./for
 import { BeefProductionService } from "../../service/BeefProductionService.ts"
 import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction.js"
 import PackageLot from "viandeendirect_eu/dist/model/PackageLot.js"
+import { useNavigate } from "react-router-dom"
 
-export default function BeefProductionCreator({ callback }) {
+export default function BeefProductionCreator() {
 
     const BREEDING_PROPERTIES_STEP = 0
     const SLAUGHTER_PROPERTIES_STEP = 1
     const CUTTING_PROPERTIES_STEP = 2
     const PRODUCTS_STEP = 3
 
     const { keycloak } = useKeycloak()
+    const navigate = useNavigate()
     const [ activeStep, setActiveStep ] = useState<number>(BREEDING_PROPERTIES_STEP)
     const [ beefProduction, setBeefProduction] = useState<BeefProduction>({ productionType: "BeefProduction"})
     const [ completedSteps, setCompletedSteps] = useState<Array<number>>([])
@@ -170,14 +172,14 @@ export default function BeefProductionCreator({ callback }) {
                         console.error(error)
                     } else {
                         console.log('API called successfully. Returned data: ' + data)
-                        callback('PRODUCTIONS_LIST')
+                        navigate(-1)
                     }
                 })
             }, keycloak)
         });
     }
 
     function cancel() {
-        callback('PRODUCTIONS_LIST')
+        navigate(-1)
     }
 }
diff --git a/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx b/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx
@@ -10,7 +10,7 @@ import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction.js"
 import PackageLotsCreator from '../PackageLotsCreator.tsx'
 import { ApiInvoker } from '../../../../api/ApiInvoker.ts'
 import { useKeycloak } from '@react-keycloak/web'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 export default function BeefProductionView() {
 
@@ -21,10 +21,11 @@ export default function BeefProductionView() {
 
     const apiInvoker = new ApiInvoker()
     const { keycloak } = useKeycloak()
+    const navigate = useNavigate();
 
     const [currentTab, setCurrentTab] = useState<number>(BREEDING_PROPERTIES_TAB)
     const [readOnly, setReadOnly] = useState<boolean>(true)
-    const [production, setProduction] = useState<BeefProduction>()
+    const [production, setProduction] = useState<BeefProduction>({})
 
     let { beefProductionId } = useParams()
 
@@ -37,8 +38,6 @@ export default function BeefProductionView() {
             console.error)
     }, [keycloak])
 
-
-
     const [saveEnabled, setSaveEnabled] = useState<boolean>(true)
     const [alerts, setAlerts] = useState<string>(undefined)
 
@@ -104,7 +103,7 @@ export default function BeefProductionView() {
     function getButtons() {
         if (readOnly) {
             return <ButtonGroup>
-                <Button variant="contained" size="small" onClick={() => backCallback()} >Retour</Button>
+                <Button variant="contained" size="small" onClick={() => navigate(-1)} >Retour</Button>
                 <Button variant="outlined" size="small" onClick={() => setReadOnly(false)} >Modifier</Button>
             </ButtonGroup>
         }

diff --git a/frontend/app/src/domains/sale/components/SaleCard.tsx b/frontend/app/src/domains/sale/components/SaleCard.tsx
@@ -7,6 +7,7 @@ import { ApiInvoker } from '../../../api/ApiInvoker.ts';
 import { useKeycloak } from '@react-keycloak/web';
 import Order from 'viandeendirect_eu/dist/model/Order'
 import Production from 'viandeendirect_eu/dist/model/Production'
+import { useNavigate } from 'react-router-dom';
 
 
 export default function SaleCard({ sale: sale, manageOrdersCallback: manageOrdersCallback}) {
@@ -15,6 +16,7 @@ export default function SaleCard({ sale: sale, manageOrdersCallback: manageOrder
     const [orders, setOrders] = useState<Array<Order>>([])
     const [productions, setProductions] = useState<Array<Production>>([])
     const {keycloak} = useKeycloak()
+    const navigate = useNavigate()
 
     useEffect(() => {
         apiInvoker.callApiAuthenticatedly(keycloak, api => api.getSaleOrders, sale.id, setOrders, console.error)
@@ -69,7 +71,7 @@ export default function SaleCard({ sale: sale, manageOrdersCallback: manageOrder
             <CardActions>
                 <ButtonGroup>
                     <Button size="small">Publier la vente</Button>
-                    <Button size="small" onClick={() => manageOrdersCallback(sale)}>Gérer les commandes</Button>
+                    <Button size="small" onClick={() => navigate(`/sale/${sale.id}/orders`)}>Gérer les commandes</Button>
                     <Button size="small">Préparer la livraison</Button>
                 </ButtonGroup>
             </CardActions>

diff --git a/frontend/app/src/domains/sale/components/SaleProductionSelector.js b/frontend/app/src/domains/sale/components/SaleProductionSelector.js
@@ -38,7 +38,7 @@ export default function SaleProductionSelector({selectProduction: selectProducti
                         key={'production-card-' + production.id} 
                         production={production} 
                         showActions={false}
-                        clickCallback={() => handleProductSelection(production)}>
+                        onClick={() => handleProductSelection(production)}>
                     </ProductionCard>
                 </div>
     })

diff --git a/frontend/app/src/domains/sale/views/OrdersList.tsx b/frontend/app/src/domains/sale/views/OrdersList.tsx
@@ -8,21 +8,22 @@ import dayjs from 'dayjs'
 import { useKeycloak } from '@react-keycloak/web'
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 
-import Order from "viandeendirect_eu/dist/model/Order"
+import Order from "viandeendirect_eu/dist/model/Order.js"
+import Sale from "viandeendirect_eu/dist/model/Sale.js"
 import { OrderStatus, OrderStatusUtils } from '../../../enum/OrderStatus.ts';
+import { useNavigate } from 'react-router-dom';
 
-export default function OrdersList({
-    sale: sale, 
-    returnCallback: returnCallback, 
-    viewOrderCallback: viewOrderCallback,
-    createOrderCallback: createOrderCallback}) {
+export default function OrdersList(props) {
 
     const { keycloak, initialized } = useKeycloak()
+    const navigate = useNavigate()
     const apiBuilder = new ApiBuilder()
 
+    const [sale, setSale] = useState<Sale>({id: props.saleId})
     const [orders, setOrders] = useState<Order[]>([])
 
     useEffect(() => {
+        //TODO : load sale from props.saleId
         loadOrders()
     }, [keycloak])
 
@@ -50,7 +51,7 @@ export default function OrdersList({
         {
             field: 'actions',
             headerName: '',
-            renderCell: (param) => <Button variant="contained" size="small" onClick={() => viewOrderCallback({id: param.row.id}, sale)}>Détails</Button>,
+            renderCell: (param) => <Button variant="contained" size="small" onClick={() => navigate(`/sale/${sale.id}/order/${param.row.id}`)}>Détails</Button>,
             disableColumnMenu: true,
             disableReorder: true
           }
@@ -72,7 +73,7 @@ export default function OrdersList({
     }
 
     return <>
-        <Typography variant='h6'>Commandes pour la vente du {dayjs(sale.deliveryStart).format('DD/MM/YYYY')} - {sale.deliveryAddressName}</Typography>
+        <Typography variant='h6'>Commandes pour la vente du {dayjs(sale?.deliveryStart).format('DD/MM/YYYY')} - {sale?.deliveryAddressName}</Typography>
         <DataGrid
             rows={rows}
             columns={columns}
@@ -92,8 +93,8 @@ export default function OrdersList({
             Masquer les commandes échouées
         </div>
         <ButtonGroup>
-            <Button variant="contained" size="small" onClick={createOrderCallback}>Saisir une commande</Button>
-            <Button size="small" onClick={returnCallback}>Retour aux ventes</Button>
+            <Button variant="contained" size="small" onClick={() => navigate(`/sale/${sale?.id}/order/creation`)}>Saisir une commande</Button>
+            <Button size="small" onClick={() => navigate(-1)}>Retour aux ventes</Button>
         </ButtonGroup>
     </>
 }
diff --git a/frontend/app/src/domains/sale/views/SaleForm.tsx b/frontend/app/src/domains/sale/views/SaleForm.tsx
@@ -10,21 +10,23 @@ import Sale from 'viandeendirect_eu/dist/model/Sale'
 import SaleProductionSelector from '../components/SaleProductionSelector.js'
 import 'dayjs/locale/fr';
 import dayjs from 'dayjs'
+import { useNavigate } from 'react-router-dom'
 
 const steps = ['Choisir une production', 'Définir le lieu et l\'heure', 'Choisir les produits mis en vente']
 
 /**
  * @param {Production} production 
  * @returns 
  */
-export default function SaleForm({producer: producer, returnCallback: returnCallback}) {
+export default function SaleForm({producer: producer}) {
 
     const SELECT_PRODUCTION_STEP = 'SELECT_PRODUCTION_STEP'
     const SET_DELIVERY_DATE_STEP = 'SET_DELIVERY_DATE_STEP'
     const SET_DELIVERY_ADDRESS_STEP = 'SET_DELIVERY_ADDRESS_STEP'
     const CONFIRMATION_STEP = 'CONFIRMATION_STEP'
 
     const { keycloak, initialized } = useKeycloak()
+    const navigate = useNavigate()
     const [activeStep, setActiveStep] = useState(SELECT_PRODUCTION_STEP)
     const [sale, setSale] = useState(new Sale())
     const [addresses, setAddresses] = useState([])
@@ -97,7 +99,7 @@ export default function SaleForm({producer: producer, returnCallback: returnCall
                                 <div>
                                     <ButtonGroup>
                                         <Button type='submit' variant="contained" size="small">Valider</Button>
-                                        <Button variant="outlined" size="small" onClick={() => cancel()}>Abandonner</Button>
+                                        <Button variant="outlined" size="small" onClick={cancel}>Abandonner</Button>
                                     </ButtonGroup>
                                 </div>
                             </div>
@@ -195,14 +197,14 @@ export default function SaleForm({producer: producer, returnCallback: returnCall
                         console.error(error)
                     } else {
                         console.log('API called successfully. Returned data: ' + data)
-                        returnCallback()
+                        navigate(-1)
                     }
                 })
             }, keycloak)
         });
     }
 
     function cancel() {
-        returnCallback()
+        navigate(-1)
     }
 }
diff --git a/frontend/app/src/domains/sale/views/SalesList.tsx b/frontend/app/src/domains/sale/views/SalesList.tsx
@@ -4,25 +4,35 @@ import { Typography, Button } from "@mui/material"
 
 import { useKeycloak } from '@react-keycloak/web'
 
+import Producer from "viandeendirect_eu/dist/model/Producer.js";
 import SaleCard from '../components/SaleCard.tsx'
 import { ApiInvoker } from '../../../api/ApiInvoker.ts'
+import { useNavigate } from 'react-router-dom'
+import { ProducerService } from '../../commons/service/ProducerService.ts'
 
-export default function SalesList({producer: producer, manageSaleOrdersCallback: manageSaleOrdersCallback, createSaleCallback: createSaleCallback}) {
+export default function SalesList() {
 
     const { keycloak } = useKeycloak()
+    const navigate = useNavigate()
+    const producerService = new ProducerService(keycloak)
 
     const [sales, setSales] = useState([])
+    const [producer, setProducer] = useState<Producer>({})
     const apiInvoker = new ApiInvoker()
 
     useEffect(() => {
-        apiInvoker.callApiAuthenticatedly(keycloak, api => api.getProducerSales, producer.id, setSales, console.error)
+        producerService.loadProducer(producer => {
+                setProducer(producer)
+                apiInvoker.callApiAuthenticatedly(keycloak, api => api.getProducerSales, producer.id, setSales, console.error)
+            }
+        )
     }, [keycloak, producer])
 
     return <>
         <Typography variant='h6'>Ventes</Typography>
         <div className='card-list'>
-            {sales.map(sale => <SaleCard sale={sale} manageOrdersCallback={manageSaleOrdersCallback} />)}
+            {sales.map(sale => <SaleCard sale={sale}/>)}
         </div>
-        <Button variant="contained" size="small" onClick={createSaleCallback}>Créer une vente</Button>
+        <Button variant="contained" size="small" onClick={() => navigate('/sales/creation')}>Créer une vente</Button>
     </>
 }