imbric-theme 0.4.0 → 0.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/hook/useTable.js +54 -45
  2. package/molecules/ColumnTable/ColumnTable.js +44 -27
  3. package/molecules/ColumnTable/ColumnTable.module.css +2 -0
  4. package/molecules/ColumnTable/constants.js +6 -0
  5. package/molecules/FooterTable/FooterTable.js +36 -9
  6. package/molecules/FooterTable/FooterTable.module.css +5 -5
  7. package/molecules/FooterTable/constants.js +9 -1
  8. package/molecules/RowTable/RowTable.js +56 -13
  9. package/molecules/RowTable/constants.js +43 -5
  10. package/package.json +1 -1
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
package/molecules/ColumnTable/ColumnTable.js CHANGED
@@ -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)
package/molecules/ColumnTable/ColumnTable.module.css CHANGED
@@ -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 {
package/molecules/ColumnTable/constants.js CHANGED
@@ -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
  }
package/molecules/FooterTable/FooterTable.js CHANGED
@@ -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)
package/molecules/FooterTable/FooterTable.module.css CHANGED
@@ -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 {
package/molecules/FooterTable/constants.js CHANGED
@@ -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
+ }
package/molecules/RowTable/RowTable.js CHANGED
@@ -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
  ))}
package/molecules/RowTable/constants.js CHANGED
@@ -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",