@omniumretail/component-library 1.0.57 → 1.0.59

package/dist/main.css

@@ -206,6 +206,9 @@
 .pwZdBKCECvzAH92fQDTI .ant-table-thead > tr > th:before {
   display: none;
 }
+.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr {
+  cursor: pointer;
+}
 .pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr:last-child > td {
   border-bottom: 1px solid var(--color-grey-light) !important;
 }
@@ -233,6 +236,16 @@
   border: none !important;
   box-shadow: none !important;
 }
+.pwZdBKCECvzAH92fQDTI .ant-pagination {
+  max-width: calc(100% - 200px);
+  margin-left: auto !important;
+}
+.pwZdBKCECvzAH92fQDTI button[type=button].ant-pagination-item-link {
+  margin-top: 0 !important;
+}
+.pwZdBKCECvzAH92fQDTI button[type=button] {
+  margin-top: -50px;
+}
 /*!************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Tag/styles.module.scss ***!
   \************************************************************************************************************************************************************/

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MenuProps } from 'antd';
 export declare const Menu: (props: MenuProps) => JSX.Element;

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

@@ -1 +1 @@
-export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, ...restField }: any) => JSX.Element;
+export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => JSX.Element;

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

@@ -1,4 +1,5 @@
 export interface QuestionsProps {
     showGrade?: boolean;
+    handleChanges: any;
 }
 export declare const Questions: (props: QuestionsProps) => JSX.Element;

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

@@ -24,5 +24,11 @@ export interface TableCustomProps extends TableProps<any> {
     rowKeyValue?: string;
     hiddenColumns?: string[];
     rowSelection?: any;
+    onSelectAllButtonClick?: () => void;
+    AllItemsShowing?: boolean;
+    selectAllStatus?: any;
+    isTableDataRefreshed?: any;
+    tableLoading?: any;
+    tableMaxHeight?: any;
 }
 export declare const Table: (props: TableCustomProps) => JSX.Element;

package/package.json

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

package/src/components/AnalyticsBar/index.tsx

@@ -5,6 +5,7 @@ import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
 import { AnalyticsBarProps, sortBy } from './interfaces/analyticsBar';
 import { useCallback, useEffect, useState } from 'react';
+import { t } from 'i18next';
 
 export const AnalyticsBar = (props: AnalyticsBarProps) => {
     const {
@@ -42,7 +43,6 @@ export const AnalyticsBar = (props: AnalyticsBarProps) => {
         activeListItem(key);
     };
 
-    console.log(sortInfo);
     return (
         <div className={styles.analyticsbar}>
             <div className={styles.header}>
@@ -56,8 +56,8 @@ export const AnalyticsBar = (props: AnalyticsBarProps) => {
 
                 <div className={styles.sorterWrapper} onClick={() => setSorter()}>
                     {sortInfo === sortBy.desc
-                        ? <>Decrescente <SortDescendingOutlined /></>
-                        : <>Crescente <SortAscendingOutlined /></>
+                        ? <>{ t('components.analyticsBar.desc') }<SortDescendingOutlined /></>
+                        : <>{ t('components.analyticsBar.asc') }<SortAscendingOutlined /></>
                     }
                 </div>
             </div>

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

@@ -10,9 +10,9 @@ 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={[
         {

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

@@ -5,8 +5,9 @@ import { InputField } from '../../Input';
 import { Label } from '../../Label';
 import { Questions } from '../../Questions';
 import { Switch } from '../../Switch';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import styles from './styles.module.scss';
+import { t } from 'i18next';
 
 interface categoryContent {
     categoryContentShow: boolean;
@@ -26,6 +27,7 @@ export const CategoryContent = (props: categoryContent) => {
         categorySidebarData
     } = props;
 
+    const [submitForm, setSubmitForm] = useState<boolean>(false);
     const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
     const [switchStatus, setSwitchStatus] = useState<boolean>(false);
     const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
@@ -37,8 +39,21 @@ export const CategoryContent = (props: categoryContent) => {
 
     const switchHandler = (enabled: boolean) => {
         setSwitchStatus(enabled);
+        handleInputChange();
     }
 
+    const handleInputChange = useCallback(() => {
+        // Check if all required fields are filled
+        const allRequiredFieldsFilled = form.getFieldsError().every(fieldError => !fieldError.errors.length);
+    
+        if (allRequiredFieldsFilled) {
+            // Add a small delay before submitting the form
+            setTimeout(() => {
+                form.submit();
+            }, 100);
+        }
+    }, [form]);
+
     useEffect(() => {
         props.categoryContentInfo(contentInfo);
     }, [contentInfo]);
@@ -60,7 +75,7 @@ export const CategoryContent = (props: categoryContent) => {
             {
                 !categoryContentShow
                     ? <div className={styles.uncheckedCategory}>
-                        Please Select a Category on the sidebar
+                        { t('components.categoryContent.message') }
                     </div>
 
                     : <>
@@ -74,26 +89,26 @@ export const CategoryContent = (props: categoryContent) => {
                             <div className={styles.formHeader}>
                                 <div className={styles.category}>
                                     <Label isUppercase>
-                                        Nome Categoria
+                                        { t('components.categoryContent.categoryName') }
                                     </Label>
                                     <Form.Item
                                         name={['categoryName']}
                                         rules={[{ required: true, message: 'Category Name is Missing' }]}
+                                        validateTrigger="onBlur"
                                     >
-                                        <InputField placeholder={'Category Name'} />
+                                        <InputField placeholder={'Category Name'} onBlur={handleInputChange} />
                                     </Form.Item>
                                 </div>
 
                                 {categorySidebarData?.data?.children?.length > 0 &&
                                     <div className={styles.grade}>
                                         <Label isUppercase>
-                                            Ponderação
+                                            { t('components.categoryContent.weighting') }
                                         </Label>
                                         <Form.Item
                                             name={['grade']}
-                                            rules={[{ required: true, message: 'Grade is Missing' }]}
                                         >
-                                            <InputField placeholder={'EX: 15%'} />
+                                            <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
                                         </Form.Item>
                                     </div>
                                 }
@@ -102,14 +117,12 @@ export const CategoryContent = (props: categoryContent) => {
                                     <>
                                         <div className={styles.openAnswer}>
                                             <Label isUppercase>
-                                                Resposta aberta
+                                                { t('components.categoryContent.openAnswer') }
                                             </Label>
                                             <Form.Item
                                                 name={['openAnswer']}
                                             >
-                                                {/* <Switch onChange={(enabled: boolean) => switchHandler(enabled)} defaultChecked={false}checked={false || switchStatus}/> */}
-
-                                                <Switch onChange={(enabled: boolean) => switchHandler(enabled)} checked={switchStatus} />
+                                                <Switch onChange={(enabled: boolean) => {switchHandler(enabled)}} checked={switchStatus} />
                                             </Form.Item>
                                         </div>
 
@@ -118,7 +131,7 @@ export const CategoryContent = (props: categoryContent) => {
                                             <>
                                                 <div className={styles.generalEvaluationLevel}>
                                                     <Label isUppercase>
-                                                        Nivel de avaliação Geral
+                                                        { t('components.categoryContent.answerOption') }
                                                     </Label>
                                                     <Form.Item
                                                         name={['generalEvaluationLevel']}
@@ -136,20 +149,19 @@ export const CategoryContent = (props: categoryContent) => {
                                                                 value: '2',
                                                                 label: '1 a 5 ou “Não Aplicável”',
                                                             },
-                                                        ]}
+                                                        ]} onBlur={handleInputChange}
                                                         />
                                                     </Form.Item>
                                                 </div>
 
                                                 <div className={styles.grade}>
                                                     <Label isUppercase>
-                                                        Ponderação
+                                                        { t('components.categoryContent.weighting') }
                                                     </Label>
                                                     <Form.Item
                                                         name={['grade']}
-                                                        rules={[{ required: true, message: 'Grade is Missing' }]}
                                                     >
-                                                        <InputField placeholder={'EX: 15%'} />
+                                                        <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
                                                     </Form.Item>
                                                 </div>
                                             </>
@@ -161,16 +173,14 @@ export const CategoryContent = (props: categoryContent) => {
                             {!categorySidebarData?.data?.children?.length &&
                                 <div className={styles.questionsWrapper}>
                                     <Label isUppercase>
-                                        Questões
+                                        { t('components.categoryContent.answers') }
                                     </Label>
                                     <Form.Item>
-                                        <Questions showGrade={!switchStatus}></Questions>
+                                        <Questions showGrade={!switchStatus} handleChanges={handleInputChange}></Questions>
                                     </Form.Item>
                                 </div>
                             }
                         </Form>
-
-                        <Button onClick={() => form.submit()}>Submit</Button>
                     </>
             }
         </div>

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

@@ -4,6 +4,7 @@ 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;
@@ -239,13 +240,13 @@ export const CategorySidebar = (props: SidebarProps) => {
         <div className={styles.categorySidebar}>
             <div className={styles.title}>Categorias</div>
             <Button icon={<PlusOutlined />} onClick={addCategory}>
-                Adicionar Categoria
+                { t('components.categorySidBar.addCategory') }
             </Button>
 
             {
                 sidebarInfo &&
                 <Button icon={<MinusOutlined />} onClick={removeCategory}>
-                    Remover Categoria
+                    { t('components.categorySidBar.removeCategory') }
                 </Button>
             }
 

package/src/components/CategoryResponse/index.tsx

@@ -232,6 +232,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                     onFinish={onFinish}
                     autoComplete="off"
                     form={form}
+                    onValuesChange={(_, allValues) => onFinish(allValues)}
                 >
                     <div className={styles.details}>
                         <div className={styles.categoryName}>
@@ -269,12 +270,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                             </div>
                         </div>
                     ))}
-
-                    {selectedCategory?.Data?.Questions.length > 0 && (
-                        <Button onClick={() => form.submit()}>{
-                            t('components.categoryResponse.answer')
-                            }</Button>
-                    )}
                 </Form>
             </div>
         </div>

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

@@ -3,7 +3,7 @@ import { Form, Input, Space } from 'antd';
 import { t } from 'i18next';
 import styles from './styles.module.scss';
 
-export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, ...restField }: any) => {
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => {    
     return (
         <div 
             key={key}
@@ -25,13 +25,12 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                         <Form.Item
                             {...restField}
                             name={[name, 'question']}
-                            rules={[{ required: true, message: t('components.category.errorQuestion') }]}
                         >
-                            <Input placeholder={`${t('components.category.placeholderQuestion')}`} />
+                            <Input placeholder={`${t('components.category.placeholderQuestion')}`} onBlur={handleChanges} />
                         </Form.Item>
                     </div>
                     <div className={styles.actions}>
-                        {/* <div className={styles.edit}>
+                         {/* <div className={styles.edit}>
                             <div className={styles.notEditing} 
                             // onClick={() => handleStartEdit(index)}
                             >
@@ -63,9 +62,8 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                         <Form.Item
                             {...restField}
                             name={[name, 'info']}
-                            rules={[{ required: true, message: t('components.category.errorInfo') }]}
                         >
-                            <Input placeholder={`${t('components.category.placeholderInfo')}`} />
+                            <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges}/>
                         </Form.Item>
                     </div>
                     {showGrade && 
@@ -73,9 +71,8 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                             <Form.Item
                                 {...restField}
                                 name={[name, 'grade']}
-                                rules={[{ required: true, message: t('components.category.errorGrade') }]}
                             >
-                                <Input placeholder={`${t('components.category.placeholderGrade')}`} />
+                                <Input placeholder={`${t('components.category.placeholderGrade')}`} onBlur={handleChanges} />
                             </Form.Item>
                         </div>
                     }

package/src/components/Questions/index.tsx

@@ -9,11 +9,13 @@ import { t } from 'i18next';
 
 export interface QuestionsProps {
     showGrade?: boolean;
+    handleChanges: any;
 }
 
 export const Questions = (props: QuestionsProps) => {
     const {
         showGrade = true,
+        handleChanges,
     } = props;
 
     const formContext = useContext(FieldContext);
@@ -52,6 +54,7 @@ export const Questions = (props: QuestionsProps) => {
                                                                 remove={remove}
                                                                 name={name}
                                                                 showGrade={showGrade}
+                                                                handleChanges={handleChanges}
                                                             />
                                                         </>
                                                     )}

package/src/components/Table/index.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
-import { Space, TableProps, Select, Dropdown } from 'antd';
+import { Space, TableProps, Select, Dropdown, MenuProps } from 'antd';
 import { Table as AntdTable } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import styles from './styles.module.scss';
 import { useTranslation } from 'react-i18next';
 import { MoreOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
+import { Button } from '../Button';
 
 export interface FilterOptions {
     value: string;
@@ -35,6 +36,12 @@ export interface TableCustomProps extends TableProps<any> {
     rowKeyValue?: string;
     hiddenColumns?: string[];
     rowSelection?: any;
+    onSelectAllButtonClick?: () => void;
+    AllItemsShowing?: boolean;
+    selectAllStatus?: any;
+    isTableDataRefreshed?: any;
+    tableLoading?: any;
+    tableMaxHeight?: any;
 }
 
 export const Table = (props: TableCustomProps) => {
@@ -50,12 +57,21 @@ export const Table = (props: TableCustomProps) => {
         rowKeyValue,
         hiddenColumns,
         rowSelection,
+        onSelectAllButtonClick,
+        AllItemsShowing,
+        selectAllStatus,
+        isTableDataRefreshed,
+        tableLoading,
+        tableMaxHeight
     } = props;
 
     const [customFilters, setCustomFilters] = useState<any>([]);
     const [customColumns, setCustomColumns] = useState<ColumnsType<any>>([]);
     const [sortInfo, setSortInfo] = useState<any>([]);
     const [selectedRowKeys, setselectedRowKeys] = useState<any>(rowSelection?.selectedRowKeys || []);
+    const [selectedAllRowKeys, setSelectedAllRowKeys] = useState(false);
+    const [deselectAll, setDeselectAll] = useState(false);
+
 
     const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
         if (rowSelection.type === 'radio') {
@@ -72,6 +88,9 @@ export const Table = (props: TableCustomProps) => {
 
             return [...oldKeys, ...newSelectedRowKeys];
         });
+
+        setSelectedAllRowKeys(false);
+        setDeselectAll(false);
     };
 
     const handleChange: TableProps<any>['onChange'] = (pagination) => {
@@ -93,6 +112,32 @@ export const Table = (props: TableCustomProps) => {
         setSortInfo(sortData)
     };
 
+    const selectAllRows = () => {
+        if (selectedAllRowKeys) {
+            setDeselectAll(true);
+        } else {
+            onSelectAllButtonClick?.(); // Call the onSelectAllButtonClick callback
+        }
+    };
+
+    useEffect(() => {
+        if (isTableDataRefreshed && !tableLoading || AllItemsShowing) {
+            if (selectAllStatus && AllItemsShowing) {
+                const allRowKeys = dataSource?.map((record) => record[rowKeyValue as any]);
+                setselectedRowKeys(allRowKeys);
+                setSelectedAllRowKeys(true);
+            }
+        }
+    }, [isTableDataRefreshed, tableLoading, selectAllStatus, AllItemsShowing]);
+
+    useEffect(() => {
+        if (deselectAll) {
+            setselectedRowKeys([]);
+            setDeselectAll(false);
+            setSelectedAllRowKeys(false);
+        }
+    }, [deselectAll]);
+
     useEffect(() => {
         props.rowSelectionInfo(selectedRowKeys);
     }, [selectedRowKeys]);
@@ -178,6 +223,7 @@ export const Table = (props: TableCustomProps) => {
                     />
                 </Space>
             }
+
             <AntdTable
                 dataSource={dataSource}
                 onChange={handleChange}
@@ -188,13 +234,19 @@ export const Table = (props: TableCustomProps) => {
                         rowSelection: {
                             selectedRowKeys: selectedRowKeys,
                             onChange: onSelectChange,
-                            type: props.rowSelection?.type
-                            // ...rowSelection
+                            type: props.rowSelection?.type,
                         }
                     }
                 ) : null}
                 rowKey={rowKeyValue}
+                {...(tableMaxHeight ? { scroll: { y: tableMaxHeight } } : {})}
             />
+            {
+                selectAllStatus &&
+                <Button onClick={selectAllRows} className={styles.selectAllRows}>
+                    {selectedAllRowKeys ? t('components.table.deselectAll') : t('components.table.selectAll')}
+                </Button>
+            }
         </div>
     );
 };

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

@@ -16,6 +16,8 @@
 
         .ant-table-tbody {
             > tr {
+                cursor: pointer;
+
                 &:last-child {
                     > td {
                         border-bottom: 1px solid var(--color-grey-light) !important;
@@ -40,14 +42,13 @@
         .ant-space {
             align-self: flex-end;
         }
-        
+
         .ant-select-selection-placeholder {
             color: var(--color-black);
         }
-        
+
         .ant-select-selector,
-        .ant-select-focused
-        .ant-select-selection-search {
+        .ant-select-focused .ant-select-selection-search {
             border: none !important;
             box-shadow: none !important;
 
@@ -57,5 +58,18 @@
                 box-shadow: none !important;
             }
         }
+
+        .ant-pagination {
+            max-width: calc(100% - 200px);
+            margin-left: auto !important;
+        }
+
+        button[type="button"].ant-pagination-item-link {
+            margin-top: 0 !important;
+        }
+    }
+
+    button[type="button"] {
+        margin-top: -50px;
     }
 }

package/src/components/Tag/index.tsx

@@ -5,6 +5,7 @@ import { Input, Tag, TagProps } from 'antd';
 import { TweenOneGroup } from 'rc-tween-one';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { t } from 'i18next';
 
 export interface customTagProps extends TagProps {
     customTags?: any,
@@ -86,7 +87,7 @@ export const TagField = (props: customTagProps) => {
             )}
             {!inputVisible && (
                 <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
-                    <SearchOutlined /> Procurar
+                    <SearchOutlined /> { t('components.tag.search') }
                 </Tag>
             )}
             <div style={{ marginTop: 16 }}>

package/src/locales/en.json

@@ -1,39 +1,80 @@
 {
     "tableHeadings": {
-        "key": "key",
-        "name": "name",
-        "mecanographicNumber": "Mecanographic Number",
-        "store": "Store",
-        "role": "Role",
-        "type": "Type",
-        "id": "Id"
+        "key": "Chave",
+        "name": "Nome",
+        "mecanographicNumber": "Número Mecanográfico",
+        "store": "Loja",
+        "role": "Posição",
+        "type": "Tipo",
+        "id": "Id",
+        "action": "Ação"
+    },
+    "userInfoColumn": {
+        "Date": "Data",
+        "Store": "Loja",
+        "Team": "Equipa em Gestão",
+        "Supervisor": "Supervisor",
+        "TypeOfContract": "Tipo de contrato",
+        "Nationality": "Nacionalidade",
+        "CivilStatus": "Estado Civil",
+        "IdentificationDocument": "Doc.Identificação",
+        "NTaxpayer": "Nº Contribuinte",
+        "NIB": "NIB",
+        "SocialSecurity": "Nr Segurança Social",
+        "NChildren": "Nº Filhos",
+        "Workload": "Carga horária",
+        "Description": "Descrição",
+        "Comments": "Comentários"
     },
     "navigation": {
-        "back": "Go Back",
-        "logout": "Log Out",
-        "home": "Home"
+        "back": "Go Back ENG",
+        "logout": "Log Out ENG",
+        "home": "Home ENG"
     },
     "actions": {
-        "one": "one",
-        "two": "two"
+        "one": "one ENG",
+        "two": "two ENG"
     },
     "components": {
         "category": {
-            "addQuestion": "Add Question",
-            "placeholderInfo": "Question Information",
-            "errorInfo": "Missing Question Information",
-            "placeholderQuestion": "Question",
-            "errorQuestion": "Missing Question",
-            "placeholderGrade": "Grade",
-            "errorGrade": "Missing Grade"
+            "addQuestion": "Add Question ENG",
+            "placeholderInfo": "Question Information ENG",
+            "errorInfo": "Missing Question Information ENG",
+            "placeholderQuestion": "Question ENG",
+            "errorQuestion": "Missing Question ENG",
+            "placeholderGrade": "Grade ENG",
+            "errorGrade": "Missing Grade ENG"
+        },
+        "categorySidBar": {
+            "addCategory": "Adicionar Categoria",
+            "removeCategory": "Remover Categoria"
+        },
+        "categoryContent": {
+            "message": "Por favor selecione uma categoria na barra lateral",
+            "categoryName": "Nome Categoria",
+            "weighting": "Ponderação",
+            "openAnswer": "Resposta Aberta",
+            "answerOption": "Opção De Resposta",
+            "answers": "Questões"
         },
         "categoryResponse": {
-            "notApplicable": "Not Applicable",
-            "answer": "Answer"
+            "notApplicable": "Não Aplicável",
+            "answer": "Resposta"
         },
         "categoryReadOnly": {
-            "categories": "Categories",
-            "categoryAverage": "Category Average"
+            "categories": "Categories ENG",
+            "categoryAverage": "Categoy Score ENG"
+        },
+        "analyticsBar": {
+            "desc": "Decrescente",
+            "asc": "Crescente"
+        },
+        "tag": {
+            "search": "Procurar"
+        },
+        "table": {
+            "selectAll": "Select All",
+            "deselectAll": "Deselect All"
         }
     }
 }