techsbcn-storybook 0.11.2 → 0.12.0

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ObjectKey } from '../../../interfaces';
+import './SimpleTableComponent.scss';
+interface SimpleTableComponentProps {
+    rows: any[];
+    values: ObjectKey;
+    className?: string;
+    columns: ColumnProps[];
+    rowsColorColumn?: {
+        columnName: string;
+        columnValue: string;
+    };
+    loading?: boolean;
+    onClickRow?: (id: number) => void;
+    isCheckTable?: {
+        rowsChecked?: number[];
+        onCheckedAction?: (ids: number[]) => void;
+        onCheckedSingleAction?: (id: number) => void;
+    };
+}
+interface ColumnProps {
+    id?: string;
+    label?: string;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    action?: ActionProps[];
+    isUnique?: boolean;
+    isDate?: boolean;
+    enumColumn?: {
+        isEnum?: boolean;
+        enumType?: any;
+        hasColor?: boolean;
+    };
+    isCheck?: boolean;
+    isPrice?: boolean;
+    isImage?: {
+        isUrl?: boolean;
+        isGuid?: {
+            guid: boolean;
+            action: (guid: string) => string;
+        };
+    };
+    isActiveFunction?: {
+        activeIcon: any;
+        disabledIcon: any;
+        onClickId: (id: number) => void;
+    };
+}
+interface ActionProps {
+    children: React.ReactNode;
+    onClick?: (row: any) => void;
+    onClickId?: (id: number) => void;
+}
+export declare const SimpleTableComponent: React.FunctionComponent<SimpleTableComponentProps>;
+export {};

package/dist/stories/Tables/Tables.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
-export declare const TableSimple: Story;
+export declare const Table: Story;
+export declare const SimpleTable: Story;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.11.2",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss

@@ -0,0 +1,131 @@
+.table-simple-component{
+    .paper-container{
+        box-shadow: none;
+        background-color: transparent!important;
+        .checkbox-cell{
+            .MuiCheckbox-root{
+                padding:0 !important;
+                &:hover{
+                    background-color:transparent !important;
+                }
+            }
+            .Mui-checked {
+                color: rgba(0,0,0,0.54) !important;
+            }
+            .MuiCheckbox-indeterminate {
+                color: #212529 !important;
+            }
+        }
+        .table-container{
+            max-height: 68vh;
+            border-bottom: 1px solid black;
+            .table-column:first-child{ 
+                border-radius: 5px 0 0 5px;
+            }
+            .table-column:last-child{ 
+                border-right: none!important;
+                border-radius: 0 5px 5px 0;
+            }
+            .table-column{
+                font-weight: bold;
+                font-size: 1rem !important;
+                padding: 10px !important;
+                border-top: 1px solid rgba(224, 224, 224, 1);
+                border-right: 1px solid rgba(224, 224, 224, 1);
+                border-bottom: 2px solid rgba(224, 224, 224, 1);
+                .table-header-cell{
+                    color: black;
+                    padding: 0px 10px 0px 10px !important;
+                }
+            }
+            .table-rows{
+                &.row-click{
+                    cursor: pointer;
+                    &:hover{
+                        background-color:rgba(0, 0, 0, 0.04);
+                    }
+                }
+                .Mui-selected {
+                    background-color: transparent !important; 
+                }
+                .MuiTableCell-root {
+                    padding: 6px !important;
+                    overflow: hidden;
+                }
+                .img-table{
+                    width: 100%;
+                    height: 110px;
+                    img{
+                        object-fit: contain;
+                    }
+                }
+                .actions{
+                    float: right;
+                }
+                .btn-action {
+                    color:rgba(0,0,0,0.54);
+                    display: inline-block;
+                    text-decoration: none;
+                    font-size: 1.6em !important;
+                    padding: 0px 7px;
+                    cursor: pointer;
+                }
+            }
+        }  
+        
+        .MuiTable-root.loading {
+            opacity: 0.5;
+            .MuiCircularProgress-root{
+                width: 80px !important;
+                height: 80px !important;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 5px;
+                margin: auto;
+                color:grey;
+            }
+        }
+        
+    }
+    @media (max-width: 992px ) {
+        .paper-container{
+            .table-container{
+                max-height: 60vh;
+                border-top: 1px solid #cccccc;
+                .MuiTable-root{
+                    border-collapse: collapse!important;
+                }
+                .MuiTableHead-root{
+                    display:none!important;
+                }
+                .table-rows{
+                    border-bottom: 2px solid #cccccc;
+                    .MuiTableCell-root {
+                        width:100%;
+                        border-bottom: none!important;
+                        .label-cell{
+                            font-size: 1rem;
+                            vertical-align: top;
+                            width: 50%;
+                            height: auto;
+                        }
+                        .label-cell + div{
+                            display: inline-block;
+                        }
+                    }
+                    .table-cell{
+                        display: inline-block!important;
+                    }
+                    .format-value{
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        width: 50%;
+                        max-width: 300px;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx

@@ -0,0 +1,368 @@
+import React from 'react';
+import {
+  Table,
+  TableCell,
+  Paper,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableBody,
+  Checkbox,
+  CircularProgress,
+  Box,
+  Hidden,
+  Avatar,
+} from '@mui/material/';
+import { ObjectKey } from '../../../interfaces';
+import './SimpleTableComponent.scss';
+
+interface SimpleTableComponentProps {
+  rows: any[];
+  values: ObjectKey;
+  className?: string;
+  columns: ColumnProps[];
+  rowsColorColumn?: { columnName: string; columnValue: string };
+  loading?: boolean;
+  onClickRow?: (id: number) => void;
+  isCheckTable?: {
+    rowsChecked?: number[];
+    onCheckedAction?: (ids: number[]) => void;
+    onCheckedSingleAction?: (id: number) => void;
+  };
+}
+
+interface ColumnProps {
+  id?: string;
+  label?: string;
+  minWidth?: number;
+  maxWidth?: number;
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  action?: ActionProps[];
+  isUnique?: boolean;
+  isDate?: boolean;
+  enumColumn?: {
+    isEnum?: boolean;
+    enumType?: any;
+    hasColor?: boolean;
+  };
+  isCheck?: boolean;
+  isPrice?: boolean;
+  isImage?: {
+    isUrl?: boolean;
+    isGuid?: {
+      guid: boolean;
+      action: (guid: string) => string;
+    };
+  };
+  isActiveFunction?: {
+    activeIcon: any;
+    disabledIcon: any;
+    onClickId: (id: number) => void;
+  };
+}
+interface ActionProps {
+  children: React.ReactNode;
+  onClick?: (row: any) => void;
+  onClickId?: (id: number) => void;
+}
+export const SimpleTableComponent: React.FunctionComponent<SimpleTableComponentProps> = (props) => {
+  const isSelected = (id: number) => JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).indexOf(id) !== -1;
+
+  const handleRowClick = (id: number) => {
+    if (props.onClickRow) props.onClickRow(id);
+  };
+
+  const onCheckAction = (event: React.ChangeEvent<HTMLInputElement>, id: number) => {
+    const checks = JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked || []));
+    const index = checks.indexOf(id);
+    if (event.target.checked) checks.push(id);
+    else checks.splice(index, 1);
+    props.isCheckTable?.onCheckedAction && props.isCheckTable?.onCheckedAction(checks);
+  };
+
+  const onCheckSingleAction = (event: React.ChangeEvent<HTMLInputElement>, id: number) => {
+    let checks = JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked || []));
+    const index = checks.indexOf(id);
+
+    if (event.target.checked) {
+      checks.push(id);
+      if (checks.length > 1) {
+        checks = checks.splice(-1);
+      }
+    } else checks.splice(index, 1);
+    props.isCheckTable?.onCheckedSingleAction && props.isCheckTable?.onCheckedSingleAction(checks[0]);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    let newSelecteds: any = [];
+    if (event.target.checked) {
+      newSelecteds = props.rows.map((n) => n.id);
+    }
+    props.isCheckTable?.onCheckedAction && props.isCheckTable?.onCheckedAction(newSelecteds);
+  };
+
+  const formatValue = (value: string, column: ColumnProps) => {
+    if (column.enumColumn?.isEnum) {
+      if (column.enumColumn?.enumType) {
+        const result: string[] = [];
+        if (value === null) {
+          return value;
+        } else if (value.split(',').length > 1) {
+          value.split(',').forEach((v) => {
+            result.push(props.values[column.enumColumn?.enumType[v.replace(/ /g, '')].toUpperCase()]);
+          });
+          return result.join();
+        } else if (Array.isArray(value)) {
+          const split: string[] = value.toString().split(',');
+          split.forEach((v) => {
+            if (!isNaN(parseInt(v)))
+              result.push(props.values[column.enumColumn?.enumType[v.replace(/ /g, '')].toUpperCase()]);
+            else result.push(props.values[v.toUpperCase()]);
+          });
+          return result.join();
+        } else return props.values[column.enumColumn?.enumType[value].toUpperCase()];
+      } else return props.values[value.toUpperCase()];
+    }
+    if (column.isDate && value) return new Date(value).toLocaleDateString('es-ES');
+
+    if (column.isPrice) {
+      if (value !== null) return `${value.toLocaleString()} ${props.values.SYMBOL_EURO}`;
+    }
+
+    if (column.isImage) {
+      if (column.isImage.isUrl) {
+        return <Avatar alt="-" src={value} className="img-table" variant="square" />;
+      }
+    }
+    if (Array.isArray(value)) {
+      return value.join(', ');
+    }
+    return value;
+  };
+
+  const ObjectbyString = (o: any, s: string) => {
+    s = s.replace(/\[(\w+)\]/g, '.$1');
+    const a = s.split('.');
+    for (let i = 0, n = a.length; i < n; ++i) {
+      const k = a[i];
+      try {
+        if (k in o) {
+          o = o[k];
+        } else {
+          return undefined;
+        }
+      } catch (_error) {
+        return undefined;
+      }
+    }
+    return o;
+  };
+
+  return (
+    <Box className="table-simple-component">
+      <Paper className="paper-container">
+        {props.isCheckTable && (
+          <Hidden mdUp>
+            <Box display="block" className="checkbox-cell">
+              <Checkbox
+                indeterminate={
+                  props.rows &&
+                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 &&
+                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length
+                }
+                checked={
+                  props.rows &&
+                  props.rows.length > 0 &&
+                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length === props.rows.length
+                }
+                onChange={handleSelectAllClick}
+              />
+            </Box>
+          </Hidden>
+        )}
+        <TableContainer className="table-container">
+          <Table
+            stickyHeader={true}
+            aria-label="sticky table"
+            className={props.loading ? 'loading' : props.className ? props.className : ''}
+          >
+            <Hidden smDown>
+              <TableHead>
+                <TableRow>
+                  {props.columns.map((column) => {
+                    if (column.id) {
+                      return (
+                        <TableCell
+                          className="table-column"
+                          key={column.isUnique ? `${column.id}-unique` : column.id}
+                          align={column.align ? column.align : 'center'}
+                          style={{ minWidth: column.minWidth, maxWidth: column.maxWidth }}
+                        >
+                          {column.isCheck ? (
+                            <Box className="checkbox-cell">
+                              <Checkbox
+                                indeterminate={
+                                  props.rows &&
+                                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length > 0 &&
+                                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length < props.rows.length
+                                }
+                                checked={
+                                  props.rows &&
+                                  props.rows.length > 0 &&
+                                  JSON.parse(JSON.stringify(props.isCheckTable?.rowsChecked)).length ===
+                                    props.rows.length
+                                }
+                                onChange={handleSelectAllClick}
+                              />
+                            </Box>
+                          ) : (
+                            <Box className="table-header-cell">{column.label}</Box>
+                          )}
+                        </TableCell>
+                      );
+                    } else return null;
+                  })}
+                </TableRow>
+              </TableHead>
+            </Hidden>
+            <TableBody>
+              {props.loading && (
+                <TableRow className="table-rows">
+                  <TableCell
+                    colSpan={props.columns.length}
+                    sx={{
+                      position: 'relative',
+                      overflow: 'inherit !important',
+                      height: props.rows.length > 0 ? 'auto' : '80px',
+                    }}
+                  >
+                    <CircularProgress className="circular-progress-main-color" />
+                  </TableCell>
+                </TableRow>
+              )}
+              {props.rows && props.rows.length > 0 ? (
+                props.rows.map((row, index) => {
+                  const key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
+                  const rowColor =
+                    props.rowsColorColumn &&
+                    ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue
+                      ? `row-color-${props.rowsColorColumn.columnValue}`
+                      : '';
+                  const isRowSelected = props.isCheckTable?.rowsChecked && isSelected(row.id);
+                  return (
+                    <TableRow
+                      className={`table-rows ${rowColor} ${props.onClickRow ? 'row-click' : ''}`}
+                      role="checkbox"
+                      tabIndex={-1}
+                      selected={isRowSelected}
+                      aria-checked={isRowSelected}
+                      key={key || index}
+                    >
+                      {props.columns.map((column) => {
+                        if (column.id) {
+                          const value = ObjectbyString(row, column.id);
+                          const isItemSelected = column.isCheck && isSelected(row.id);
+                          return (
+                            <TableCell
+                              className="table-cell"
+                              key={column.isUnique ? `${column.id}-unique` : column.id}
+                              sx={{
+                                textAlign: {
+                                  xs: 'left',
+                                  md: column.alignCell ? column.alignCell : column.align ? column.align : 'center',
+                                },
+                              }}
+                              onClick={() =>
+                                !column.action && !column.isCheck && !column.isActiveFunction
+                                  ? handleRowClick(row.id)
+                                  : ''
+                              }
+                            >
+                              <Hidden mdUp>
+                                {column.label !== '-' && (
+                                  <Box display="inline-block" className="label-cell">
+                                    {column.label}
+                                  </Box>
+                                )}
+                              </Hidden>
+                              {column.action ? (
+                                <Box>
+                                  <Box display="flex" className="actions">
+                                    {column.action &&
+                                      column.action.map((action, i) => (
+                                        <Box key={i}>
+                                          {action.onClick && (
+                                            <Box
+                                              className="btn-action main-color-hover"
+                                              onClick={() => action.onClick && action.onClick(row)}
+                                            >
+                                              {action.children}
+                                            </Box>
+                                          )}
+                                          {action.onClickId && (
+                                            <Box
+                                              className="btn-action main-color-hover"
+                                              onClick={() => action.onClickId && action.onClickId(row.id)}
+                                            >
+                                              {action.children}
+                                            </Box>
+                                          )}
+                                          {!action.onClick && !action.onClickId && (
+                                            <Box className="btn-action">{action.children}</Box>
+                                          )}
+                                        </Box>
+                                      ))}
+                                  </Box>
+                                </Box>
+                              ) : column.isActiveFunction ? (
+                                <Box
+                                  className="btn-action main-color-hover"
+                                  onClick={() => column.isActiveFunction && column.isActiveFunction.onClickId(row.id)}
+                                >
+                                  {value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon}
+                                </Box>
+                              ) : column.isCheck ? (
+                                <Box className="checkbox-cell">
+                                  <Checkbox
+                                    checked={isItemSelected}
+                                    inputProps={{ 'aria-labelledby': row.id }}
+                                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                                      props.isCheckTable?.onCheckedAction
+                                        ? onCheckAction(event, row.id)
+                                        : onCheckSingleAction(event, row.id)
+                                    }
+                                  />
+                                </Box>
+                              ) : (
+                                <Box
+                                  className={`${
+                                    column.enumColumn?.hasColor ? `${value.toLowerCase()}-type-color` : ''
+                                  } format-value`}
+                                >
+                                  {formatValue(value, column)}
+                                </Box>
+                              )}
+                            </TableCell>
+                          );
+                        } else return null;
+                      })}
+                    </TableRow>
+                  );
+                })
+              ) : !props.loading ? (
+                <TableRow>
+                  <TableCell colSpan={props.columns.length}>
+                    <Box>{props.values.NO_RESULTS_FOUND}</Box>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <TableRow />
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+    </Box>
+  );
+};

package/src/stories/Tables/Tables.stories.tsx

@@ -8,6 +8,7 @@ import { UserList, Values } from '../../data';
 import { Search } from '@mui/icons-material';
 import { ButtonComponent } from '../../components/fields/ButtonComponent/ButtonComponent';
 import { TableComponent } from '../../components/tables/TableComponent/TableComponent';
+import { SimpleTableComponent } from '../../components/tables/SimpleTableComponent/SimpleTableComponent';
 import { SearchFilters } from '../../interfaces';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons';
@@ -29,7 +30,7 @@ const defaultFilters: SearchFilters = {
   orderAsc: true,
 };
 
-export const TableSimple: Story = () => {
+export const Table: Story = () => {
   const [filters] = React.useState(defaultFilters);
   return (
     <MainLayoutSimple
@@ -116,3 +117,69 @@ export const TableSimple: Story = () => {
     />
   );
 };
+
+export const SimpleTable: Story = () => {
+  return (
+    <MainLayoutSimple
+      headerComponent={
+        <AppHeader handleDrawerOpen={() => console.log('e')}>
+          <Box m={'auto'}>
+            <img src={logo} className="header-logo" alt="logo" />
+          </Box>
+        </AppHeader>
+      }
+      mainComponent={
+        <Box py={2}>
+          <MainWrapperComponent
+            headerProps={{
+              title: 'Table',
+            }}
+          >
+            <SimpleTableComponent
+              rows={UserList}
+              columns={[
+                { id: 'id', label: 'Id', minWidth: 55, maxWidth: 55 },
+                { id: 'name', label: Values.NAME, minWidth: 100, maxWidth: 100 },
+                {
+                  id: 'image',
+                  label: Values.IMAGE,
+                  minWidth: 100,
+                  isImage: { isUrl: true },
+                },
+                { id: 'extraInfo.name', label: Values.USER, minWidth: 100, maxWidth: 100 },
+                { id: 'skills', label: Values.SKILLS, minWidth: 100, maxWidth: 100 },
+                { id: 'information', label: Values.INFORMATION, minWidth: 100, maxWidth: 100 },
+                { id: 'email', label: Values.EMAIL, minWidth: 100 },
+                { id: 'charge', label: Values.PRICE, minWidth: 100, isPrice: true },
+                {
+                  id: 'actions',
+                  label: '',
+                  minWidth: 10,
+                  action: [
+                    {
+                      children: <FontAwesomeIcon icon={faEdit} />,
+                      onClick: (row: any) => {
+                        console.log(row);
+                      },
+                    },
+                    {
+                      children: <FontAwesomeIcon icon={faTrashAlt} />,
+                      onClickId: (id: number) => {
+                        console.log(id);
+                      },
+                    },
+                  ],
+                },
+              ]}
+              rowsColorColumn={{ columnName: 'extraInfo.name', columnValue: 'Juan' }}
+              values={Values}
+              onClickRow={(id: number) => {
+                console.log(id);
+              }}
+            />
+          </MainWrapperComponent>
+        </Box>
+      }
+    />
+  );
+};