@omniumretail/component-library 1.0.70 → 1.0.72

package/src/components/CategoryResponse/index.tsx

@@ -1,277 +1,277 @@
-import styles from './styles.module.scss';
-import { useEffect, useImperativeHandle, useState } from 'react';
-import { Form } from 'antd';
-import { useForm } from 'antd/es/form/Form';
-import { Button } from '../Button';
-import classNames from 'classnames';
-import TextArea from 'antd/es/input/TextArea';
-import { Select } from '../Select';
-import { evaluationOptions } from './evaluationOptions';
-import React from 'react';
-import { t } from 'i18next';
-
-interface CategoryResponse {
-    data: any;
-    serverReadyData: any;
-    onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
-    onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
-};
-
-type Category = {
-    Title: string;
-    Key: string;
-    Data: any;
-    Children?: Category[];
-};
-
-const updateCategoryAnswers = (CategoryAnswers: any[], categoryToUpdate: any, updatedQuestions: any) => {
-    CategoryAnswers.forEach((category: any) => {
-        if (category.Data.CategoryId === categoryToUpdate.CategoryId) {
-            category.Data.Questions = category.Data.Questions.map((question: any, index: any) => {
-                return {
-                    ...question,
-                    Answer: updatedQuestions[index].Answer
-                };
-            });
-        }
-        else if (category.Children && category.Children.length > 0) {
-            updateCategoryAnswers(category.Children, categoryToUpdate, updatedQuestions);
-        }
-    });
-    return CategoryAnswers;
-};
-
-const findCategoryWithQuestions = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): Category | null => {
-    let foundCurrent = false;
-
-    const searchCategories = (categoryList: Category[], direction: 'next' | 'prev'): Category | null => {
-        const iterable = direction === 'next' ? categoryList : [...categoryList].reverse();
-
-        for (const category of iterable) {
-            if (foundCurrent) {
-                if (category.Data.Questions.length > 0) {
-                    return category;
-                }
-            } else if (category.Key === currentKey) {
-                foundCurrent = true;
-            }
-
-            if (category.Children) {
-                const result = searchCategories(category.Children, direction);
-                if (result) {
-                    return result;
-                }
-            }
-        }
-        return null;
-    };
-
-    return searchCategories(categories, direction);
-};
-
-const getCategoryObject = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): any => {
-    const category = findCategoryWithQuestions(currentKey, categories, direction);
-    return category ? category.Data : null;
-};
-
-const hasCategory = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): boolean => {
-    const category = findCategoryWithQuestions(currentKey, categories, direction);
-    return !!category;
-};
-
-const getTitleWithQuestionCount = (category: any): string => {
-    const questionCount = category?.Data?.Questions?.length;
-    const answeredQuestions = category?.Data?.Questions?.filter((question: any) => question.Answer !== null && question.Answer !== undefined && question.Answer !== '').length;
-
-    return questionCount 
-        ? `${category.Title} - ${answeredQuestions} / ${questionCount}` 
-        : category.Title ;
-};
-
-export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref) => {
-    const { data } = props;
-
-    const [currentKey, setCurrentKey] = useState(data.CategoryAnswers[0].Key);
-    const [localData, setLocalData] = useState<any>(data);
-    // Setting first set of questions as default open
-    const [selectedCategory, setSelectedCategory] = useState<any>(data.CategoryAnswers[0]);
-    const [initialValues, setInitialValues] = useState<any>(data.CategoryAnswers[0].Data);
-    const [form] = useForm();
-    
-
-    const updateInitialValues = (data: any) => {
-        const {
-            Questions,
-            OpenAnswer
-        } = data;
-
-        const initial = {
-            Questions: Questions.map((question: any) => ({
-                Subject: question.Subject,
-                Description: question.Description,
-                Answer: question.Answer || ""
-            })),
-            OpenAnswer: OpenAnswer
-        };
-
-        setInitialValues(initial);
-        form.setFieldsValue(initial);
-    };
-
-    const handleLabelClick = (category: any, index: number) => {
-        setSelectedCategory(category);
-        updateInitialValues(category.Data);
-        setCurrentKey(index);
-    };
-
-    const onFinish = (values: any) => {
-        const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
-            return {
-                ...question,
-                Answer: values.Questions[index].Answer
-            };
-        });
-
-        const updatedCategory = updateCategoryAnswers(localData.CategoryAnswers, selectedCategory.Data, updatedQuestions);
-
-        const updatedLocalData = { ...localData, CategoryAnswers: updatedCategory };
-
-        setLocalData(updatedLocalData);
-    };
-
-    const renderCategories = (categories: any) => {
-        return categories.map((category: any, index: number) => {
-            const labelClasses = classNames({
-                [styles.cursorPointer]: category.Data.Questions.length > 0
-            }, [styles.label]);
-
-            const indexCheck = category.Data.Questions.length > 0 && category.Key;
-
-            return (
-                <div
-                    className={`${styles.labelWrapper} ${category.Data.CategoryId === selectedCategory.Data.CategoryId ? styles.active : ""}`}
-                    key={index}
-                >
-                    <div
-                        className={labelClasses}
-                        data-index={indexCheck}
-                        onClick={() => category.Data.Questions.length > 0 && handleLabelClick(category, indexCheck)}
-                    >
-                        {getTitleWithQuestionCount(category)}
-                    </div>
-                    {category.Children && (
-                        <div className={styles.subCategory}>
-                            {renderCategories(category.Children)}
-                        </div>
-                    )}
-                </div>
-            )
-        });
-    };
-
-    const handleNextClick = () => {
-        const nextCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'next');
-        if (nextCategory) {
-            setCurrentKey(nextCategory.Key);
-            setSelectedCategory(nextCategory);
-        }
-    
-        const nextCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'next');
-        setSelectedCategory(nextCategoryData ? { ...nextCategory, data: nextCategoryData } : null);
-        updateInitialValues(nextCategoryData);
-    };
-    
-    const handlePreviousClick = () => {
-        const prevCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'prev');
-        if (prevCategory) {
-            setCurrentKey(prevCategory.Key);
-            setSelectedCategory(prevCategory);
-        }
-    
-        const prevCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'prev');
-        setSelectedCategory(prevCategoryData ? { ...prevCategory, data: prevCategoryData } : null);
-        updateInitialValues(prevCategoryData);
-    };
-
-    useImperativeHandle(ref, () => ({
-        handleNextClick,
-        handlePreviousClick,
-    }));
-
-    useEffect(() => {
-        props.serverReadyData(localData);
-    }, [localData]);
-
-    useEffect(() => {
-        const hasNext = hasCategory(currentKey, localData.CategoryAnswers, 'next');
-        props.onNextCategoryAvailabilityChange(hasNext);
-
-        const hasPrevious = hasCategory(currentKey, localData.CategoryAnswers, 'prev');
-        props.onPreviousCategoryAvailabilityChange(hasPrevious);
-    }, [currentKey, localData.CategoryAnswers, props]);
-
-    const questionWrapper = classNames({
-        [styles.questionWrapperOpenAnswer]: selectedCategory.Data.OpenAnswer,
-    }, [styles.questionWrapper]);
-
-    // This gets the scale we use for each select from the database using a key based variable,if 
-    // any new generalEvaluationLevel is added to the backend we need to update our own without 
-    // deleting any of the previous so we dont mess up the project history.
-    const selectedEvaluationOption = `scale_${selectedCategory?.Data?.GeneralEvaluationLevel}` as keyof typeof evaluationOptions;
-
-    return (
-        <div className={styles.categoryResponse}>
-            <div className={styles.sidebarWrapper}>
-                <div className={styles.title}>Categorias</div>
-                {renderCategories(localData.CategoryAnswers)}
-            </div>
-            <div className={styles.contentWrapper}>
-                <Form
-                    initialValues={initialValues}
-                    name="dynamic_form_nest_item"
-                    onFinish={onFinish}
-                    autoComplete="off"
-                    form={form}
-                    onValuesChange={(_, allValues) => onFinish(allValues)}
-                >
-                    <div className={styles.details}>
-                        <div className={styles.categoryName}>
-                            {selectedCategory?.Data?.CategoryName}
-                        </div>
-                        <div className={styles.categoryDescription}>
-                            {selectedCategory?.Data?.Description}
-                        </div>
-                    </div>
-                    {selectedCategory?.Data?.Questions.map((question: any, index: number) => (
-                        <div className={questionWrapper} key={index}>
-                            <div className={styles.question}>
-                                <div className={styles.subject}>
-                                    {question.Subject}
-                                </div>
-                                <div className={styles.description}>
-                                    {question.Description}
-                                </div>
-                            </div>
-                            <div className={styles.answer}>
-                                {selectedCategory.Data.OpenAnswer
-                                    ? <Form.Item
-                                        name={["Questions", index, "Answer"]}
-                                    >
-                                        <TextArea />
-                                    </Form.Item>
-                                    : <Form.Item
-                                        name={["Questions", index, "Answer"]}
-                                    >
-                                        <Select options={evaluationOptions[selectedEvaluationOption]}
-                                            style={{ minWidth: '100%' }}
-                                        />
-                                    </Form.Item>
-                                }
-                            </div>
-                        </div>
-                    ))}
-                </Form>
-            </div>
-        </div>
-    );
-});
+import styles from './styles.module.scss';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import { Form } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { Button } from '../Button';
+import classNames from 'classnames';
+import TextArea from 'antd/es/input/TextArea';
+import { Select } from '../Select';
+import { evaluationOptions } from './evaluationOptions';
+import React from 'react';
+import { t } from 'i18next';
+
+interface CategoryResponse {
+    data: any;
+    serverReadyData: any;
+    onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
+    onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
+};
+
+type Category = {
+    Title: string;
+    Key: string;
+    Data: any;
+    Children?: Category[];
+};
+
+const updateCategoryAnswers = (CategoryAnswers: any[], categoryToUpdate: any, updatedQuestions: any) => {
+    CategoryAnswers.forEach((category: any) => {
+        if (category.Data.CategoryId === categoryToUpdate.CategoryId) {
+            category.Data.Questions = category.Data.Questions.map((question: any, index: any) => {
+                return {
+                    ...question,
+                    Answer: updatedQuestions[index].Answer
+                };
+            });
+        }
+        else if (category.Children && category.Children.length > 0) {
+            updateCategoryAnswers(category.Children, categoryToUpdate, updatedQuestions);
+        }
+    });
+    return CategoryAnswers;
+};
+
+const findCategoryWithQuestions = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): Category | null => {
+    let foundCurrent = false;
+
+    const searchCategories = (categoryList: Category[], direction: 'next' | 'prev'): Category | null => {
+        const iterable = direction === 'next' ? categoryList : [...categoryList].reverse();
+
+        for (const category of iterable) {
+            if (foundCurrent) {
+                if (category.Data.Questions.length > 0) {
+                    return category;
+                }
+            } else if (category.Key === currentKey) {
+                foundCurrent = true;
+            }
+
+            if (category.Children) {
+                const result = searchCategories(category.Children, direction);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    };
+
+    return searchCategories(categories, direction);
+};
+
+const getCategoryObject = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): any => {
+    const category = findCategoryWithQuestions(currentKey, categories, direction);
+    return category ? category.Data : null;
+};
+
+const hasCategory = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): boolean => {
+    const category = findCategoryWithQuestions(currentKey, categories, direction);
+    return !!category;
+};
+
+const getTitleWithQuestionCount = (category: any): string => {
+    const questionCount = category?.Data?.Questions?.length;
+    const answeredQuestions = category?.Data?.Questions?.filter((question: any) => question.Answer !== null && question.Answer !== undefined && question.Answer !== '').length;
+
+    return questionCount 
+        ? `${category.Title} - ${answeredQuestions} / ${questionCount}` 
+        : category.Title ;
+};
+
+export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref) => {
+    const { data } = props;
+
+    const [currentKey, setCurrentKey] = useState(data.CategoryAnswers[0].Key);
+    const [localData, setLocalData] = useState<any>(data);
+    // Setting first set of questions as default open
+    const [selectedCategory, setSelectedCategory] = useState<any>(data.CategoryAnswers[0]);
+    const [initialValues, setInitialValues] = useState<any>(data.CategoryAnswers[0].Data);
+    const [form] = useForm();
+    
+
+    const updateInitialValues = (data: any) => {
+        const {
+            Questions,
+            OpenAnswer
+        } = data;
+
+        const initial = {
+            Questions: Questions.map((question: any) => ({
+                Subject: question.Subject,
+                Description: question.Description,
+                Answer: question.Answer || ""
+            })),
+            OpenAnswer: OpenAnswer
+        };
+
+        setInitialValues(initial);
+        form.setFieldsValue(initial);
+    };
+
+    const handleLabelClick = (category: any, index: number) => {
+        setSelectedCategory(category);
+        updateInitialValues(category.Data);
+        setCurrentKey(index);
+    };
+
+    const onFinish = (values: any) => {
+        const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
+            return {
+                ...question,
+                Answer: values.Questions[index].Answer
+            };
+        });
+
+        const updatedCategory = updateCategoryAnswers(localData.CategoryAnswers, selectedCategory.Data, updatedQuestions);
+
+        const updatedLocalData = { ...localData, CategoryAnswers: updatedCategory };
+
+        setLocalData(updatedLocalData);
+    };
+
+    const renderCategories = (categories: any) => {
+        return categories.map((category: any, index: number) => {
+            const labelClasses = classNames({
+                [styles.cursorPointer]: category.Data.Questions.length > 0
+            }, [styles.label]);
+
+            const indexCheck = category.Data.Questions.length > 0 && category.Key;
+
+            return (
+                <div
+                    className={`${styles.labelWrapper} ${category.Data.CategoryId === selectedCategory.Data.CategoryId ? styles.active : ""}`}
+                    key={index}
+                >
+                    <div
+                        className={labelClasses}
+                        data-index={indexCheck}
+                        onClick={() => category.Data.Questions.length > 0 && handleLabelClick(category, indexCheck)}
+                    >
+                        {getTitleWithQuestionCount(category)}
+                    </div>
+                    {category.Children && (
+                        <div className={styles.subCategory}>
+                            {renderCategories(category.Children)}
+                        </div>
+                    )}
+                </div>
+            )
+        });
+    };
+
+    const handleNextClick = () => {
+        const nextCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'next');
+        if (nextCategory) {
+            setCurrentKey(nextCategory.Key);
+            setSelectedCategory(nextCategory);
+        }
+    
+        const nextCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'next');
+        setSelectedCategory(nextCategoryData ? { ...nextCategory, data: nextCategoryData } : null);
+        updateInitialValues(nextCategoryData);
+    };
+    
+    const handlePreviousClick = () => {
+        const prevCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'prev');
+        if (prevCategory) {
+            setCurrentKey(prevCategory.Key);
+            setSelectedCategory(prevCategory);
+        }
+    
+        const prevCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'prev');
+        setSelectedCategory(prevCategoryData ? { ...prevCategory, data: prevCategoryData } : null);
+        updateInitialValues(prevCategoryData);
+    };
+
+    useImperativeHandle(ref, () => ({
+        handleNextClick,
+        handlePreviousClick,
+    }));
+
+    useEffect(() => {
+        props.serverReadyData(localData);
+    }, [localData]);
+
+    useEffect(() => {
+        const hasNext = hasCategory(currentKey, localData.CategoryAnswers, 'next');
+        props.onNextCategoryAvailabilityChange(hasNext);
+
+        const hasPrevious = hasCategory(currentKey, localData.CategoryAnswers, 'prev');
+        props.onPreviousCategoryAvailabilityChange(hasPrevious);
+    }, [currentKey, localData.CategoryAnswers, props]);
+
+    const questionWrapper = classNames({
+        [styles.questionWrapperOpenAnswer]: selectedCategory.Data.OpenAnswer,
+    }, [styles.questionWrapper]);
+
+    // This gets the scale we use for each select from the database using a key based variable,if 
+    // any new generalEvaluationLevel is added to the backend we need to update our own without 
+    // deleting any of the previous so we dont mess up the project history.
+    const selectedEvaluationOption = `scale_${selectedCategory?.Data?.GeneralEvaluationLevel}` as keyof typeof evaluationOptions;
+
+    return (
+        <div className={styles.categoryResponse}>
+            <div className={styles.sidebarWrapper}>
+                <div className={styles.title}>Categorias</div>
+                {renderCategories(localData.CategoryAnswers)}
+            </div>
+            <div className={styles.contentWrapper}>
+                <Form
+                    initialValues={initialValues}
+                    name="dynamic_form_nest_item"
+                    onFinish={onFinish}
+                    autoComplete="off"
+                    form={form}
+                    onValuesChange={(_, allValues) => onFinish(allValues)}
+                >
+                    <div className={styles.details}>
+                        <div className={styles.categoryName}>
+                            {selectedCategory?.Data?.CategoryName}
+                        </div>
+                        <div className={styles.categoryDescription}>
+                            {selectedCategory?.Data?.Description}
+                        </div>
+                    </div>
+                    {selectedCategory?.Data?.Questions.map((question: any, index: number) => (
+                        <div className={questionWrapper} key={index}>
+                            <div className={styles.question}>
+                                <div className={styles.subject}>
+                                    {question.Subject}
+                                </div>
+                                <div className={styles.description}>
+                                    {question.Description}
+                                </div>
+                            </div>
+                            <div className={styles.answer}>
+                                {selectedCategory.Data.OpenAnswer
+                                    ? <Form.Item
+                                        name={["Questions", index, "Answer"]}
+                                    >
+                                        <TextArea />
+                                    </Form.Item>
+                                    : <Form.Item
+                                        name={["Questions", index, "Answer"]}
+                                    >
+                                        <Select options={evaluationOptions[selectedEvaluationOption]}
+                                            style={{ minWidth: '100%' }}
+                                        />
+                                    </Form.Item>
+                                }
+                            </div>
+                        </div>
+                    ))}
+                </Form>
+            </div>
+        </div>
+    );
+});