From 2d17bc294c16886f0adc82b4ac813e9de940dd7e Mon Sep 17 00:00:00 2001
From: Theo Macron <theo.macron0315@gmail.com>
Date: Fri, 21 Jun 2024 19:18:33 +0200
Subject: [PATCH] wip

---
 .../stdcmV2/components/StdcmTableResults.tsx  | 86 +++++++++++------
 .../scss/applications/stdcmV2/_home.scss      | 93 ++++++++-----------
 2 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/front/src/applications/stdcmV2/components/StdcmTableResults.tsx b/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
index 07fd1c1a9b1..7ecc3ed1343 100644
--- a/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmTableResults.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import { Button } from '@osrd-project/ui-core';
 import { useTranslation } from 'react-i18next';
 
 import type { ManageTrainSchedulePathProperties } from 'applications/operationalStudies/types';
 import type { SimulationReportSheetProps, StdcmV2SuccessResponse } from 'applications/stdcm/types';
 import { getOperationalPointsWithTimes } from 'applications/stdcm/utils';
 import type { RollingStockWithLiveries } from 'common/api/osrdEditoastApi';
+import { size } from 'lodash';
 
 type SimulationTableProps = {
   stdcmData: StdcmV2SuccessResponse;
@@ -28,48 +30,72 @@ const StcdmTableResults = ({
 
   const opList = getOperationalPointsWithTimes(simulationReport);
 
+  const [showAllPR, setShowAllPR] = useState(false);
+
+  const handleShowAllClick = () => {
+    setShowAllPR((prevState) => !prevState);
+  };
+
   return (
     <div className="table-container">
       <table className="table-results">
         <thead>
-          <tr>
-            <th aria-label="line-count" />
-            <th>{t('operationalPoint')}</th>
-            <th>{t('code')}</th>
-            <th>{t('endStop')}</th>
-            <th>{t('passageStop')}</th>
-            <th>{t('startStop')}</th>
-            <th>{t('weight')}</th>
-            <th>{t('refEngine')}</th>
-          </tr>
+          <th aria-label="line-count" />
+          <th>{t('operationalPoint')}</th>
+          <th>{t('code')}</th>
+          <th>{t('endStop')}</th>
+          <th>{t('passageStop')}</th>
+          <th>{t('startStop')}</th>
+          <th>{t('weight')}</th>
+          <th>{t('refEngine')}</th>
         </thead>
         <tbody className="table-results">
           {opList.map((step, index) => {
             const isFirstStep = index === 0;
             const isLastStep = index === opList.length - 1;
             const prevStep = opList[index - 1];
-            return (
-              <tr key={index} className="tbody">
-                <td className="index">{index + 1}</td>
-                <td className="op">
-                  {' '}
-                  {!isFirstStep && !isLastStep && step.name === prevStep.name
-                    ? '='
-                    : step.name || 'Unknown'}
-                </td>
-                <td className="ch">{step.ch}</td>
-                <td className="td">{isLastStep ? step.time : ''}</td>
-                <td className="">{isFirstStep || isLastStep ? '' : step.time}</td>
-                <td className="start">{isFirstStep ? step.departureTime : ''}</td>
-                <td className="td">
-                  {!isFirstStep ? '=' : `${Math.floor(rollingStockData.mass / 1000)} t`}
-                </td>
-                <td className="td"> {!isFirstStep ? '=' : rollingStockData.metadata?.reference}</td>
-              </tr>
-            );
+            const shouldRenderRow = isFirstStep || /* step.stop > '0' || */ isLastStep;
+            if (showAllPR || shouldRenderRow) {
+              return (
+                <tr key={index}>
+                  <td>{index + 1}</td>
+                  <td>
+                    {!isFirstStep && !isLastStep && step.name === prevStep.name
+                      ? '='
+                      : step.name || 'Unknown'}
+                  </td>
+                  <td>{step.ch}</td>
+                  <td className="stop">{isLastStep ? step.time : ''}</td>
+                  <td className="stop">{isFirstStep || isLastStep ? '' : step.time}</td>
+                  <td className="stop">{isFirstStep ? step.departureTime : ''}</td>
+                  <td>
+                    {!isFirstStep && !isLastStep
+                      ? '='
+                      : `${Math.floor(rollingStockData.mass / 1000)} t`}
+                  </td>
+                  <td>
+                    {' '}
+                    {!isFirstStep && !isLastStep ? '=' : rollingStockData.metadata?.reference}
+                  </td>
+                </tr>
+              );
+            }
+            return null;
           })}
         </tbody>
       </table>
+      <div className="display-all">
+        <div className="button-display-all-PR">
+          <Button
+            variant="Normal"
+            label={showAllPR ? 'Afficher les jalons principaux' : 'Afficher tous les jalons'}
+            onClick={handleShowAllClick}
+          />
+        </div>
+        <div className="button-get-simulation">
+          <Button label="Retenir cette simulation" />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss
index d979e1bd412..67276f336bb 100644
--- a/front/src/styles/scss/applications/stdcmV2/_home.scss
+++ b/front/src/styles/scss/applications/stdcmV2/_home.scss
@@ -63,78 +63,59 @@
         .simuation-results {
             display: flex;
             justify-content: space-between; 
+
             .table-container {
                 margin-top: 2.125rem;
                 margin-left: 2rem;
                 width: 50.25rem;
-                border-radius: 0.375rem;
             }
               .table-results {
-               border: none;
-              }
-              thead {
-                font-size: 0.875rem;
-                font-weight: 400;
-                color: rgb(121, 118, 113);
+                border-radius: 0.375rem;
                 background-color: rgba(0, 0, 0, 0.05);
-                padding-top: 0.313rem;
-                padding-bottom: 0.313rem;
               }
-              tbody tr:nth-child(odd) {
-                background-color: rgb(239, 243, 245); /* Couleur de fond pour les lignes impaires */
-            }
-            
-            tbody tr:nth-child(even) {
-                background-color: rgb(246, 248, 249); /* Couleur de fond pour les lignes paires */
-            }
-              .index {
+                th {
+                    height: 2rem;
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    text-transform: capitalize;
+                    color: rgb(121, 118, 113);
+                    padding-top: 0.313rem;
+                    padding-bottom: 0.313rem;
+                }
+                tbody tr:nth-child(odd) {
+                background-color: rgb(239, 243, 245); 
+                }
+                tbody tr:nth-child(even) {
+                background-color: rgb(246, 248, 249);
+                }
+              td {
+                height: 2rem;
                 font-size: 0.875;
                 font-weight: 400;
-                color: rgb(121, 118, 113);
-                line-height: 1.25rem;
-                padding-left: 1.938rem;
-              };
-              .op {
-                font-size: 0.875rem;
-                font-weight: 400;
-                color: rgb(49, 46, 43);
-                line-height: 1.25rem;
-                padding-left: 1.438rem;
-              }
-              .ch {
-                font-size: 0.875rem;
-                font-weight: 400;
                 color: rgb(49, 46, 43);
                 line-height: 1.25rem;
-                padding-left: 1.438rem;
-              }
-              .start {
-                font-size: 16;
-                font-weight: 400;
-                color: #000000;
-                letter-spacing: -0.2;
               }
-              .td {
+              .stop {
                 font-size: 14;
-                padding: 6;
-              }
-              .weight {
-                font-size: 0.875rem;
-                font-weight: 400;
-                color: rgb(49, 46, 43);
+                font-weight: 600;
+                color: rgb(0, 0, 0);
                 line-height: 1.25rem;
-                padding-left: 1.438rem;
               }
-              .ref-engine {
-                font-size: 0.875rem;
-                font-weight: 400;
-                color: rgb(49, 46, 43);
-                line-height: 1.25rem;
-                padding-left: 1.438rem;
-              }
-              .tbody {
-                height: 40;
-                border-top: 1.6 solid #D3D1CF;
+              .display-all {
+                height: 6.5rem;
+                background-color: rgba(0, 0, 0, 0.05);
+                display: flex;
+                justify-content: space-between; 
+                border-bottom-left-radius: 0.375rem;
+                border-bottom-right-radius: 0.375rem;
+                .button-display-all-PR {
+                    padding-top: 2rem;
+                    padding-left: 2.25rem;
+                }
+                .button-get-simulation {
+                    padding-top: 2rem;
+                    padding-right: 2.25rem;
+                }
               }
             }
             .map-results {