@omniumretail/component-library 1.0.20 → 1.0.22

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

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from 'react';
+import { Tree } from 'antd';
+import type { TreeProps } from 'antd/es/tree';
+import styles from './styles.module.scss';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from '../../Button';
+
+export interface Questions {
+    grade: string;
+    questions: string;
+    info: string;
+}
+export interface Data {
+    categoryName: string;
+    generalEvaluationLevel: string;
+    grade: string;
+    openAnswer: boolean;
+    questions: Questions[];
+}
+export interface DataNode {
+    title: string;
+    key: string;
+    data?: Data;
+    children?: DataNode[];
+}
+
+interface SidebarProps {
+    categoryContentData: any;
+    categorySidebarInfo: any;
+    data: DataNode[];
+}
+
+function get_element_by_index(data: DataNode[], index: string | number): DataNode | null {
+    for (const item of data) {
+        if (item.key === index) {
+            return item;
+        } else if (item.children) {
+            const result = get_element_by_index(item.children, index);
+            if (result !== null) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+
+function addPropertyByIndex(data: DataNode[], index: string | number, property: string, value: any): DataNode[] {
+    return data.map((item: DataNode) => {
+        if (item.key === index) {
+            return { ...item, [property]: value };
+        }
+        else if (item.children) {
+            return { ...item, children: addPropertyByIndex(item.children, index, property, value) };
+        }
+        return item;
+    });
+}
+
+export const CategorySidebar = (props: SidebarProps) => {
+    const {
+        categoryContentData,
+        data
+    } = props;
+
+    const [gData, setGData] = useState(data);
+    const [expandedKeys] = useState([]);
+    const [sidebarInfo, setSidebarInfo] = useState<any>();
+
+    const onDragEnter: TreeProps['onDragEnter'] = (info) => {
+        // expandedKeys
+        // setExpandedKeys(info.expandedKeys)
+    };
+
+    const onDrop: TreeProps['onDrop'] = (info) => {
+        const dropKey = info.node.key;
+        const dragKey = info.dragNode.key;
+        const dropPos = info.node.pos.split('-');
+        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+        const { data: nodeData } = info.node as DataNode;
+        const questions: Questions[] | undefined = nodeData?.questions;
+
+        if(questions && questions.length > 0) {
+            console.log('you cant add a subcategory to a category with questions');
+            return;
+        }
+
+        if (dropPos.length >= 4) {
+            console.log('cant have more than 3 levels');
+            return;
+        }
+
+        const loop = (
+            data: DataNode[],
+            key: React.Key,
+            callback: (node: DataNode, i: number, data: DataNode[]) => void,
+        ) => {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].key === key) {
+                    return callback(data[i], i, data);
+                }
+                if (data[i].children) {
+                    loop(data[i].children!, key, callback);
+                }
+            }
+        };
+        const data = [...gData];
+
+        // Find dragObject
+        let dragObj: DataNode;
+        loop(data, dragKey, (item, index, arr) => {
+            arr.splice(index, 1);
+            dragObj = item;
+        });
+
+        if (!info.dropToGap) {
+            // Drop on the content
+            loop(data, dropKey, (item) => {
+                item.children = item.children || [];
+                // where to insert
+                item.children.unshift(dragObj);
+                // {...dragObj, key: `${item.key}-${item.children.length}`}
+            });
+        } else if (
+            ((info.node as any).props.children || []).length > 0 && // Has children
+            (info.node as any).props.expanded && // Is expanded
+            dropPosition === 1 // On the bottom gap
+        ) {
+            loop(data, dropKey, (item) => {
+                item.children = item.children || [];
+                // where to insert
+                item.children.unshift(dragObj);
+                // in previous version, we use item.children.push(dragObj) to insert the
+                // item to the tail of the children
+            });
+        } else {
+            let ar: DataNode[] = [];
+            let i: number;
+            loop(data, dropKey, (_item, index, arr) => {
+                ar = arr;
+                i = index;
+            });
+            if (dropPosition === -1) {
+                ar.splice(i!, 0, dragObj!);
+            } else {
+                ar.splice(i! + 1, 0, dragObj!);
+            }
+        }
+
+        let newData: any = {};
+
+        // TODO: create a recursive function that does the same
+        // This code changes the indexes on the fly while dragging and dropping 
+
+        let keyCounter = 0;
+        data.forEach((category: any) => {
+            const categoryKey = `${keyCounter++}`;
+            let children: any = [];
+            if (category.children) {
+                category.children.forEach((subcategory: any, subcategoryindex: number) => {
+                    const subcategoryKey = `${categoryKey}.${subcategoryindex}`;
+                    let subChildren: any = [];
+                    if (subcategory.children) {
+                        subcategory.children.forEach((lastSubcategory: any, lastSubCategoryIndex: number) => {
+                            const lastSubcategoryKey = `${subcategoryKey}.${lastSubCategoryIndex}`;
+                            subChildren.push({ ...lastSubcategory, key: lastSubcategoryKey });
+                        });
+                    }
+                    children.push({ ...subcategory, children: subChildren, key: subcategoryKey });
+                });
+            }
+            newData[categoryKey] = { ...category, children };
+        });
+
+        // TODO: update this code if possible once the TODO before is done
+        /* 
+            This code removes the property that was assigned to the object ex: 0: {}, 1: {} changes to {}, {} 
+        */
+        const checkedData = Object.values(newData).map((category: any, index: number) => {
+            return { ...category, key: index };
+        });
+
+        setGData(checkedData);
+    };
+
+    const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+        setSidebarInfo(selectedKeys);
+    };
+
+    const addCategory = () => {
+        setGData((prevCategories: DataNode[]) => [
+            ...prevCategories,
+            { title: `New category`, key: `${gData.length}` },
+        ])
+    }
+
+    useEffect(() => {
+        props.categorySidebarInfo({
+            selectKey: sidebarInfo,
+            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0]),
+        });
+    }, [sidebarInfo]);
+
+    useEffect(() => {
+        const newGData = addPropertyByIndex(gData, sidebarInfo && sidebarInfo[0], "data", categoryContentData);
+
+        const updatedGData = newGData.map((category: any, index) => {
+            if(category?.data) {
+                return {...category, title: `${category.data.categoryName} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' +category.data.grade + ')' : ''}`}
+            }
+            return category;
+        })
+
+        setGData(updatedGData);
+    }, [categoryContentData]);
+
+    useEffect(() => {
+        props.categorySidebarInfo({
+            selectKey: sidebarInfo, 
+            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0])
+        });
+
+        console.log(gData);
+    }, [gData]);
+
+    return (
+        <div className={styles.categorySidebar}>
+            <div className={styles.title}>Categorias</div>
+            <Button icon={<PlusOutlined />} onClick={addCategory}>
+                Adicionar Categoria
+            </Button>
+
+            <div className={styles.categoryViewer}>
+                <Tree
+                    className="draggable-tree"
+                    defaultExpandedKeys={expandedKeys}
+                    draggable
+                    blockNode
+                    onDragEnter={onDragEnter}
+                    onDrop={onDrop}
+                    treeData={gData}
+                    onSelect={onSelect}
+                />
+            </div>
+        </div>
+    );
+};

package/src/components/Category/CategorySidebar/styles.module.scss

@@ -0,0 +1,24 @@
+.categorySidebar {
+    :global {
+        .ant-tree-title {
+            font-weight: var(--font-weight-semibold);
+        }
+    }
+}
+
+.title {
+    font-size: var(--font-size-body-4);
+    font-weight: 600;
+    line-height: 100%;
+    color: var(--color-blue);
+    text-transform: uppercase;
+}
+
+button {
+    margin-top: 32px;
+    width: 100%;
+}
+
+.categoryViewer {
+    margin-top: 20px;
+}

package/src/components/Category/index.tsx

@@ -0,0 +1,58 @@
+import styles from './styles.module.scss';
+import { CategorySidebar, DataNode } from './CategorySidebar';
+import { useEffect, useState } from 'react';
+import { CategoryContent } from './CategoryContent';
+
+interface Category {
+    data: DataNode;
+}
+
+const fakeData: any = {
+    data: [
+        {
+            "title": "21  (G: 2)",
+            "key": "0",
+            "data": {
+                "categoryName": "21",
+                "grade": "2"
+            }
+        },
+        {
+            "title": "asda  (G: 5)",
+            "key": "1",
+            "data": {
+                "categoryName": "asda",
+                "grade": "5"
+            }
+        }
+    ],
+    noData: []
+}
+
+export const Category = (props: Category) => {
+    const {
+        data = fakeData.noData
+    } = props;
+
+    const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
+    const [categorySidebarInfo, setCategorySidebarInfo] = useState<any>();
+    const [showContent, setShowContent] = useState<boolean>(false);
+
+    useEffect(() => {
+    }, [categoryContentInfo]);
+
+    useEffect(() => {
+        setShowContent(categorySidebarInfo?.selectKey?.length > 0);
+    }, [categorySidebarInfo]);
+
+    return (
+        <div className={styles.category}>
+            <div className={styles.sidebarWrapper}>
+                <CategorySidebar categorySidebarInfo={setCategorySidebarInfo} categoryContentData={categoryContentInfo} data={data} />
+            </div>
+            <div className={styles.contentWrapper}>
+                <CategoryContent categoryContentInfo={setCategoryContentInfo} categoryContentShow={showContent} categorySidebarData={categorySidebarInfo} />
+            </div>
+        </div>
+    )
+};

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

@@ -0,0 +1,12 @@
+.category {
+    display: grid;
+    grid-template-columns: 300px auto;
+    gap: 16px;
+}
+
+.sidebarWrapper,
+.contentWrapper {
+    background: white;
+    padding: 20px;
+}
+

package/src/components/Questions/index.tsx

@@ -3,7 +3,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { Form } from 'antd';
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { SingleQuestion } from "./SingleQuestion";
-import { Link } from 'components/Link';
+import { Link } from '../Link';
 import { FieldContext } from 'rc-field-form';
 import { t } from 'i18next';
 

package/src/components/Radio/index.tsx

@@ -4,7 +4,6 @@ import type { RadioGroupProps } from 'antd/lib/radio';
 import styles from './styles.module.scss';
 
 export const Radio = ({...radioProps }: RadioProps) => {
-
     return (
         <RadioAntd className={styles.radio} {...radioProps} />
     )

package/src/components/index.tsx

@@ -15,3 +15,4 @@ export * from './ModalConfirmation';
 export * from './ModalWithTable';
 export * from './Sidebar';
 export * from './Switch';
+export * from './Category';