@omniumretail/component-library 1.0.64 → 1.0.66

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

@@ -1,268 +1,268 @@
-import React, { useEffect, useState } from 'react';
-import { Tree } from 'antd';
-import type { TreeProps } from 'antd/es/tree';
-import styles from './styles.module.scss';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button } from '../../Button';
-import { t } from 'i18next';
-
-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;
-    categoryContentFinalData: 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;
-    });
-}
-
-function remove_element_by_index(data: DataNode[], index: string | number): DataNode[] {
-    return data.filter((item) => item.key !== index);
-}
-
-function remove_nested_element(data: DataNode[], index: string | number): DataNode[] {
-    let newData = [...data] as DataNode[];
-
-    for (let i = 0; i < newData.length; i++) {
-        if (newData[i].key === index) {
-            newData = remove_element_by_index(newData, index);
-            break;
-        } else if (newData[i].children && (newData[i] as any).children.length > 0) {
-            newData[i].children = remove_nested_element((newData[i].children as any), index);
-        }
-    }
-
-    return newData;
-}
-
-export const CategorySidebar = (props: SidebarProps) => {
-    const {
-        categoryContentData,
-        categoryContentFinalData,
-        data
-    } = props;
-
-    const [gData, setGData] = useState(data);
-    const [expandedKeys] = useState([]);
-    const [sidebarInfo, setSidebarInfo] = useState<any>(undefined);
-
-    const onDragEnter: TreeProps['onDragEnter'] = (info) => {
-        // drag entered
-    };
-
-    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);
-            });
-        } 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!);
-            }
-        }
-
-        function generateCategoryKeys(categories: any[], parentKey: string = ''): any[] {
-            let keyCounter = 0;
-            return categories.map((category: any, index: number) => {
-                const categoryKey = `${parentKey}${parentKey ? '.' : ''}${keyCounter++}`;
-                let children: any = [];
-                if (category.children) {
-                    children = generateCategoryKeys(category.children, categoryKey);
-                }
-                return { ...category, key: categoryKey, children };
-            });
-        }
-
-        setGData(generateCategoryKeys(data));
-    };
-
-    const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
-        setSidebarInfo(selectedKeys);
-    };
-
-    const addCategory = () => {
-        setGData((prevCategories: DataNode[]) => [
-            ...prevCategories,
-            { title: `New category`, key: `${gData.length}` },
-        ])
-    }
-
-    const removeCategory = () => {
-        if (sidebarInfo) {
-            // Update the state with the new array
-            setGData(remove_nested_element(gData, sidebarInfo[0]));
-            setSidebarInfo(undefined);
-        }
-    }
-
-    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);
-
-        function updateCategoryTitles(categories: any[]): any[] {
-            return categories.map((category: any, index: number) => {
-                if (category?.data) {
-                    const updatedTitle = `${category.data.categoryName} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' + category.data.grade + ')' : ''}`;
-                    const updatedChildren = category.children ? updateCategoryTitles(category.children) : null;
-                    return { ...category, title: updatedTitle, children: updatedChildren };
-                }
-                return category;
-            });
-        }
-
-        const updatedGData: any[] = updateCategoryTitles(newGData);
-
-        setGData(updatedGData);
-    }, [categoryContentData]);
-
-    useEffect(() => {
-        props.categorySidebarInfo({
-            selectKey: sidebarInfo,
-            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0])
-        });
-
-        props.categoryContentFinalData(gData);
-    }, [gData]);
-
-    return (
-        <div className={styles.categorySidebar}>
-            <div className={styles.title}>Categorias</div>
-            <Button icon={<PlusOutlined />} onClick={addCategory}>
-                { t('components.categorySidBar.addCategory') }
-            </Button>
-
-            {
-                sidebarInfo &&
-                <Button icon={<MinusOutlined />} onClick={removeCategory}>
-                    { t('components.categorySidBar.removeCategory') }
-                </Button>
-            }
-
-
-            <div className={styles.categoryViewer}>
-                <Tree
-                    className="draggable-tree"
-                    defaultExpandedKeys={expandedKeys}
-                    draggable
-                    blockNode
-                    onDragEnter={onDragEnter}
-                    onDrop={onDrop}
-                    treeData={gData}
-                    onSelect={onSelect}
-                />
-            </div>
-        </div>
-    );
-};
+import React, { useEffect, useState } from 'react';
+import { Tree } from 'antd';
+import type { TreeProps } from 'antd/es/tree';
+import styles from './styles.module.scss';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from '../../Button';
+import { t } from 'i18next';
+
+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;
+    categoryContentFinalData: 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;
+    });
+}
+
+function remove_element_by_index(data: DataNode[], index: string | number): DataNode[] {
+    return data.filter((item) => item.key !== index);
+}
+
+function remove_nested_element(data: DataNode[], index: string | number): DataNode[] {
+    let newData = [...data] as DataNode[];
+
+    for (let i = 0; i < newData.length; i++) {
+        if (newData[i].key === index) {
+            newData = remove_element_by_index(newData, index);
+            break;
+        } else if (newData[i].children && (newData[i] as any).children.length > 0) {
+            newData[i].children = remove_nested_element((newData[i].children as any), index);
+        }
+    }
+
+    return newData;
+}
+
+export const CategorySidebar = (props: SidebarProps) => {
+    const {
+        categoryContentData,
+        categoryContentFinalData,
+        data
+    } = props;
+
+    const [gData, setGData] = useState(data);
+    const [expandedKeys] = useState([]);
+    const [sidebarInfo, setSidebarInfo] = useState<any>(undefined);
+
+    const onDragEnter: TreeProps['onDragEnter'] = (info) => {
+        // drag entered
+    };
+
+    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);
+            });
+        } 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!);
+            }
+        }
+
+        function generateCategoryKeys(categories: any[], parentKey: string = ''): any[] {
+            let keyCounter = 0;
+            return categories.map((category: any, index: number) => {
+                const categoryKey = `${parentKey}${parentKey ? '.' : ''}${keyCounter++}`;
+                let children: any = [];
+                if (category.children) {
+                    children = generateCategoryKeys(category.children, categoryKey);
+                }
+                return { ...category, key: categoryKey, children };
+            });
+        }
+
+        setGData(generateCategoryKeys(data));
+    };
+
+    const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+        setSidebarInfo(selectedKeys);
+    };
+
+    const addCategory = () => {
+        setGData((prevCategories: DataNode[]) => [
+            ...prevCategories,
+            { title: t('components.category.newCategory'), key: `${gData.length}` },
+        ])
+    }
+
+    const removeCategory = () => {
+        if (sidebarInfo) {
+            // Update the state with the new array
+            setGData(remove_nested_element(gData, sidebarInfo[0]));
+            setSidebarInfo(undefined);
+        }
+    }
+
+    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);
+
+        function updateCategoryTitles(categories: any[]): any[] {
+            return categories.map((category: any, index: number) => {
+                if (category?.data) {
+                    const updatedTitle = `${category.data.categoryName} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' + category.data.grade + ')' : ''}`;
+                    const updatedChildren = category.children ? updateCategoryTitles(category.children) : null;
+                    return { ...category, title: updatedTitle, children: updatedChildren };
+                }
+                return category;
+            });
+        }
+
+        const updatedGData: any[] = updateCategoryTitles(newGData);
+
+        setGData(updatedGData);
+    }, [categoryContentData]);
+
+    useEffect(() => {
+        props.categorySidebarInfo({
+            selectKey: sidebarInfo,
+            data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0])
+        });
+
+        props.categoryContentFinalData(gData);
+    }, [gData]);
+
+    return (
+        <div className={styles.categorySidebar}>
+            <div className={styles.title}>Categorias</div>
+            <Button icon={<PlusOutlined />} onClick={addCategory}>
+                { t('components.categorySidBar.addCategory') }
+            </Button>
+
+            {
+                sidebarInfo &&
+                <Button icon={<MinusOutlined />} onClick={removeCategory}>
+                    { t('components.categorySidBar.removeCategory') }
+                </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

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