Skip to content

Commit

Permalink
✨ feat: Comentários Visita
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedrogomes18
pedrogomes18 committed Sep 23, 2024
1 parent 41e4132 commit 4574bc9
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 90 deletions.
185 changes: 154 additions & 31 deletions src/components/AccordionVisit/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import VisitGradesService from '@services/VisitGradesService';

// type AccordionProps = {
// title?: string;
// media?: number | string;
// questions?: { question: string; grade: string; comments?: string }[];
// questionGrades?: number[];
// categories?: string[];
// };

type AccordionProps = {
title?: string;
media?: number | string;
questions?: { question: string; grade: string }[];
questionGrades?: number[];
categories?: {
categoryName: string;
questions: { question: string; grade: string; comments?: string }[];
}[];
visitId: string;
};

const formatNumber = (number: number | string) => {
Expand Down Expand Up @@ -40,15 +52,42 @@ const AccordionHeader: React.FC<{
</TouchableWithoutFeedback>
);

// type AccordionContentProps = {
// isExpanded: boolean;
// questions?: { question: string; grade: string; comments?: string }[] | null;
// };

type AccordionContentProps = {
isExpanded: boolean;
questions?: { question: string; grade: string }[] | null;
categories?:
| {
categoryName: string;
questions: { question: string; grade: string; comments?: string }[];
}[]
| null;
visitId: string;
};

const AccordionContent: React.FC<AccordionContentProps> = ({
isExpanded,
questions,
categories,
visitId,
}) => {
const [comments, setComments] = useState<string[]>([]);

useEffect(() => {
const fetchData = async () => {
const comments = await VisitGradesService.getCommentsByVisitId(visitId);
// Filtra apenas os comentários que têm texto
const filteredComments = comments.filter(
(comment) => comment.trim() !== ''
);
setComments(filteredComments);
};

fetchData();
}, [visitId]);

const formatNumber = (number: string) => {
const isNumeric = /^\d*\.?\d*$/.test(number);

Expand All @@ -59,35 +98,73 @@ const AccordionContent: React.FC<AccordionContentProps> = ({
return '';
};

if (!isExpanded) {
return null;
}

return (
isExpanded && (
<View style={styles.content}>
{questions?.map((item, index) => (
<View
key={index}
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 4,
}}
>
<Text style={styles.questionText}>{item.question}</Text>
<Text style={styles.gradeText}>
{formatNumber(item.grade) || 'N.A'}
</Text>
</View>
))}
</View>
)
<View style={styles.content}>
{categories?.map((category, index) => (
<View key={index} style={styles.categoryContainer}>
<Text style={styles.categoryTitle}>{category.categoryName}</Text>
{category.questions.map((item, i) => (
<View key={i}>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 4,
}}
>
<Text style={styles.questionText}>{item.question}</Text>
<Text style={styles.gradeText}>
{formatNumber(item.grade) || 'N.A'}
</Text>
</View>
</View>
))}
</View>
))}
{/* Mostrar o comentário da categoria apenas uma vez no final */}
{comments.length > 0 && (
<Text style={styles.commentText}>
{'Comentários:\n' + comments.join('\n')}
</Text>
)}
</View>
);

// return (
// <View style={styles.content}>
// {questions?.map((item, index) => (
// <>
// <View
// key={index}
// style={{
// display: 'flex',
// flexDirection: 'row',
// justifyContent: 'space-between',
// paddingHorizontal: 4,
// }}
// >
// <Text style={styles.questionText}>{item.question}</Text>
// <Text style={styles.gradeText}>
// {formatNumber(item.grade) || 'N.A'}
// </Text>
// </View>
// <Text style={styles.questionText}>{item.comments}</Text>
// </>
// ))}
// </View>
// );
};

const AccordionVisit: React.FC<AccordionProps> = ({
title,
media,
questions,
questionGrades,
title = '',
media = 0,
categories = null,
visitId,
}) => {
const [isExpanded, setIsExpanded] = useState(false);

Expand All @@ -96,19 +173,64 @@ const AccordionVisit: React.FC<AccordionProps> = ({
};

return (
<View style={styles.container}>
<View style={styles.accordion}>
<AccordionHeader
title={title}
media={media}
isExpanded={isExpanded}
toggleExpand={toggleExpand}
/>
<AccordionContent isExpanded={isExpanded} questions={questions} />
<AccordionContent
isExpanded={isExpanded}
categories={categories}
visitId={visitId}
/>
</View>
);
};

// const AccordionVisit: React.FC<AccordionProps> = ({
// title,
// media,
// questions,
// questionGrades,
// }) => {
// const [isExpanded, setIsExpanded] = useState(false);

// const toggleExpand = () => {
// setIsExpanded(!isExpanded);
// };

// return (
// <View style={styles.container}>
// <AccordionHeader
// title={title || 'Default Title'}
// media={media ?? 0}
// isExpanded={isExpanded}
// toggleExpand={toggleExpand}
// />
// <AccordionContent isExpanded={isExpanded} categories={categories} />
// </View>
// );
// };

const styles = StyleSheet.create({
categoryContainer: {
marginBottom: 10,
},
commentText: {
fontStyle: 'italic',
color: '#666',
marginLeft: 10,
},
categoryTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5,
},
accordion: {
marginBottom: 10,
},
container: {
marginTop: 16,
borderRadius: 8,
Expand Down Expand Up @@ -148,6 +270,7 @@ const styles = StyleSheet.create({
questionText: {
fontFamily: 'Poppins',
color: '#687076',
width: '90%',
},
gradeText: {
fontFamily: 'Poppins',
Expand Down
82 changes: 51 additions & 31 deletions src/components/QuestionSection/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ interface Props {
sellerId: string;
onUpdateAnswers: (answers: any[]) => void;
onCategoryUpdate?: (updatedCategory: ICategories) => void;
onDeleteCategory?: (categoryId: string) => void; // Novo prop para deletar categoria
onDeleteCategory?: (categoryId: string) => void;
}

const QuestionSection: React.FC<Props> = ({
Expand All @@ -47,7 +47,8 @@ const QuestionSection: React.FC<Props> = ({
const [editedQuestions, setEditedQuestions] = useState<IQuestions[]>([]);
const [newQuestionText, setNewQuestionText] = useState('');
const [showAddQuestionInput, setShowAddQuestionInput] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); // Novo estado de carregamento
const [comments, setComments] = useState<{ [key: string]: string }>({});
const [isDeleting, setIsDeleting] = useState(false);
const { user } = useAuth();
const toast = useToast();
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -79,28 +80,32 @@ const QuestionSection: React.FC<Props> = ({
(answer) =>
answer.questionId === questionId && answer.sellerId === sellerId
);
console.log(comments[category.id]);

const updatedAnswers =
existingAnswerIndex !== -1
? [...answers]
: [
...answers,
{
name: question,
questionId,
sellerId,
value,
comments: comments[category.id] || '',
},
];

if (existingAnswerIndex !== -1) {
const updatedAnswers = [...answers];
updatedAnswers[existingAnswerIndex] = {
...updatedAnswers[existingAnswerIndex],
value: value,
value,
comments: comments[category.id] || '',
};
setAnswers(updatedAnswers);
onUpdateAnswers(updatedAnswers);
} else {
const updatedAnswers = [
...answers,
{
name: question,
questionId: questionId,
sellerId: sellerId,
value: value,
},
];
setAnswers(updatedAnswers);
onUpdateAnswers(updatedAnswers);
}

setAnswers(updatedAnswers);
onUpdateAnswers(updatedAnswers);
};

const handleEditQuestion = () => {
Expand Down Expand Up @@ -148,7 +153,7 @@ const QuestionSection: React.FC<Props> = ({

const showToast = (message: string, type: string) => {
toast.show(message, {
type: type,
type,
placement: 'bottom',
duration: 3500,
animationType: 'zoom-in',
Expand Down Expand Up @@ -218,6 +223,10 @@ const QuestionSection: React.FC<Props> = ({
);
}

const handleCommentChange = (value: string) => {
setComments({ [category.id]: value });
};

return selectedIndex === index ? (
<ScrollView
style={{
Expand Down Expand Up @@ -275,8 +284,8 @@ const QuestionSection: React.FC<Props> = ({
<View style={styles.questionContainer}>
<TextInput
style={styles.questionInput}
value={newQuestionText} // Mostra o texto digitado
onChangeText={(text) => setNewQuestionText(text)} // Atualiza o texto da nova pergunta
value={newQuestionText}
onChangeText={(text) => setNewQuestionText(text)}
placeholder="Nova Pergunta"
placeholderTextColor="#666"
/>
Expand Down Expand Up @@ -309,7 +318,7 @@ const QuestionSection: React.FC<Props> = ({
<S.TextBtn>Salvar Alterações</S.TextBtn>
</S.ButtonFirst>
<TouchableOpacity
onPress={handleDeleteCategory} // Adicionando a função para deletar a categoria
onPress={handleDeleteCategory}
style={styles.deleteButton}
>
<Text style={styles.deleteButtonText}>Deletar Categoria</Text>
Expand All @@ -321,16 +330,27 @@ const QuestionSection: React.FC<Props> = ({
{loading ? (
<ActivityIndicator size="large" color="#3E63DD" />
) : (
categoryQuestions.map((question, index) => (
<S.Wrapper key={question.id}>
<InputRange
onChangeValue={(id: string, value: number) =>
handleInputChange(question.id!, value, question.question)
}
textAsk={question.question}
<S.Wrapper>
{categoryQuestions.map((question) => (
<View key={question.id}>
<InputRange
onChangeValue={(id: string, value: number) =>
handleInputChange(question.id!, value, question.question)
}
textAsk={question.question}
/>
</View>
))}
{user.job !== 'Gerente' && (
<S.TextArea
placeholder="Digite aqui..."
multiline={true}
numberOfLines={5}
value={comments[category.id] || ''}
onChangeText={handleCommentChange} // Apenas um campo de texto para comentários
/>
</S.Wrapper>
))
)}
</S.Wrapper>
)}
</>
)}
Expand Down
Loading

0 comments on commit 4574bc9

Please sign in to comment.