@omniumretail/component-library 1.0.36 → 1.0.38

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

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

@@ -0,0 +1,135 @@
+.categoryResponse {
+    display: grid;
+    grid-template-columns: 300px auto;
+    gap: 16px;
+    height: 100%;
+}
+
+.sidebarWrapper {
+    background: #EBECED;
+}
+
+.contentWrapper {
+    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-medium);
+    }
+
+    .labelWrapper {
+        .subCategory {
+            .label {
+                font-weight: var(--font-weight-light);
+            }
+        }
+    }
+}
+
+.labelWrapper {
+    display: block;
+}
+
+.active {
+    color: var(--color-orange);
+}
+
+.details {
+    margin-bottom: 24px;
+}
+
+.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: 12px;
+    margin-bottom: 36px;
+}
+
+.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% - 112px);
+    border-bottom: 1px solid rgba(var(--color-blue-rgb), .2);
+}
+
+.answer {
+    width: 100px;
+    height: 50px;
+    align-self: flex-end;
+}
+
+.subject {
+    font-size: var(--font-size-body-3);
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 8px;
+}
+
+.description {
+    font-weight: var(--font-weight-light);
+    margin-bottom: 4px;
+}

package/src/components/{RangePickerTag/RangePickerTag.stories.tsx → DatePickerTag/DatePickerTag.stories.tsx}

@@ -1,17 +1,17 @@
 import { Meta, Story } from "@storybook/react";
-import { RangePickerTag } from '.';
+import { DatePickerTag } from '.';
 import { TagProps } from 'antd';
 import { useState } from "react";
 
 export default {
-    title: 'RangePickerTag',
-    component: RangePickerTag,
+    title: 'DatePickerTag',
+    component: DatePickerTag,
 } as Meta;
 
 const Template: Story<TagProps> = (args) => {
     const [tagsInfo, setTagsInfo] = useState<any>({});
     
-    return <RangePickerTag {...args} tagsInfo={setTagsInfo}></RangePickerTag>;
+    return <DatePickerTag {...args} tagsInfo={setTagsInfo}></DatePickerTag>;
 }
 
 export const Primary = Template.bind({});

package/src/components/{RangePickerTag → DatePickerTag}/index.tsx

@@ -9,24 +9,23 @@ export interface RangePickerTagProps extends TagProps {
     tagsInfo?: any;
 }
 
-const { RangePicker } = DatePicker;
-type RangeValue = [Dayjs | null, Dayjs | null] | null;
+type DateValue = Dayjs | null;
 
-export const RangePickerTag = (props: RangePickerTagProps) => {
+export const DatePickerTag = (props: RangePickerTagProps) => {
     const { customTags = [] } = props;
 
     const [tags, setTags] = useState<any>(customTags);
-    const [rangeValue, setRangeValue] = useState<RangeValue>(null);
+    const [dateValue, setDateValue] = useState<DateValue>(null);
 
     const handleClose = (removedTag: any) => {
         const newTags = tags.filter((tag: any) => tag !== removedTag);
         setTags(newTags);
     };
 
-    const handleChange = (dates: RangeValue, dateStrings: [string, string]) => {
-        const rangeString = `${dates?.[0]?.format('DD/MM/YYYY')} - ${dates?.[1]?.format('DD/MM/YYYY')}`;
-        setTags([...tags, rangeString]);
-        setRangeValue(null);
+    const handleChange = (date: DateValue, dateString: string) => {
+        const formattedDate = date?.format('DD/MM/YYYY');
+        setTags([...tags, formattedDate]);
+        setDateValue(null);
     };
 
     useEffect(() => {
@@ -56,8 +55,8 @@ export const RangePickerTag = (props: RangePickerTagProps) => {
 
     return (
         <div className={styles.tagfield}>
-            <RangePicker
-                value={rangeValue}
+            <DatePicker
+                value={dateValue}
                 onChange={handleChange}
                 className={styles.picker}
             />

package/src/components/{RangePickerTag → DatePickerTag}/styles.module.scss

@@ -3,6 +3,11 @@
 
     .picker {
         height: 50px;
+        width: 300px;
+
+        @media(min-width: 1024px) {
+            width: 450px;
+        }
     }
 
     .new {

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,178 @@
+import { Meta, Story } from "@storybook/react";
+import { Menu } from '.';
+import { MenuProps } from 'antd';
+import { getItem } from './helpers/codeMutation';
+
+export default {
+    title: 'Menu',
+    component: Menu,
+} as Meta;
+
+const Template: Story<MenuProps> = (args) => {
+    const data = [
+        {
+            "Year": 2023,
+            "EvaluationCycles": [
+                {
+                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
+                    "Type": "Permanent",
+                    "Name": "EV1",
+                    "Year": 2023,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [
+                        {
+                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
+                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
+                            "UserScore": 3.333,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        }
+                    ],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Started",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T10:50:41.737Z",
+                    "UpdateDate": "2023-02-27T10:52:50.661Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": null,
+                    "InitiatDate": "2023-02-27T10:51:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                },
+                {
+                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
+                    "Type": "Permanent",
+                    "Name": "EV1",
+                    "Year": 2023,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Draft",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T14:52:16.523Z",
+                    "UpdateDate": "2023-02-27T14:53:04.987Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "InitiatDate": "0001-01-01T00:00:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                }
+            ]
+        },
+        {
+            "Year": 2024,
+            "EvaluationCycles": [
+                {
+                    "Id": "D5A77A3B-1163-4590-9C98-2E6D62442F62",
+                    "Type": "Permanent",
+                    "Name": "EV2",
+                    "Year": 2024,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [
+                        {
+                            "UserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "9D361E92-A748-4E4A-BC5E-0134CE62328E",
+                            "UserAnswer": "982FF376-56AD-4E3F-B0D0-5BD4282A7F78",
+                            "UserScore": 3.333,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        },
+                        {
+                            "UserId": "594A4DD5-12B1-4ED0-B00C-EDF729B85C57",
+                            "UserAnswer": null,
+                            "UserScore": null,
+                            "SupervisorId": null,
+                            "SupervisorAnswer": null,
+                            "SupervisorScore": null
+                        }
+                    ],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Started",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T10:50:41.737Z",
+                    "UpdateDate": "2023-02-27T10:52:50.661Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": null,
+                    "InitiatDate": "2023-02-27T10:51:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                },
+                {
+                    "Id": "42A6EFDD-6D74-4905-94AE-5B5588967BE6",
+                    "Type": "Permanent",
+                    "Name": "EV2",
+                    "Year": 2024,
+                    "StartDate": "2023-03-01T00:00:00Z",
+                    "EndDate": "2023-05-31T23:00:00Z",
+                    "Users": [],
+                    "QuestionnaireId": "4C15A0A0-7DDF-4952-810C-B46105807CB7",
+                    "State": "Draft",
+                    "Notifications": [],
+                    "NotificationAgenda": null,
+                    "Status": "A",
+                    "IsOnlyForUsers": false,
+                    "CreateDate": "2023-02-27T14:52:16.523Z",
+                    "UpdateDate": "2023-02-27T14:53:04.987Z",
+                    "CreateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "UpdateUserId": "A200F4C5-8E41-41D4-A90C-B15EEC448517",
+                    "InitiatDate": "0001-01-01T00:00:00Z",
+                    "CancelDate": "0001-01-01T00:00:00Z"
+                }
+            ]
+        }
+    ];
+
+    const items = data.map((el: any, index: any) => {
+        return (
+            getItem(
+                el.Year, 
+                index, 
+                <></>,  
+                el.EvaluationCycles?.map((evCycle: any, subIndex: any) => {
+                    return getItem(evCycle.Name, `${index}-${subIndex}`);
+                })
+            )
+        )
+    });
+
+
+    return <Menu {...args} items={items}></Menu>;
+} 
+
+export const Primary = Template.bind({});
+Primary.args = {
+};

package/src/components/Menu/helpers/codeMutation.tsx

@@ -0,0 +1,19 @@
+import type { MenuProps } from 'antd';
+
+export type MenuItem = Required<MenuProps>['items'][number];
+
+export function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    children?: MenuItem[],
+    type?: 'group',
+): MenuItem {
+    return {
+        key,
+        icon,
+        children,
+        label,
+        type,
+    } as MenuItem;
+}