feat: projectModal added to projectDetail page

AntaresSimulatorTeam · Jan 30, 2025 · 608bcd6 · 608bcd6
1 parent 61ccf17
commit 608bcd6
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 10 deletions.
diff --git a/src/components/common/modal/StudyCreationModal.tsx b/src/components/common/modal/StudyCreationModal.tsx
@@ -90,7 +90,7 @@ const StudyCreationModal: React.FC<StudyCreationModalProps> = ({ onClose, study,
       <RdsModal.Title onClose={onClose}>{study ? t('home.@duplicate_study') : t('home.@new_study')}</RdsModal.Title>
       <RdsModal.Content>
         <div className="flex gap-4 self-stretch">
-          <div className="flex w-[300px] flex-col items-start justify-start">
+          <div className="flex w-32 flex-col items-start justify-start">
             <RdsInputText
               label="Name"
               value={studyName}
@@ -107,7 +107,7 @@ const StudyCreationModal: React.FC<StudyCreationModalProps> = ({ onClose, study,
               minNbCharacters={3}
             />
           </div>
-          <div className="flex w-[242px] flex-col items-start justify-start">
+          <div className="flex w-32 flex-col items-start justify-start">
             <ProjectInput value={projectName} onChange={setProjectName} />
           </div>
         </div>

diff --git a/src/pages/pegase/home/pinnedProjects/PinnedProjectCard.tsx b/src/pages/pegase/home/pinnedProjects/PinnedProjectCard.tsx
@@ -33,7 +33,7 @@ const PinnedProjectCards = () => {
   const deleteProject = async (projectId: string) => {
     try {
       await deleteProjectById(projectId);
-      // Met à jour la liste des projets (et les projets épinglés)
+      // Update pinned project list
       dispatch?.({
         type: PROJECT_ACTION.REMOVE_PROJECT,
         payload: projectId,

diff --git a/src/pages/pegase/projects/projectDetails/ProjectDetailsHeader.tsx b/src/pages/pegase/projects/projectDetails/ProjectDetailsHeader.tsx
@@ -5,6 +5,8 @@
  */
 
 import StdAvatar from '@/components/common/layout/stdAvatar/StdAvatar';
+import { ProjectCreationModal } from '@/components/common/modal/ProjectCreationModal';
+import { useNewStudyModal } from '@/hooks/useNewStudyModal';
 import { useTranslation } from 'react-i18next';
 import { RdsButton, RdsHeading } from 'rte-design-system-react';
 
@@ -15,11 +17,13 @@ type ProjectDetailsHeaderProps = {
 
 const ProjectDetailsHeader = ({ projectName, createdBy }: ProjectDetailsHeaderProps) => {
   const { t } = useTranslation();
+  const { isModalOpen, toggleModal } = useNewStudyModal();
   return (
     <div className="flex items-center justify-between px-3 py-2">
       <RdsHeading title={projectName} />
       <div className="ml-auto flex items-center gap-4">
-        <RdsButton label={t('home.@buttonNewProject')} variant="contained" color="primary" />
+        <RdsButton label={t('home.@buttonNewProject')} variant="contained" color="primary" onClick={toggleModal} />
+        {isModalOpen && <ProjectCreationModal onClose={toggleModal} />}
         <StdAvatar
           size="s"
           backgroundColor="green"

diff --git a/src/pages/pegase/studies/KeywordsInput.tsx b/src/pages/pegase/studies/KeywordsInput.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { RdsButton, RdsIcon, RdsIconId, RdsInputText } from 'rte-design-system-react';
 import { fetchSuggestedKeywords } from '@/shared/services/studyService';
 import { clsx } from 'clsx';
+import { useTranslation } from 'react-i18next';
 
 interface KeywordsInputProps {
   keywords: string[];
@@ -26,6 +27,7 @@ const KeywordsInput: React.FC<KeywordsInputProps> = ({
   minNbCharacters,
   width,
 }) => {
+  const { t } = useTranslation();
   const [keywordInput, setKeywordInput] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [suggestedKeywords, setSuggestedKeywords] = useState<string[]>([]);
@@ -44,19 +46,19 @@ const KeywordsInput: React.FC<KeywordsInputProps> = ({
   const handleAddKeyword = (suggestedKeyword = keywordInput) => {
     if (suggestedKeyword.trim()) {
       if (keywords.includes(suggestedKeyword.trim())) {
-        setErrorMessage('Keyword already exists');
+        setErrorMessage(t('projectModal.@keyword_already_exists'));
       } else if (
         minNbCharacters &&
         maxNbCharacters &&
         (suggestedKeyword.trim().length < minNbCharacters || suggestedKeyword.trim().length > maxNbCharacters)
       ) {
-        setErrorMessage(`Keyword must be between ${minNbCharacters} and ${maxNbCharacters} characters`);
+        setErrorMessage(t('projectModal.@keyword_length_error', { min: minNbCharacters, max: maxNbCharacters }));
       } else if (minNbCharacters && !maxNbCharacters && suggestedKeyword.trim().length < minNbCharacters) {
-        setErrorMessage(`Keyword must be at least ${minNbCharacters} characters`);
+        setErrorMessage(t('projectModal.@keyword_minimum_error', { min: minNbCharacters }));
       } else if (!minNbCharacters && maxNbCharacters && suggestedKeyword.trim().length > maxNbCharacters) {
-        setErrorMessage(`Keyword must not exceed ${maxNbCharacters} characters`);
+        setErrorMessage(t('projectModal.@keyword_maximum_error', { max: maxNbCharacters }));
       } else if (maxNbKeywords && keywords.length >= maxNbKeywords) {
-        setErrorMessage(`Cannot add more than ${maxNbKeywords} keywords`);
+        setErrorMessage(t('projectModal.@keyword_max_keys_errors', { maxNbKey: maxNbKeywords }));
       } else {
         setKeywords((prevKeywords) => [...prevKeywords, suggestedKeyword.trim()]);
         setKeywordInput('');

diff --git a/src/shared/i18n/en.json b/src/shared/i18n/en.json
@@ -53,5 +53,12 @@
   },
   "projectDetails": {
     "@buttonEdit": "Edit"
+  },
+  "projectModal": {
+    "@keyword_already_exists": "Keyword already exists",
+    "@keyword_length_error": "Keyword must be between {{min}} and {{max}} characters",
+    "@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`"
   }
 }
diff --git a/src/shared/i18n/fr.json b/src/shared/i18n/fr.json
@@ -50,5 +50,12 @@
   },
   "projectDetails": {
     "@buttonEdit": "Editer"
+  },
+  "projectModal": {
+    "@keyword_already_exists": "Le mot-clé existe déjà",
+    "@keyword_length_error": "Le mot-clé doit avoir entre {{min}} et {{max}} lettres",
+    "@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`"
   }
 }