@omniumretail/component-library 1.1.56 → 1.1.57

package/dist/types/components/Category/CategoryContent/index.d.ts

@@ -4,6 +4,7 @@ interface categoryContent {
     categorySidebarData: any;
     chooseResponseType?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 export declare const CategoryContent: (props: categoryContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Category/CategorySidebar/index.d.ts

@@ -21,6 +21,7 @@ interface SidebarProps {
     categorySidebarInfo: any;
     categoryContentFinalData: any;
     data: DataNode[];
+    hasHeader?: boolean;
 }
 export declare const CategorySidebar: (props: SidebarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Category/index.d.ts

@@ -4,6 +4,7 @@ interface Category {
     serverReadyData: any;
     chooseResponse?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 export declare const Category: (props: Category) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Questions/SingleQuestion/index.d.ts

@@ -1 +1 @@
-export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, ...restField }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Questions/index.d.ts

@@ -3,5 +3,6 @@ export interface QuestionsProps {
     showCheckbox?: boolean;
     handleChanges: any;
     responseTypeOptions: any;
+    hasHeader?: boolean;
 }
 export declare const Questions: (props: QuestionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ResponsiveTable/index.d.ts

@@ -42,6 +42,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
         width: string;
     }[];
     buttonActionName?: string;
+    buttonActionLabel?: (record: any) => string;
     buttonActionMethod?: () => void;
     buttonActionStyle?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.56",
+  "version": "1.1.57",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

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

@@ -14,95 +14,7 @@ const Template: Story<any> = (args) => {
         console.log(serverData);
     }, [serverData])
 
-    return <Category {...args} chooseResponse serverReadyData={setServerData} data={[
-        {
-            "title": "2 (Q: 0) (G: 2)",
-            "key": "0",
-            "data": {
-                "categoryName": "2",
-                "openAnswer": false,
-                "isYesOrNo": true,
-                "generalEvaluationLevel": "0",
-                "grade": "2",
-                "questions": [
-                    {
-                        "emphasis": true,
-                        "info": "lol",
-                        "mandatory": false,
-                        "question": ""
-                    }
-                ]
-            },
-            "children": []
-        },
-        {
-            "title": "1 (Q: 0) (G: 1)",
-            "key": "1",
-            "data": {
-                "categoryName": "1",
-                "openAnswer": false,
-                "isYesOrNo": false,
-                "generalEvaluationLevel": "0",
-                "grade": "1",
-                "questions": []
-            },
-            "children": [
-                {
-                    "title": "1.1 (Q: 0) (G: 1.1)",
-                    "key": "1.0",
-                    "data": {
-                        "categoryName": "1.1",
-                        "openAnswer": false,
-                        "isYesOrNo": false,
-                        "generalEvaluationLevel": "0",
-                        "grade": "1.1",
-                        "questions": []
-                    },
-                    "children": [
-                        {
-                            "title": "1.1.1 (Q: 0) (G: 1.1.1)",
-                            "key": "1.0.0",
-                            "data": {
-                                "categoryName": "1.1.1",
-                                "openAnswer": false,
-                                "isYesOrNo": false,
-                                "generalEvaluationLevel": "0",
-                                "grade": "1.1.1",
-                                "questions": []
-                            },
-                            "children": []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "title": "3 (Q: 0) (G: 3)",
-            "key": "2",
-            "data": {
-                "categoryName": "3",
-                "openAnswer": true,
-                "isYesOrNo": false,
-                "generalEvaluationLevel": "0",
-                "grade": "3",
-                "questions": []
-            },
-            "children": []
-        }
-    ]} responseTypeOptions={[
-        {
-            "value": "B867BEA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "teste3Update",
-        },
-        {
-            "value": "B8267BEA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "test2eUpdate",
-        },
-        {
-            "value": "B867B4EA8-E0A4-44D2-BBDA-7CB89334D80E",
-            "label": "testeU4pdate",
-        }
-    ]}></Category>
+    return <Category {...args} chooseResponse serverReadyData={setServerData} hasHeader data={[]}></Category>
 };
 
 export const Primary = Template.bind({});

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

@@ -15,6 +15,7 @@ interface categoryContent {
     categorySidebarData: any;
     chooseResponseType?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 
 const defaultInitialValues = {
@@ -30,7 +31,8 @@ export const CategoryContent = (props: categoryContent) => {
         categoryContentShow,
         categorySidebarData,
         chooseResponseType,
-        responseTypeOptions
+        responseTypeOptions,
+        hasHeader
     } = props;
 
     const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
@@ -79,6 +81,8 @@ export const CategoryContent = (props: categoryContent) => {
         setSwitchYesOrNoAnswStatus(initialValues?.isYesOrNo || false);
     }, [form, initialValues]);
 
+    console.log();
+
     return (
         <div className={styles.categoryContent}>
             <div className={styles.title}>{t('components.categoryContent.editCategory')}</div>
@@ -107,7 +111,11 @@ export const CategoryContent = (props: categoryContent) => {
                                         rules={[{ required: true, message: t('components.categoryContent.categoryNameError')! }]}
                                         validateTrigger="onBlur"
                                     >
-                                        <InputField placeholder={t('components.categoryContent.categoryName')!} onBlur={handleInputChange} />
+                                        <InputField
+                                            disabled={categorySidebarData?.data?.key === "0" && hasHeader}
+                                            placeholder={t('components.categoryContent.categoryName')!}
+                                            onBlur={handleInputChange}
+                                        />
                                     </Form.Item>
                                 </div>
 
@@ -214,6 +222,7 @@ export const CategoryContent = (props: categoryContent) => {
                                             showCheckbox={chooseResponseType && true}
                                             handleChanges={handleInputChange}
                                             responseTypeOptions={responseTypeOptions}
+                                            hasHeader={categorySidebarData?.data?.key === "0" && hasHeader}
                                         />
                                     </Form.Item>
                                 </div>

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

@@ -30,6 +30,7 @@ interface SidebarProps {
     categorySidebarInfo: any;
     categoryContentFinalData: any;
     data: DataNode[];
+    hasHeader?: boolean;
 }
 
 function get_element_by_index(data: DataNode[], index: string | number): DataNode | null {
@@ -81,10 +82,30 @@ export const CategorySidebar = (props: SidebarProps) => {
     const {
         categoryContentData,
         categoryContentFinalData,
-        data
+        data,
+        hasHeader
     } = props;
 
-    const [gData, setGData] = useState(data);
+    const [gData, setGData] = useState<DataNode[]>(() => {
+        // Adiciona a categoria "Header" se hasHeader for true
+        if (hasHeader && data?.length === 0) {
+            const headerCategory: DataNode = {
+                title: 'Header',
+                key: '0',
+                data: {
+                    categoryName: 'Header',
+                    generalEvaluationLevel: '',
+                    grade: '',
+                    openAnswer: false,
+                    questions: []
+                },
+                children: []
+            };
+            return [headerCategory, ...data];
+        }
+        return data;
+    });
+
     const [expandedKeys] = useState([]);
     const [sidebarInfo, setSidebarInfo] = useState<any>(undefined);
 
@@ -100,6 +121,10 @@ export const CategorySidebar = (props: SidebarProps) => {
         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;
@@ -166,17 +191,24 @@ export const CategorySidebar = (props: SidebarProps) => {
             }
         }
 
-        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 = [];
+        function generateCategoryKeys(categories: DataNode[], parentKey: string = ''): DataNode[] {
+            let keyCounter = parentKey === '' ? 1 : parseInt(parentKey, 10) + 1; // Inicia o contador de chaves
+        
+            return categories.map((category: DataNode) => {
+                if (hasHeader && (category.key === '0')) {
+                    return category; // Mantém a chave do Header fixa
+                }
+        
+                const categoryKey = `${keyCounter++}`; // Incrementa o contador para cada categoria
+        
+                let children: DataNode[] = [];
                 if (category.children) {
-                    children = generateCategoryKeys(category.children, categoryKey);
+                    children = generateCategoryKeys(category.children, categoryKey); // Gera chaves para os filhos recursivamente
                 }
-                return { ...category, key: categoryKey, children };
+        
+                return { ...category, key: categoryKey, children }; // Atualiza a chave e os filhos
             });
-        }
+        }        
 
         setGData(generateCategoryKeys(data));
     };
@@ -240,15 +272,15 @@ export const CategorySidebar = (props: SidebarProps) => {
         <div className={styles.categorySidebar}>
             <div className={styles.title}>Categorias</div>
             <Button icon={<PlusOutlined />} onClick={addCategory}>
-                { t('components.categorySidBar.addCategory') }
+                {t('components.categorySidBar.addCategory')}
             </Button>
 
             {
-                sidebarInfo &&
+                sidebarInfo && (hasHeader ? sidebarInfo[0] !== '0' : true) && (
                 <Button icon={<MinusOutlined />} onClick={removeCategory}>
-                    { t('components.categorySidBar.removeCategory') }
+                    {t('components.categorySidBar.removeCategory')}
                 </Button>
-            }
+            )}
 
 
             <div className={styles.categoryViewer}>

package/src/components/Category/index.tsx

@@ -8,13 +8,15 @@ interface Category {
     serverReadyData: any;
     chooseResponse?: boolean;
     responseTypeOptions?: any;
+    hasHeader?: boolean;
 }
 
 export const Category = (props: Category) => {
     const {
         data,
         chooseResponse,
-        responseTypeOptions
+        responseTypeOptions,
+        hasHeader
     } = props;
 
     const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
@@ -38,6 +40,7 @@ export const Category = (props: Category) => {
                     categoryContentData={categoryContentInfo}
                     data={data}
                     categoryContentFinalData={setFinalData}
+                    hasHeader={hasHeader}
                 />
             </div>
             <div className={styles.contentWrapper}>
@@ -47,6 +50,7 @@ export const Category = (props: Category) => {
                     categoryContentInfo={setCategoryContentInfo}
                     categoryContentShow={showContent}
                     categorySidebarData={categorySidebarInfo}
+                    hasHeader={hasHeader}
                 />
             </div>
         </div>

package/src/components/Questions/SingleQuestion/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { useState } from 'react';
 import { Select } from 'antd';
 
-export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => {
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, ...restField }: any) => {
     const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
     const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
 
@@ -88,29 +88,34 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                     <div className={styles.questionFooter}>
                         <div />
 
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'mandatory']}
-                                valuePropName='checked'
-                            >
-                                <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
-                            </Form.Item>
-
-                            <span>{t('components.category.mandatoryAnswer')}</span>
-                        </div>
-
-                        <div className={styles.checkboxContainer}>
-                            <Form.Item
-                                {...restField}
-                                name={[name, 'emphasis']}
-                                valuePropName='checked'
-                            >
-                                <Checkbox onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)} checked={emphasisCheckbox} />
-                            </Form.Item>
-
-                            <span>{t('components.category.emphasisAnswer')}</span>
-                        </div>
+                        {!hasHeader &&
+                            <>
+
+                                <div className={styles.checkboxContainer}>
+                                    <Form.Item
+                                        {...restField}
+                                        name={[name, 'mandatory']}
+                                        valuePropName='checked'
+                                    >
+                                        <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
+                                    </Form.Item>
+
+                                    <span>{t('components.category.mandatoryAnswer')}</span>
+                                </div>
+
+                                <div className={styles.checkboxContainer}>
+                                    <Form.Item
+                                        {...restField}
+                                        name={[name, 'emphasis']}
+                                        valuePropName='checked'
+                                    >
+                                        <Checkbox onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)} checked={emphasisCheckbox} />
+                                    </Form.Item>
+
+                                    <span>{t('components.category.emphasisAnswer')}</span>
+                                </div>
+                            </>
+                        }
 
                         <div className={styles.checkboxContainer}>
                             <Form.Item

package/src/components/Questions/index.tsx

@@ -12,6 +12,7 @@ export interface QuestionsProps {
     showCheckbox?: boolean;
     handleChanges: any;
     responseTypeOptions: any;
+    hasHeader?: boolean;
 }
 
 export const Questions = (props: QuestionsProps) => {
@@ -19,7 +20,8 @@ export const Questions = (props: QuestionsProps) => {
         showGrade = true,
         showCheckbox,
         handleChanges,
-        responseTypeOptions
+        responseTypeOptions,
+        hasHeader
     } = props;
 
     const formContext = useContext(FieldContext);
@@ -60,7 +62,8 @@ export const Questions = (props: QuestionsProps) => {
                                                                 showGrade={showGrade}
                                                                 showCheckbox={showCheckbox}
                                                                 handleChanges={handleChanges}
-                                                                responseTypeOptions={responseTypeOptions}                                                          
+                                                                responseTypeOptions={responseTypeOptions}
+                                                                hasHeader={hasHeader}                                                   
                                                             />
                                                         </>
                                                     )}

package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx

@@ -20,6 +20,10 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
     // For example, trigger an API call
   };
 
+  const getButtonLabel = (record: any) => {
+    return (record as any)?.type === "Efetivo" ? "Pog" : "Nao";
+};
+
   return <ResponsiveTable
     scroll={{ x: 4000 }}
     columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
@@ -34,7 +38,7 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
         key: '3', label: 'label 3'
       }
     ]}
-    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionName="POG" {...args}>
+    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionMethod={() => handleSortByColumnChange} buttonActionLabel={getButtonLabel} {...args}>
   </ResponsiveTable>;
 };
 
@@ -57,7 +61,7 @@ Primary.args = {
       mecanographicNumber: "32",
       store: `Levi's Sta Catarina`,
       role: `Comercial`,
-      type: `Efetivo`
+      type: `NEfetivo`
     },
     {
       id: `3`,
@@ -65,7 +69,7 @@ Primary.args = {
       mecanographicNumber: "3212",
       store: `Levi's Sta Catarina`,
       role: `Funcionário`,
-      type: `Efetivo`
+      type: `NEfetivo`
     },
     {
       id: `4`,

package/src/components/ResponsiveTable/index.tsx

@@ -48,6 +48,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     fixedColumns?: { dataIndex: string; side: 'left' | 'right' }[];
     customColumnWidths?: { columnName: string; width: string }[];
     buttonActionName?: string;
+    buttonActionLabel?: (record: any) => string;
     buttonActionMethod?: () => void;
     buttonActionStyle?: string;
 }
@@ -77,7 +78,8 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
         customColumnWidths,
         buttonActionName,
         buttonActionMethod,
-        buttonActionStyle
+        buttonActionStyle,
+        buttonActionLabel
     } = props;
 
     const [customFilters, setCustomFilters] = useState<any>([]);
@@ -201,12 +203,14 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
                 dataIndex: 'action',
                 ellipsis: false,
                 align: 'right',
-                render: () => {
-                    if (!items?.[0]) return null;
+                render: (_: any, record: any) => {
+                    if (!items?.[0]) return null;  
+                    const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
+
                     return (
                         <Space size="middle">
-                            {buttonActionName &&
-                                <Button customClass={buttonActionStyle} onClick={() => buttonActionMethod?.()}>{buttonActionName}</Button>
+                            {(buttonActionName || buttonActionLabel) &&
+                                <Button customClass={buttonActionStyle} onClick={() => buttonActionMethod?.()}>{buttonActionName || buttonLabel}</Button>
                             }
 
                             <Dropdown menu={{ items }}>