frontend : add package lot edition tab in beef production edition view

benjaminpochat · Feb 24, 2024 · a9a4be8 · a9a4be8
1 parent 45355ee
commit a9a4be8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 15 deletions.
diff --git a/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx b/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
@@ -9,7 +9,10 @@ import { FormContainer, TextFieldElement, TextareaAutosizeElement, useForm } fro
  * @param {PackageLot} lot 
  * @returns 
  */
-export default function PackageLotConfigurator({ packageLot: packageLot, changeCallback: changeCallback }) {
+export default function PackageLotConfigurator({ 
+    packageLot: packageLot, 
+    changeCallback: changeCallback,
+    disabled: disabled = false }) {
     const [quantity, setQuantity] = useState<number>(packageLot.quantity)
     const [editionPopinOpen, setEditionPopinOpen] = useState<boolean>(false)
     const form = useForm({
@@ -24,25 +27,22 @@ export default function PackageLotConfigurator({ packageLot: packageLot, changeC
     return <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__name">
+                    <span>{packageLot.label}</span>
+                    {displayEditionButton()}
+                </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 className="lot__quantity-actions-remove">
-                <Button variant="contained" onClick={() => removePackages(10)}>-10</Button>
-                <Button variant="contained" onClick={() => removePackages(1)} > -1</Button>
-            </div >
+            {displayRemovePackagesButtons()}
             <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 className="lot__quantity-actions-add">
-                <Button variant="contained" onClick={() => addPackages(10)}>+10</Button>
-                <Button variant="contained" onClick={() => addPackages(1)}> +1</Button >
-            </div>
+            {displayAddPackagesButtons()}
         </div>
         <Dialog
             open={editionPopinOpen}
@@ -96,6 +96,30 @@ export default function PackageLotConfigurator({ packageLot: packageLot, changeC
         </Dialog>
     </div>
 
+    function displayEditionButton() {
+        if (!disabled) {
+            return <EditIcon className="lot__package__edit" onClick={openEditionPopin} />
+        }
+    }
+
+    function displayAddPackagesButtons() {
+        if (!disabled) {
+            return  <div className="lot__quantity-actions-add">
+                        <Button variant="contained" onClick={() => addPackages(10)} disabled={disabled}>+10</Button>
+                        <Button variant="contained" onClick={() => addPackages(1)} disabled={disabled}> +1</Button >
+                    </div>
+        }
+    }
+
+    function displayRemovePackagesButtons() {
+        if (!disabled) {
+            return  <div className="lot__quantity-actions-remove">
+                        <Button variant="contained" onClick={() => removePackages(10)} disabled={disabled}>-10</Button>
+                        <Button variant="contained" onClick={() => removePackages(1)} disabled={disabled}> -1</Button>
+                    </div >
+        }
+    }
+
     /**
      * @param {number} quantity 
      */
@@ -115,7 +139,6 @@ export default function PackageLotConfigurator({ packageLot: packageLot, changeC
     }
 
     function openEditionPopin() {
-        //form.reset()
         setEditionPopinOpen(true)
     }
 

diff --git a/frontend/app/src/domains/production/views/PackageLotsCreator.tsx b/frontend/app/src/domains/production/views/PackageLotsCreator.tsx
@@ -6,7 +6,10 @@ import PackageLot from "viandeendirect_eu/dist/model/PackageLot"
 import PackageLotConfigurator from "../components/PackageLotConfigurator.tsx"
 
 
-export default function PackageLotsCreator({ production: production, changeProductionCallback: changeProductionCallback }) {
+export default function PackageLotsCreator({ 
+    production: production, 
+    changeProductionCallback: changeProductionCallback,
+    disabled: disabled = false }) {
 
     const { keycloak } = useKeycloak()
     const apiBuilder = new ApiBuilder()
@@ -40,10 +43,13 @@ export default function PackageLotsCreator({ production: production, changeProdu
     }, [keycloak])
 
     return <>
-        {production.lots?.map(lot => <PackageLotConfigurator packageLot={lot} changeCallback={changeLotConfiguration}></PackageLotConfigurator>)}
+        {production.lots?.map(lot => <PackageLotConfigurator 
+            packageLot={lot} 
+            changeCallback={changeLotConfiguration}
+            disabled={disabled}/>)}
     </>
 
-    function changeLotConfiguration(lot) {
+    function changeLotConfiguration() {
         changeProductionCallback({ ...production })
     }
 }
diff --git a/frontend/app/src/domains/production/views/beefProduction/BeefProductionCreator.tsx b/frontend/app/src/domains/production/views/beefProduction/BeefProductionCreator.tsx
@@ -86,7 +86,6 @@ export default function BeefProductionCreator({ callback }) {
                             <Button onClick={cuttingPropertiesForm.handleSubmit(validateCuttingProperties)} variant="contained" size="small">Valider</Button>
                             <Button onClick={cancel} variant="outlined" size="small" >Abandonner</Button>
                         </ButtonGroup>
-
                     </StepContent>
                 </Step>
                 <Step 

diff --git a/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx b/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx
@@ -7,6 +7,7 @@ import CuttingPropertiesForm, { mapCuttingFormDataToBeefProduction } from './for
 import { useForm } from 'react-hook-form'
 import dayjs from 'dayjs'
 import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction.js"
+import PackageLotsCreator from '../PackageLotsCreator.tsx'
 
 export default function BeefProductionView({ beefProduction: beefProduction, backCallback: backCallback }) {
 
@@ -67,6 +68,13 @@ export default function BeefProductionView({ beefProduction: beefProduction, bac
                     minCuttingDate={production.slaughterDate} />
             </div>
             <div hidden={currentTab !== 3}>
+                <div>
+                    <PackageLotsCreator 
+                        production={production} 
+                        changeProductionCallback={setProduction}
+                        disabled={readOnly}/>
+                </div>
+
             </div>
             {getButtons()}
     </>
@@ -101,6 +109,11 @@ export default function BeefProductionView({ beefProduction: beefProduction, bac
                     setProduction(mapCuttingFormDataToBeefProduction(cuttingFormData, production))
                     setReadOnly(true) 
                 })
+            case PRODUCTS_TAB:
+                return () => {
+                    setReadOnly(true) 
+                    //setProduction()
+                }
         }
     }
 
@@ -121,6 +134,8 @@ export default function BeefProductionView({ beefProduction: beefProduction, bac
                     setProduction(beefProduction)
                     setReadOnly(true)
                 })
+            case PRODUCTS_TAB:
+                setReadOnly(true) 
         }
     }
 }