@omniumretail/component-library 1.0.36 → 1.0.38

package/src/components/AnalyticsBar/index.tsx

@@ -0,0 +1,76 @@
+import styles from './styles.module.scss';
+import { MinusOutlined, PlusOutlined, SortAscendingOutlined, SortDescendingOutlined } from '@ant-design/icons';
+import { Select } from 'components/Select';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import { AnalyticsBarProps, sortBy } from './interfaces/analyticsBar';
+import { useCallback, useEffect, useState } from 'react';
+
+export const AnalyticsBar = (props: AnalyticsBarProps) => {
+    const {
+        data: items = [],
+        selectOptions,
+        selectDefault,
+        selectUserOption,
+        sortedBy,
+        activeListItem
+    } = props;
+
+    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+    const [sortInfo, setSortInfo] = useState<any>(sortBy.desc);
+
+    const selectOnChange = useCallback((value: any) => {
+        selectUserOption(value);
+    }, [selectUserOption]);
+
+    const setSorter = useCallback(() => {
+        sortInfo === sortBy.desc
+            ? setSortInfo(sortBy.asc)
+            : setSortInfo(sortBy.desc);
+
+        sortedBy(sortInfo);
+    }, [sortInfo]);
+
+    const onClick: MenuProps['onClick'] = (e: any) => {
+        const { key } = e;
+        if (selectedKeys.includes(key)) {
+            setSelectedKeys([]);
+        } else {
+            setSelectedKeys([key]);
+        }
+
+        activeListItem(key);
+    };
+
+    console.log(sortInfo);
+    return (
+        <div className={styles.analyticsbar}>
+            <div className={styles.header}>
+                <Select
+                    options={selectOptions}
+                    customClass={styles.select}
+                    onChange={selectOnChange}
+                    defaultActiveFirstOption
+                    defaultValue={selectDefault}
+                />
+
+                <div className={styles.sorterWrapper} onClick={() => setSorter()}>
+                    {sortInfo === sortBy.desc
+                        ? <>Decrescente <SortDescendingOutlined /></>
+                        : <>Crescente <SortAscendingOutlined /></>
+                    }
+                </div>
+            </div>
+
+            <div className={styles.content}>
+                <Menu
+                    selectedKeys={selectedKeys}
+                    onClick={onClick}
+                    mode="inline"
+                    items={items}
+                    expandIcon={({ isOpen }) => (isOpen ? <MinusOutlined /> : <PlusOutlined />)}
+                />
+            </div>
+        </div>
+    );
+};

package/src/components/AnalyticsBar/interfaces/analyticsBar.tsx

@@ -0,0 +1,13 @@
+export interface AnalyticsBarProps {
+    data: any;
+    selectOptions: any;
+    selectDefault: any;
+    selectUserOption?: any;
+    sortedBy?: any;
+    activeListItem?: any;
+}
+
+export enum sortBy {
+    asc = 'asc',
+    desc = 'desc',
+}

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

@@ -0,0 +1,108 @@
+.select {
+    width: 100%;
+}
+
+.analyticsbar {
+    background: #2C2D2E0D;
+    height: 100%;
+    position: relative;
+
+    :global {
+        .ant-menu-light {
+            background-color: transparent !important;
+            border-inline-end: none !important;
+        }
+
+        .ant-menu-title-content {
+            font-size: 17px;
+            line-height: 20px;
+            font-weight: var(--font-weight-semibold);
+
+            &:hover {
+                color: var(--color-orange);
+            }
+        }
+
+        .ant-menu-sub {
+            .ant-menu-title-content {
+                font-size: 15px;
+                line-height: 18px;
+                font-weight: var(--font-weight-medium);
+            }
+
+            .ant-menu-item {
+                height: 30px;
+                line-height: 30px;
+
+                &:first-child {
+                    margin-top: -10px;
+                }
+            }
+        }
+
+        .ant-menu-submenu {
+            border-top: 1px solid var(--color-orange);
+            border-radius: 0;
+        }
+
+        .ant-menu-item {
+            &:hover {
+                background-color: initial !important;
+            }
+        }
+
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected >.ant-menu-submenu-title  {
+            color: var(--color-orange);
+            background-color: initial;
+        }
+
+        .ant-menu-inline .ant-menu-sub.ant-menu-inline {
+            background: initial;
+        }
+
+        .ant-menu-submenu-title  {
+            height: 50px !important;
+            line-height: 50px !important;
+
+            &:hover {
+                background-color: initial !important; 
+            }
+
+            .anticon {
+                color: var(--color-orange);
+            }
+        }
+    }
+}
+
+.header {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    right: 24px;
+    height: 144px;
+}
+
+.sorterWrapper {
+    font-size: var(--font-size-body-2);
+    line-height: 14px;
+    font-weight: var(--font-weight-light);
+    display: inline-block;
+    padding: 12px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 60px;
+}
+
+.content {
+    position: absolute;
+    top: 144px;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 24px;
+}

package/src/components/Category/Category.stories.tsx

@@ -10,11 +10,70 @@ export default {
 const Template: Story<any> = (args) => {
     const [serverData, setServerData] = useState<any>();
 
-    // useEffect(() => {
-    //     console.log(serverData);
-    // }, [serverData])
+    useEffect(() => {
+        console.log(serverData);
+    }, [serverData])
     
-    return <Category {...args} serverReadyData={setServerData} data={[]}></Category>
+    return <Category {...args} serverReadyData={setServerData} data={[
+        {
+            "title": "opgg (Q: 1) ",
+            "key": "0",
+            "data": {
+                "categoryName": "opgg",
+                "openAnswer": true,
+                "questions": [
+                    {
+                        "question": "1",
+                        "info": "2"
+                    }
+                ]
+            },
+            "children": []
+        },
+        {
+            "title": "abcd (Q: 1) (G: 2)",
+            "key": "1",
+            "data": {
+                "categoryName": "abcd",
+                "openAnswer": false,
+                "questions": [
+                    {
+                        "question": "ax1",
+                        "info": "se2",
+                        "grade": "1s"
+                    }
+                ],
+                "generalEvaluationLevel": "2",
+                "grade": "2"
+            },
+            "children": []
+        },
+        {
+            "title": "hasCHild (Q: 0) (G: 12)",
+            "key": "2",
+            "data": {
+                "categoryName": "hasCHild",
+                "openAnswer": false,
+                "generalEvaluationLevel": "0",
+                "grade": "12",
+                "questions": []
+            },
+            "children": [
+                {
+                    "title": "theChild (Q: 0) (G: 12)",
+                    "key": "2.0",
+                    "children": [],
+                    "data": {
+                        "categoryName": "theChild",
+                        "openAnswer": false,
+                        "generalEvaluationLevel": "0",
+                        "grade": "12",
+                        "questions": []
+                    }
+                }
+            ]
+        }
+    ]}></Category>
 };
 
 export const Primary = Template.bind({});
@@ -22,36 +81,4 @@ Primary.args = {
 };
 
 
-// [
-//     {
-//         "title": "opgg (Q: 1) ",
-//         "key": "0",
-//         "data": {
-//             "categoryName": "opgg",
-//             "openAnswer": true,
-//             "questions": [
-//                 {
-//                     "question": "1",
-//                     "info": "2"
-//                 }
-//             ]
-//         }
-//     },
-//     {
-//         "title": "abcd (Q: 1) (G: 2)",
-//         "key": "1",
-//         "data": {
-//             "categoryName": "abcd",
-//             "openAnswer": false,
-//             "questions": [
-//                 {
-//                     "question": "ax1",
-//                     "info": "se2",
-//                     "grade": "1s"
-//                 }
-//             ],
-//             "generalEvaluationLevel": "2",
-//             "grade": "2"
-//         }
-//     }
-// ]
+

package/src/components/Category/CategoryContent/index.tsx

@@ -92,15 +92,15 @@ export const CategoryContent = (props: categoryContent) => {
 
                                 {categorySidebarData?.data?.children?.length > 0 &&
                                     <div className={styles.grade}>
-                                                        <Label isUppercase>
-                                                            Ponderação
-                                                        </Label>
-                                                        <Form.Item
-                                                            name={['grade']}
-                                                            rules={[{ required: true, message: 'Grade is Missing' }]}
-                                                        >
-                                                            <InputField placeholder={'EX: 15%'} />
-                                                        </Form.Item>
+                                        <Label isUppercase>
+                                            Ponderação
+                                        </Label>
+                                        <Form.Item
+                                            name={['grade']}
+                                            rules={[{ required: true, message: 'Grade is Missing' }]}
+                                        >
+                                            <InputField placeholder={'EX: 15%'} />
+                                        </Form.Item>
                                     </div>
                                 }
 

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