imbric-theme 0.3.3 → 0.3.4

package/atoms/Paragraph/Paragraph.module.css

@@ -1,5 +1,9 @@
 .paragraph {
   width: 100%;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 
 .color-base {

package/index.js

@@ -1,3 +1,6 @@
+// Pages
+export { default as Login } from './pages/Login'
+
 // Layout
 export { default as CenteredContent } from './layout/CenteredContent'
 export { default as Container } from './layout/Container'
@@ -6,16 +9,21 @@ export { default as FlexColumnContent } from './layout/FlexColumnContent'
 export { default as Spacer } from './layout/Spacer'
 export { default as Sidebar } from './layout/Sidebar'
 export { default as Navbar } from './layout/Navbar'
+export { default as DynamicTable } from './layout/DynamicTable'
+
 
 // Atoms
+export { default as AlertModal } from './atoms/AlertModal'
 export { default as Avatar } from './atoms/Avatar'
 export { default as Button } from './atoms/Button'
 export { default as Card } from './atoms/Card'
 export { default as Check } from './atoms/Check'
+export { default as Checkbox } from './atoms/Checkbox'
 export { default as Divider } from './atoms/Divider'
 export { default as Heading } from './atoms/Heading'
 export { default as Icon } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
+export { default as Label } from './atoms/Label'
 export { default as Link } from './atoms/Link'
 export { default as Modal } from './atoms/Modal'
 export { default as Paragraph } from './atoms/Paragraph'
@@ -23,6 +31,8 @@ export { default as Picture } from './atoms/Picture'
 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'
@@ -33,4 +43,13 @@ export { default as Score } from './molecules/Score'
 export { default as Task } from './molecules/Task'
 export { default as TaskCounter } from './molecules/TaskCounter'
 export { default as IconLabel } from './molecules/IconLabel'
-export { default as ItemMenu } from './molecules/ItemMenu'
+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 DynamicSelect } from './molecules/DynamicSelect'
+export { default as DatePicker } from './molecules/DynamicSelect'
+
+
+
+

package/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
   },
   collectCoverageFrom: [
-    '{atoms,molecules,layout}/**/!(index).js',
+    '{atoms,molecules,layout,pages}/**/!(index).js',
     '{hocs,helpers}/*.js',
   ],
   coverageThreshold: {

package/layout/DynamicTable/DynamicTable.js

@@ -0,0 +1,207 @@
+import React from 'react'
+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'
+
+
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isViewRange, isViewAddColumn, isViewDownloadDoc }) => {
+
+  const [tableData, setTableData] = useState(optionsData);
+  const [columnsData, setColumnsData] = useState(opColumns);
+  const [addColumsData, setAddColumsData] = useState(opAddColumns);
+
+  useEffect(() => {
+    setColumnsData(opColumns);
+  })
+
+  const handleSorting = (sortField, sortOrder) => {
+    if (sortField) {
+      const sorted = [...tableData].sort((a, b) => {
+        if (a[sortField] === null) return 1;
+        if (b[sortField] === null) return -1;
+        if (a[sortField] === null && b[sortField] === null) return 0;
+        return (
+          a[sortField].toString().localeCompare(b[sortField].toString(), "en", {
+            numeric: true,
+          }) * (sortOrder === "asc" ? 1 : -1)
+        );
+      });
+      setTableData(sorted);
+    }
+  };
+
+  const handleAddColumn = (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([])
+
+  }
+
+  return (
+
+    <>
+      <div className={getStyles('opFunction')}>
+
+        <div className={getStyles('opFunctionBox1')}>
+          <DatePicker
+            isLayoutDate="DateRangePicker"
+          />
+        </div>
+
+        <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>
+          <Horizontal size="md" />
+          <div className={getStyles('opFunctionBox3')}>
+            <Icon
+              key="3"
+              background="inverted"
+              name="fileDownload"
+              onClick={function noRefCheck() { }}
+            />
+          </div>
+
+        </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) => (
+
+                <tr key={index}>
+                  {columnsData.map((itemTd) => (
+                    itemTd.activeView ?
+
+                      (
+                        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>
+    </>
+
+  )
+}
+
+DynamicTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isViewRange: PropTypes.bool,
+  isViewAddColumn: PropTypes.bool,
+  isViewDownloadDoc: PropTypes.bool,
+}
+
+DynamicTable.defaultProps = {
+  getStyles: () => { },
+  isViewRange: true,
+  isViewAddColumn: true,
+  isViewDownloadDoc: true,
+}
+
+export default withStyles(styles)(DynamicTable)

package/layout/DynamicTable/DynamicTable.module.css

@@ -0,0 +1,62 @@
+.opFunction {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* .opFunctionBox1 {
+  display: inline-flex;
+} */
+
+.opFunctionBox2 {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.dynamic-table {
+  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 7%), 0px 2px 2px 0px rgb(0 0 0 / 7%), 0px 1px 5px 0px rgb(0 0 0 / 6%);
+}
+
+.table {
+  width: 100%;
+  table-layout: fixed;
+
+}
+
+.tbl-header {
+  /* background-color: rgba(255, 255, 255, 0.3); */
+  /* background-color: -webkit-linear-gradient(left, #25c481, #25b7c4);
+  background-color: linear-gradient(to right, #25c481, #25b7c4); */
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.tbl-content {
+  height: 300px;
+  overflow-x: auto;
+  margin-top: 0px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.td {
+  padding: 15px;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 12px;
+  color: var(--color-font-base);
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+/* for custom scrollbar for webkit browser*/
+
+/* ::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+} */

package/layout/DynamicTable/DynamicTable.stories.js

@@ -0,0 +1,30 @@
+import { DynamicTable, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(DynamicTable, styles)
+const ListTemplate = getListTemplate(DynamicTable, styles)
+
+export default {
+  title: 'Layout/DynamicTable',
+  component: DynamicTable,
+  args: {
+    optionsData: options.bookings,
+    opColumns: options.columns,
+    opAddColumns: options.opAddColumns,
+    isViewRange: true,
+    isViewAddColumn: true,
+    isViewDownloadDoc: true,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }