imbric-theme 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/hook/useTable.js CHANGED
@@ -1,45 +1,54 @@
1
- import { useState, useEffect } from "react";
2
-
3
- const calculateRange = (data, rowsPerPage) => {
4
- const range = []
5
- if (!data) {
6
- var num = Math.ceil(1);
7
- } else {
8
- num = Math.ceil(data.length / rowsPerPage);
9
-
10
- }
11
-
12
- // const num = Math.ceil(data.length / rowsPerPage);
13
-
14
- // let i = 1;
15
- for (let i = 1; i <= num; i++) {
16
- range.push(i);
17
- }
18
- return range;
19
- };
20
-
21
- const sliceData = (data, page, rowsPerPage) => {
22
-
23
- if (!data) {
24
- return data = [];
25
- } else {
26
- return data.slice((page - 1) * rowsPerPage, page * rowsPerPage);
27
- }
28
- };
29
-
30
- const useTable = (data, page, rowsPerPage) => {
31
- const [tableRange, setTableRange] = useState([]);
32
- const [slice, setSlice] = useState([]);
33
-
34
- useEffect(() => {
35
- const range = calculateRange(data, rowsPerPage);
36
- setTableRange([...range]);
37
-
38
- const slice = sliceData(data, page, rowsPerPage);
39
- setSlice([...slice]);
40
- }, [data, setTableRange, page, setSlice, rowsPerPage]);
41
-
42
- return { slice, range: tableRange };
43
- };
44
-
45
- export default useTable;
1
+ import { useState, useEffect } from 'react'
2
+
3
+ const calculateRange = (dataTotalQueryCount, data, rowsPerPage) => {
4
+ const range = []
5
+ if (!data) {
6
+ var num = Math.ceil(1)
7
+ } else {
8
+ // num = Math.ceil(data.length / rowsPerPage)
9
+ num = Math.ceil(dataTotalQueryCount / rowsPerPage)
10
+ }
11
+
12
+ // const num = Math.ceil(data.length / rowsPerPage);
13
+
14
+ // let i = 1;
15
+ for (let i = 1; i <= num; i++) {
16
+ range.push(i)
17
+ }
18
+ return range
19
+ }
20
+
21
+ // const sliceData = (data, page, rowsPerPage) => {
22
+ // if (!data) {
23
+ // return (data = [])
24
+ // } else {
25
+ // // return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
26
+ // return data
27
+ // }
28
+ // }
29
+
30
+ const sliceData = (data) => {
31
+ if (!data) {
32
+ return (data = [])
33
+ } else {
34
+ // return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
35
+ return data
36
+ }
37
+ }
38
+
39
+ const useTable = (dataTotalQueryCount, data, page, rowsPerPage) => {
40
+ const [tableRange, setTableRange] = useState([])
41
+ const [slice, setSlice] = useState([])
42
+
43
+ useEffect(() => {
44
+ const range = calculateRange(dataTotalQueryCount, data, rowsPerPage)
45
+ setTableRange([...range])
46
+
47
+ const slice = sliceData(data, page, rowsPerPage)
48
+ setSlice([...slice])
49
+ }, [dataTotalQueryCount, data, setTableRange, page, setSlice, rowsPerPage])
50
+
51
+ return { slice, range: tableRange }
52
+ }
53
+
54
+ export default useTable
@@ -7,16 +7,20 @@ import withStyles from '../../hocs/withStyles'
7
7
  import Paragraph from '../../atoms/Paragraph'
8
8
  import Input from '../../atoms/Input'
9
9
  import Icon from '../../atoms/Icon'
10
+ import DynamicSelect from '../../molecules/DynamicSelect'
10
11
  import { Horizontal, Vertical } from '../../layout/Spacer/components'
11
12
 
12
13
 
13
- export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, columnsData }) => {
14
+ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChangeInput, onChangeSelect, columnsData, opSelect }) => {
14
15
 
15
16
  const [sortable, setSortable] = useState(true);
16
17
  const [accessor, setAccessor] = useState("");
17
18
  const [sortField, setSortField] = useState("");
18
19
  const [order, setOrder] = useState("asc");
19
20
 
21
+ // const [optionsSelect, setOptionsSelect] = useState(opSelect);
22
+
23
+
20
24
  const handleSortingChange = (accessor) => {
21
25
  const sortOrder =
22
26
  accessor === sortField && order === "asc" ? "desc" : "asc";
@@ -63,24 +67,24 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
63
67
 
64
68
  {item.sortable ?
65
69
 
66
- cl === "default" ?
67
- <Icon
68
- name="angleUpDown"
69
- size="xs"
70
- />
71
- : cl === "" ? null
72
-
73
- : cl === "angleDown"
74
- ? <Icon
75
- name="angleDown"
76
- size="xs"
77
- />
78
-
79
- : <Icon
80
- name="angleUp"
81
- size="xs"
82
- />
83
- : null
70
+ cl === "default" ?
71
+ <Icon
72
+ name="angleUpDown"
73
+ size="xs"
74
+ />
75
+ : cl === "" ? null
76
+
77
+ : cl === "angleDown"
78
+ ? <Icon
79
+ name="angleDown"
80
+ size="xs"
81
+ />
82
+
83
+ : <Icon
84
+ name="angleUp"
85
+ size="xs"
86
+ />
87
+ : null
84
88
  }
85
89
  </span>
86
90
 
@@ -89,14 +93,25 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
89
93
 
90
94
  {item.viewIsFilter ? (
91
95
 
92
- <Input
93
- isInputFilter
94
- id={item.idInput}
95
- type={item.typeFilter}
96
- name={item.nameInput}
97
- onChange={onChangeInput}
98
- placeholder={item.placeholder}
99
- />) : null
96
+ item.typeFilter === 'select' ?
97
+ <DynamicSelect
98
+ isInline
99
+ onChange={onChangeSelect}
100
+ optionsSelect={opSelect}
101
+ placeholder={item.placeholder}
102
+ />
103
+ :
104
+ <Input
105
+ isInputFilter
106
+ id={item.idInput}
107
+ type={item.typeFilter}
108
+ name={item.nameInput}
109
+ onChange={onChangeInput}
110
+ placeholder={item.placeholder}
111
+ />
112
+ )
113
+
114
+ : null
100
115
  }
101
116
 
102
117
  </th>
@@ -116,6 +131,7 @@ ColumnTable.propTypes = {
116
131
  getStyles: PropTypes.func.isRequired,
117
132
  columnUppercase: PropTypes.bool,
118
133
  onChangeInput: PropTypes.func,
134
+ onChangeSelect: PropTypes.func,
119
135
  }
120
136
 
121
137
  ColumnTable.defaultProps = {
@@ -123,6 +139,7 @@ ColumnTable.defaultProps = {
123
139
  handleSorting: () => { },
124
140
  columnUppercase: false,
125
141
  onChangeInput: () => { },
142
+ onChangeSelect: () => { },
126
143
  }
127
144
 
128
145
  export default withStyles(styles)(ColumnTable)
@@ -2,6 +2,8 @@
2
2
  padding: 12px 15px;
3
3
  text-align: left;
4
4
  color: var(--color-font-base);
5
+ display: table-cell;
6
+ vertical-align: top;
5
7
  }
6
8
 
7
9
  .column-uppercase {
@@ -108,4 +108,10 @@ export const options = {
108
108
  },
109
109
  ],
110
110
 
111
+ opSelect: [
112
+ { value: 'chocolate', label: 'Chocolate' },
113
+ { value: 'strawberry', label: 'Strawberry' },
114
+ { value: 'vanilla', label: 'Vanilla' }
115
+ ]
116
+
111
117
  }
@@ -4,30 +4,51 @@ import PropTypes from 'prop-types'
4
4
  import styles from './FooterTable.module.css'
5
5
  import { options } from './constants'
6
6
  import withStyles from '../../hocs/withStyles'
7
+ import DynamicSelect from '../../molecules/DynamicSelect'
7
8
 
8
- export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
9
+
10
+ export const FooterTable = ({ getStyles, range, setPage, setDataPage, page, slice, placeholderDinamicSelect, handleResultsForPage }) => {
9
11
  useEffect(() => {
10
12
  if (slice.length < 1 && page !== 1) {
11
13
  setPage(page - 1);
12
14
  }
13
15
  }, [slice, page, setPage]);
14
16
 
17
+
15
18
  return (
16
19
  <div className={getStyles('footer-table')}>
17
20
 
18
21
  <div className={styles.tableFooter}>
19
22
  {range.map((el, index) => (
20
- <button
21
- key={index}
22
- className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
23
- }`}
24
- onClick={() => setPage(el)}
25
- >
26
- {el}
27
- </button>
23
+
24
+ <>
25
+ <button
26
+ key={index}
27
+ className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
28
+ }`}
29
+ onClick={() => { setPage(el); setDataPage(el) }}
30
+
31
+ onChange={item => { handleSelectRange(item); onChangeRange(item); }}
32
+
33
+ >
34
+ {el}
35
+ </button>
36
+
37
+
38
+ </>
39
+
28
40
  ))}
29
41
  </div>
30
42
 
43
+ <DynamicSelect
44
+ isInline
45
+ onChange={handleResultsForPage}
46
+ optionsSelect={options.opResultsForPage}
47
+ placeholder={placeholderDinamicSelect}
48
+ isClearable={false}
49
+ defaultValue= { {value: 10, label: '10'} }
50
+ />
51
+
31
52
  </div>
32
53
 
33
54
 
@@ -37,11 +58,17 @@ export const FooterTable = ({ getStyles, range, setPage, page, slice }) => {
37
58
  FooterTable.propTypes = {
38
59
  // children: PropTypes.node.isRequired,
39
60
  getStyles: PropTypes.func.isRequired,
61
+ setDataPage: PropTypes.func,
62
+ placeholderDinamicSelect: PropTypes.string,
63
+ handleResultsForPage: PropTypes.func
40
64
  // type: PropTypes.oneOf(options.types),
41
65
  }
42
66
 
43
67
  FooterTable.defaultProps = {
44
68
  getStyles: () => { },
69
+ setDataPage: () => { },
70
+ handleResultsForPage: () => { },
71
+ placeholderDinamicSelect: 'resultados por pagina'
45
72
  }
46
73
 
47
74
  export default withStyles(styles)(FooterTable)
@@ -4,14 +4,14 @@
4
4
 
5
5
  .tableFooter {
6
6
  background-color: #f1f1f1;
7
- padding: 8px 0px;
7
+ padding: 4px 0px;
8
8
  width: 100%;
9
9
  font-weight: 500;
10
10
  text-align: left;
11
11
  font-size: 16px;
12
12
  color: #2c3e50;
13
- border-bottom-left-radius: 15px;
14
- border-bottom-right-radius: 15px;
13
+ border-bottom-left-radius: 5px;
14
+ border-bottom-right-radius: 0px;
15
15
  display: flex;
16
16
  align-items: center;
17
17
  justify-content: center;
@@ -19,7 +19,7 @@
19
19
 
20
20
  .button {
21
21
  border: none;
22
- padding: 7px 14px;
22
+ padding: 6px 12px;
23
23
  border-radius: 10px;
24
24
  cursor: pointer;
25
25
  margin-right: 4px;
@@ -28,7 +28,7 @@
28
28
 
29
29
  .activeButton {
30
30
  color: white;
31
- background: #185adb;
31
+ background: #00A3FF;
32
32
  }
33
33
 
34
34
  .inactiveButton {
@@ -1 +1,9 @@
1
- export const options = { types: [] }
1
+ export const options =
2
+ {
3
+ opResultsForPage: [
4
+ { value: 5, label: '5' },
5
+ { value: 10, label: '10' },
6
+ { value: 20, label: '20' },
7
+ { value: 50, label: '50' },
8
+ ]
9
+ }
@@ -32,7 +32,9 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
32
32
  (
33
33
 
34
34
 
35
- itemTd.subAccessor === 'action' ?
35
+ itemTd.subAccessor === 'action'
36
+
37
+ ?
36
38
 
37
39
  <td className={getStyles('td')} key={[itemTd.accessor]}>
38
40
 
@@ -55,13 +57,21 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
55
57
  // onClick={(e) => onClickEdit(e, item)}
56
58
  onClick={e => { onClickActionDelete(e, item) }}
57
59
  />
58
- </td> :
60
+ </td>
61
+
62
+ :
63
+
64
+ itemTd.subAccessor !== ''
65
+
66
+ ?
67
+
68
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
59
69
 
60
- itemTd.subAccessor !== '' ?
70
+ :
61
71
 
62
- <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
72
+ itemTd.typeFilter === 'date'
63
73
 
64
- itemTd.typeFilter === 'date' ?
74
+ ?
65
75
 
66
76
  <td className={getStyles('td')} key={[itemTd.accessor]}>
67
77
  <Moment format="DD/MM/YYYY hh:mm:ss">
@@ -69,19 +79,52 @@ export const RowTable = ({ getStyles, slice, columnsData, onClickActionEdit, onC
69
79
  </Moment>
70
80
  </td>
71
81
 
72
- : itemTd.typeFilter === 'number' ?
82
+ :
73
83
 
74
- itemTd.subTypeFilter ?
84
+ itemTd.typeFilter === 'select'
75
85
 
76
- <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
77
- :
78
- <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
86
+ ?
87
+
88
+ itemTd.optionsSelect.map((itemSelect) => (
89
+
90
+
91
+ item[itemTd.accessor] === itemSelect.value ?
92
+
93
+ <td className={getStyles('td')} key={[itemTd.accessor]}>
94
+ {itemSelect.label}
95
+ </td>
79
96
 
80
- : itemTd.subTypeFilter ?
97
+ :
98
+
99
+ null
100
+ ))
101
+
102
+ :
103
+
104
+ itemTd.typeFilter === 'number'
105
+
106
+ ?
107
+
108
+ itemTd.subTypeFilter
109
+
110
+ ?
111
+
112
+ itemTd.characterExtra === 'km'
113
+ ?
114
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{(item[itemTd.accessor]/1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
115
+ :
116
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
117
+ :
118
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
81
119
 
82
- <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
83
120
  :
84
- <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
121
+
122
+ itemTd.subTypeFilter
123
+
124
+ ?
125
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} {itemTd.characterExtra}</td>
126
+ :
127
+ <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
85
128
 
86
129
  ) : null
87
130
  ))}
@@ -1,3 +1,9 @@
1
+ export const optionsSelect = [
2
+ { value: '', label: 'Todos' },
3
+ { value: 1, label: 'Activo' },
4
+ { value: -1, label: 'Dado de baja' }
5
+ ]
6
+
1
7
  export const options = {
2
8
 
3
9
  bookings: [
@@ -5,7 +11,7 @@ export const options = {
5
11
  id: 346248956,
6
12
  idUser: 146280,
7
13
  idAuthorization: 817457,
8
- status: 30,
14
+ status: 1,
9
15
  origin: {
10
16
  addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
11
17
  lat: 40.40068,
@@ -21,6 +27,7 @@ export const options = {
21
27
  paymentMethod: 50,
22
28
  entryChannel: 15,
23
29
  idSupplierFleet: 57,
30
+ distanceMeters: 22044,
24
31
  idSupplier: 57,
25
32
  distanceMeters: 10501,
26
33
  durationMinutes: 0,
@@ -69,7 +76,7 @@ export const options = {
69
76
  id: 346248955,
70
77
  idUser: 146280,
71
78
  idAuthorization: 817457,
72
- status: 30,
79
+ status: 1,
73
80
  origin: {
74
81
  addressField: "Estación de Chamartín, Madrid, España",
75
82
  lat: 40.47237,
@@ -83,6 +90,7 @@ export const options = {
83
90
  timeBookingStartRealTimestamp: 1653559749000,
84
91
  asap: true,
85
92
  paymentMethod: 50,
93
+ distanceMeters: 22044,
86
94
  entryChannel: 15,
87
95
  idSupplierFleet: 57,
88
96
  idSupplier: 57,
@@ -133,7 +141,7 @@ export const options = {
133
141
  id: 346248954,
134
142
  idUser: 146280,
135
143
  idAuthorization: 817457,
136
- status: 30,
144
+ status: -1,
137
145
  origin: {
138
146
  addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
139
147
  lat: 40.40068,
@@ -159,6 +167,7 @@ export const options = {
159
167
  idSupplierTaxi: "11",
160
168
  idSupplierService: "15826",
161
169
  cancelledWithCharge: false,
170
+ distanceMeters: 22044,
162
171
  priceCustomer: "23.00000",
163
172
  priceSupplier: "23.00000",
164
173
  phoneNumberSupplier: "676800672",
@@ -204,7 +213,7 @@ export const options = {
204
213
  title: 'Fecha',
205
214
  viewIsFilter: true,
206
215
  typeFilter: 'date',
207
- subTypeFilter: false,
216
+ subTypeFilter: true,
208
217
  idInput: 'fecha',
209
218
  nameInput: 'Fecha',
210
219
  placeholder: 'Fecha'
@@ -259,7 +268,36 @@ export const options = {
259
268
  subTypeFilter: true,
260
269
  idInput: 'precio',
261
270
  nameInput: 'Precio',
262
- placeholder: 'Precio'
271
+ placeholder: 'Precio',
272
+ characterExtra: '€'
273
+ },
274
+ {
275
+ accessor: 'distanceMeters',
276
+ subAccessor: '',
277
+ activeView: true,
278
+ idInput: 'distanceMeters',
279
+ nameInput: 'distanceMeters',
280
+ placeholder: 'Distancia (km)',
281
+ sortable: true,
282
+ subTypeFilter: false,
283
+ title: 'Distancia (km)',
284
+ typeFilter: 'number',
285
+ viewIsFilter: true,
286
+ characterExtra: 'km',
287
+ },
288
+ {
289
+ accessor: 'status',
290
+ subAccessor: '',
291
+ activeView: true,
292
+ idInput: 'status',
293
+ nameInput: 'Estado',
294
+ placeholder: 'Estado',
295
+ sortable: true,
296
+ subTypeFilter: false,
297
+ title: 'Estado',
298
+ typeFilter: 'select',
299
+ optionsSelect: optionsSelect,
300
+ viewIsFilter: true,
263
301
  },
264
302
  {
265
303
  activeView: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Components library IMBRIC",
5
5
  "private": false,
6
6
  "main": "index.js",