@omniumretail/component-library 1.0.74 → 1.0.76

package/src/components/CategoryReadOnly/evaluationOptions.tsx

@@ -1,81 +1,81 @@
-import translate from '../../constants/translationHelper';
-
-export type EvaluationOption = {
-    value: string;
-    label: string;
-};
-
-export type EvaluationOptions = {
-    scale_0: EvaluationOption[];
-    scale_1: EvaluationOption[];
-    scale_2: EvaluationOption[];
-};
-
-export const evaluationOptions: EvaluationOptions = {
-    scale_0: [
-        {
-            value: '1',
-            label: '1',
-        },
-        {
-            value: '2',
-            label: '2',
-        },
-        {
-            value: '3',
-            label: '3',
-        },
-        {
-            value: '4',
-            label: '4',
-        },
-        {
-            value: '5',
-            label: '5',
-        }
-    ],
-    scale_1: [
-        {
-            value: '1',
-            label: '1',
-        },
-        {
-            value: '2',
-            label: '2',
-        },
-        {
-            value: '3',
-            label: '3',
-        },
-        {
-            value: '4',
-            label: '4',
-        },
-    ],
-    scale_2: [
-        {
-            value: '1',
-            label: '1',
-        },
-        {
-            value: '2',
-            label: '2',
-        },
-        {
-            value: '3',
-            label: '3',
-        },
-        {
-            value: '4',
-            label: '4',
-        },
-        {
-            value: '5',
-            label: '5',
-        },
-        {
-            value: 'na',
-            label: translate('components.categoryResponse.notApplicable')
-        }
-    ]
-}
+import translate from '../../constants/translationHelper';
+
+export type EvaluationOption = {
+    value: string;
+    label: string;
+};
+
+export type EvaluationOptions = {
+    scale_0: EvaluationOption[];
+    scale_1: EvaluationOption[];
+    scale_2: EvaluationOption[];
+};
+
+export const evaluationOptions: EvaluationOptions = {
+    scale_0: [
+        {
+            value: '1',
+            label: '1',
+        },
+        {
+            value: '2',
+            label: '2',
+        },
+        {
+            value: '3',
+            label: '3',
+        },
+        {
+            value: '4',
+            label: '4',
+        },
+        {
+            value: '5',
+            label: '5',
+        }
+    ],
+    scale_1: [
+        {
+            value: '1',
+            label: '1',
+        },
+        {
+            value: '2',
+            label: '2',
+        },
+        {
+            value: '3',
+            label: '3',
+        },
+        {
+            value: '4',
+            label: '4',
+        },
+    ],
+    scale_2: [
+        {
+            value: '1',
+            label: '1',
+        },
+        {
+            value: '2',
+            label: '2',
+        },
+        {
+            value: '3',
+            label: '3',
+        },
+        {
+            value: '4',
+            label: '4',
+        },
+        {
+            value: '5',
+            label: '5',
+        },
+        {
+            value: 'na',
+            label: translate('components.categoryResponse.notApplicable')
+        }
+    ]
+}

package/src/components/CategoryReadOnly/index.tsx

@@ -1,254 +1,254 @@
-import styles from './styles.module.scss';
-import { useEffect, useImperativeHandle, useState } from 'react';
-import { useForm } from 'antd/es/form/Form';
-import classNames from 'classnames';
-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;
-};
-
-export const CategoryReadOnly = 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)}
-                    >
-                        {category.Title}
-                    </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 questionWrapperClasses = classNames({
-        [styles.questionWrapperOpenAnswer]: selectedCategory.Data.OpenAnswer,
-    }, [styles.questionWrapper]);
-
-    const answerClasses = classNames({
-        [styles.answerOpenAnswer]: selectedCategory.Data.OpenAnswer,
-    }, [styles.answer]);
-
-    return (
-        <div className={styles.categoryResponse}>
-            <div className={styles.sidebarWrapper}>
-                <div className={styles.title}>{t('components.categoryReadOnly.categories')}</div>
-                {renderCategories(localData.CategoryAnswers)}
-            </div>
-            <div className={styles.contentWrapper}>
-
-                <div className={styles.details}>
-                    <div className={styles.categoryName}>
-                        {selectedCategory?.Data?.CategoryName}
-                    </div>
-                    <div className={styles.categoryGradesWrapper}>
-                        <div className={styles.categoryGradesTitle}>
-                            {t('components.categoryReadOnly.categoryAverage')}
-                        </div>
-                        <div className={styles.categoryGrades}>
-                            <div className={styles.gradeBox} style={{ backgroundColor: localData.UserColor }}>
-                                {selectedCategory?.Data.Score}
-                            </div>
-                            <div className={styles.gradeBox} style={{ backgroundColor: localData.SupervisorColor }}>
-                                {selectedCategory?.Data.SupervisorScore}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {selectedCategory?.Data?.Questions.map((question: any, index: number) => (
-                    <div className={questionWrapperClasses} key={index}>
-                        <div className={styles.question}>
-                            <div className={styles.subject}>
-                                {question.Subject}
-                            </div>
-                        </div>
-                        <div className={answerClasses}>
-                            <div className={styles.gradeBox} style={{ backgroundColor: localData.UserColor }}>
-                                {question.UserAnswer}
-                            </div>
-                            <div className={styles.gradeBox} style={{ backgroundColor: localData.SupervisorColor }}>
-                                {question.SupervisorAnswer}
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-});
+import styles from './styles.module.scss';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import { useForm } from 'antd/es/form/Form';
+import classNames from 'classnames';
+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;
+};
+
+export const CategoryReadOnly = 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)}
+                    >
+                        {category.Title}
+                    </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 questionWrapperClasses = classNames({
+        [styles.questionWrapperOpenAnswer]: selectedCategory.Data.OpenAnswer,
+    }, [styles.questionWrapper]);
+
+    const answerClasses = classNames({
+        [styles.answerOpenAnswer]: selectedCategory.Data.OpenAnswer,
+    }, [styles.answer]);
+
+    return (
+        <div className={styles.categoryResponse}>
+            <div className={styles.sidebarWrapper}>
+                <div className={styles.title}>{t('components.categoryReadOnly.categories')}</div>
+                {renderCategories(localData.CategoryAnswers)}
+            </div>
+            <div className={styles.contentWrapper}>
+
+                <div className={styles.details}>
+                    <div className={styles.categoryName}>
+                        {selectedCategory?.Data?.CategoryName}
+                    </div>
+                    <div className={styles.categoryGradesWrapper}>
+                        <div className={styles.categoryGradesTitle}>
+                            {t('components.categoryReadOnly.categoryAverage')}
+                        </div>
+                        <div className={styles.categoryGrades}>
+                            <div className={styles.gradeBox} style={{ backgroundColor: localData.UserColor }}>
+                                {selectedCategory?.Data.Score}
+                            </div>
+                            <div className={styles.gradeBox} style={{ backgroundColor: localData.SupervisorColor }}>
+                                {selectedCategory?.Data.SupervisorScore}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {selectedCategory?.Data?.Questions.map((question: any, index: number) => (
+                    <div className={questionWrapperClasses} key={index}>
+                        <div className={styles.question}>
+                            <div className={styles.subject}>
+                                {question.Subject}
+                            </div>
+                        </div>
+                        <div className={answerClasses}>
+                            <div className={styles.gradeBox} style={{ backgroundColor: localData.UserColor }}>
+                                {question.UserAnswer}
+                            </div>
+                            <div className={styles.gradeBox} style={{ backgroundColor: localData.SupervisorColor }}>
+                                {question.SupervisorAnswer}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+});