Merge pull request #32 from AntaresSimulatorTeam/feature/page_area_link

Feature/page area link

src/App.tsx

@@ -16,6 +16,7 @@ import { THEME_COLOR } from './shared/types';
 import { menuBottomData, menuTopData } from './routes';
 import { PegaseToastContainer } from './shared/notification/containers';
 import ProjectDetails from './pages/pegase/projects/projectDetails/ProjectDetails';
+import StudyDetails from '@/pages/pegase/studies/studyDetails/studyDetails';
 
 function App() {
   return (
@@ -28,6 +29,7 @@ function App() {
           <PegaseStar />
           <Suspense>
             <Routes>
+              <Route path="/study/:studyName" element={<StudyDetails />} />
               <Route path="/project/:projectName" element={<ProjectDetails />} />
               {Object.entries([...menuBottomData, ...menuTopData]).map(([key, route]) => (
                 <Route key={key} path={route.path} Component={route.component} />

src/pages/pegase/home/components/StudyTableDisplay.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import StudyCreationModal from '../../studies/StudyCreationModal';
 import { handleDelete } from '@/pages/pegase/home/components/studyService';
 import {RdsButton} from "rte-design-system-react";
+import { useStudyNavigation } from '@/pages/pegase/studies/useStudyNavigation';
 
 interface StudyTableDisplayProps {
   searchStudy: string | undefined;
@@ -34,6 +35,7 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
 
   // Reload trigger for re-fetching data
   const [reloadStudies, setReloadStudies] = useState<boolean>(false);
+  const { navigateToStudy } = useStudyNavigation();
 
   const handleSort = (column: string) => {
     const newSortOrder = sortByState[column] === 'asc' ? 'desc' : 'asc';
@@ -56,7 +58,6 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
     isHeaderHovered,
   );
 
-  // Pass reloadTrigger to refresh data
   const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({
     searchStudy,
     projectId,
@@ -65,9 +66,7 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
   });
 
   const selectedRowId = Object.keys(rowSelection)[0];
-
   const selectedStatus = rows[Number.parseInt(selectedRowId || '-1')]?.status?.toUpperCase();
-
   const isDuplicateActive = selectedStatus === StudyStatus.GENERATED;
   const isDeleteActive = selectedStatus === StudyStatus.ERROR || selectedStatus === StudyStatus.IN_PROGRESS;
 
@@ -86,7 +85,14 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
       });
     }
   };
+  const handleStudyClick = (study: StudyDTO) => {
+    navigateToStudy(study);
+  };
 
+  const handleRowClick = () => {
+    const selectedStudy = rows[Number.parseInt(selectedRowId || '-1')];
+    handleStudyClick(selectedStudy);
+  };
   return (
     <div>
       <div className="flex-1">
@@ -112,6 +118,7 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
         <div className="flex gap-2">
           {selectedRowId !== undefined ? (
             <>
+              <RdsButton label="Open" onClick={handleRowClick} variant="outlined" />
               <RdsButton label="Duplicate" onClick={handleDuplicate} variant="outlined" disabled={!isDuplicateActive} />
               <RdsButton
                 label="Delete"

src/pages/pegase/studies/studyDetails/AreaLinkTab.tsx

@@ -0,0 +1,79 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import {useState} from 'react';
+import {ColumnDef} from '@tanstack/react-table';
+import StdSimpleTable from '@common/data/stdSimpleTable/StdSimpleTable';
+import {RdsButton, RdsInputText} from "rte-design-system-react";
+
+
+type RowStatus = 'Missing' | 'OK' | 'Error';
+
+type RowData = {
+    hypothesis: string;
+    trajectory: string | null; // Null si aucune trajectoire n'est sélectionnée
+    status: RowStatus;
+};
+
+const AreaLinkTab = () => {
+    const [data, setData] = useState<RowData[]>([
+        {hypothesis: 'Areas', trajectory: null, status: 'Missing'},
+        {hypothesis: 'Links', trajectory: null, status: 'Missing'},
+    ]);
+
+    const handleImport = (index: number) => {
+        const updatedData = [...data];
+        updatedData[index].trajectory = 'BP_23_ref';
+        updatedData[index].status = 'OK';
+        setData(updatedData);
+    };
+
+    const columns: ColumnDef<RowData>[] = [
+        {
+            header: 'Hypothesis',
+            accessorKey: 'hypothesis',
+        },
+        {
+            header: 'Trajectory to use',
+            cell: ({row}) => {
+                const index = row.index;
+                const {trajectory} = row.original;
+                return trajectory ? (
+                    <div className="flex items-center space-x-2">
+                        <span>{trajectory}</span>
+                    </div>
+                ) : (
+                    <div className="flex items-center space-x-2">
+                        <RdsInputText label=""
+                                      value=""
+                                      placeHolder="choose a Trajectory"
+                                      variant="outlined"/>
+                        <span>or</span>
+                        <RdsButton label="Import" onClick={() => handleImport(index)}/>
+                    </div>
+                );
+            },
+        },
+        {
+            header: 'Status',
+            cell: ({row}) => {
+                const {status} = row.original;
+                if (status === 'Missing') return <span>❓ Missing</span>;
+                if (status === 'OK') return <span>✔ OK</span>;
+                if (status === 'Error') return <span>❌ Error</span>;
+                return null;
+            },
+        },
+    ];
+
+    return (
+        <div className="flex-1">
+            <StdSimpleTable id="example-table" data={data} columns={columns} columnSize="meta"/>
+        </div>
+    );
+};
+
+export default AreaLinkTab;

src/pages/pegase/studies/studyDetails/AreaLinkTableHeaders.tsx

@@ -0,0 +1,31 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { createColumnHelper } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+import { RdsButton } from 'rte-design-system-react';
+
+const columnHelper = createColumnHelper<any>();
+
+const getAreaLinkTableHeaders = () => {
+  const { t } = useTranslation();
+  return [
+    columnHelper.accessor('hypothesis', {
+      header: t('home.@hypothesis'),
+    }),
+
+    columnHelper.accessor('trajectroy', {
+      header: t('home.@trajectory'),
+      cell: () => <RdsButton label="import" />,
+    }),
+
+    columnHelper.accessor('status', {
+      header: t('home.@status'),
+    }),
+  ];
+};
+
+export default getAreaLinkTableHeaders;

src/pages/pegase/studies/studyDetails/EnrTab.tsx

@@ -0,0 +1,17 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+const EnrTab = () => {
+
+
+    return (
+        <div className="flex-1">
+           <h1>Energy</h1>
+        </div>
+    );
+};
+
+export default EnrTab;

src/pages/pegase/studies/studyDetails/LoadTab.tsx

@@ -0,0 +1,17 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+const LoadTab = () => {
+
+
+    return (
+        <div className="flex-1">
+            <h1>Load</h1>
+        </div>
+    );
+};
+
+export default LoadTab;

src/pages/pegase/studies/studyDetails/MiscLinkTab.tsx

@@ -0,0 +1,17 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+const MiscTab = () => {
+
+
+    return (
+        <div className="flex-1">
+            <h1>Misc</h1>
+        </div>
+    );
+};
+
+export default MiscTab;

src/pages/pegase/studies/studyDetails/StudyDetailsContent.tsx

@@ -0,0 +1,48 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { formatDateToDDMMYYYY } from '@/shared/utils/dateFormatter';
+import { StudyDTO } from '@/shared/types';
+import { RdsIcon, RdsIconId, RdsTagList } from 'rte-design-system-react';
+import StdIcon from '@common/base/stdIcon/StdIcon';
+import { StdIconId } from '@/shared/utils/common/mappings/iconMaps';
+
+type ProjectDetailsContentProps = {
+  study: StudyDTO;
+};
+
+export const StudyDetailsContent = ({ study }: ProjectDetailsContentProps) => {
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <div className="group flex flex-col gap-3 rounded bg-primary-100 p-2" role="banner">
+        <div className="flex items-center justify-between font-sans font-light text-gray-500">
+          <div className="flex items-center gap-3">
+            <div className="flex flex-[1_0_0] items-center gap-6">
+              <div>Study : {study.name}</div>
+              <div className="flex items-center gap-2">
+                <RdsIcon name={RdsIconId.History} color="secondary" />
+                {formatDateToDDMMYYYY(study.creationDate)}
+              </div>
+              <div className="flex items-center gap-2">
+                <RdsIcon name={RdsIconId.Person} color="secondary" />
+                By : {study.createdBy}
+              </div>
+              <div className="flex items-center gap-2">
+                <StdIcon name={StdIconId.TimeLine} color="secondary" />
+                Horizon : {study.horizon}
+              </div>
+              <div className="flex h-3 w-32">
+                <RdsTagList id={`${study.id}-tag-list`} tags={study.keywords} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StudyDetailsContent;