imbric-theme 0.3.4 → 0.3.8

package/layout/DynamicTable/DynamicTable.js

@@ -3,21 +3,29 @@ import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './DynamicTable.module.css'
 import withStyles from '../../hocs/withStyles'
-import ColumnTable from '../../molecules/ColumnTable'
 import DynamicSelect from '../../molecules/DynamicSelect'
 import DatePicker from '../../molecules/DatePicker'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
-import Moment from 'react-moment'
+import LoadingError from '../../molecules/LoadingError'
+// import ColumnTable from '../../molecules/ColumnTable'
+// import RowTable from '../../molecules/RowTable'
+// import FooterTable from '../../molecules/FooterTable'
+// import useTable from '../../hook/useTable'
+// import useStateDate from '../../hook/useStateDate';
 
 
-export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isViewRange, isViewAddColumn, isViewDownloadDoc }) => {
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel }) => {
 
   const [tableData, setTableData] = useState(optionsData);
   const [columnsData, setColumnsData] = useState(opColumns);
   const [addColumsData, setAddColumsData] = useState(opAddColumns);
 
+  // const handleSelectRange = (item) => {
+  //   setState([item.selection])
+  // }
+
   useEffect(() => {
     setColumnsData(opColumns);
   })
@@ -38,153 +46,100 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
     }
   };
 
-  const handleAddColumn = (event) => {
-
-    let listKeyColumnOrder = []
+  // const handleAddColumn = (event) => {
 
-    event.forEach(element => {
-      listKeyColumnOrder[element.value] = true
-    });
+  //   let listKeyColumnOrder = []
 
-    for (const itemAddColumns of addColumsData) {
-      if (listKeyColumnOrder[itemAddColumns.value]) {
-        itemAddColumns.activeView = true
-      } else {
-        itemAddColumns.activeView = false
-      }
-    }
+  //   event.forEach(element => {
+  //     listKeyColumnOrder[element.value] = true
+  //   });
 
+  //   for (const itemAddColumns of addColumsData) {
+  //     if (listKeyColumnOrder[itemAddColumns.value]) {
+  //       itemAddColumns.activeView = true
+  //     } else {
+  //       itemAddColumns.activeView = false
+  //     }
+  //   }
 
-    for (const itemEvent of addColumsData) {
+  //   for (const itemEvent of addColumsData) {
 
-      for (const itemColumns of columnsData) {
+  //     for (const itemColumns of columnsData) {
 
-        if (itemColumns.accessor === itemEvent.value) {
+  //       if (itemColumns.accessor === itemEvent.value) {
 
-          if (itemEvent.activeView) {
-            itemColumns.activeView = true
-          } else {
-            itemColumns.activeView = false
-          }
+  //         if (itemEvent.activeView) {
+  //           itemColumns.activeView = true
+  //         } else {
+  //           itemColumns.activeView = false
+  //         }
 
 
-        }
-      }
+  //       }
+  //     }
 
-    }
+  //   }
 
-    setColumnsData([])
+  //   setColumnsData([])
 
-  }
+  // }
 
   return (
 
-    <>
+    
       <div className={getStyles('opFunction')}>
 
-        <div className={getStyles('opFunctionBox1')}>
-          <DatePicker
-            isLayoutDate="DateRangePicker"
-          />
-        </div>
+        {isViewRange ? (
+          <div className={getStyles('opFunctionBox1')}>
+            <DatePicker
+              isLayoutDate={isLayoutDate}
+              onChangeRange={handleSelectRange}
+            />
+          </div>
+        ) : null}
 
         <div className={getStyles('opFunctionBox2')}>
 
-          <div className={getStyles('opFunctionBox3')}>
-            <Label>Mostrar u ocultar columnas</Label>
-            <DynamicSelect
-              isMulti
-              isInline
-              onChange={handleAddColumn}
-              optionsSelect={addColumsData}
-              placeholder='Seleccionar columnas'
-            />
-          </div>
+          {isViewAddColumn ? (
+            <div className={getStyles('opFunctionBox3')}>
+              <Label>Mostrar u ocultar columnas</Label>
+              <DynamicSelect
+                isMulti
+                isInline
+                onChange={handleAddColumn}
+                optionsSelect={addColumsData}
+                placeholder='Seleccionar columnas'
+              />
+            </div>
+          ) : null}
           <Horizontal size="md" />
-          <div className={getStyles('opFunctionBox3')}>
-            <Icon
-              key="3"
-              background="inverted"
-              name="fileDownload"
-              onClick={function noRefCheck() { }}
-            />
-          </div>
+          {isViewDownloadDoc ? (
+            <div className={getStyles('opFunctionBox3')}>
+              <Icon
+                key="fileDownload"
+                background="inverted"
+                name="fileDownload"
+                onClick={handleDownloadExcel}
+              />
+            </div>
+          ) : null}
 
         </div>
 
       </div>
-      <Vertical size="md" />
-      <div className={getStyles('dynamic-table')}>
-        <div className={getStyles('tbl-header')}>
-          <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
-            <thead>
-              <tr>
-                {columnsData.map((item) => (
-                  item.activeView ?
-                    (<ColumnTable
-                      key={item.accessor}
-                      handleSorting={handleSorting}
-                      sortable={item.sortable}
-                      accessor={item.accessor}
-                      isFilter={item.viewIsFilter}
-                      typeInput={item.typeFilter}
-                      idInput={item.idInput}
-                      nameInput={item.nameInput}
-                      placeholder={item.placeholder}
-                    >
-                      {item.title}
-                    </ColumnTable>
-                    ) : null
-                ))}
-              </tr>
-            </thead>
-          </table>
-        </div>
-        <div className={getStyles('tbl-content')}>
-          <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
-            <tbody>
 
-              {tableData.map((item, index) => (
+      // <ColumnTable
+      //   handleSorting={handleSorting}
+      //   onChangeInput={onChangeInput}
+      //   columnsData={columnsData}
+      // >
+      //   {item.title}
+      // </ColumnTable>
 
-                <tr key={index}>
-                  {columnsData.map((itemTd) => (
-                    itemTd.activeView ?
+      // <RowTable slice={slice} columnsData={columnsData}></RowTable>
 
-                      (
-                        itemTd.typeFilter === 'date' ?
-
-                          <td className={getStyles('td')} key={item[itemTd.accessor]}>
-                            <Moment format="DD/MM/YYYY hh:mm:ss">
-                              {item[itemTd.accessor]}
-                            </Moment>
-                          </td>
-
-                          : itemTd.typeFilter === 'number' ?
-
-                            itemTd.subTypeFilter ?
-
-                              <td className={getStyles('td')} key={item[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
-                              :
-                              <td className={getStyles('td')} key={item[itemTd.accessor]}>{item[itemTd.accessor]}</td>
-                            :
-                            itemTd.subTypeFilter ?
-
-                              <td className={getStyles('td')} key={item[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
-                              :
-                              <td className={getStyles('td')} key={item[itemTd.accessor]}>{item[itemTd.accessor]}</td>
-
-
-                      ) : null
-                  ))}
-                </tr>
-
-              ))}
-
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </>
+      // <FooterTable range={range} slice={slice} setPage={setPage} page={page} /> 
+  
 
   )
 }
@@ -195,13 +150,23 @@ DynamicTable.propTypes = {
   isViewRange: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
+  onChangeInput: PropTypes.func,
+  handleAddColumn: PropTypes.func,
+  isError: PropTypes.string,
+  isLayoutDate: PropTypes.string,
+  handleSelectRange: PropTypes.func,
+  handleDownloadExcel: PropTypes.func,
 }
 
 DynamicTable.defaultProps = {
   getStyles: () => { },
+  handleAddColumn: () => { },
   isViewRange: true,
   isViewAddColumn: true,
   isViewDownloadDoc: true,
+  isLayoutDate: 'Calendar',
+  handleSelectRange: () => { },
+  handleDownloadExcel: () => { },
 }
 
 export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.module.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
 /* .opFunctionBox1 {
@@ -31,7 +32,7 @@
 }
 
 .tbl-content {
-  height: 300px;
+  height: max-content;
   overflow-x: auto;
   margin-top: 0px;
   border: 1px solid rgba(0, 0, 0, 0.1);

package/layout/DynamicTable/DynamicTable.stories.js

@@ -5,10 +5,18 @@ import {
   getListTemplate,
   getOptionsArgTypes,
 } from '../../helpers/storybook'
+import ColumnTable from '../../molecules/ColumnTable'
+import Heading from '../../atoms/Heading';
+import { Vertical } from '../Spacer/components';
+import RowTable from '../../molecules/RowTable';
+import FooterTable from '../../molecules/FooterTable';
+
 
 const Template = getTemplate(DynamicTable, styles)
 const ListTemplate = getListTemplate(DynamicTable, styles)
 
+
+
 export default {
   title: 'Layout/DynamicTable',
   component: DynamicTable,
@@ -26,5 +34,44 @@ export default {
 }
 
 export const Default = Template.bind({})
-// export const List = ListTemplate.bind({})
-// List.args = { items: options.types.map((type) => ({ type })) }
+
+
+export const TableTotal = () =>
+  <div>
+
+    {/* Title - Optional */}
+    <Heading color='black' size='lg' weight='normal'>
+      Servicios de traslados
+    </Heading>
+
+    <Vertical size='sm' />
+
+    {/* Dynamic Table */}
+    <Default></Default>
+
+    <Vertical size='sm' />
+
+    {/* Column Table */}
+    <ColumnTable columnsData={options.columns}> </ColumnTable>
+
+    <Vertical size='sm' />
+
+    {/* Row Table */}
+    <RowTable slice={options.bookings} columnsData={options.columns}></RowTable>
+
+    {/* Footer Table */}
+    <FooterTable range={[]} slice={options.bookings} setPage={4} page={1} />
+
+  </div>
+
+
+// TableTotal.args = { isInline: true }
+
+
+{/* <Canvas>
+	<Story name="Basic">
+	</Story>
+</Canvas> */}
+
+
+