Skip to content

Commit

Permalink
frontend : production creation polish, production view first draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjaminpochat
benjaminpochat committed Feb 19, 2024
1 parent f94b457 commit 6d4d029
Show file tree
Hide file tree
Showing 15 changed files with 222 additions and 73 deletions.
41 changes: 41 additions & 0 deletions frontend/app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.9",
"@mui/lab": "^5.0.0-alpha.165",
"@mui/material": "^5.14.11",
"@mui/x-date-pickers": "^6.14.0",
"@react-keycloak/web": "^3.4.0",
Expand Down
7 changes: 4 additions & 3 deletions frontend/app/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
}

.form > div {
margin: 1rem;
margin-top: 1rem;
}

.form-select-list {
width: 10rem;
.popin-form > div {
margin-top: 1rem;
}

.card-clickable > *:hover {
Expand Down Expand Up @@ -50,6 +50,7 @@
.lot__package__description {
font-size: x-small;
grid-area: description;
white-space:pre-wrap;
}

.lot__package__net-weight {
Expand Down
2 changes: 2 additions & 0 deletions frontend/app/src/api/mock/MockApiProductions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ export class MockApiProductions {
return {
id: 1,
animalIdentifier: '1234',
birthDate: '2022-10-01T10:00:00',
slaughterDate: '2023-10-01T10:00:00',
cuttingDate: '2024-10-01T10:00:00',
warmCarcassWeight: 450,
animalType: 'BEEF_COW',
lots: [
Expand Down
16 changes: 12 additions & 4 deletions frontend/app/src/domains/production/ProductionController.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
import React from 'react'
import { useState } from 'react'
import BeefProductionCreator from './views/beefProductionCreator/BeefProductionCreator.tsx'
import PackageLotsCreator from './views/PackageLotsCreator.js'
import PackageLotsCreator from './views/PackageLotsCreator.tsx'
import ProductionsList from './views/ProductionsList.tsx'
import BeefProductionView from './views/BeefProductionView.tsx'

export default function ProductionController() {

const BEEF_PRODUCTION_CREATION = 'BEEF_PRODUCTION_CREATION'
const BEEF_PRODUCTION_PACKAGE_MODIFICATION = 'BEEF_PRODUCTION_PACKAGE_MODIFICATION'
const BEEF_PRODUCTION_VIEW = 'BEEF_PRODUCTION_VIEW'
const PRODUCTIONS_LIST = 'PRODUCTIONS_LIST'

const [currentAction, setCurrentAction] = useState(PRODUCTIONS_LIST)
const [context, setContext] = useState(undefined)

return <>{getContent()}</>

function getContent() {
switch (currentAction) {
case PRODUCTIONS_LIST: return <ProductionsList createBeefProductionCallback={() => setCurrentAction(BEEF_PRODUCTION_CREATION)}></ProductionsList>
case PRODUCTIONS_LIST: return <ProductionsList
createBeefProductionCallback={() => setCurrentAction(BEEF_PRODUCTION_CREATION)}
viewBeefProductionCallback={(production) => {
setContext(production)
setCurrentAction(BEEF_PRODUCTION_VIEW)}}/>
case BEEF_PRODUCTION_CREATION: return <BeefProductionCreator callback={(action) => {setCurrentAction(action)}} />
case BEEF_PRODUCTION_PACKAGE_MODIFICATION: return <PackageLotsCreator></PackageLotsCreator>
case BEEF_PRODUCTION_VIEW: return <BeefProductionView beefProduction={context} backCallback={() => {
setCurrentAction(PRODUCTIONS_LIST)
setContext(undefined)}}/>
}
}
}
32 changes: 17 additions & 15 deletions frontend/app/src/domains/production/components/BeefProductionCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import { useEffect, useState } from 'react';
import { Button, Card, CardActionArea, CardActions, CardContent, Typography } from "@mui/material"
import { useEffect, useState } from 'react'
import { useKeycloak } from '@react-keycloak/web'
import { Button, Card, CardActions, CardContent, Typography } from "@mui/material"
import { ApiBuilder } from '../../../api/ApiBuilder.ts'
import dayjs from 'dayjs'

export default function BeefProductionCard({
production: production,
showActions: showActions,
setPackageModificationLayoutContent: setPackageModificationLayoutContent}) {
viewBeefProductionCallback: viewBeefProductionCallback}) {

const [beefProduction, setBeefProduction] = useState(production)
const { keycloak, initialized } = useKeycloak()
Expand All @@ -31,17 +31,19 @@ export default function BeefProductionCard({

return (
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>
Abattage bovin
</Typography>
<Typography variant="subtitle1" component="div">
Abattage le {dayjs(beefProduction.slaughterDate).format('DD/MM/YYYY')}
</Typography>
<Typography component="div">
Poids de carcasse chaude : {beefProduction.warmCarcassWeight} kg
</Typography>
</CardContent>
<CardActionArea onClick={() => viewBeefProductionCallback(beefProduction)}>
<CardContent>
<Typography color="text.secondary" gutterBottom>
Abattage bovin
</Typography>
<Typography variant="subtitle1" component="div">
Abattage le {dayjs(beefProduction.slaughterDate).format('DD/MM/YYYY')}
</Typography>
<Typography component="div">
Poids de carcasse chaude : {beefProduction.warmCarcassWeight} kg
</Typography>
</CardContent>
</CardActionArea>
{getActions()}
</Card>
)
Expand All @@ -51,7 +53,7 @@ export default function BeefProductionCard({
return <CardActions>
<Button size="small">Mettre en vente</Button>
<Button size="small">Ajuster le poids vif</Button>
<Button size="small" onClick={() => setPackageModificationLayoutContent(production)}>Modifier les produits</Button>
<Button size="small" onClick={() => viewBeefProductionCallback(beefProduction)}>Modifier les produits</Button>
</CardActions>
}
}
Expand Down
97 changes: 59 additions & 38 deletions frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,96 @@
import React from 'react'
import { useState } from "react"
import EditIcon from '@mui/icons-material/Edit';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"
import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui';
import { Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"
import { FormContainer, TextFieldElement, TextareaAutosizeElement, useForm } from 'react-hook-form-mui';

/**
*
* @param {PackageLot} lot
* @returns
*/
export default function PackageLotConfigurator({packageLot: packageLot, changeCallback: changeCallback}) {
export default function PackageLotConfigurator({ packageLot: packageLot, changeCallback: changeCallback }) {
const [quantity, setQuantity] = useState<number>(packageLot.quantity)
const [editionPopinOpen, setEditionPopinOpen] = useState<boolean>(false)
const form = useForm({defaultValues: packageLot})
const form = useForm({
defaultValues: {
label: packageLot.label,
description: packageLot.description,
netWeight: packageLot.netWeight,
unitPrice: packageLot.unitPrice
}
})

return <div>
<div class="lot">
<div class="lot__package">
<div class="lot__package__name"><span>{packageLot.label}</span><EditIcon className="lot__package__edit" onClick={openEditionPopin}/></div>
<div class="lot__package__description">{packageLot.description}</div>
<div class="lot__package__net-weight">{packageLot.netWeight} kg</div>
<div class="lot__package__unit-price">{packageLot.unitPrice} € <sup>TTC</sup>/kg</div>
<div className="lot">
<div className="lot__package">
<div className="lot__package__name"><span>{packageLot.label}</span><EditIcon className="lot__package__edit" onClick={openEditionPopin} /></div>
<div className="lot__package__description">{packageLot.description}</div>
<div className="lot__package__net-weight">{packageLot.netWeight} kg</div>
<div className="lot__package__unit-price">{packageLot.unitPrice} € <sup>TTC</sup>/kg</div>
</div>
<div class="lot__quantity-actions-remove">
<div className="lot__quantity-actions-remove">
<Button variant="contained" onClick={() => removePackages(10)}>-10</Button>
<Button variant="contained" onClick={() => removePackages(1)} > -1</Button>
</div >
<div class="lot__summary">
<div class="lot__summary__package-number">{quantity}</div>
<div class="lot__summary__label">colis mis en vente</div>
<div class="lot__summary__total-quantity">{quantity * packageLot.netWeight} kg</div>
<div class="lot__summary__total-price">{quantity * packageLot.netWeight * packageLot.unitPrice} € <sup>TTC</sup></div>
<div className="lot__summary">
<div className="lot__summary__package-number">{quantity}</div>
<div className="lot__summary__label">colis mis en vente</div>
<div className="lot__summary__total-quantity">{quantity * packageLot.netWeight} kg</div>
<div className="lot__summary__total-price">{quantity * packageLot.netWeight * packageLot.unitPrice} € <sup>TTC</sup></div>
</div>
<div class="lot__quantity-actions-add">
<div className="lot__quantity-actions-add">
<Button variant="contained" onClick={() => addPackages(10)}>+10</Button>
<Button variant="contained" onClick={() => addPackages(1)}> +1</Button >
</div>
</div>
<Dialog
open={editionPopinOpen}
onClose={closeEditionPopin}
PaperProps={{
component: 'form',
onSubmit: validForm,
}}>
<DialogTitle>Modification du colis</DialogTitle>
<DialogContent>
<FormContainer onSuccess={validForm} formContext={form}>
onClose={cancelForm}>
<FormContainer onSuccess={validForm} formContext={form}>
<DialogTitle>Caractéristiques du colis</DialogTitle>
<DialogContent>
<TextFieldElement
autoFocus
required
validation={{ required: 'Champ obligatoire' }}
name="label"
label="Nom du colis"
fullWidth
variant="standard"
margin="normal"
/>
<TextFieldElement
required
<TextareaAutosizeElement
validation={{ required: 'Champ obligatoire' }}
name="description"
label="Description du colis"
fullWidth
variant="standard"
margin="normal"
/>
<TextFieldElement
required
validation={{ required: 'Champ obligatoire' }}
name="unitPrice"
label="prix au kilo"
label="prix au kilo (€/kg)"
fullWidth
variant="standard"
margin="normal"
/>
<TextFieldElement
required
validation={{ required: 'Champ obligatoire' }}
name="netWeight"
label="poids net"
label="poids net (kg)"
fullWidth
variant="standard"
margin="normal"
/>
</FormContainer>
</DialogContent>
<DialogActions>
<Button onClick={closeEditionPopin}>Annuler</Button>
<Button type="submit">Valider</Button>
</DialogActions>
</DialogContent>
<DialogActions>
<ButtonGroup>
<Button variant="contained" size="small" type="submit">Valider</Button>
<Button size="small" onClick={cancelForm}>Annuler</Button>
</ButtonGroup>
</DialogActions>
</FormContainer>
</Dialog>
</div>

Expand All @@ -104,18 +113,30 @@ export default function PackageLotConfigurator({packageLot: packageLot, changeCa
}

function openEditionPopin() {
//form.reset()
setEditionPopinOpen(true)
}

function closeEditionPopin() {
setEditionPopinOpen(false)
}

function cancelForm(formData) {
form.reset({
label: packageLot.label,
description: packageLot.description,
netWeight: packageLot.netWeight,
unitPrice: packageLot.unitPrice
})
closeEditionPopin()
}

function validForm(formData) {
packageLot.label = formData.label
packageLot.description = formData.description
packageLot.unitPrice = formData.unitPrice
packageLot.netWeight = formData.netWeight
changeCallback(packageLot)
closeEditionPopin()
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/app/src/domains/production/components/ProductionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import BeefProductionCard from "./BeefProductionCard.tsx"
export default function ProductionCard({
production: production,
showActions: showActions,
setPackageModificationLayoutContent: setPackageModificationLayoutContent
viewBeefProductionCallback: viewBeefProductionCallback
}) {

switch (production.productionType) {
Expand All @@ -13,7 +13,7 @@ export default function ProductionCard({
key={production.id}
production={production}
showActions={showActions}
setPackageModificationLayoutContent={setPackageModificationLayoutContent}>
viewBeefProductionCallback={viewBeefProductionCallback}>
</BeefProductionCard>
default :
return <></>
Expand Down
Loading

0 comments on commit 6d4d029

Please sign in to comment.