@omniumretail/component-library 1.2.71 → 1.2.72

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

@@ -1,69 +0,0 @@
-.title {
-    font-size: var(--font-size-body-4);
-    font-weight: 600;
-    line-height: 100%;
-    color: var(--color-blue);
-    text-transform: uppercase;
-    margin-bottom: 32px;
-}
-
-.categoryNameContainer {
-    display: flex;
-    gap: 32px;
-}
-
-.categoryName {
-    width: 100%;
-}
-
-.uncheckedCategory {
-    font-size: var(--font-size-body-2);
-    color: var(--color-black);
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-.formHeader {
-    display: grid;
-    grid-template-columns: minmax(200px, 1fr) auto auto auto auto;
-    gap: 46px;
-}
-
-.questionsWrapper {
-    margin-top: 16px;
-}
-
-Label {
-    margin-bottom: 8px;
-}
-
-.selectResponseType {
-    min-width: 200px;
-
-    @media(max-width: 768px) {
-        min-width: 150px;
-    }
-}
-
-.categoryContent {
-    :global {
-        .ant-select {
-            width: 100%;
-        }
-
-        .ant-select-selector {
-            border-color: rgba(var(--color-black-rgb), .5) !important;
-            height: 35px !important;
-            display: flex;
-            align-items: center;
-        }
-        
-        .ant-select-arrow {
-            color: var(--color-black);
-        }
-
-        .ant-switch {
-            width: 30px;
-        }
-    }
-}

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

@@ -1,344 +0,0 @@
-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;
-    question: string;
-    info: string;
-    responseType?: 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[];
-    hasHeader?: boolean;
-}
-
-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,
-        data,
-        hasHeader
-    } = props;
-
-    const [sidebarInfo, setSidebarInfo] = useState<any>(hasHeader ? ["0"] : undefined);
-    const [gData, setGData] = useState<DataNode[]>(() => {
-        // Adiciona a categoria "Header" se hasHeader for true
-        if (hasHeader && data?.length === 0) {
-            const headerCategory: DataNode = {
-                title: t('components.category.header'),
-                key: '0',
-                data: {
-                    categoryName: t('components.category.header'),
-                    generalEvaluationLevel: '',
-                    grade: '',
-                    openAnswer: false,
-                    questions: [
-                        {
-                            grade: '',
-                            question: t('components.category.store'),
-                            info: '',
-                            responseType: '-1'
-                        },
-                        {
-                            grade: '',
-                            question: t('components.category.date'),
-                            info: '',
-                            responseType: 'CD8D0F30-6229-4BA9-9888-4398CB333392'
-                        }
-                    ]
-                },
-                children: []
-            };
-            return [headerCategory, ...data];
-        }
-        return data;
-    });
-
-    const [expandedKeys] = useState([]);
-
-    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 (hasHeader && (dragKey === '0' || dropKey === '0')) {
-            return;
-        }
-
-        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: DataNode[], parentKey: string = ''): DataNode[] {
-            return categories.map((category, index) => {
-                const categoryKey = parentKey ? `${parentKey}.${index + 1}` : `${index + 1}`; // Cria hierarquia 1.1, 1.1.1 etc.
-        
-                let children: DataNode[] = [];
-                if (category.children) {
-                    children = generateCategoryKeys(category.children, categoryKey); // Recursivamente atualiza os filhos
-                }
-        
-                return { ...category, key: categoryKey, children };
-            });
-        } 
-
-        setGData(generateCategoryKeys(data));
-    };
-
-    const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
-        setSidebarInfo(selectedKeys);
-    };
-
-    const addCategory = () => {
-        // Função para obter a maior chave em gData
-        const getNextKey = (categories: DataNode[]): string => {
-            let maxKey = 0;
-    
-            const traverse = (nodes: DataNode[]) => {
-                nodes.forEach((node) => {
-                    const key = parseFloat(node.key as string); // Converte a chave para número
-                    if (key > maxKey) {
-                        maxKey = key;
-                    }
-                    if (node.children) {
-                        traverse(node.children); // Recorre para os filhos
-                    }
-                });
-            };
-    
-            traverse(categories);
-            return `${Math.floor(maxKey) + 1}`; // Retorna a próxima chave como um número inteiro
-        };
-    
-        const newKey = getNextKey(gData); // Calcula a próxima chave disponível
-    
-        setGData((prevCategories: DataNode[]) => [
-            ...prevCategories,
-            { title: t('components.category.newCategory'), key: newKey },
-        ]);
-    
-        setSidebarInfo([newKey]); // Atualiza o estado do sidebar
-    };
-    
-
-    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]);
-
-    function updateCategoryTitles(categories: any[]): any[] {
-        return categories.map((category: any, index: number) => {
-            if (category?.data) {
-                const titleWithoutCounts = category.title.replace(/\(Q: \d+\)/g, '').replace(/\(G: \d+\)/g, '').trim();
-                const updatedTitle = `${category?.data.categoryName ? category?.data.categoryName : titleWithoutCounts} ${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, categoryName: updatedTitle, children: updatedChildren };
-            }
-            return category;
-        });
-    }
-
-    useEffect(() => {
-        if (hasHeader) {
-            if (categoryContentData?.categoryName) {
-                const newGData = addPropertyByIndex(gData, sidebarInfo && sidebarInfo[0], "data", categoryContentData);
-                const updatedGData: any[] = updateCategoryTitles(newGData);
-
-                setGData(updatedGData);
-            }
-        } else {
-            const newGData = addPropertyByIndex(gData, sidebarInfo && sidebarInfo[0], "data", categoryContentData);
-            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}>{t('components.categorySidBar.categories')}</div>
-            <Button icon={<PlusOutlined />} onClick={addCategory}>
-                {t('components.categorySidBar.addCategory')}
-            </Button>
-
-            {
-                sidebarInfo && (hasHeader ? sidebarInfo[0] !== '0' : true) && (
-                    <Button icon={<MinusOutlined />} onClick={removeCategory}>
-                        {t('components.categorySidBar.removeCategory')}
-                    </Button>
-                )}
-
-
-            <div className={styles.categoryViewer}>
-                <Tree
-                    defaultSelectedKeys={hasHeader ? ["0"] : undefined}
-                    className="draggable-tree"
-                    defaultExpandedKeys={expandedKeys}
-                    draggable
-                    blockNode
-                    onDragEnter={onDragEnter}
-                    onDrop={onDrop}
-                    treeData={gData}
-                    onSelect={onSelect}
-                    selectedKeys={sidebarInfo}
-                />
-            </div>
-        </div>
-    );
-};

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

@@ -1,28 +0,0 @@
-.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;
-}

package/src/components/Category/index.tsx

@@ -1,58 +0,0 @@
-import styles from './styles.module.scss';
-import { CategorySidebar, DataNode } from './CategorySidebar';
-import { useEffect, useState } from 'react';
-import { CategoryContent } from './CategoryContent';
-
-interface Category {
-    data: DataNode[];
-    serverReadyData: any;
-    chooseResponse?: boolean;
-    responseTypeOptions?: any;
-    hasHeader?: boolean;
-}
-
-export const Category = (props: Category) => {
-    const {
-        data,
-        chooseResponse,
-        responseTypeOptions,
-        hasHeader
-    } = props;
-
-    const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
-    const [categorySidebarInfo, setCategorySidebarInfo] = useState<any>();
-    const [showContent, setShowContent] = useState<boolean>(false);
-    const [finalData, setFinalData] = useState<any>();
-
-    useEffect(() => {
-        props.serverReadyData(finalData)
-    }, [finalData]);
-
-    useEffect(() => {
-        setShowContent(categorySidebarInfo?.selectKey?.length);
-    }, [categorySidebarInfo]);
-
-    return (
-        <div className={styles.category}>
-            <div className={styles.sidebarWrapper}>
-                <CategorySidebar
-                    categorySidebarInfo={setCategorySidebarInfo}
-                    categoryContentData={categoryContentInfo}
-                    data={data}
-                    categoryContentFinalData={setFinalData}
-                    hasHeader={hasHeader}
-                />
-            </div>
-            <div className={styles.contentWrapper}>
-                <CategoryContent
-                    chooseResponseType={chooseResponse}
-                    responseTypeOptions={responseTypeOptions}
-                    categoryContentInfo={setCategoryContentInfo}
-                    categoryContentShow={showContent}
-                    categorySidebarData={categorySidebarInfo}
-                    hasHeader={hasHeader}
-                />
-            </div>
-        </div>
-    )
-};

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

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