@omniumretail/component-library 1.0.50 → 1.0.52

package/src/components/CategoryReadOnly/index.tsx

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

package/src/components/CategoryReadOnly/styles.module.scss

@@ -0,0 +1,184 @@
+.categoryResponse {
+    display: grid;
+    grid-template-columns: 300px auto;
+    gap: 16px;
+    height: 100%;
+}
+
+.sidebarWrapper {
+    overflow: auto;
+    background: #EBECED;
+}
+
+.contentWrapper {
+    overflow: auto;
+    background: var(--color-white);
+}
+
+.sidebarWrapper,
+.contentWrapper {
+    padding: 20px;
+}
+
+.title {
+    font-size: var(--font-size-body-4);
+    color: var(--color-blue);
+    margin-bottom: 36px;
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+
+}
+
+.label {
+    padding-bottom: 15px;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-4);
+}
+
+.cursorPointer {
+    cursor: pointer;
+}
+
+.subCategory {
+    padding-left: 16px;
+
+    .label {
+        font-weight: var(--font-weight-semibold);
+    }
+
+    .labelWrapper {
+        .subCategory {
+            .label {
+                font-weight: var(--font-weight-light);
+            }
+        }
+    }
+}
+
+.labelWrapper {
+    display: block;
+}
+
+.active {
+    color: var(--color-orange);
+}
+
+.details {
+    margin-bottom: 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.categoryName {
+    font-size: var(--font-size-body-4);
+    color: var(--color-blue);
+    font-weight: var(--font-weight-semibold);
+    margin-bottom: 8px;
+}
+
+.categoryDescription {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-light);
+    color: var(--color-black);
+}
+
+// Questions
+.questionWrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 36px;
+    margin-bottom: 36px;
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+    padding-bottom: 4px;
+}
+
+.questionWrapperOpenAnswer {
+    flex-direction: column;
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+    margin-bottom: 24px;
+
+    .question {
+        width: 100%;
+        border-bottom: none;
+    }
+
+    .answer {
+        width: 100%;
+        height: auto;
+
+        :global {
+            .ant-input {
+                min-height: 140px;
+            }
+            
+            .ant-form-item {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}
+
+.question {
+    width: calc(100% - 149px);
+    display: flex;
+    align-items: center;
+}
+
+.answer {
+    width: 130px;
+    min-width: 130px;
+    align-self: flex-end;
+    display: flex;
+    justify-content: space-between;
+    padding-right: 15px;
+}
+
+.answerOpenAnswer {
+    display: none;
+}
+
+.categoryGrades {
+    width: 130px;
+    min-width: 130px;
+    align-self: flex-end;
+    display: flex;
+    justify-content: space-between;
+    gap: 34px;
+}
+
+.subject {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-medium);
+}
+
+.description {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+}
+
+.gradeBox {
+    padding: 6px;
+    font-size: var(--font-size-body-4);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-white);
+    border-radius: 5px;
+    display: inline-flex;
+    letter-spacing: 3px;
+} 
+
+.categoryGradesWrapper {
+    background-color: rgba(217, 217, 217, 0.5);
+    border-radius: 5px;
+    padding: 8px 15px;
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+    align-items: center;
+}
+
+.categoryGradesTitle {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+}

package/src/components/CategoryResponse/styles.module.scss

@@ -7,10 +7,12 @@
 
 .sidebarWrapper {
     background: #EBECED;
+    overflow: auto;
 }
 
 .contentWrapper {
     background: var(--color-white);
+    overflow: auto;
 }
 
 .sidebarWrapper,

package/src/components/ModalWithTable/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../Button';
 import { Modal } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CloseOutlined } from '@ant-design/icons';
 import styles from './styles.module.scss';
 import { TagField } from '../Tag';
@@ -26,104 +26,60 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         modalData,
         isLoading,
     } = props;
-
-    const prevIsOpenRef = useRef<boolean>();
-    useEffect(() => {
-        prevIsOpenRef.current = isOpen;
-    }, [isOpen]);
-    const prevIsOpen = prevIsOpenRef.current;
-
-    // Add a new state to store the initial values
-    const [initialValues, setInitialValues] = useState<any>({
-        pageInfo: {},
-        rowSelectionInfo: [],
-        tagsInfo: [],
-        selectedData: [],
-    });
+    
     const pageBase = {currentPage: 1};
     const [open, setOpen] = useState((isOpen));
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [pageInfo, setPageInfo] = useState<any>(pageBase);
     const [rowSelectionInfo, setRowSelectionInfo] = useState<any>();
     const [tagsInfo, setTagsInfo] = useState<any>([]);
+    const [ModalCanceled, setModalCanceled] = useState<boolean>(false);
     const [selectedData, setSelectedData] = useState<any>([]);
 
     useEffect(()=> {
         setOpen(isOpen);
-
-        if (isOpen && !prevIsOpen) {
-            setInitialValues({
-                    pageInfo: pageInfo,
-                    rowSelectionInfo: rowSelectionInfo,
-                    tagsInfo: tagsInfo,
-                    selectedData: selectedData,
-            });
-        }
     }, [isOpen])
 
     const hideModal = () => {
         setOpen(false);
-        setPageInfo(initialValues.pageInfo);
-        setRowSelectionInfo(initialValues.rowSelectionInfo);
-        setTagsInfo(initialValues.tagsInfo);
-        setSelectedData(initialValues.selectedData);
+        setModalCanceled(true);
     };
 
     const saveChanges = () => {
         setOpen(false);
+        setModalCanceled(false);
     };
 
     useEffect(() => {
-        if (!open) {
+        if(!open) {
             setPageInfo(pageBase);
         }
-    
-        const modalDataObj = {
-            pageInfo: pageInfo,
-            rowSelectionInfo: rowSelectionInfo,
-            tagsInfo: tagsInfo,
-            open: open,
-            selectedData: selectedData,
-        };
-    
-        modalData(modalDataObj);
-    }, [tagsInfo, open, rowSelectionInfo, selectedData]);
+
+        ModalCanceled 
+            ?   modalData({
+                    "pageInfo": {},
+                    "rowSelectionInfo": [],
+                    "tagsInfo": [],
+                    "open": open,
+                    "selectedData": []
+                })
+            :   modalData({
+                    "pageInfo": pageInfo,
+                    "rowSelectionInfo": rowSelectionInfo,
+                    "tagsInfo": tagsInfo,
+                    "open": open,
+                    "selectedData": selectedData
+                });
+    }, [tagsInfo, open]);
 
     useEffect(() => {
         const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
 
-        if(tableData?.rowSelection?.type === 'radio') {
-            const filteredArray = tableData?.dataSource?.filter((element) => {
-                return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-            });
-    
-            setSelectedData(filteredArray);
-            return;
-        }
-
-        setSelectedData((prevData: any) => {
-            const newData = tableData?.dataSource?.filter((element) => {
-                return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
-            }) || [];
-        
-            const oldData = prevData.filter((dataItem: any) => {
-                return !tableData?.dataSource?.some(
-                    (element) => element[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                );
-            });
-        
-            const combinedData = [...oldData, ...newData].filter((dataItem, index, self) => {
-                return (
-                    index ===
-                    self.findIndex(
-                        (item) => item[tableData.rowKeyValue as any] === dataItem[tableData.rowKeyValue as any]
-                    )
-                );
-            });
-
-            setInitialValues({...initialValues, selectedData: combinedData});
-            return combinedData;
+        const filteredArray = tableData?.dataSource?.filter((element) => {
+            return selectedRowKeys.includes(element[tableData.rowKeyValue as any]);
         });
+
+        setSelectedData(filteredArray);
     }, [rowSelectionInfo])
 
     useEffect(()=> {
@@ -165,7 +121,7 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
             <div className={styles.tagsWrapper}>
                 <TagField tagsInfo={setTagsInfo}/>
             </div>
-
+            
             <div className={styles.tableWrapper}>
                 {   tableData && 
                         <Table {...tableData} paginationInfo={setPageInfo} rowSelectionInfo={setRowSelectionInfo} headingTranslationsKey={'tableHeadings'} />
@@ -176,4 +132,3 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         </>
     )
 }
-

package/src/components/Table/index.tsx

@@ -58,20 +58,7 @@ export const Table = (props: TableCustomProps) => {
     const [selectedRowKeys, setselectedRowKeys] = useState<any>(rowSelection?.selectedRowKeys || []);
 
     const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
-        if(rowSelection.type === 'radio') {
-            setselectedRowKeys(newSelectedRowKeys);
-            return;
-        }
-
-        setselectedRowKeys((prevKeys: any) => {
-            const dataSourceIds = dataSource?.map((data) => data[rowKeyValue as any] )
-
-            const oldKeys = prevKeys.filter((key: any) => {
-                return !dataSourceIds?.includes(key)
-            });
-
-            return [...oldKeys, ...newSelectedRowKeys];
-        });
+        setselectedRowKeys(newSelectedRowKeys);
     };
 
     const handleChange: TableProps<any>['onChange'] = (pagination) => {
@@ -98,7 +85,7 @@ export const Table = (props: TableCustomProps) => {
     }, [selectedRowKeys]);
 
     useEffect(() => {
-        if (dataSource && (dataSource as any)?.length > 0) {
+        if (dataSource) {
             // Columns
             let columns = Object.keys(dataSource?.[0]).map(key => {
                 if (hiddenColumns?.includes(key)) {

package/src/components/index.tsx

@@ -21,3 +21,4 @@ export * from './AnalyticsBar';
 export * from './CategoryResponse';
 export * from './Upload';
 export * from './UserInfo';
+export * from './CategoryReadOnly';

package/src/locales/en.json

@@ -30,6 +30,10 @@
         "categoryResponse": {
             "notApplicable": "Not Applicable",
             "answer": "Answer"
+        },
+        "categoryReadOnly": {
+            "categories": "Categories",
+            "categoryAverage": "Category Average"
         }
     }
 }

package/src/locales/es.json

@@ -30,6 +30,10 @@
         "categoryResponse": {
             "notApplicable": "Not Applicable ES",
             "answer": "Answer ES"
+        },
+        "categoryReadOnly": {
+            "categories": "Categories ES",
+            "categoryAverage": "Category Average ES"
         }
     }
 }

package/src/locales/pt.json

@@ -48,6 +48,10 @@
         "categoryResponse": {
             "notApplicable": "Não Aplicável",
             "answer": "Resposta"
+        },
+        "categoryReadOnly": {
+            "categories": "Categories PT",
+            "categoryAverage": "Category Average PT"
         }
     }
 }