Fix/ant 2722 v2 project details (#44)

* feat: project details new order and add keywords * feat: create_study back in project details and Horizon in good place for study details
AntaresSimulatorTeam · Feb 3, 2025 · e542a4d · e542a4d
1 parent 897ba45
commit e542a4d
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 16 deletions.
diff --git a/src/components/common/modal/StudyCreationModal.tsx b/src/components/common/modal/StudyCreationModal.tsx
@@ -87,7 +87,7 @@ const StudyCreationModal: React.FC<StudyCreationModalProps> = ({ onClose, study,
 
   return (
     <RdsModal size="small">
-      <RdsModal.Title onClose={onClose}>{study ? t('home.@duplicate_study') : t('home.@new_study')}</RdsModal.Title>
+      <RdsModal.Title onClose={onClose}>{study ? t('home.@duplicate_study') : t('project.@new_study')}</RdsModal.Title>
       <RdsModal.Content>
         <div className="flex gap-4 self-stretch">
           <div className="flex w-32 flex-col items-start justify-start">

diff --git a/src/pages/pegase/home/components/StudyTableDisplay.tsx b/src/pages/pegase/home/components/StudyTableDisplay.tsx
@@ -16,20 +16,26 @@ import StdSimpleTable from '@/components/common/data/stdSimpleTable/StdSimpleTab
 import { RdsButton } from 'rte-design-system-react';
 import { useStudyTableDisplay } from '@/hooks/useStudyTableDisplay';
 import { useStudyNavigation } from '@/hooks/useStudyNavigation';
+import { useTranslation } from 'react-i18next';
+import { useNewStudyModal } from '@/hooks/useNewStudyModal';
+import StudyCreationModal from '@common/modal/StudyCreationModal';
 
 interface StudyTableDisplayProps {
   searchStudy: string | undefined;
   projectId?: string;
 }
 
 const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) => {
+  const { t } = useTranslation();
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [isHeaderHovered, setIsHeaderHovered] = useState<boolean>(false);
+  const [selectedStudy, setSelectedStudy] = useState<StudyDTO | null>(null);
   // Reload trigger for re-fetching data
   const [reloadStudies, setReloadStudies] = useState<boolean>(false);
   const [sortBy, setSortBy] = useState<{ [key: string]: 'asc' | 'desc' }>({});
   const [sortedColumn, setSortedColumn] = useState<string | null>('status');
 
+  const { isModalOpen, toggleModal } = useNewStudyModal();
   const { navigateToStudy } = useStudyNavigation();
   const { rows, count, intervalSize, currentPage, setPage } = useStudyTableDisplay({
     searchTerm: searchStudy,
@@ -56,6 +62,9 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
   const isDeleteActive = selectedStatus === StudyStatus.ERROR || selectedStatus === StudyStatus.IN_PROGRESS;
 
   const handleDuplicate = () => {
+    const selectedStudy = rows[Number.parseInt(selectedRowId || '-1')];
+    setSelectedStudy(selectedStudy);
+    toggleModal();
     setReloadStudies(!reloadStudies); // Trigger reload after deleting
   };
 
@@ -102,24 +111,37 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) =
       </div>
       <div className="flex h-8 items-center justify-between bg-gray-200 px-4">
         <div className="flex gap-2">
-          {selectedRowId !== undefined && (
+          {selectedRowId !== undefined ? (
             <>
-              <RdsButton label="Open" onClick={handleRowClick} variant="outlined" />
-              <RdsButton label="Duplicate" onClick={handleDuplicate} variant="outlined" disabled={!isDuplicateActive} />
+              <RdsButton label={t('study.@open')} onClick={handleRowClick} variant="outlined" />
+              <RdsButton
+                label={t('study.@duplicate')}
+                onClick={handleDuplicate}
+                variant="outlined"
+                disabled={!isDuplicateActive}
+              />
               <RdsButton
-                label="Delete"
+                label={t('study.@delete')}
                 onClick={handleDeleteClick}
                 variant="outlined"
-                color="danger"
                 disabled={!isDeleteActive}
               />
             </>
+          ) : (
+            projectId !== '' && <RdsButton label={t('project.@new_study')} onClick={toggleModal} />
           )}
         </div>
         <StudiesPagination count={count} intervalSize={intervalSize} current={currentPage} onChange={setPage} />
       </div>
+      {isModalOpen && (
+        <StudyCreationModal
+          isOpen={isModalOpen}
+          onClose={toggleModal}
+          study={selectedStudy}
+          setReloadStudies={setReloadStudies}
+        />
+      )}
     </div>
   );
 };
-
 export default StudyTableDisplay;
diff --git a/src/pages/pegase/projects/projectDetails/ProjectDetails.tsx b/src/pages/pegase/projects/projectDetails/ProjectDetails.tsx
@@ -79,8 +79,9 @@ const ProjectDetails = () => {
       <div className="flex flex-col">
         <ProjectDetailsContent
           description={projectInfo.description}
-          createdBy={projectInfo.createdBy}
           creationDate={projectInfo.creationDate}
+          createdBy={projectInfo.createdBy}
+          keywords={projectInfo.tags}
         />
       </div>
       <div className="flex gap-4 px-3 py-2">

diff --git a/src/pages/pegase/projects/projectDetails/ProjectDetailsContent.tsx b/src/pages/pegase/projects/projectDetails/ProjectDetailsContent.tsx
@@ -11,9 +11,15 @@ type ProjectDetailsContentProps = {
   description: string;
   creationDate: Date;
   createdBy: string;
+  keywords: string[];
 };
 
-export const ProjectDetailsContent = ({ description, creationDate, createdBy }: ProjectDetailsContentProps) => {
+export const ProjectDetailsContent = ({
+  description,
+  creationDate,
+  createdBy,
+  keywords,
+}: ProjectDetailsContentProps) => {
   const handleEditClick = () => {
     console.log('TO BE DONE');
   };
@@ -25,8 +31,17 @@ export const ProjectDetailsContent = ({ description, creationDate, createdBy }:
 
         <div className="flex items-center justify-between font-sans font-light text-gray-500">
           <div className="flex items-center gap-3">
+            <span>{description}</span>
             <span>{formatDateToDDMMYYYY(creationDate)}</span>
             <span>{createdBy}</span>
+            <span>
+              {keywords.map((keyword, index) => (
+                <span key={index}>
+                  {keyword}
+                  {index < keywords.length - 1 ? ', ' : ''}
+                </span>
+              ))}
+            </span>
           </div>
 
           <RdsIconButton icon={RdsIconId.Edit} size="small" onClick={handleEditClick} />

diff --git a/src/pages/pegase/studies/studyDetails/StudyDetailsContent.tsx b/src/pages/pegase/studies/studyDetails/StudyDetailsContent.tsx
@@ -22,6 +22,10 @@ export const StudyDetailsContent = ({ study }: ProjectDetailsContentProps) => {
           <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">
+                <StdIcon name={StdIconId.TimeLine} color="secondary" />
+                Horizon : {study.horizon}
+              </div>
               <div className="flex items-center gap-2">
                 <RdsIcon name={RdsIconId.History} color="secondary" />
                 {formatDateToDDMMYYYY(study.creationDate)}
@@ -30,10 +34,6 @@ export const StudyDetailsContent = ({ study }: ProjectDetailsContentProps) => {
                 <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>

diff --git a/src/shared/i18n/en.json b/src/shared/i18n/en.json
@@ -38,7 +38,6 @@
     "@project": "Project",
     "@my_studies": "My studies",
     "@my_projects": "My projects",
-    "@new_study": "Create a study",
     "@new_project": "Create a project",
     "@duplicate_study": "Duplicate a study"
   },
@@ -49,7 +48,8 @@
     "@unpin": "Unpin",
     "@close": "Close",
     "@created": "Created",
-    "@by": "By"
+    "@by": "By",
+    "@new_study": "Create a study"
   },
   "projectDetails": {
     "@buttonEdit": "Edit"
@@ -60,5 +60,10 @@
     "@keyword_minimum_error": "Keyword must be at least {{min}} characters",
     "@keyword_maximum_error": "Keyword must not exceed {{max}} characters",
     "@keyword_max_keys_errors": "Cannot add more than ${maxNbKey} keywords`"
+  },
+  "study": {
+    "@open": "Open",
+    "@duplicate": "Duplicate",
+    "@delete": "Delete"
   }
 }
diff --git a/src/shared/i18n/fr.json b/src/shared/i18n/fr.json
@@ -46,7 +46,8 @@
     "@unpin": "Désépingler",
     "@close": "Fermer",
     "@created": "Crée le",
-    "@by": "Par"
+    "@by": "Par",
+    "@new_study": "Creer une étude"
   },
   "projectDetails": {
     "@buttonEdit": "Editer"
@@ -57,5 +58,10 @@
     "@keyword_minimum_error": "Le mot-clé doit avoir à minumum {{min}} lettres",
     "@keyword_maximum_error": "Le mot-clé ne doit pas dépasser {{max}} lettres",
     "@keyword_max_keys_errors": "Il n'est pas possible d'ajouter plus que ${maxNbKey} mot-clés`"
+  },
+  "study": {
+    "@open": "Ouvrir",
+    "@duplicate": "Dupliquer",
+    "@delete": "Effacer"
   }
 }