diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts index af1bc3e..b3b4642 100644 --- a/src/i18n/langs/en.ts +++ b/src/i18n/langs/en.ts @@ -87,6 +87,21 @@ const enTranslation = { 'question-title': 'Title', 'question-description': 'Description', 'save-question': 'Save question', + 'title-new': 'New teaching practice', + 'title-view': 'View teaching practice', + 'title-update': 'Update teaching practice', + 'required-title': 'Required fields', + 'required-description': 'Title and description are required.', + 'required-question-title': 'Question is required', + 'required-question-description': 'Click on Add question', + 'add-question': 'Add question', + 'question-list': 'Question {{value}}', + question: { + title: 'Question title', + subtitle: 'Question subtitle', + save: 'Save question', + empty: 'No questions', + }, }, }, diff --git a/src/i18n/langs/np.ts b/src/i18n/langs/np.ts index fd17d16..a9db741 100644 --- a/src/i18n/langs/np.ts +++ b/src/i18n/langs/np.ts @@ -18,6 +18,7 @@ const npTranslation = { 'all-schools': 'सबै विद्यालयहरू', 'all-districts': 'सबै जिल्लाहरू', actions: 'कार्यहरू', + save: 'बचत गर्नुहोस्', }, Navbar: { dashboard: 'मुख्य पृष्ठ', @@ -79,6 +80,21 @@ const npTranslation = { 'question-title': 'शीर्षक', 'question-description': 'विवरण', 'save-question': 'प्रश्न सुरक्षण', + 'title-new': 'नयाँ शिक्षण अभ्यास', + 'title-view': 'शिक्षण अभ्यास हेर्नुहोस्', + 'title-update': 'शिक्षण अभ्यास अपडेट गर्नुहोस्', + 'required-title': 'आवश्यक फिल्डहरू', + 'required-description': 'शीर्षक र विवरण आवश्यक छन्।', + 'required-question-title': 'प्रश्न आवश्यक छ', + 'required-question-description': 'प्रश्न थप्नका लागि क्लिक गर्नुहोस्', + 'add-question': 'प्रश्न थप्नुहोस्', + 'question-list': 'प्रश्न {{value}}', + question: { + title: 'प्रश्नको शीर्षक', + subtitle: 'प्रश्नको उपशीर्षक', + save: 'प्रश्न बचत गर्नुहोस्', + empty: 'कुनै प्रश्नहरू छैनन्', + }, }, }, 'coaching-sessions': { diff --git a/src/pages/Competencies/CompetenceForm/index.tsx b/src/pages/Competencies/CompetenceForm/index.tsx index 4ed5a1a..c537e92 100644 --- a/src/pages/Competencies/CompetenceForm/index.tsx +++ b/src/pages/Competencies/CompetenceForm/index.tsx @@ -1,4 +1,4 @@ -import { ICompetence, IQuestion } from "@/types"; +import { ICompetence, IQuestion } from '@/types'; import { Input, Button, @@ -17,9 +17,10 @@ import { IconButton, HStack, useToast, -} from "@chakra-ui/react"; -import React, { ChangeEvent, useEffect, useState } from "react"; -import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"; +} from '@chakra-ui/react'; +import React, { ChangeEvent, useEffect, useState } from 'react'; +import { AddIcon, DeleteIcon, EditIcon } from '@chakra-ui/icons'; +import { useTranslation } from 'react-i18next'; type Props = { isOpen: boolean; @@ -29,21 +30,16 @@ type Props = { readonly?: boolean; }; -const CompetenceForm: React.FC = ({ - isOpen, - competence, - onClose, - onSubmit, - readonly, -}) => { +const CompetenceForm: React.FC = ({ isOpen, competence, onClose, onSubmit, readonly }) => { + const { t } = useTranslation(); const toast = useToast(); const [competenceValues, setCompetenceValues] = useState({ - title: "", + title: '', questions: [], }); const [question, setQuestion] = useState({ - title: "", - description: "", + title: '', + description: '', }); const [editIndex, setEditIndex] = useState(null); const [showQuestionForm, setShowQuestionForm] = useState(); @@ -54,7 +50,7 @@ const CompetenceForm: React.FC = ({ setShowQuestionForm(false); } else { setCompetenceValues({ - title: "", + title: '', questions: [], }); setShowQuestionForm(true); @@ -89,22 +85,20 @@ const CompetenceForm: React.FC = ({ } else { setCompetenceValues({ ...competenceValues, - questions: competenceValues.questions - ? [...competenceValues.questions, question] - : [question], + questions: competenceValues.questions ? [...competenceValues.questions, question] : [question], }); } - setQuestion({ title: "", description: "" }); + setQuestion({ title: '', description: '' }); setShowQuestionForm(false); } else { toast({ - title: "Required fields.", - description: "Title and description are required.", - status: "warning", + title: t('teacher-practices.form.required-title'), + description: t('teacher-practices.form.required-description'), + status: 'warning', duration: 9000, isClosable: true, - position: "top-left", + position: 'top-left', }); } }; @@ -120,8 +114,7 @@ const CompetenceForm: React.FC = ({ const handleRemoveQuestion = (index: number) => { setCompetenceValues({ ...competenceValues, - questions: - competenceValues?.questions?.filter((q, i) => i !== index) || [], + questions: competenceValues?.questions?.filter((q, i) => i !== index) || [], }); if (editIndex === index) { setEditIndex(null); @@ -133,23 +126,23 @@ const CompetenceForm: React.FC = ({ if (!competenceValues.title) { toast({ - title: "Teaching practice name is required.", - status: "warning", + title: t('teacher-practices.form.required-title'), + status: 'warning', duration: 9000, isClosable: true, - position: "top-left", + position: 'top-left', }); return; } if (competenceValues?.questions?.length === 0) { toast({ - title: "Question is required.", - description: "Click on Add question", - status: "warning", + title: t('teacher-practices.form.required-question-title'), + description: t('teacher-practices.form.required-question-description'), + status: 'warning', duration: 9000, isClosable: true, - position: "top-left", + position: 'top-left', }); return; } @@ -161,33 +154,27 @@ const CompetenceForm: React.FC = ({ -
+ - {competence - ? readonly - ? "View teaching practice" - : "Update teaching practice" - : "New teaching practice"} + {t( + competence + ? readonly + ? 'teacher-practices.form.title-view' + : 'teacher-practices.form.title-update' + : 'teacher-practices.form.title-new', + )} - Teaching practice name + {t('teacher-practices.form.name')} {readonly ? ( {competenceValues.title} ) : ( - + )} @@ -198,17 +185,12 @@ const CompetenceForm: React.FC = ({ index === editIndex && showQuestionForm ? ( - Título da Questão - + {t('teacher-practices.form.question.title')} + - Subtítulo da Questão + {t('teacher-practices.form.question.subtitle')} = ({ /> - ) : ( - {`Question ${index + 1}`} + + {t('teacher-practices.form.question-list', { value: index + 1 })} + {!readonly && ( <> @@ -253,49 +229,40 @@ const CompetenceForm: React.FC = ({ - Title + {t('teacher-practices.form.question-title')} {q.title} - Description + {t('teacher-practices.form.question-description')} {q.description} - ) + ), )} - {competenceValues?.questions?.length === 0 && - !showQuestionForm && ( - - No questions - - )} + {competenceValues?.questions?.length === 0 && !showQuestionForm && ( + + {t('teacher-practices.form.question.empty')} + + )} - {competenceValues?.questions && - competenceValues?.questions?.length > 0 && ( - - )} + {competenceValues?.questions && competenceValues?.questions?.length > 0 && ( + + )} {showQuestionForm && editIndex === null && ( {`Question ${ - (competenceValues?.questions && - competenceValues?.questions?.length + 1) || - 1 + (competenceValues?.questions && competenceValues?.questions?.length + 1) || 1 }`} - Title - + {t('teacher-practices.form.question-title')} + - Description + {t('teacher-practices.form.question-description')} = ({ - - @@ -330,7 +290,7 @@ const CompetenceForm: React.FC = ({ mt={3} onClick={() => setShowQuestionForm(true)} > - Add question + {t('teacher-practices.form.add-question')} )} @@ -339,10 +299,10 @@ const CompetenceForm: React.FC = ({ {!readonly && ( - )}