@omniumretail/component-library 1.1.7 → 1.1.9

package/dist/types/components/ExportTableData/ExportTableData.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ExportButton: Story<any>;

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

@@ -0,0 +1,9 @@
+interface TableExportButtonProps {
+    data: Record<string, any>[];
+    fileName: string;
+    buttonText: string;
+    customClass?: string;
+    columnTranslations: Record<string, string>;
+}
+export declare const TableExportButton: (props: TableExportButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -23,3 +23,4 @@ export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
+export * from './ExportTableData';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.07",
+  "version": "1.1.09",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -63,7 +63,8 @@
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.9.3",
     "url-loader": "^4.1.1",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "prepublish": "rm -rf ./dist && npm run build",

package/src/components/ExportTableData/ExportTableData.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { TableExportButton } from './index';
+
+export default {
+  title: 'TableExportButton',
+  component: TableExportButton,
+} as Meta;
+
+const columnTranslations = {
+  id: 'ID',
+  name: 'Nome',
+  age: 'Idade',
+  occupation: 'Ocupação'
+};
+
+const Template: Story<any> = (args) => <TableExportButton {...args} />;
+
+export const ExportButton = Template.bind({});
+ExportButton.args = {
+  data: [
+    {
+      id: 1,
+      name: 'John Doe',
+      age: 30,
+      occupation: 'Software Developer'
+    },
+    {
+      id: 2,
+      name: 'Jane Smith',
+      age: 28,
+      occupation: 'Data Scientist'
+    },
+    {
+      id: 3,
+      name: 'Michael Johnson',
+      age: 35,
+      occupation: 'Project Manager'
+    },
+  ],
+  fileName: 'table_data',
+  buttonText: 'exportar',
+  columnTranslations: columnTranslations
+};

package/src/components/ExportTableData/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import * as XLSX from 'xlsx';
+import { Button } from '../Button';
+
+interface TableExportButtonProps {
+    data: Record<string, any>[];
+    fileName: string;
+    buttonText: string;
+    customClass?: string;
+    columnTranslations: Record<string, string>;
+}
+
+export const TableExportButton = (props: TableExportButtonProps) => {
+    const exportToXLS = () => {
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.json_to_sheet(props.data);
+
+        // Aplicar estilos às células do cabeçalho
+        const headerKeys = Object.keys(props.columnTranslations);
+        headerKeys.forEach((key, index) => {
+            const cellAddress = XLSX.utils.encode_cell({ c: index, r: 0 });
+            ws[cellAddress].v = props.columnTranslations[key]; // Substituir o valor pela tradução
+        });
+
+        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+        XLSX.writeFile(wb, `${props.fileName}.xlsx`);
+    };
+
+    return (
+        <Button onClick={exportToXLS} className={props.customClass}>
+            {props.buttonText}
+        </Button>
+    );
+};

package/src/components/Table/Table.stories.tsx

@@ -23,7 +23,7 @@ const Template: Story<TableCustomProps> = (args) => {
     return <Table scroll={{y: 1000, x: 3000}}   fixedColumns={[
       { dataIndex: 'name', side: 'left' },
       { dataIndex: 'mecanographicNumber', side: 'left' },
-    ]} customColumnWidths={[{columnName: 'name', width: "100px"}]} columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
+    ]} customColumnWidths={[{columnName: 'name', width: "2%"}]} columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
         [
             { key: '1', label: `${t('actions.one')}`, onClick: () => {
                 console.log('onClick');

package/src/components/index.tsx

@@ -23,3 +23,4 @@ export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
+export * from './ExportTableData'

package/src/locales/en.json

@@ -1,35 +1,35 @@
 {
     "tableHeadings": {
-        "key": "Chave",
-        "name": "Nome",
-        "mecanographicNumber": "Número Mecanográfico",
-        "store": "Loja",
-        "role": "Posição",
-        "type": "Tipo",
+        "key": "Key",
+        "name": "Name",
+        "mecanographicNumber": "Employee Code",
+        "store": "Store",
+        "role": "Role",
+        "type": "Type",
         "id": "Id",
-        "action": "Ação"
+        "action": "Action"
     },
     "userInfoColumn": {
-        "Date": "Data",
-        "Store": "Loja",
-        "Team": "Equipa em Gestão",
+        "Date": "Date",
+        "Store": "Store",
+        "Team": "Team",
         "Supervisor": "Supervisor",
-        "TypeOfContract": "Tipo de contrato",
-        "Nationality": "Nacionalidade",
-        "CivilStatus": "Estado Civil",
-        "IdentificationDocument": "Doc.Identificação",
-        "NTaxpayer": "Nº Contribuinte",
+        "TypeOfContract": "Type Of Contract",
+        "Nationality": "Nationality",
+        "CivilStatus": "Civil Status",
+        "IdentificationDocument": "Identification Document",
+        "NTaxpayer": "Taxpayer Number",
         "NIB": "NIB",
-        "SocialSecurity": "Nr Segurança Social",
-        "NChildren": "Nº Filhos",
-        "Workload": "Carga horária",
-        "Description": "Descrição",
-        "Comments": "Comentários"
+        "SocialSecurity": "Social Security",
+        "NChildren": "Number of Children",
+        "Workload": "Workload",
+        "Description": "Description",
+        "Comments": "Comments"
     },
     "navigation": {
-        "back": "Voltar Atrás ENG",
-        "logout": "Terminar Sessão ENG",
-        "home": "Início ENG"
+        "back": "Back",
+        "logout": "Logout",
+        "home": "Home"
     },
     "actions": {
         "one": "one",
@@ -37,52 +37,52 @@
     },
     "components": {
         "category": {
-            "addQuestion": "Adicionar questão",
-            "placeholderInfo": "Informação da questão",
-            "errorInfo": "Informação da questão em falta",
-            "placeholderQuestion": "Questão",
-            "errorQuestion": "Questão em falta",
-            "placeholderGrade": "Ponderação",
-            "errorGrade": "Ponderação em falta",
-            "newCategory": "Nova categoria"
+            "addQuestion": "Add Question",
+            "placeholderInfo": "Placeholder Info",
+            "errorInfo": "Error Info",
+            "placeholderQuestion": "Question",
+            "errorQuestion": "Error/Missing Question",
+            "placeholderGrade": "Grade",
+            "errorGrade": "Error/Missing Grade",
+            "newCategory": "New Category"
         },
         "categorySidBar": {
-            "addCategory": "Adicionar categoria",
-            "removeCategory": "Remover categoria"
+            "addCategory": "Add Category",
+            "removeCategory": "Remove Category"
         },
         "categoryContent": {
-            "message": "Por favor selecione uma categoria na barra lateral",
-            "categoryName": "Nome da categoria",
-            "categoryNameError": "Nome categoria em falta",
-            "weighting": "Ponderação",
-            "openAnswer": "Resposta aberta",
-            "answerOption": "Opção de resposta",
-            "answers": "Questões"
+            "message": "Please select a category in the sidebar",
+            "categoryName": "Category Name",
+            "categoryNameError": "Category Name Error/Missing",
+            "weighting": "Weighting",
+            "openAnswer": "Open Answer",
+            "answerOption": "Answer Option",
+            "answers": "Answers"
         },
         "categoryResponse": {
-            "notApplicable": "Não Aplicável",
-            "answer": "Resposta"
+            "notApplicable": "Not Applicable",
+            "answer": "Answer"
         },
         "categoryReadOnly": {
-            "categories": "Categorias",
-            "categoryAverage": "Ponderação da categoria",
-            "userResponse": "Resposta Utilizador:",
-            "supervisorResponse": "Resposta Supervisor:"
+            "categories": "Categories",
+            "categoryAverage": "Category Average",
+            "userResponse": "User Response:",
+            "supervisorResponse": "Supervisor Response:"
         },
         "analyticsBar": {
-            "desc": "Decrescente",
-            "asc": "Crescente"
+            "desc": "Descending",
+            "asc": "Ascending"
         },
         "tag": {
-            "search": "Procurar",
-            "advancedFields": "Filtros avançados"
+            "search": "Search",
+            "advancedFields": "Advanced Filters"
         },
         "table": {
-            "selectAll": "Selecionar todos",
-            "deselectAll": "Desselecionar Todos"
+            "selectAll": "Select All",
+            "deselectAll": "Deselect All"
         },
         "datePickerTag": {
-            "placeholder": "Selecionar Data"
+            "placeholder": "Select Date"
         }
     }
 }