Skip to content

Commit

Permalink
frontend : beef production modification form
Browse files Browse the repository at this point in the history
  • Loading branch information
benjaminpochat committed Feb 22, 2024
1 parent 82c1dec commit 45355ee
Show file tree
Hide file tree
Showing 9 changed files with 264 additions and 173 deletions.
4 changes: 2 additions & 2 deletions frontend/app/src/domains/production/ProductionController.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import { useState } from 'react'
import BeefProductionCreator from './views/beefProductionCreator/BeefProductionCreator.tsx'
import BeefProductionCreator from './views/beefProduction/BeefProductionCreator.tsx'
import PackageLotsCreator from './views/PackageLotsCreator.tsx'
import ProductionsList from './views/ProductionsList.tsx'
import BeefProductionView from './views/BeefProductionView.tsx'
import BeefProductionView from './views/beefProduction/BeefProductionView.tsx'

export default function ProductionController() {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@ export default function BeefProductionCard({
if (showActions) {
return <CardActions>
<Button size="small">Mettre en vente</Button>
<Button size="small">Ajuster le poids vif</Button>
<Button size="small" onClick={() => viewBeefProductionCallback(beefProduction)}>Modifier les produits</Button>
</CardActions>
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export default function PackageLotConfigurator({ packageLot: packageLot, changeC
fullWidth
variant="standard"
margin="normal"
type="number"
/>
<TextFieldElement
validation={{ required: 'Champ obligatoire' }}
Expand All @@ -82,6 +83,7 @@ export default function PackageLotConfigurator({ packageLot: packageLot, changeC
fullWidth
variant="standard"
margin="normal"
type="number"
/>
</DialogContent>
<DialogActions>
Expand Down
51 changes: 0 additions & 51 deletions frontend/app/src/domains/production/views/BeefProductionView.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ import { ApiBuilder } from '../../../../api/ApiBuilder.ts'
import { useKeycloak } from '@react-keycloak/web'

import PackageLotsCreator from "../PackageLotsCreator.tsx"
import BreedingPropertiesForm from "./forms/BreedingPropertiesForm.tsx"
import SlaughterPropertiesForm from "./forms/SlaughterPropertiesForm.tsx"
import CuttingPropertiesForm from "./forms/CuttingPropertiesForm.tsx"
import {BreedingPropertiesForm, mapBreedingFormDataToBeefProduction as mapBreedingFormDataToBeefProduction} from "./forms/BreedingPropertiesForm.tsx"
import SlaughterPropertiesForm, { mapSlaughterFormDataToBeefProduction } from "./forms/SlaughterPropertiesForm.tsx"
import CuttingPropertiesForm, { mapCuttingFormDataToBeefProduction } from "./forms/CuttingPropertiesForm.tsx"
import { BeefProductionService } from "../../service/BeefProductionService.ts"
import { useForm } from "react-hook-form"
import dayjs from "dayjs"

export default function BeefProductionCreator({ callback }) {

Expand All @@ -29,6 +31,21 @@ export default function BeefProductionCreator({ callback }) {
const [completedSteps, setCompletedSteps] = useState<Array<number>>([])
const apiBuilder = new ApiBuilder()

const breedingPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
birthDate: beefProduction.birthDate ? dayjs(beefProduction.birthDate) : undefined
}})

const slaughterPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
slaughterDate: beefProduction.slaughterDate ? dayjs(beefProduction.slaughterDate) : undefined
}})

const cuttingPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
cuttingDate: beefProduction.cuttingDate ? dayjs(beefProduction.cuttingDate) : undefined
}})

return <>
<Typography variant="h6">Nouvel abattage bovin</Typography>
<Stepper activeStep={activeStep} orientation="vertical">
Expand All @@ -38,7 +55,11 @@ export default function BeefProductionCreator({ callback }) {
completed={completedSteps?.includes(BREEDING_PROPERTIES_STEP)}>
<StepButton onClick={() => setActiveStep(BREEDING_PROPERTIES_STEP)}>Informations sur l'élevage</StepButton>
<StepContent>
<BreedingPropertiesForm beefProduction={beefProduction} validFormCallback={validateBreedingProperties} cancelFormCallback={() => cancel()}/>
<BreedingPropertiesForm form={breedingPropertiesForm}/>
<ButtonGroup>
<Button onClick={breedingPropertiesForm.handleSubmit(validateBreedingProperties)} variant="contained" size="small">Valider</Button>
<Button onClick={cancel} variant="outlined" size="small">Abandonner</Button>
</ButtonGroup>
</StepContent>
</Step>
<Step
Expand All @@ -47,7 +68,11 @@ export default function BeefProductionCreator({ callback }) {
completed={completedSteps?.includes(SLAUGHTER_PROPERTIES_STEP)}>
<StepButton onClick={() => setActiveStep(SLAUGHTER_PROPERTIES_STEP)}>Informations sur l'abattage</StepButton>
<StepContent>
<SlaughterPropertiesForm beefProduction={beefProduction} validFormCallback={validateSlaughterProperties} cancelFormCallback={() => cancel()}/>
<SlaughterPropertiesForm form={slaughterPropertiesForm} minSlaughterDate={beefProduction.birthDate}/>
<ButtonGroup>
<Button onClick={slaughterPropertiesForm.handleSubmit(validateSlaughterProperties)} variant="contained" size="small">Valider</Button>
<Button onClick={cancel} variant="outlined" size="small">Abandonner</Button>
</ButtonGroup>
</StepContent>
</Step>
<Step
Expand All @@ -56,7 +81,12 @@ export default function BeefProductionCreator({ callback }) {
completed={completedSteps?.includes(CUTTING_PROPERTIES_STEP)}>
<StepButton onClick={() => setActiveStep(CUTTING_PROPERTIES_STEP)}>Information sur la découpe</StepButton>
<StepContent onClick={() => setActiveStep(CUTTING_PROPERTIES_STEP)}>
<CuttingPropertiesForm beefProduction={beefProduction} validFormCallback={validateCuttingProperties} cancelFormCallback={() => cancel()}/>
<CuttingPropertiesForm form={cuttingPropertiesForm} minCuttingDate={beefProduction.slaughterDate}/>
<ButtonGroup>
<Button onClick={cuttingPropertiesForm.handleSubmit(validateCuttingProperties)} variant="contained" size="small">Valider</Button>
<Button onClick={cancel} variant="outlined" size="small" >Abandonner</Button>
</ButtonGroup>

</StepContent>
</Step>
<Step
Expand All @@ -83,54 +113,27 @@ export default function BeefProductionCreator({ callback }) {
</>

function validateBreedingProperties(breedingFormData) {
const beefProductionUpdated = {
...beefProduction,
birthDate: breedingFormData.birthDate,
birthFarm: breedingFormData.birthFarm,
birthPlace: breedingFormData.birthPlace,
animalIdentifier: breedingFormData.animalIdentifier,
animalType: breedingFormData.animalType,
cattleBreed: breedingFormData.cattleBreed,
labelRougeCertified: breedingFormData.labelRougeCertified
}
const updateCompletedSteps = [...completedSteps, BREEDING_PROPERTIES_STEP]
setBeefProduction(beefProductionUpdated)
setCompletedSteps(updateCompletedSteps)
console.debug(beefProductionUpdated)
console.debug(updateCompletedSteps)
setBeefProduction(mapBreedingFormDataToBeefProduction(breedingFormData, beefProduction))
setCompletedSteps([...completedSteps, BREEDING_PROPERTIES_STEP])
setActiveStep(SLAUGHTER_PROPERTIES_STEP)
}

function validateSlaughterProperties(slaughterFormData) {
const beefProductionUpdated = {
...beefProduction,
slaughterDate: slaughterFormData.slaughterDate,
slaughterHouse: slaughterFormData.slaughterHouse,
slaughterPlace: slaughterFormData.slaughterPlace,
warmCarcassWeight: slaughterFormData.warmCarcassWeight
}
setBeefProduction(beefProductionUpdated)
console.debug(beefProductionUpdated)
setBeefProduction(mapSlaughterFormDataToBeefProduction(slaughterFormData, beefProduction))
setCompletedSteps([...completedSteps, SLAUGHTER_PROPERTIES_STEP])
setActiveStep(CUTTING_PROPERTIES_STEP)
}

function validateCuttingProperties(cuttingFormData) {
const beefProductionUpdated = {
...beefProduction,
cuttingDate: cuttingFormData.cuttingDate,
cuttingPlace: cuttingFormData.cuttingPlace,
cuttingButcher: cuttingFormData.cuttingButcher
}
setBeefProduction(beefProductionUpdated)
console.debug(beefProductionUpdated)
setBeefProduction(mapCuttingFormDataToBeefProduction(cuttingFormData, beefProduction))
setCompletedSteps([...completedSteps, CUTTING_PROPERTIES_STEP])
setActiveStep(PRODUCTS_STEP)
}

function displayAlerts() {
if(!isTotalQuantitySoldLowerThanMeatWeight()) {
return <Alert severity="error">Le poids total des produits préparés ne doit pas dépasser la quantité de viande de l'animal.</Alert>
const meatQuantity = BeefProductionService.getMeatWeight(beefProduction.warmCarcassWeight)
return <Alert severity="error">Le poids total des produits préparés ne doit pas dépasser la quantité de viande de l'animal estimée à {meatQuantity} kg.</Alert>
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { Typography, ButtonGroup, Button, Tab, Tabs } from '@mui/material'
import React from 'react'
import { useState } from 'react'
import BreedingPropertiesForm, { mapBreedingFormDataToBeefProduction } from './forms/BreedingPropertiesForm.tsx'
import SlaughterPropertiesForm, { mapSlaughterFormDataToBeefProduction } from './forms/SlaughterPropertiesForm.tsx'
import CuttingPropertiesForm, { mapCuttingFormDataToBeefProduction } from './forms/CuttingPropertiesForm.tsx'
import { useForm } from 'react-hook-form'
import dayjs from 'dayjs'
import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction.js"

export default function BeefProductionView({ beefProduction: beefProduction, backCallback: backCallback }) {

const BREEDING_PROPERTIES_TAB = 0
const SLAUGHTER_PROPERTIES_TAB = 1
const CUTTING_PROPERTIES_TAB = 2
const PRODUCTS_TAB = 3

const [currentTab, setCurrentTab] = useState<number>(BREEDING_PROPERTIES_TAB);
const [readOnly, setReadOnly] = useState<boolean>(true)
const [production, setProduction] = useState<BeefProduction>(beefProduction)

const changeTab = (event: React.SyntheticEvent, newValue: number) => {
setCurrentTab(newValue);
};

const breedingPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
birthDate: beefProduction.birthDate ? dayjs(beefProduction.birthDate) : undefined
}})

const slaughterPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
slaughterDate: beefProduction.slaughterDate ? dayjs(beefProduction.slaughterDate) : undefined
}})

const cuttingPropertiesForm = useForm<BeefProduction>({defaultValues: {
...beefProduction,
cuttingDate: beefProduction.cuttingDate ? dayjs(beefProduction.cuttingDate) : undefined
}})

return <>
<Typography variant="h6">Abattage bovin</Typography>
<Tabs value={currentTab} onChange={changeTab} variant='scrollable' allowScrollButtonsMobile >
<Tab label="Elevage" disabled={!readOnly}/>
<Tab label="Abattage" disabled={!readOnly}/>
<Tab label="Découpe" disabled={!readOnly}/>
<Tab label="Colis" disabled={!readOnly}/>
</Tabs>
<div hidden={currentTab !== 0}>
<BreedingPropertiesForm
form={breedingPropertiesForm}
disabled={readOnly}
maxBirthDate={production.slaughterDate}/>
</div>
<div hidden={currentTab !== 1}>
<SlaughterPropertiesForm
form={slaughterPropertiesForm}
disabled={readOnly}
minSlaughterDate={production.birthDate}
maxSlaughterDate={production.cuttingDate}
initialWarmCarcassWeight={production.warmCarcassWeight}/>
</div>
<div hidden={currentTab !== 2}>
<CuttingPropertiesForm
form={cuttingPropertiesForm}
disabled={readOnly}
minCuttingDate={production.slaughterDate} />
</div>
<div hidden={currentTab !== 3}>
</div>
{getButtons()}
</>

function getButtons() {
if (readOnly) {
return <ButtonGroup>
<Button variant="contained" size="small" onClick={() => backCallback()} >Retour</Button>
<Button variant="outlined" size="small" onClick={() => setReadOnly(false)} >Modifier</Button>
</ButtonGroup>
}
return <ButtonGroup>
<Button variant="contained" size="small" onClick={saveUpdate()} >Sauvegarder</Button>
<Button variant="outlined" size="small" onClick={cancelUpdate} >Abandonner</Button>
</ButtonGroup>
}

function saveUpdate() {
switch (currentTab) {
case BREEDING_PROPERTIES_TAB:
return breedingPropertiesForm.handleSubmit((breedingFormData) => {
setProduction(mapBreedingFormDataToBeefProduction(breedingFormData, production))
setReadOnly(true)
})
case SLAUGHTER_PROPERTIES_TAB:
return slaughterPropertiesForm.handleSubmit((slaughterFormData) => {
setProduction(mapSlaughterFormDataToBeefProduction(slaughterFormData, production))
setReadOnly(true)
})
case CUTTING_PROPERTIES_TAB:
return cuttingPropertiesForm.handleSubmit((cuttingFormData) => {
setProduction(mapCuttingFormDataToBeefProduction(cuttingFormData, production))
setReadOnly(true)
})
}
}

function cancelUpdate() {
switch (currentTab) {
case BREEDING_PROPERTIES_TAB:
return breedingPropertiesForm.reset(() => {
setProduction(beefProduction)
setReadOnly(true)
})
case SLAUGHTER_PROPERTIES_TAB:
return slaughterPropertiesForm.reset(() => {
setProduction(beefProduction)
setReadOnly(true)
})
case CUTTING_PROPERTIES_TAB:
return cuttingPropertiesForm.reset(() => {
setProduction(beefProduction)
setReadOnly(true)
})
}
}
}
Loading

0 comments on commit 45355ee

Please sign in to comment.