From f8c359f3cec871f541963f148081214f49c8e3ee Mon Sep 17 00:00:00 2001
From: Benjamin POCHAT <benjamin.pochat@gmail.com>
Date: Sun, 21 Jan 2024 21:08:09 +0100
Subject: [PATCH] production lot description for customers

---
 .../app/src/api/mock/MockApiProductions.ts    | 35 ++++++++++++++++++-
 .../components/BeefProductionCustomerCard.tsx |  9 ++++-
 .../sale/components/PackageSelector.css       | 25 -------------
 .../sale/components/PackageSelector.tsx       |  9 ++---
 4 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/frontend/app/src/api/mock/MockApiProductions.ts b/frontend/app/src/api/mock/MockApiProductions.ts
index 16e01b9..9458032 100644
--- a/frontend/app/src/api/mock/MockApiProductions.ts
+++ b/frontend/app/src/api/mock/MockApiProductions.ts
@@ -26,9 +26,42 @@ export class MockApiProductions {
     getBeefProduction(): BeefProduction {
         return {
             id: 1,
+            animalIdentifier: '1234',
             slaughterDate: '2023-10-01T10:00:00',
             animalLiveWeight: 450,
-            animalType: 'BEEF_COW'
+            animalType: 'BEEF_COW',
+            lots: [
+                {
+                    id: 1,
+                    label: 'Le petit coli de steaks',
+                    description: 'Un coli avec uniquement des steaks et des steaks hachés',
+                    netWeight: 5.0,
+                    unitPrice: 17.0,
+                    quantity: 10,
+                    quantitySold: 2,
+                    photo: 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+                },
+                {
+                    id: 2,
+                    label: 'Le coli tradition',
+                    description: 'Un coli avec un peu de tout',
+                    netWeight: 10.0,
+                    unitPrice: 17.0,
+                    quantity: 8,
+                    quantitySold: 1,
+                    photo: 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+                },
+                {
+                    id: 3,
+                    label: 'Le coli cuisson rapide',
+                    description: 'Un coli avec majoritairement des pièces à griller',
+                    netWeight: 7.0,
+                    unitPrice: 17.0,
+                    quantity: 8,
+                    quantitySold: 8,
+                    photo: 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+                }
+            ]
         }
     }
 
diff --git a/frontend/app/src/domains/production/components/BeefProductionCustomerCard.tsx b/frontend/app/src/domains/production/components/BeefProductionCustomerCard.tsx
index ca5b30b..5521924 100644
--- a/frontend/app/src/domains/production/components/BeefProductionCustomerCard.tsx
+++ b/frontend/app/src/domains/production/components/BeefProductionCustomerCard.tsx
@@ -4,14 +4,17 @@ import { useEffect, useState } from 'react'
 import { Typography } from "@mui/material"
 
 import BeefProduction from 'viandeendirect_eu/dist/model/BeefProduction.js'
+import PackageLot from 'viandeendirect_eu/dist/model/PackageLot.js'
 import { AnimalTypeUtils } from '../../../enum/AnimalType.ts'
 import { ApiInvoker } from '../../../api/ApiInvoker.ts'
 import PieChart from '../../commons/components/PieChart.tsx'
+import PackageLotDescription from './PackageLotDescription.tsx'
 
 export default function BeefProductionCustomerCard({production: production}) {
 
     const [beefProduction, setBeefProduction] = useState<BeefProduction>({})
     const [percentageSold, setPercentageSold] = useState(0)
+    const [lots, setLots]= useState([])
     const apiInvoker = new ApiInvoker()
 
     useEffect(() => {
@@ -48,8 +51,12 @@ export default function BeefProductionCustomerCard({production: production}) {
             </div>
         </div>
         <div className="sale-customer-card__product-batch-list">
-            getProducts()
+            {beefProduction.lots?.map(getLot)}
         </div>
     </>
+
+    function getLot(lot: PackageLot) {
+        return <PackageLotDescription lot={lot}></PackageLotDescription>
+    }
 }
 
diff --git a/frontend/app/src/domains/sale/components/PackageSelector.css b/frontend/app/src/domains/sale/components/PackageSelector.css
index 9a9615a..21a6cbf 100644
--- a/frontend/app/src/domains/sale/components/PackageSelector.css
+++ b/frontend/app/src/domains/sale/components/PackageSelector.css
@@ -1,31 +1,6 @@
 .package-selector {
   margin: 1rem;
   display: grid;
-  grid-template-columns: 1fr 3fr;
-}
-
-.package-selector__label {
-  font-size: large;
-  grid-column: 1/-1;
-}
-
-.package-selector__description {
-  font-size: smaller;
-  grid-column: 1/-1;
-}
-
-.package-selector__icon {
-  grid-column: 1;
-}
-
-.package-selector__total_price,
-.package-selector__unit_price,
-.package-selector__weight {
-  grid-column: 2/-1;
-}
-
-.package-selector__unit_price {
-  font-size: smaller;
 }
 
 .package-selector__actions {
diff --git a/frontend/app/src/domains/sale/components/PackageSelector.tsx b/frontend/app/src/domains/sale/components/PackageSelector.tsx
index bf9eab9..e0b2981 100644
--- a/frontend/app/src/domains/sale/components/PackageSelector.tsx
+++ b/frontend/app/src/domains/sale/components/PackageSelector.tsx
@@ -7,6 +7,7 @@ import RemoveIcon from '@mui/icons-material/Remove';
 import OrderItem from "viandeendirect_eu/dist/model/OrderItem"
 import PackageLot from "viandeendirect_eu/dist/model/PackageLot"
 
+import PackageLotDescription from '../../production/components/PackageLotDescription.tsx';
 import './PackageSelector.css'
 
 export default function PackageSelector({ lot: lot, orderItems: orderItems, updateItemsCallback: updateItemsCallback }) {
@@ -17,13 +18,7 @@ export default function PackageSelector({ lot: lot, orderItems: orderItems, upda
         
     return <>
         <div className='package-selector'>
-            <div className='package-selector__label'>{lot.label}</div>
-            <div className='package-selector__description'>{lot.description}</div>
-            <span className='icon euro-icon package-selector__icon'></span>
-            <div className='package-selector__total_price'>{lot.unitPrice * lot.netWeight} €<sup>TTC</sup></div>
-            <div className='package-selector__unit_price'>({lot.unitPrice} €<sup>TTC</sup>/kg)</div>
-            <span className='icon weight-icon package-selector__icon'></span>
-            <div className='package-selector__weight'>~{lot.netWeight} kg</div>
+            <PackageLotDescription lot={lot}></PackageLotDescription>
             <div className='package-selector__actions'>{isAddToOrderDisplayed ? getAddToOrderButton() : getChangeQuantityActions()}</div>
         </div>
     </>