From 3d00eda80c71b21734158661834252f3d2ad3bee Mon Sep 17 00:00:00 2001
From: Benjamin POCHAT <benjamin.pochat@gmail.com>
Date: Tue, 27 Aug 2024 00:34:34 +0200
Subject: [PATCH] fix errors in beef production view : products quantity is not
 restored after cancellation, inappropriate colors inread only mode

---
 .../beefProduction/BeefProductionView.tsx     | 11 ++++++--
 .../forms/BreedingPropertiesForm.tsx          | 26 ++++++++++++-------
 .../forms/CuttingPropertiesForm.tsx           | 14 +++++-----
 .../forms/SlaughterPropertiesForm.tsx         | 13 +++++++---
 frontend/app/src/resources/styles/form.css    | 18 +++++++++++++
 5 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx b/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx
index acd89b6..875492d 100644
--- a/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx
+++ b/frontend/app/src/domains/production/views/beefProduction/BeefProductionView.tsx
@@ -11,6 +11,7 @@ import PackageLotsCreator from '../PackageLotsCreator.tsx'
 import { useKeycloak } from '@react-keycloak/web'
 import { useLoaderData, useNavigate } from 'react-router-dom'
 import { ApiBuilder } from '../../../../api/ApiBuilder.ts'
+import { Production } from '@viandeendirect/api/dist/models/Production'
 
 export default function BeefProductionView() {
 
@@ -145,7 +146,7 @@ export default function BeefProductionView() {
         }
     }
 
-    function cancelUpdate() {
+    async function cancelUpdate() {
         setAlerts(undefined)
         switch (currentTab) {
             case BREEDING_PROPERTIES_TAB: 
@@ -168,14 +169,20 @@ export default function BeefProductionView() {
                     setReadOnly(true)
                 })
             case PRODUCTS_TAB:
+                const reloadedProduction = await reloadProduction(production.id)
                 setProduction({...production,
-                    lots: production?.lots ? production?.lots.map((lot) => {return {...lot}}) : undefined
+                    lots: reloadedProduction?.lots ? reloadedProduction?.lots : undefined
                 })
                 setSaveEnabled(true)
                 setReadOnly(true) 
         }
     }
 
+    async function reloadProduction(beefProductionId: number): Promise<Production> {
+        const api = await apiBuilder.getAuthenticatedApi(keycloak)
+        return await api.getBeefProduction({beefProductionId: beefProductionId})
+    }
+
     function displayAlerts() {
         if (alerts) {
             return <Alert severity="error">{alerts}</Alert>
diff --git a/frontend/app/src/domains/production/views/beefProduction/forms/BreedingPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProduction/forms/BreedingPropertiesForm.tsx
index 99e0b28..66feb95 100644
--- a/frontend/app/src/domains/production/views/beefProduction/forms/BreedingPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProduction/forms/BreedingPropertiesForm.tsx
@@ -1,10 +1,9 @@
 import React from "react"
 
-import { Button, ButtonGroup } from "@mui/material"
-import { CheckboxElement, DatePickerElement, FormContainer, SelectElement, SubmitHandler, TextFieldElement, useForm } from 'react-hook-form-mui'
+import { CheckboxElement, DatePickerElement, FormContainer, SelectElement, TextFieldElement } from 'react-hook-form-mui'
 
-import BeefProduction from "@viandeendirect/api/dist/models/BeefProduction"
 import dayjs from "dayjs"
+import '../../../../../resources/styles/form.css'
 
 export function BreedingPropertiesForm({
     form: form, 
@@ -33,7 +32,8 @@ export function BreedingPropertiesForm({
                         label="Date de naissance"
                         disabled={disabled}
                         maxDate={maxBirthDate ? dayjs(maxBirthDate) : undefined}
-                        disableFuture={true}/>
+                        disableFuture={true}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <TextFieldElement 
@@ -41,7 +41,8 @@ export function BreedingPropertiesForm({
                         validation={{ required: 'Champ obligatoire' }} 
                         label="Ferme de naissance" 
                         variant="standard" 
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <TextFieldElement 
@@ -49,7 +50,8 @@ export function BreedingPropertiesForm({
                         validation={{ required: 'Champ obligatoire' }} 
                         label="Commune de naissance" 
                         variant="standard" 
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <TextFieldElement 
@@ -57,7 +59,8 @@ export function BreedingPropertiesForm({
                         validation={{ required: 'Champ obligatoire' }} 
                         label="Numéro d'identification de l'animal" 
                         variant="standard" 
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <SelectElement 
@@ -67,7 +70,8 @@ export function BreedingPropertiesForm({
                         label="Type d'animal" 
                         variant="standard" 
                         options={animalTypeList}
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <SelectElement 
@@ -77,13 +81,15 @@ export function BreedingPropertiesForm({
                         label="Race bovine" 
                         variant="standard" 
                         options={cattleBreedList}
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
                 <div>
                     <CheckboxElement
                         name='labelRougeCertified' 
                         label="Label rouge"
-                        disabled={disabled}/>
+                        disabled={disabled}
+                        className={disabled ? 'disabled' : ''}/>
                 </div>
             </div>
         </FormContainer>
diff --git a/frontend/app/src/domains/production/views/beefProduction/forms/CuttingPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProduction/forms/CuttingPropertiesForm.tsx
index f6fcb74..73d7b56 100644
--- a/frontend/app/src/domains/production/views/beefProduction/forms/CuttingPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProduction/forms/CuttingPropertiesForm.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
-import { ButtonGroup, Button } from '@mui/material'
-import { FormContainer, DatePickerElement, TextFieldElement, useForm } from 'react-hook-form-mui'
+import { FormContainer, DatePickerElement, TextFieldElement } from 'react-hook-form-mui'
 
-import BeefProduction from "@viandeendirect/api/dist/models/BeefProduction"
 import dayjs from 'dayjs'
+import '../../../../../resources/styles/form.css'
 
 export function CuttingPropertiesForm({
     form: form,
@@ -18,7 +17,8 @@ export function CuttingPropertiesForm({
                     validation={{ required: 'Champ obligatoire' }}
                     label="Date de la découpe" 
                     minDate={minCuttingDate ? dayjs(minCuttingDate) : undefined}
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
             <div>
                 <TextFieldElement
@@ -26,7 +26,8 @@ export function CuttingPropertiesForm({
                     validation={{ required: 'Champ obligatoire' }}
                     label="Boucherie"
                     variant="standard"
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
             <div>
                 <TextFieldElement
@@ -34,7 +35,8 @@ export function CuttingPropertiesForm({
                     validation={{ required: 'Champ obligatoire' }}
                     label="Commune de la découpe"
                     variant="standard"
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
         </div>
     </FormContainer>
diff --git a/frontend/app/src/domains/production/views/beefProduction/forms/SlaughterPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProduction/forms/SlaughterPropertiesForm.tsx
index e5a7a79..87468b1 100644
--- a/frontend/app/src/domains/production/views/beefProduction/forms/SlaughterPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProduction/forms/SlaughterPropertiesForm.tsx
@@ -3,6 +3,7 @@ import { DatePickerElement, FormContainer, SliderElement, TextFieldElement } fro
 
 import { BeefProductionService } from '../../../service/BeefProductionService.ts'
 import dayjs from 'dayjs'
+import '../../../../../resources/styles/form.css'
 
 export function SlaughterPropertiesForm({
     form: form,
@@ -22,7 +23,8 @@ export function SlaughterPropertiesForm({
                     label="Date de l'abattage" 
                     minDate={minSlaughterDate ? dayjs(minSlaughterDate) : undefined}
                     maxDate={maxSlaughterDate ? dayjs(maxSlaughterDate) : undefined}
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
             <div>
                 <TextFieldElement
@@ -30,7 +32,8 @@ export function SlaughterPropertiesForm({
                     validation={{ required: 'Champ obligatoire' }}
                     label="Abattoir"
                     variant="standard" 
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
             <div>
                 <TextFieldElement
@@ -38,7 +41,8 @@ export function SlaughterPropertiesForm({
                     validation={{ required: 'Champ obligatoire' }}
                     label="Commune d'abattage"
                     variant="standard" 
-                    disabled={disabled}/>
+                    disabled={disabled}
+                    className={disabled ? 'disabled' : ''}/>
             </div>
             <div>
                 <SliderElement
@@ -47,7 +51,8 @@ export function SlaughterPropertiesForm({
                     max={500}
                     step={10} 
                     disabled={disabled}
-                    rules={{ required: 'Champ obligatoire' }}/>
+                    rules={{ required: 'Champ obligatoire' }}
+                    className={disabled ? 'disabled' : ''}/>
                 <div>
                     <span>Poids de l'animal vivant : {BeefProductionService.getLiveWeight(warmCarcassWeight || initialWarmCarcassWeight)} kg</span>
                 </div>
diff --git a/frontend/app/src/resources/styles/form.css b/frontend/app/src/resources/styles/form.css
index e69de29..63e49c4 100644
--- a/frontend/app/src/resources/styles/form.css
+++ b/frontend/app/src/resources/styles/form.css
@@ -0,0 +1,18 @@
+.form {
+    margin-bottom: 0.5rem;
+}
+
+.disabled input {
+    -webkit-text-fill-color: black
+    !important
+}
+
+.disabled div[role="combobox"] {
+    -webkit-text-fill-color: black
+    !important
+}
+
+.disabled + span {
+    -webkit-text-fill-color: black
+    !important
+}