imbric-theme 0.3.4 → 0.3.5

package/layout/Navbar/Navbar.js

@@ -75,7 +75,7 @@ Navbar.propTypes = {
   children: PropTypes.any.isRequired,
   viewTabsNav: PropTypes.bool,
   viewOptionsNav: PropTypes.bool,
-  linkLogout: PropTypes.string,
+  linkLogout: PropTypes.func,
 }
 
 Navbar.defaultProps = {

package/molecules/ColumnTable/ColumnTable.js

@@ -10,8 +10,10 @@ import Icon from '../../atoms/Icon'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 
-export const ColumnTable = ({ getStyles, children, sortable, accessor, handleSorting, isFilter, columnUppercase, idInput, typeInput, nameInput, placeholder, value, onChange }) => {
+export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, columnsData }) => {
 
+  const [sortable, setSortable] = useState(true);
+  const [accessor, setAccessor] = useState("");
   const [sortField, setSortField] = useState("");
   const [order, setOrder] = useState("asc");
 
@@ -33,91 +35,90 @@ export const ColumnTable = ({ getStyles, children, sortable, accessor, handleSor
 
 
   return (
-    <th
-      onClick={sortable ? () => handleSortingChange(accessor) : null}
-      className={getStyles('column-table', {
-        'column-uppercase': columnUppercase,
-      })}>
-
-
-      <Paragraph
-        size="xs"
-        isInline
-      >
-        {children}
-      </Paragraph>
-
-      <Horizontal size="xs" />
-
-      {cl === 'default' ?
-        (<Icon
-          className=""
-          name="angleUpDown"
-          size="xs"
-        />
-        ) : cl === '' ? null
-
-          : cl === 'angleDown'
-            ? (<Icon
-              className=""
-              name="angleDown"
-              size="xs"
-            />
-            )
-            : (<Icon
-              className=""
-              name="angleUp"
-              size="xs"
-            />
-            )
-      }
-
-
-      <Vertical size="xs" />
-
-      {isFilter ? (
-
-        <Input
-          isInputFilter
-          id={idInput}
-          value={''}
-          type={typeInput}
-          name={nameInput}
-          onChange={onChange}
-          placeholder={placeholder}
-        />) : null
-      }
-
-    </th>
+
+    <div className={getStyles('tbl-header')}>
+      <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+        <thead>
+          <tr>
+
+            {columnsData.map((item) => (
+              item.activeView ?
+                // setSortable(item.sortable)
+                // setAccessor()
+                (<th
+                  key={item.idInput}
+                  className={getStyles('column-table', {
+                    'column-uppercase': columnUppercase,
+                  })}>
+
+                  <span onClick={item.sortable ? () => handleSortingChange(item.accessor) : null}>
+                    <Paragraph
+                      size="xs"
+                      isInline
+                    >
+                      {item.title}
+                    </Paragraph>
+
+                    <Horizontal size="xs" />
+
+                    {cl === "default" ?
+                      <Icon
+                        name="angleUpDown"
+                        size="xs"
+                      />
+                      : cl === "" ? null
+
+                        : cl === "angleDown"
+                          ? <Icon
+                            name="angleDown"
+                            size="xs"
+                          />
+
+                          : <Icon
+                            name="angleUp"
+                            size="xs"
+                          />
+
+                    }
+                  </span>
+
+
+                  <Vertical size="xs" />
+
+                  {item.viewIsFilter ? (
+
+                    <Input
+                      isInputFilter
+                      id={item.idInput}
+                      type={item.typeFilter}
+                      name={item.nameInput}
+                      onChange={onChangeInput}
+                      placeholder={item.placeholder}
+                    />) : null
+                  }
+
+                </th>
+                ) : null
+            ))}
+
+          </tr>
+        </thead>
+      </table>
+    </div>
+
   )
 }
 
 ColumnTable.propTypes = {
-  sortable: PropTypes.bool.isRequired,
-  accessor: PropTypes.string.isRequired,
   handleSorting: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
   getStyles: PropTypes.func.isRequired,
-  isFilter: PropTypes.bool,
   columnUppercase: PropTypes.bool,
-  idInput: PropTypes.string,
-  typeInput: PropTypes.oneOf(options.typeInput),
-  nameInput: PropTypes.string,
-  placeholder: PropTypes.string,
 }
 
 ColumnTable.defaultProps = {
   getStyles: () => { },
-  children: 'NameTh',
-  sortable: true,
-  accessor: 'prueba',
   handleSorting: () => { },
   columnUppercase: false,
-  isFilter: true,
-  idInput: 'prueba',
-  typeInput: 'text',
-  nameInput: 'prueba',
-  placeholder: 'placeholder'
 }
 
 export default withStyles(styles)(ColumnTable)

package/molecules/ColumnTable/ColumnTable.module.css

@@ -6,4 +6,17 @@
 
 .column-uppercase {
   text-transform: uppercase;
+}
+
+.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);
 }

package/molecules/ColumnTable/ColumnTable.stories.js

@@ -13,14 +13,11 @@ export default {
   title: 'Molecules/ColumnTable',
   component: ColumnTable,
   args: {
-    children: 'NameTh',
-    sortable: true,
-    accessor: 'prueba',
     columnUppercase: false,
-    isFilter: true
+    columnsData: options.columns,
   },
   argTypes: {
-    typeInput: getOptionsArgTypes(options.typeInput),
+    // typeInput: getOptionsArgTypes(options.typeInput),
   },
 }
 

package/molecules/ColumnTable/constants.js

@@ -1 +1,111 @@
-export const options = { typeInput: ['text', 'password', 'date', 'number'], }
+export const options = { 
+    typeInput: ['text', 'password', 'date', 'number'], 
+
+    columns: [
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'timeBookingStartRealTimestamp',
+            subAccessor: '',
+            title: 'Fecha',
+            viewIsFilter: true,
+            typeFilter: 'date',
+            subTypeFilter: false,
+            idInput: 'fecha',
+            nameInput: 'Fecha',
+            placeholder: 'Fecha'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'passengerName',
+            subAccessor: '',
+            title: 'Pasajero',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'pasajero',
+            nameInput: 'Pasajero',
+            placeholder: 'Pasajero'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'origin',
+            subAccessor: 'addressField',
+            title: 'Recogida',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'recogida',
+            nameInput: 'Recogida',
+            placeholder: 'Recogida'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'destination',
+            subAccessor: 'addressField',
+            title: 'Destino',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'destino',
+            nameInput: 'Destino',
+            placeholder: 'Destino'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'priceCustomer',
+            subAccessor: '',
+            title: 'Precio',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: true,
+            idInput: 'precio',
+            nameInput: 'Precio',
+            placeholder: 'Precio'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'id',
+            subAccessor: '',
+            title: 'ID',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'id',
+            nameInput: 'id',
+            placeholder: 'id'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idService',
+            subAccessor: '',
+            title: 'ID Reserva',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDReserva',
+            nameInput: 'ID Reserva',
+            placeholder: 'ID Reserva'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idSupplier',
+            subAccessor: '',
+            title: 'ID Proveedor',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDProveedor',
+            nameInput: 'ID Proveedor',
+            placeholder: 'ID Proveedor'
+        },
+    ],
+
+}

package/molecules/DatePicker/DatePicker.js

@@ -11,7 +11,7 @@ import moment from 'moment'
 import Label from '../../atoms/Label';
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
 import Icon from '../../atoms/Icon';
-
+import useStateDate from '../../hook/useStateDate';
 // import 'react-date-range/dist/styles.css'; // main css file
 // import 'react-date-range/dist/theme/default.css'; // theme css file
 
@@ -32,34 +32,45 @@ import {
 } from "date-fns";
 
 
-export const DatePicker = ({ getStyles, isLayoutDate }) => {
+
+export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange }) => {
 
   const [isShowCalendar, setShowCalendar] = useState(false);
 
-  const [state, setState] = useState([
-    {
-      startDate: addDays(new Date(), -59),
-      endDate: new Date(),
-      key: 'selection',
-    }
 
-  ]);
+  const { state, setState } = useStateDate();
+
+
+  // const [state, setState] = useState([
+  //   {
+  //     startDate: addDays(new Date(), -59),
+  //     endDate: new Date(),
+  //     key: 'selection',
+  //   }
+
+  // ]);
 
   moment.locale('es')
   const format = "DD/MMMM/YYYY";
 
+
+  const handleSelectRange = (item) => {
+    setState([item.selection])
+  }
+
   const handleSelect = (date) => {
     console.log(date); // native Date object
     console.log(state)
-    console.log(date)
   }
 
   const handleClickOpenCalendar = () => {
     setShowCalendar(true)
+    // console.log(state)
   }
 
   const handleClickCloseCalendar = () => {
     setShowCalendar(false)
+    console.log(state)
   };
 
 
@@ -76,7 +87,7 @@ export const DatePicker = ({ getStyles, isLayoutDate }) => {
 
           (<DateRange
             editableDateInputs={true}
-            onChange={item => setState([item.selection])}
+            onChange={item => useStateDate([item.selection])}
             moveRangeOnFirstSelection={false}
             ranges={state}
           />)
@@ -113,7 +124,7 @@ export const DatePicker = ({ getStyles, isLayoutDate }) => {
               <DateRangePicker
                 locale={locales.es}
                 dateDisplayFormat='d MMMM yyyy'
-                onChange={item => setState([item.selection])}
+                onChange={ item => {handleSelectRange(item); onChangeRange(item);}}
                 showSelectionPreview={false}
                 moveRangeOnFirstSelection={false}
                 months={2}
@@ -200,7 +211,7 @@ export const DatePicker = ({ getStyles, isLayoutDate }) => {
 
               {/* <DefinedRange
                 locale={locales.es}
-                onChange={item => setState([item.selection])}
+                onChange={item => useStateDate([item.selection])}
                 ranges={state}
               /> */}
             </div>
@@ -213,11 +224,13 @@ export const DatePicker = ({ getStyles, isLayoutDate }) => {
 DatePicker.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isLayoutDate: PropTypes.oneOf(options.typeLayoutDate),
+  onChangeRange: PropTypes.func
 }
 
 DatePicker.defaultProps = {
   getStyles: () => { },
-  isLayoutDate: 'Calendar'
+  isLayoutDate: 'Calendar',
+  onChangeRange: () => { },
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/DatePicker/DatePicker.module.css

@@ -4,7 +4,7 @@
 
 .date-picker-input {
   display: flex;
-  width: 70%;
+  /* width: 70%; */
 }
 
 .modalDatePickerRange {

package/molecules/FooterTable/FooterTable.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import PropTypes from 'prop-types'
+
+import styles from './FooterTable.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
+  useEffect(() => {
+    if (slice.length < 1 && page !== 1) {
+      setPage(page - 1);
+    }
+  }, [slice, page, setPage]);
+
+  return (
+    <div className={getStyles('footer-table')}>
+
+      <div className={styles.tableFooter}>
+        {range.map((el, index) => (
+          <button
+            key={index}
+            className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
+              }`}
+            onClick={() => setPage(el)}
+          >
+            {el}
+          </button>
+        ))}
+      </div>
+
+    </div>
+
+
+  )
+}
+
+FooterTable.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+FooterTable.defaultProps = {
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(FooterTable)

package/molecules/FooterTable/FooterTable.module.css

@@ -0,0 +1,37 @@
+.footer-table {
+  display: flex;
+}
+
+.tableFooter {
+  background-color: #f1f1f1;
+  padding: 8px 0px;
+  width: 100%;
+  font-weight: 500;
+  text-align: left;
+  font-size: 16px;
+  color: #2c3e50;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  border: none;
+  padding: 7px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.activeButton {
+  color: white;
+  background: #185adb;
+}
+
+.inactiveButton {
+  color: #2c3e50;
+  background: #f9f9f9;
+}

package/molecules/FooterTable/FooterTable.stories.js

@@ -0,0 +1,23 @@
+import { FooterTable, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(FooterTable, styles)
+const ListTemplate = getListTemplate(FooterTable, styles)
+
+export default {
+  title: 'Molecules/FooterTable',
+  component: FooterTable,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/molecules/FooterTable/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/molecules/FooterTable/index.js

@@ -0,0 +1,3 @@
+export { default, FooterTable } from './FooterTable'
+export { options } from './constants'
+export { default as styles } from './FooterTable.module.css'

package/molecules/RowTable/RowTable.js

@@ -5,18 +5,64 @@ import styles from './RowTable.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const RowTable = ({ children, getStyles }) => {
-  return <div className={getStyles('row-table')}>{children}</div>
+import Moment from 'react-moment'
+
+export const RowTable = ({ getStyles, slice, columnsData }) => {
+  return (
+    <div className={getStyles('tbl-content')}>
+      <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
+        <tbody>
+          {slice.map((item, index) => (
+
+            <tr key={index}>
+              {columnsData.map((itemTd) => (
+                itemTd.activeView ?
+
+                  (
+                    itemTd.subAccessor !== '' ?
+
+                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
+
+                      itemTd.typeFilter === 'date' ?
+
+                        <td className={getStyles('td')} key={[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={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
+                            :
+                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
+                          : itemTd.subTypeFilter ?
+
+                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
+                            :
+                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+
+                  ) : null
+              ))}
+            </tr>
+
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
 }
 
 RowTable.propTypes = {
-  children: PropTypes.node.isRequired,
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
 }
 
 RowTable.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
 }
 
 export default withStyles(styles)(RowTable)

package/molecules/RowTable/RowTable.module.css

@@ -1,3 +1,22 @@
-.row-table {
-  display: flex;
+.table {
+  width: 100%;
+  table-layout: fixed;
+
 }
+
+.tbl-content {
+  height: max-content;
+  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);
+}

package/molecules/RowTable/RowTable.stories.js

@@ -12,12 +12,15 @@ const ListTemplate = getListTemplate(RowTable, styles)
 export default {
   title: 'Molecules/RowTable',
   component: RowTable,
-  args: {},
+  args: {
+    slice: options.bookings,
+    columnsData: options.columns,
+  },
   argTypes: {
-    types: getOptionsArgTypes(options.types),
+    // types: getOptionsArgTypes(options.types),
   },
 }
 
 export const Default = Template.bind({})
-export const List = ListTemplate.bind({})
-List.args = { items: options.types.map((type) => ({ type })) }
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }