Skip to content

Commit

Permalink
adjust translate in teaching practices
Browse files Browse the repository at this point in the history
  • Loading branch information
Janderson Souza Matias authored and Janderson Souza Matias committed Dec 19, 2023
1 parent c199d69 commit 4d6aaa1
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 106 deletions.
15 changes: 15 additions & 0 deletions src/i18n/langs/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
},

Expand Down
16 changes: 16 additions & 0 deletions src/i18n/langs/np.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const npTranslation = {
'all-schools': 'सबै विद्यालयहरू',
'all-districts': 'सबै जिल्लाहरू',
actions: 'कार्यहरू',
save: 'बचत गर्नुहोस्',
},
Navbar: {
dashboard: 'मुख्य पृष्ठ',
Expand Down Expand Up @@ -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': {
Expand Down
172 changes: 66 additions & 106 deletions src/pages/Competencies/CompetenceForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ICompetence, IQuestion } from "@/types";
import { ICompetence, IQuestion } from '@/types';
import {
Input,
Button,
Expand All @@ -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;
Expand All @@ -29,21 +30,16 @@ type Props = {
readonly?: boolean;
};

const CompetenceForm: React.FC<Props> = ({
isOpen,
competence,
onClose,
onSubmit,
readonly,
}) => {
const CompetenceForm: React.FC<Props> = ({ isOpen, competence, onClose, onSubmit, readonly }) => {
const { t } = useTranslation();
const toast = useToast();
const [competenceValues, setCompetenceValues] = useState<ICompetence>({
title: "",
title: '',
questions: [],
});
const [question, setQuestion] = useState<IQuestion>({
title: "",
description: "",
title: '',
description: '',
});
const [editIndex, setEditIndex] = useState<number | null>(null);
const [showQuestionForm, setShowQuestionForm] = useState<boolean>();
Expand All @@ -54,7 +50,7 @@ const CompetenceForm: React.FC<Props> = ({
setShowQuestionForm(false);
} else {
setCompetenceValues({
title: "",
title: '',
questions: [],
});
setShowQuestionForm(true);
Expand Down Expand Up @@ -89,22 +85,20 @@ const CompetenceForm: React.FC<Props> = ({
} 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',
});
}
};
Expand All @@ -120,8 +114,7 @@ const CompetenceForm: React.FC<Props> = ({
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);
Expand All @@ -133,23 +126,23 @@ const CompetenceForm: React.FC<Props> = ({

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;
}
Expand All @@ -161,33 +154,27 @@ const CompetenceForm: React.FC<Props> = ({
<Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
<DrawerOverlay />
<DrawerContent roundedLeft={14}>
<form
onSubmit={handleSubmit}
style={{ height: "100%", display: "flex", flexDirection: "column" }}
>
<form onSubmit={handleSubmit} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<DrawerCloseButton mt={2} color="Primary.$200" />
<DrawerHeader>
{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',
)}
</DrawerHeader>

<DrawerBody>
<FormControl id="title" isRequired>
<FormLabel fontSize="16px" lineHeight="24px" fontWeight={500}>
Teaching practice name
{t('teacher-practices.form.name')}
</FormLabel>
{readonly ? (
<Text>{competenceValues.title}</Text>
) : (
<Input
type="text"
name="title"
value={competenceValues.title}
onChange={handleInputChange}
/>
<Input type="text" name="title" value={competenceValues.title} onChange={handleInputChange} />
)}
</FormControl>

Expand All @@ -198,17 +185,12 @@ const CompetenceForm: React.FC<Props> = ({
index === editIndex && showQuestionForm ? (
<Box key={index} w="full">
<FormControl id="title" isRequired>
<FormLabel>Título da Questão</FormLabel>
<Input
type="text"
name="title"
value={question.title}
onChange={handleQuestionChange}
/>
<FormLabel>{t('teacher-practices.form.question.title')}</FormLabel>
<Input type="text" name="title" value={question.title} onChange={handleQuestionChange} />
</FormControl>

<FormControl id="description" mt={3} isRequired>
<FormLabel>Subtítulo da Questão</FormLabel>
<FormLabel>{t('teacher-practices.form.question.subtitle')}</FormLabel>
<Input
type="text"
name="description"
Expand All @@ -217,22 +199,16 @@ const CompetenceForm: React.FC<Props> = ({
/>
</FormControl>

<Button
colorScheme="teal"
mt={3}
onClick={handleSaveQuestion}
>
Salvar Questão
<Button colorScheme="teal" mt={3} onClick={handleSaveQuestion}>
{t('teacher-practices.form.question.save')}
</Button>
</Box>
) : (
<VStack key={index} display="flex" w="full">
<HStack w="full" alignItems="center">
<Text
flex={1}
fontWeight={600}
fontSize="16px"
>{`Question ${index + 1}`}</Text>
<Text flex={1} fontWeight={600} fontSize="16px">
{t('teacher-practices.form.question-list', { value: index + 1 })}
</Text>

{!readonly && (
<>
Expand All @@ -253,49 +229,40 @@ const CompetenceForm: React.FC<Props> = ({
</HStack>
<VStack w="full" alignItems="start">
<Text fontWeight={600} fontSize="14px">
Title
{t('teacher-practices.form.question-title')}
</Text>
<Text>{q.title}</Text>
<Text fontWeight={600} fontSize="14px">
Description
{t('teacher-practices.form.question-description')}
</Text>
<Text>{q.description}</Text>
</VStack>
</VStack>
)
),
)}

{competenceValues?.questions?.length === 0 &&
!showQuestionForm && (
<Text color="gray.600" mr="auto">
No questions
</Text>
)}
{competenceValues?.questions?.length === 0 && !showQuestionForm && (
<Text color="gray.600" mr="auto">
{t('teacher-practices.form.question.empty')}
</Text>
)}

{competenceValues?.questions &&
competenceValues?.questions?.length > 0 && (
<Box my="24px" w="100%" h="1px" bg="#eee" />
)}
{competenceValues?.questions && competenceValues?.questions?.length > 0 && (
<Box my="24px" w="100%" h="1px" bg="#eee" />
)}

{showQuestionForm && editIndex === null && (
<Box w="full">
<Text mb="24px" fontWeight={600}>{`Question ${
(competenceValues?.questions &&
competenceValues?.questions?.length + 1) ||
1
(competenceValues?.questions && competenceValues?.questions?.length + 1) || 1
}`}</Text>
<FormControl id="title" isRequired>
<FormLabel>Title</FormLabel>
<Input
type="text"
name="title"
value={question.title}
onChange={handleQuestionChange}
/>
<FormLabel>{t('teacher-practices.form.question-title')}</FormLabel>
<Input type="text" name="title" value={question.title} onChange={handleQuestionChange} />
</FormControl>

<FormControl id="description" mt={3} isRequired>
<FormLabel>Description</FormLabel>
<FormLabel>{t('teacher-practices.form.question-description')}</FormLabel>
<Input
type="text"
name="description"
Expand All @@ -305,18 +272,11 @@ const CompetenceForm: React.FC<Props> = ({
</FormControl>

<HStack mt="24px">
<Button
colorScheme="blue"
mr={3}
onClick={handleSaveQuestion}
>
Salvar Questão
<Button colorScheme="blue" mr={3} onClick={handleSaveQuestion}>
{t('teacher-practices.form.question.save')}
</Button>
<Button
variant="outline"
onClick={() => setShowQuestionForm(false)}
>
Cancel
<Button variant="outline" onClick={() => setShowQuestionForm(false)}>
{t('common.cancel')}
</Button>
</HStack>
</Box>
Expand All @@ -330,7 +290,7 @@ const CompetenceForm: React.FC<Props> = ({
mt={3}
onClick={() => setShowQuestionForm(true)}
>
Add question
{t('teacher-practices.form.add-question')}
</Button>
)}
</VStack>
Expand All @@ -339,10 +299,10 @@ const CompetenceForm: React.FC<Props> = ({
{!readonly && (
<DrawerFooter mt="auto">
<Button colorScheme="blue" mr={3} type="submit">
Save
{t('common.save')}
</Button>
<Button variant="outline" mr={"auto"} onClick={onClose}>
Cancel
<Button variant="outline" mr={'auto'} onClick={onClose}>
{t('common.cancel')}
</Button>
</DrawerFooter>
)}
Expand Down

0 comments on commit 4d6aaa1

Please sign in to comment.