imbric-theme 0.3.4 → 0.3.5

package/atoms/Icon/constants.js

@@ -88,7 +88,7 @@ export const iconsMap = {
   angleUpDown: {
     viewBox: '0 0 15 15',
     svg: (
-      <path class="st0" d="M3.6,4.3c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0l2.9-2.9l2.9,2.9c0.3,0.3,0.7,0.3,1,0c0.3-0.3,0.3-0.7,0-1
+      <path d="M3.6,4.3c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0l2.9-2.9l2.9,2.9c0.3,0.3,0.7,0.3,1,0c0.3-0.3,0.3-0.7,0-1
 	L8,0.9C7.9,0.8,7.7,0.7,7.5,0.7C7.3,0.7,7.1,0.8,7,0.9L3.6,4.3z M11.4,10.7c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-2.9,2.9
 	L4.6,9.7c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1L7,14.1c0.3,0.3,0.7,0.3,1,0L11.4,10.7z"/>
     ),

package/hook/useAddColumn.js

@@ -0,0 +1,40 @@
+const useAddColumn = (event) => {
+
+    let listKeyColumnOrder = []
+
+    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 itemColumns of columnsData) {
+
+        if (itemColumns.accessor === itemEvent.value) {
+
+          if (itemEvent.activeView) {
+            itemColumns.activeView = true
+          } else {
+            itemColumns.activeView = false
+          }
+
+
+        }
+      }
+
+    }
+
+    setColumnsData([])
+
+  }
+
+  export default useAddColumn

package/hook/useStateDate.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import {
+    addDays,
+  } from "date-fns";
+
+const useStateDate = () => {
+
+    const [state, setState] = useState([
+        {
+          startDate: addDays(new Date(), -59),
+          endDate: new Date(),
+          key: 'selection',
+        }
+      ]);
+
+
+      useEffect(() => {
+
+      }, [state]);
+
+
+  return { state, setState }
+}
+
+export default useStateDate

package/hook/useTable.js

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+const calculateRange = (data, rowsPerPage) => {
+  const range = []
+  if (!data) {
+    var num = Math.ceil(1);
+  } else {
+    num = Math.ceil(data.length / rowsPerPage);
+
+  }
+
+  // const num = Math.ceil(data.length / rowsPerPage);
+
+  // let i = 1;
+  for (let i = 1; i <= num; i++) {
+    range.push(i);
+  }
+  return range;
+};
+
+const sliceData = (data, page, rowsPerPage) => {
+
+  if (!data) {
+    return data = [];
+  } else {
+    return data.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  }
+};
+
+const useTable = (data, page, rowsPerPage) => {
+  const [tableRange, setTableRange] = useState([]);
+  const [slice, setSlice] = useState([]);
+
+  useEffect(() => {
+    const range = calculateRange(data, rowsPerPage);
+    setTableRange([...range]);
+
+    const slice = sliceData(data, page, rowsPerPage);
+    setSlice([...slice]);
+  }, [data, setTableRange, page, setSlice, rowsPerPage]);
+
+  return { slice, range: tableRange };
+};
+
+export default useTable;

package/index.js

@@ -32,7 +32,6 @@ export { default as Textarea } from './atoms/Textarea'
 export { default as Tab } from './atoms/Tab'
 
 
-
 // Molecules
 export { default as Accordion } from './molecules/Accordion'
 export { default as AddButton } from './molecules/AddButton'
@@ -47,9 +46,12 @@ export { default as ItemMenu } from './molecules/ItemMenu'
 export { default as CheckList } from './molecules/CheckList'
 export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'
+export { default as FooterTable } from './molecules/FooterTable'
 export { default as DynamicSelect } from './molecules/DynamicSelect'
 export { default as DatePicker } from './molecules/DynamicSelect'
 
+export { default as useTable } from './hook/useTable'
+export { default as useStateDate } from './hook/useStateDate'
 
 
 

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: 'DateRangePicker',
+  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> */}
+
+
+