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 +54 -45
- package/molecules/ColumnTable/ColumnTable.js +44 -27
- package/molecules/ColumnTable/ColumnTable.module.css +2 -0
- package/molecules/ColumnTable/constants.js +6 -0
- package/molecules/FooterTable/FooterTable.js +36 -9
- package/molecules/FooterTable/FooterTable.module.css +5 -5
- package/molecules/FooterTable/constants.js +9 -1
- package/molecules/RowTable/RowTable.js +56 -13
- package/molecules/RowTable/constants.js +43 -5
- package/package.json +1 -1
package/hook/useTable.js
CHANGED
@@ -1,45 +1,54 @@
|
|
1
|
-
import { useState, useEffect } from
|
2
|
-
|
3
|
-
const calculateRange = (data, rowsPerPage) => {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
}
|
20
|
-
|
21
|
-
const sliceData = (data, page, rowsPerPage) => {
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
}
|
29
|
-
|
30
|
-
const
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
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
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
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
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
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)
|
@@ -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
|
-
|
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
|
-
|
21
|
-
|
22
|
-
|
23
|
-
}
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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:
|
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:
|
14
|
-
border-bottom-right-radius:
|
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:
|
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: #
|
31
|
+
background: #00A3FF;
|
32
32
|
}
|
33
33
|
|
34
34
|
.inactiveButton {
|
@@ -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
|
-
|
70
|
+
:
|
61
71
|
|
62
|
-
|
72
|
+
itemTd.typeFilter === 'date'
|
63
73
|
|
64
|
-
|
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
|
-
:
|
82
|
+
:
|
73
83
|
|
74
|
-
|
84
|
+
itemTd.typeFilter === 'select'
|
75
85
|
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
-
|
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
|
-
|
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:
|
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:
|
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:
|
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:
|
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,
|