@omniumretail/component-library 1.2.71 → 1.2.72

package/src/components/CategoryReadOnly/CategoryReadOnly.stories.tsx

@@ -1,274 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react-vite";
-import { Button } from "../Button";
-import { useEffect, useRef, useState } from "react";
-import { CategoryReadOnly } from '.';
-
-export default {
-    title: 'CategoryReadOnly',
-    component: CategoryReadOnly,
-} as Meta;
-
-const Template: StoryFn<any> = (args: any) => {
-    const [serverData, setServerData] = useState<any>();
-    const categoryResponseRef = useRef(null);
-    const [hasNext, setHasNext] = useState(true);
-    const [hasPrevious, setHasPrevious] = useState(false);
-    const [teste, setTeste] = useState(false);
-
-    const handleNextCategoryAvailabilityChange = (hasNext: boolean) => {
-        setHasNext(hasNext);
-    };
-
-    const handlePreviousCategoryAvailabilityChange = (hasPrevious: boolean) => {
-        setHasPrevious(hasPrevious);
-    };
-
-    const handleNextClickOutside = () => {
-        (categoryResponseRef.current as any).handleNextClick();
-    }
-
-    const handlePreviousClickOutside = () => {
-        (categoryResponseRef.current as any).handlePreviousClick();
-    }
-
-    useEffect(() => {
-        console.log(serverData);
-    }, [serverData])
-
-    return (
-        <div style={{ height: '600px' }}>
-            <div>
-                <CategoryReadOnly
-                    {...args}
-                    serverReadyData={setServerData}
-                    ref={categoryResponseRef}
-                    onNextCategoryAvailabilityChange={handleNextCategoryAvailabilityChange}
-                    onPreviousCategoryAvailabilityChange={handlePreviousCategoryAvailabilityChange}
-                    exportPdf={ teste}
-                >
-                </CategoryReadOnly>
-            </div>
-            <div>
-
-                {hasPrevious && (
-                    <Button onClick={handlePreviousClickOutside}>Previous on Parent</Button>
-                )}
-
-                {hasNext && (
-                    <Button onClick={handleNextClickOutside}>Next on Parent</Button>
-                )}
-
-                <Button onClick={() => setTeste(true)}>teste</Button>
-            </div>
-        </div>
-    )
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    data: {
-        "Id": "E985B66B-5EA4-4A6F-81B9-0B12CAA99343",
-        "EvaluationCycleId": "A3FE0C73-E771-40BB-B87D-1E40597841A6",
-        "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
-        "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-        "TargetUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
-        "StartDate": 1678707055,
-        "EndDate": 1679707055,
-        "Status": "A",
-        "UserFinalScore": "4",
-        "SupervisorFinalScore": "3.6",
-        "UserColor": "#09168B",
-        "SupervisorColor": "#FF674C",
-        "CategoryAnswers": [
-            {
-                "Title": "Competências",
-                "Key": "1",
-                "Data": {
-                    "Id": "57A06838-67F9-4726-BC36-719A0C797484",
-                    "CategoryId": "CATEGORYID1",
-                    "CategoryName": "Competências",
-                    "OpenAnswer": false,
-                    "GeneralEvaluationLevel": 2,
-                    "Grade": "0",
-                    "Description": "Inserir resposta numa escala numérica entre 1 e 5, sendo que 1 corresponde a “Mau” e 5 corresponde a “Excelente”",
-                    "Score": "3.4",
-                    "SupervisorScore": "3.4",
-                    "Questions": [
-                        {
-                            "Id": "65562A64-A24B-425A-A345-560238CA2468",
-                            "QuestionId": "7D17A8A5-E299-47D3-AB49-684135DB23A3",
-                            "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                            "Description": "This is a description",
-                            "Grade": "0",
-                            "UserAnswer": "3.4",
-                            "SupervisorAnswer": "3.4",
-                        },
-                        {
-                            "Id": "85562A64-A24B-425A-A345-560238CA2468",
-                            "QuestionId": "8D17A8A5-E299-47D3-AB49-684135DB23A3",
-                            "Subject": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit",
-                            "Description": "This is a description ",
-                            "Grade": "0",
-                            "UserAnswer": "3.4",
-                            "SupervisorAnswer": "3.4",
-                        }
-                    ]
-                }
-            },
-            {
-                "Title": "Category 2",
-                "Key": "2",
-                "Data": {
-                    "Id": "57A06838-67F9-4726-BC36-719A0C797484",
-                    "CategoryId": "CATEGORYID2",
-                    "CategoryName": "Category 2",
-                    "OpenAnswer": false,
-                    "GeneralEvaluationLevel": 0,
-                    "Grade": "100",
-                    "Description": "This is a description",
-                    "Score": "3.4",
-                    "SupervisorScore": "3.4",
-                    "Questions": []
-                },
-                "Children": [
-                    {
-                        "Title": "Category 2.1",
-                        "Key": "2.1",
-                        "Data": {
-                            "Id": "57A06838-67F9-4726-BC36-719A0C797484",
-                            "CategoryId": "1CDED10D-0984-46D4-A9B3-7EC518D74A63",
-                            "CategoryName": "Category 2.1",
-                            "OpenAnswer": false,
-                            "GeneralEvaluationLevel": 0,
-                            "Grade": "50",
-                            "Description": "This is a description",
-                            "Score": "0.000",
-                            "SupervisorScore": "0.000",
-                            "Questions": []
-                        },
-                        "Children": [
-                            {
-                                "Title": "Category 2.1.1",
-                                "Key": "2.1.1",
-                                "Data": {
-                                    "Id": "37A06838-67F9-4726-BC36-719A0C797484",
-                                    "CategoryId": "3CDED10D-0984-46D4-A9B3-7EC518D74A63",
-                                    "CategoryName": "Category 2.1.1",
-                                    "OpenAnswer": false,
-                                    "GeneralEvaluationLevel": 0,
-                                    "Grade": "50",
-                                    "Description": "This is a description",
-                                    "Score": "3.4",
-                                    "SupervisorScore": "3.4",
-                                    "Questions": [
-                                        {
-                                            "Id": "365562A64-A24B-425A-A345-560238CA2468",
-                                            "QuestionId": "3D17A8A5-E299-47D3-AB49-684135DB23A3",
-                                            "Subject": "This is a Subject",
-                                            "Description": "This is a description",
-                                            "Grade": "50",
-                                            "UserAnswer": "3.4",
-                                            "SupervisorAnswer": "3.4",
-                                        },
-                                        {
-                                            "Id": "35562A64-A24B-425A-A345-560238CA2468",
-                                            "QuestionId": "3D17A8A5-E299-47D3-AB49-684135DB23A3",
-                                            "Subject": "This is a Subject",
-                                            "Description": "This is a description",
-                                            "Grade": "25",
-                                            "UserAnswer": "3.4",
-                                            "SupervisorAnswer": "3.4",
-                                        },
-                                        {
-                                            "Id": "35562A64-A24B-425A-A345-560238CA2468",
-                                            "QuestionId": "3D17A8A5-E299-47D3-AB49-684135DB23A3",
-                                            "Subject": "This is a Subject",
-                                            "Description": "This is a description",
-                                            "Grade": "25",
-                                            "UserAnswer": "3.4",
-                                            "SupervisorAnswer": "3.4",
-                                        }
-                                    ]
-                                }
-                            }
-                        ]
-                    },
-                    {
-                        "Title": "Category 2.2",
-                        "Key": "2.2",
-                        "Data": {
-                            "Id": "57A06838-67F9-4726-BC36-719A0C797484",
-                            "CategoryId": "PCDED10D-0984-46D4-A9B3-7EC518D74A63",
-                            "CategoryName": "Category 2.2",
-                            "OpenAnswer": false,
-                            "GeneralEvaluationLevel": 0,
-                            "Grade": "50",
-                            "Description": "This is a description",
-                            "Score": "3.4",
-                            "SupervisorScore": "3.4",
-                            "Questions": [
-                                {
-                                    "Id": "P5562A64-A24B-425A-A345-560238CA2468",
-                                    "QuestionId": "PD17A8A5-E299-47D3-AB49-684135DB23A3",
-                                    "Subject": "This is a Subject",
-                                    "Description": "This is a description",
-                                    "Grade": "50",
-                                    "UserAnswer": "3.4",
-                                    "SupervisorAnswer": "3.4",
-                                },
-                                {
-                                    "Id": "P5562A64-A24B-425A-A345-560238CA2468",
-                                    "QuestionId": "PD17A8A5-E299-47D3-AB49-684135DB23A3",
-                                    "Subject": "This is a Subject",
-                                    "Description": "This is a description",
-                                    "Grade": "50",
-                                    "UserAnswer": "3.4",
-                                    "SupervisorAnswer": "3.4",
-                                }
-                            ]
-                        },
-                        "Children": []
-                    }
-                ]
-            },
-            {
-                "Title": "Category 3",
-                "Key": "3",
-                "Data": {
-                    "Id": "97A06838-67F9-4726-BC36-719A0C797484",
-                    "CategoryId": "CATEGORYID3",
-                    "CategoryName": "Category 3",
-                    "OpenAnswer": true,
-                    "GeneralEvaluationLevel": 0,
-                    "Grade": "0",
-                    "Description": "This is a description",
-                    "Score": "3.4",
-                    "SupervisorScore": "3.4",
-                    "Questions": [
-                        {
-                            "Id": "95562A64-A24B-425A-A345-560238CA2468",
-                            "QuestionId": "9D17A8A5-E299-47D3-AB49-684135DB23A3",
-                            "Subject": "This is a Subject",
-                            "Description": "This is a description",
-                            "Grade": "0",
-                            "UserAnswer": "Adeuswddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd",
-                            "SupervisorAnswer": "Adeus",
-                        },
-                        {
-                            "Id": "93862A64-A24B-425A-A345-560238CA2468",
-                            "QuestionId": "9D38A8A5-E299-47D3-AB49-684135DB23A3",
-                            "Subject": "This is a Subject",
-                            "Description": "This is a description",
-                            "Grade": "0",
-                            "UserAnswer": "Adeus",
-                            "SupervisorAnswer": "Adeuswddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd",
-                        }
-                    ]
-                }
-            },
-        ]
-    }
-};
-
-
-

package/src/components/CategoryReadOnly/evaluationOptions.tsx

@@ -1,81 +0,0 @@
-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,328 +0,0 @@
-import styles from './styles.module.scss';
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useForm } from 'antd/es/form/Form';
-import classNames from 'classnames';
-import React from 'react';
-import { t } from 'i18next';
-import TextArea from 'antd/es/input/TextArea';
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
-
-interface CategoryResponse {
-    data: any;
-    serverReadyData: any;
-    onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
-    onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
-    exportPdf?: boolean;
-};
-
-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 pdfRef = useRef<HTMLDivElement>(null);
-
-    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 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 handleDownloadPDF = async () => {
-        if (pdfRef.current && data) {
-            const pdf = new jsPDF('p', 'mm', 'a4');
-            const pdfWidth = pdf.internal.pageSize.getWidth();
-            const pdfHeight = pdf.internal.pageSize.getHeight();
-            const spaceBetweenCategories = 20;
-    
-            let currentY = 0;
-    
-            // Função recursiva para percorrer e capturar apenas os nós mais profundos
-            const processLeafNodes = async (category: any) => {
-                if (category.Children && category.Children.length > 0) {
-                    // Se houver subcategorias, processa cada uma delas recursivamente
-                    for (const childCategory of category.Children) {
-                        await processLeafNodes(childCategory);
-                    }
-                } else {
-                    // Se não houver subcategorias, processa o nó como um nó folha
-                    setCurrentKey(category.Key);
-                    setSelectedCategory(category);
-    
-                    // Aguarda a renderização da nova categoria
-                    await new Promise((resolve) => {
-                        setTimeout(async () => {
-                            // Captura o conteúdo da referência PDF
-                            const canvas = await html2canvas(pdfRef.current!, {
-                                width: pdfRef.current!.scrollWidth,
-                                height: pdfRef.current!.scrollHeight,
-                                useCORS: true,
-                                allowTaint: true,
-                                scale: 1,
-                            });
-    
-                            const imgData = canvas.toDataURL('image/png');
-                            const imgHeight = (canvas.height * pdfWidth) / canvas.width;
-    
-                            // Adiciona uma nova página se não houver espaço suficiente
-                            if (currentY + imgHeight + spaceBetweenCategories > pdfHeight) {
-                                pdf.addPage();
-                                currentY = 0;
-                            }
-    
-                            // Adiciona a imagem ao PDF na posição atual
-                            pdf.addImage(imgData, 'PNG', 0, currentY, pdfWidth, imgHeight);
-                            currentY += imgHeight + spaceBetweenCategories;
-    
-                            resolve(null);
-                        }, 150);
-                    });
-                }
-            };
-    
-            // Percorre todas as categorias principais
-            for (const mainCategory of data.CategoryAnswers) {
-                await processLeafNodes(mainCategory);
-            }
-    
-            pdf.save('evaluation_details.pdf');
-        } else {
-            console.warn('pdfRef.current está vazio. Verifique se a referência está correta.');
-        }
-    };
-
-    useEffect(() => {
-        if (props.exportPdf) {
-            handleDownloadPDF();
-        }
-    }, [props.exportPdf]);
-
-    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]);
-
-    return (
-        <div ref={pdfRef} className={styles.categoryResponse}>
-            <div className={styles.sidebarWrapper}>
-                {renderCategories(localData.CategoryAnswers)}
-            </div>
-            <div className={styles.contentWrapper}>
-
-                <div className={styles.details}>
-                    <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={questionWrapper} key={index}>
-                        <div className={styles.question}>
-                            <div className={styles.subject}>
-                                {question.Subject}
-                            </div>
-                        </div>
-                        <div className={styles.answer}>
-                            {!selectedCategory.Data.OpenAnswer ? (
-                                <>
-                                    <div className={styles.gradeBox} style={{ backgroundColor: localData.UserColor }}>
-                                        {question.UserAnswer}
-                                    </div>
-                                    <div className={styles.gradeBox} style={{ backgroundColor: localData.SupervisorColor }}>
-                                        {question.SupervisorAnswer}
-                                    </div>
-                                </>
-                            ) : (
-                                <div className={styles.openAnswerContainer}>
-                                    <div className={styles.subject}>
-                                        {t('components.categoryReadOnly.userResponse')}
-                                    </div>
-
-                                    <TextArea
-                                        value={question.UserAnswer}
-                                        disabled
-                                    />
-
-                                    <div className={styles.subject}>
-                                        {t('components.categoryReadOnly.supervisorResponse')}
-                                    </div>
-
-                                    <TextArea
-                                        value={question.SupervisorAnswer}
-                                        disabled
-                                    />
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-});