@omniumretail/component-library 1.0.58 → 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/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.58",
+  "version": "1.0.59",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

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/locales/en.json

@@ -1,58 +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": "Add Category",
-            "removeCategory": "Remove Category"
+            "addCategory": "Adicionar Categoria",
+            "removeCategory": "Remover Categoria"
         },
         "categoryContent": {
-            "message": "Por favor selecione uma categoria na barra lateral EN",
-            "categoryName": "Nome Categoria EN",
-            "weighting": "Ponderação EN",
-            "openAnswer": "Resposta Aberta EN",
-            "answerOption": "Opção De Resposta EN",
-            "answers": "Questões EN"
+            "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": "Não Aplicável EN",
-            "answer": "Resposta EN"
+            "notApplicable": "Não Aplicável",
+            "answer": "Resposta"
         },
         "categoryReadOnly": {
-            "categories": "Categories",
-            "categoryAverage": "Category Average"
+            "categories": "Categories ENG",
+            "categoryAverage": "Categoy Score ENG"
         },
         "analyticsBar": {
-            "desc": "Decrescente EN",
-            "asc": "Crescente EN"
+            "desc": "Decrescente",
+            "asc": "Crescente"
         },
         "tag": {
-            "search": "Procurar EN"
+            "search": "Procurar"
+        },
+        "table": {
+            "selectAll": "Select All",
+            "deselectAll": "Deselect All"
         }
     }
 }

package/src/locales/es.json

@@ -1,12 +1,30 @@
 {
     "tableHeadings": {
-        "key": "keyES",
-        "name": "nameES",
-        "mecanographicNumber": "Mecanographic NumberES",
-        "store": "StoreES",
-        "role": "RoleES",
-        "type": "TypeES",
-        "id": "IdES"
+        "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 ES",
@@ -27,13 +45,36 @@
             "placeholderGrade": "Grade ES",
             "errorGrade": "Missing Grade ES"
         },
+        "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 ES",
-            "answer": "Answer ES"
+            "notApplicable": "Não Aplicável",
+            "answer": "Resposta"
         },
         "categoryReadOnly": {
             "categories": "Categories ES",
-            "categoryAverage": "Category Average ES"
+            "categoryAverage": "Categoy Score ES"
+        },
+        "analyticsBar": {
+            "desc": "Decrescente",
+            "asc": "Crescente"
+        },
+        "tag": {
+            "search": "Procurar"
+        },
+        "table": {
+            "selectAll": "Select All ES",
+            "deselectAll": "Deselect All ES"
         }
     }
 }

package/src/locales/pt.json

@@ -63,7 +63,7 @@
         },
         "categoryReadOnly": {
             "categories": "Categories PT",
-            "categoryAverage": "Category Average PT"
+            "categoryAverage": "Categoy Score PT"
         },
         "analyticsBar": {
             "desc": "Decrescente",
@@ -71,6 +71,10 @@
         },
         "tag": {
             "search": "Procurar"
+        },
+        "table": {
+            "selectAll": "Select All PT",
+            "deselectAll": "Deselect All PT"
         }
     }
 }