@omniumretail/component-library 1.0.37 → 1.0.38

package/src/components/CategoryResponse/CategoryResponse.stories.tsx

@@ -0,0 +1,261 @@
+import { Meta, Story } from "@storybook/react";
+import { Button } from "components/Button";
+import { useEffect, useRef, useState } from "react";
+import { CategoryResponse } from '.';
+
+export default {
+    title: 'CategoryResponse',
+    component: CategoryResponse,
+} as Meta;
+
+const Template: Story<any> = (args) => {
+    const [serverData, setServerData] = useState<any>();
+    const categoryResponseRef = useRef(null);
+    const [hasNext, setHasNext] = useState(true);
+    const [hasPrevious, setHasPrevious] = 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>
+                <CategoryResponse
+                    {...args}
+                    serverReadyData={setServerData}
+                    ref={categoryResponseRef}
+                    onNextCategoryAvailabilityChange={handleNextCategoryAvailabilityChange}
+                    onPreviousCategoryAvailabilityChange={handlePreviousCategoryAvailabilityChange}
+                >
+                </CategoryResponse>
+            </div>
+            <div>
+
+                {hasPrevious && (
+                    <Button onClick={handlePreviousClickOutside}>Previous on Parent</Button>
+                )}
+
+                {hasNext && (
+                    <Button onClick={handleNextClickOutside}>Next on Parent</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,
+        "state": "Draft",
+        "score": "0.000",
+        "categoryAnswers": [
+            {
+                "title": "Competências",
+                "key": "1",
+                "data": {
+                    "_id": "57A06838-67F9-4726-BC36-719A0C797484",
+                    "category_id": "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": "0.000",
+                    "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",
+                            "numberAnswer": null,
+                            "answer": null
+                        },
+                        {
+                            "_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",
+                            "numberAnswer": null,
+                            "answer": null
+                        }
+                    ]
+                }
+            },
+            {
+                "title": "Category 2",
+                "key": "2",
+                "data": {
+                    "_id": "57A06838-67F9-4726-BC36-719A0C797484",
+                    "category_id": "CATEGORYID2",
+                    "categoryName": "Category 2",
+                    "openAnswer": false,
+                    "generalEvaluationLevel": "0",
+                    "grade": "100",
+                    "description": "This is a description",
+                    "score": "0.000",
+                    "questions": []
+                },
+                "children": [
+                    {
+                        "title": "Category 2.1",
+                        "key": "2.1",
+                        "data": {
+                            "_id": "57A06838-67F9-4726-BC36-719A0C797484",
+                            "category_id": "1CDED10D-0984-46D4-A9B3-7EC518D74A63",
+                            "categoryName": "Category 2.1",
+                            "openAnswer": false,
+                            "generalEvaluationLevel": "0",
+                            "grade": "50",
+                            "description": "This is a description",
+                            "score": "0.000",
+                            "questions": []
+                        },
+                        "children": [
+                            {
+                                "title": "Category 2.1.1",
+                                "key": "2.1.1",
+                                "data": {
+                                    "_id": "37A06838-67F9-4726-BC36-719A0C797484",
+                                    "category_id": "3CDED10D-0984-46D4-A9B3-7EC518D74A63",
+                                    "categoryName": "Category 2.1.1",
+                                    "openAnswer": false,
+                                    "generalEvaluationLevel": "0",
+                                    "grade": "50",
+                                    "description": "This is a description",
+                                    "score": "0.000",
+                                    "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",
+                                            "numberAnswer": 4,
+                                            "answer": null
+                                        },
+                                        {
+                                            "_id": "35562A64-A24B-425A-A345-560238CA2468",
+                                            "questionId": "3D17A8A5-E299-47D3-AB49-684135DB23A3",
+                                            "subject": "This is a subject",
+                                            "description": "This is a description",
+                                            "grade": "25",
+                                            "numberAnswer": 4,
+                                            "answer": null
+                                        },
+                                        {
+                                            "_id": "35562A64-A24B-425A-A345-560238CA2468",
+                                            "questionId": "3D17A8A5-E299-47D3-AB49-684135DB23A3",
+                                            "subject": "This is a subject",
+                                            "description": "This is a description",
+                                            "grade": "25",
+                                            "numberAnswer": 3,
+                                            "answer": null
+                                        }
+                                    ]
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        "title": "Category 2.2",
+                        "key": "2.2",
+                        "data": {
+                            "_id": "57A06838-67F9-4726-BC36-719A0C797484",
+                            "category_id": "PCDED10D-0984-46D4-A9B3-7EC518D74A63",
+                            "categoryName": "Category 2.2",
+                            "openAnswer": false,
+                            "generalEvaluationLevel": "0",
+                            "grade": "50",
+                            "description": "This is a description",
+                            "score": "0.000",
+                            "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",
+                                    "numberAnswer": 4,
+                                    "answer": "2"
+                                },
+                                {
+                                    "_id": "P5562A64-A24B-425A-A345-560238CA2468",
+                                    "questionId": "PD17A8A5-E299-47D3-AB49-684135DB23A3",
+                                    "subject": "This is a subject",
+                                    "description": "This is a description",
+                                    "grade": "50",
+                                    "numberAnswer": 2,
+                                    "answer": "5"
+                                }
+                            ]
+                        },
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "title": "Category 3",
+                "key": "3",
+                "data": {
+                    "_id": "97A06838-67F9-4726-BC36-719A0C797484",
+                    "category_id": "CATEGORYID3",
+                    "categoryName": "Category 3",
+                    "openAnswer": true,
+                    "generalEvaluationLevel": "0",
+                    "grade": "0",
+                    "description": "This is a description",
+                    "score": "0.000",
+                    "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",
+                            "numberAnswer": null,
+                            "answer": null
+                        },
+                        {
+                            "_id": "93862A64-A24B-425A-A345-560238CA2468",
+                            "questionId": "9D38A8A5-E299-47D3-AB49-684135DB23A3",
+                            "subject": "This is a subject",
+                            "description": "This is a description",
+                            "grade": "0",
+                            "numberAnswer": null,
+                            "answer": null
+                        }
+                    ]
+                }
+            },
+        ]
+    }
+};
+
+
+

package/src/components/CategoryResponse/evaluationOptions.tsx

@@ -0,0 +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')
+        }
+    ]
+}

package/src/components/CategoryResponse/index.tsx

@@ -0,0 +1,280 @@
+import styles from './styles.module.scss';
+import { useEffect, useImperativeHandle, useState } from 'react';
+import { Form } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { InputField } from 'components/Input';
+import { Button } from 'components/Button';
+import classNames from 'classnames';
+import TextArea from 'antd/es/input/TextArea';
+import { Select } from 'components/Select';
+import { EvaluationOptions, evaluationOptions } from './evaluationOptions';
+import React from 'react';
+
+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.category_id === categoryToUpdate.category_id) {
+            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.category_id === selectedCategory.data.category_id ? 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}
+                >
+                    <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>
+                    ))}
+
+                    {selectedCategory?.data?.questions.length > 0 && (
+                        <Button onClick={() => form.submit()}>Answer</Button>
+                    )}
+                </Form>
+            </div>
+        </div>
+    );
+});