imbric-theme 0.9.0 → 1.0.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.
Files changed (15) hide show
  1. package/atoms/AlertModal/AlertModal.js +2 -2
  2. package/atoms/Checkbox/Checkbox.js +7 -1
  3. package/atoms/Input/Input.js +196 -79
  4. package/atoms/Input/Input.module.css +5 -0
  5. package/atoms/Picture/Picture.js +10 -4
  6. package/layout/DynamicTable/DynamicTable.js +144 -48
  7. package/layout/DynamicTable/DynamicTable.module.css +5 -18
  8. package/molecules/CardProductTypesBooking/CardProductTypesBooking.js +5 -5
  9. package/molecules/ColumnTable/ColumnTable.js +4 -3
  10. package/molecules/ColumnTable/ColumnTable.module.css +1 -0
  11. package/molecules/DatePicker/DatePicker.js +10 -4
  12. package/molecules/DynamicSelect/DynamicSelect.js +126 -32
  13. package/molecules/DynamicSelect/DynamicSelect.module.css +1 -1
  14. package/molecules/RowTable/RowTable.js +613 -396
  15. package/package.json +3 -2
package/molecules/RowTable/RowTable.js CHANGED
@@ -21,6 +21,7 @@ export const RowTable = ({
21
21
  isClickRow,
22
22
  onClickRow,
23
23
  onClickActionUserView,
24
+ onClickActionFileDownload,
24
25
  onClickActionListInvoice,
25
26
  onClickActionListXLS,
26
27
  onClickActionListCSV,
@@ -30,7 +31,9 @@ export const RowTable = ({
30
31
  onClickActionDelete,
31
32
  onClickActionLink,
32
33
  onClickActionClone,
34
+ onClickActionCheckbox,
33
35
  txtTootipIconUserView,
36
+ txtTootipIconFileDownload,
34
37
  txtTootipIconListInvoice,
35
38
  txtTootipIconListListXLS,
36
39
  txtTootipIconListListCSV,
@@ -40,7 +43,7 @@ export const RowTable = ({
40
43
  txtTootipIconDelete,
41
44
  txtTootipIconLink,
42
45
  txtTootipIconClone,
43
- colorRow,
46
+ txtTootipIconCheckbox,
44
47
  }) => {
45
48
 
46
49
 
@@ -112,152 +115,183 @@ export const RowTable = ({
112
115
  (
113
116
 
114
117
 
115
- itemTd.isBoolean
118
+ itemTd.isLocation
116
119
 
117
120
  ?
118
- !loading ? (
119
- <td
120
- className={getStyles('td', 'tdacction')}
121
- key={[itemTd.accessor] + (indexTd + index)}
122
- >
123
- {String(item[itemTd.accessor])}
124
-
125
- </td>
126
- )
121
+ !loading ?
122
+
123
+ item[itemTd.accessor] ?
124
+
125
+ (
126
+ <td
127
+ className={getStyles('td', 'tdacction')}
128
+ style={{ color: item.colorTxtRow }}
129
+ key={[itemTd.accessor] + (indexTd + index)}
130
+ >
131
+
132
+ <a href={'http://maps.google.com/?q=' + item[itemTd.accessor] + ',' + item[itemTd.accessorSecond]} target='_black'>
133
+ <Icon
134
+ name="distance"
135
+ // onClick={function noRefCheck() { }}
136
+ />
137
+ </a>
138
+
139
+ </td>
140
+ ) :
141
+ (
142
+ <td
143
+ className={getStyles('td', 'tdacction')}
144
+ style={{ color: item.colorTxtRow }}
145
+ key={[itemTd.accessor] + (indexTd + index)}
146
+ >
147
+ </td>
148
+ )
127
149
  : null
128
150
  :
129
151
 
130
152
 
131
- itemTd.isCheckbox
153
+
154
+
155
+ itemTd.isBoolean
132
156
 
133
157
  ?
134
- !loading ? (
135
- <td
136
- className={getStyles('td', 'tdacction')}
137
- key={[itemTd.accessor] + (indexTd + index)}
138
- >
139
-
140
- {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
141
-
142
- <Toggle
143
- id={'idToggle' + item.id}
144
- checked={item.isSelected}
145
- label=""
146
- onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
147
- />
148
-
149
- </td>
150
- )
158
+ !loading ?
159
+
160
+ item[itemTd.accessor] ?
161
+
162
+ (
163
+ <td
164
+ className={getStyles('td', 'tdacction')}
165
+ style={{ color: item.colorTxtRow }}
166
+ key={[itemTd.accessor] + (indexTd + index)}
167
+ >
168
+
169
+ SI
170
+ {/* {String(item[itemTd.accessor])} */}
171
+
172
+ </td>
173
+ ) :
174
+ (
175
+ <td
176
+ className={getStyles('td', 'tdacction')}
177
+ style={{ color: item.colorTxtRow }}
178
+ key={[itemTd.accessor] + (indexTd + index)}
179
+ >
180
+ {/* {String(item[itemTd.accessor])} */}
181
+ NO
182
+ </td>
183
+ )
151
184
  : null
152
185
  :
153
186
 
154
187
 
155
- itemTd.isArrayObject
188
+ itemTd.isCheckbox
156
189
 
157
190
  ?
191
+ !loading ? (
192
+ <td
193
+ className={getStyles('td', 'tdacction')}
194
+ style={{ color: item.colorTxtRow }}
195
+ key={[itemTd.accessor] + (indexTd + index)}
196
+ >
197
+
198
+ {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
199
+
200
+ <Toggle
201
+ id={'idToggle' + item.id}
202
+ checked={item.isSelected}
203
+ label=""
204
+ disabled={[itemTd.disabled]}
205
+ onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
206
+ />
158
207
 
159
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
208
+ </td>
209
+ )
210
+ : null
211
+ :
160
212
 
161
- {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
162
213
 
163
- {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
214
+ itemTd.isArrayObject
164
215
 
165
- <>
216
+ ?
166
217
 
167
- <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
168
- {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
218
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
169
219
 
170
- {itemTdObj[itemTd.subAccessorAlt]}
220
+ {console.log('TD: ' + [itemTd.accessor] + (indexTd + index))}
171
221
 
172
- {array.length - 1 !== indexAcc ?
173
- <span>, </span> : null}
174
- :&nbsp;
175
- </span>
222
+ {item[itemTd.accessor].map((itemTdObj, indexAcc, array) => (
176
223
 
177
- <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
224
+ <>
178
225
 
179
- {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
226
+ <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label' + (indexAcc + index)}>
227
+ {console.log('A: ' + itemTdObj.id + 'label' + (indexAcc + index))}
180
228
 
181
- {itemTdObj[itemTd.subAccessor]}
229
+ {itemTdObj[itemTd.subAccessorAlt]}
182
230
 
183
- {array.length - 1 !== indexAcc ?
184
- <span>, </span> : null}
231
+ {array.length - 1 !== indexAcc ?
232
+ <span>, </span> : null}
233
+ :&nbsp;
234
+ </span>
185
235
 
186
- </span>
236
+ <span key={itemTdObj.id + 'Tdlabel' + (indexAcc + index)}>
187
237
 
188
- </>
238
+ {console.log('B: ' + itemTdObj.id + 'Tdlabel' + (indexAcc + index))}
189
239
 
190
- ))}
240
+ {itemTdObj[itemTd.subAccessor]}
191
241
 
192
- </td>
242
+ {array.length - 1 !== indexAcc ?
243
+ <span>, </span> : null}
193
244
 
194
- :
245
+ </span>
195
246
 
247
+ </>
196
248
 
197
- itemTd.isPicture
249
+ ))}
198
250
 
199
- ?
200
- <td className={getStyles('td', 'tdacction')} key={[itemTd.accessor] + (indexTd + index)}>
201
- <Picture
202
- src={item[itemTd.accessor]}
203
- width={50}
204
- />
205
251
  </td>
252
+
206
253
  :
207
254
 
208
- itemTd.subAccessor === 'action'
255
+
256
+ itemTd.isPicture
209
257
 
210
258
  ?
259
+ <td
260
+ className={getStyles('td', 'tdacction')}
261
+ style={{ color: item.colorTxtRow }}
262
+ key={[itemTd.accessor] + (indexTd + index)}>
263
+ <Picture
264
+ src={item[itemTd.accessor]}
265
+ width={50}
266
+ />
267
+ </td>
268
+ :
211
269
 
212
- <td className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
270
+ itemTd.subAccessor === 'action'
213
271
 
214
- {itemTd.viewUserView ?
272
+ ?
215
273
 
216
- item.viewUserView === undefined ?
274
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td', 'tdacctionIcons')} key={[itemTd.accessor] + (indexTd + index)}>
217
275
 
218
- <>
219
- <span
220
- data-tip
221
- data-for='userView'
222
- onMouseEnter={handleMouseEnter}
223
- onMouseLeave={handleMouseLeave}
224
- >
225
- <>
226
- <Icon
227
- id="userView"
228
- background="base"
229
- name="userView"
230
- onClick={(e) => { onClickActionUserView(e, item) }}
231
- />
232
- <Horizontal size="xs" />
233
- </>
234
276
 
235
- </span>
236
-
237
- {isToolTipMounted ? (
238
- <ReactTooltip id='userView' type='error'>
239
- <span>{txtTootipIconUserView}</span>
240
- </ReactTooltip>
241
- ) : null}
242
- </>
277
+ {itemTd.viewListInvoice ?
243
278
 
244
- :
245
279
 
246
- item.viewUserView ?
280
+ item.viewListInvoice === undefined ?
247
281
 
248
282
  <>
249
283
  <span
250
284
  data-tip
251
- data-for='userView'
285
+ data-for='listInvoice'
252
286
  onMouseEnter={handleMouseEnter}
253
287
  onMouseLeave={handleMouseLeave}
254
288
  >
255
289
  <>
256
290
  <Icon
257
- id="userView"
291
+ id={"listInvoice" + (indexTd + index)}
258
292
  background="base"
259
- name="userView"
260
- onClick={(e) => { onClickActionUserView(e, item) }}
293
+ name="listInvoice"
294
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
261
295
  />
262
296
  <Horizontal size="xs" />
263
297
  </>
@@ -265,35 +299,61 @@ export const RowTable = ({
265
299
  </span>
266
300
 
267
301
  {isToolTipMounted ? (
268
- <ReactTooltip id='userView' type='error'>
269
- <span>{txtTootipIconUserView}</span>
302
+ <ReactTooltip id='listInvoice' type='error' place='left'>
303
+ <span>{txtTootipIconListInvoice}</span>
270
304
  </ReactTooltip>
271
305
  ) : null}
272
306
  </>
273
307
 
274
- : null
308
+ :
275
309
 
276
- : null}
310
+ item.viewListInvoice ?
277
311
 
312
+ <>
313
+ <span
314
+ data-tip
315
+ data-for='listInvoice'
316
+ onMouseEnter={handleMouseEnter}
317
+ onMouseLeave={handleMouseLeave}
318
+ >
319
+ <>
320
+ <Icon
321
+ id={"listInvoice" + (indexTd + index)}
322
+ background="base"
323
+ name="listInvoice"
324
+ onClick={(e) => { onClickActionListInvoice(e, item) }}
325
+ />
326
+ <Horizontal size="xs" />
327
+ </>
328
+
329
+ </span>
330
+
331
+ {isToolTipMounted ? (
332
+ <ReactTooltip id='listInvoice' type='error'>
333
+ <span>{txtTootipIconListInvoice}</span>
334
+ </ReactTooltip>
335
+ ) : null}
336
+ </>
278
337
 
279
- {itemTd.viewListInvoice ?
338
+ : null
280
339
 
340
+ : null}
281
341
 
282
- item.viewListInvoice === undefined ?
342
+ {itemTd.viewListXLS && item.fileType === 'xls' ?
283
343
 
284
344
  <>
285
345
  <span
286
346
  data-tip
287
- data-for='listInvoice'
347
+ data-for='listXLS'
288
348
  onMouseEnter={handleMouseEnter}
289
349
  onMouseLeave={handleMouseLeave}
290
350
  >
291
351
  <>
292
352
  <Icon
293
- id={"listInvoice" + (indexTd + index)}
353
+ id={"listXLS" + (indexTd + index)}
294
354
  background="base"
295
- name="listInvoice"
296
- onClick={(e) => { onClickActionListInvoice(e, item) }}
355
+ name="listXLS"
356
+ onClick={(e) => { onClickActionListXLS(e, item) }}
297
357
  />
298
358
  <Horizontal size="xs" />
299
359
  </>
@@ -301,152 +361,59 @@ export const RowTable = ({
301
361
  </span>
302
362
 
303
363
  {isToolTipMounted ? (
304
- <ReactTooltip id='listInvoice' type='error' place='left'>
305
- <span>{txtTootipIconListInvoice}</span>
364
+ <ReactTooltip id='listXLS' type='error'>
365
+ <span>{txtTootipIconListListXLS}</span>
306
366
  </ReactTooltip>
307
367
  ) : null}
308
368
  </>
309
369
 
310
- :
311
-
312
- item.viewListInvoice ?
313
-
314
- <>
315
- <span
316
- data-tip
317
- data-for='listInvoice'
318
- onMouseEnter={handleMouseEnter}
319
- onMouseLeave={handleMouseLeave}
320
- >
321
- <>
322
- <Icon
323
- id={"listInvoice" + (indexTd + index)}
324
- background="base"
325
- name="listInvoice"
326
- onClick={(e) => { onClickActionListInvoice(e, item) }}
327
- />
328
- <Horizontal size="xs" />
329
- </>
330
-
331
- </span>
332
-
333
- {isToolTipMounted ? (
334
- <ReactTooltip id='listInvoice' type='error'>
335
- <span>{txtTootipIconListInvoice}</span>
336
- </ReactTooltip>
337
- ) : null}
338
- </>
370
+ : null}
339
371
 
340
- : null
372
+ {itemTd.viewListCSV && item.fileType === 'xml' ?
341
373
 
342
- : null}
343
-
344
- {itemTd.viewListXLS && item.fileType === 'xls' ?
345
-
346
- <>
347
- <span
348
- data-tip
349
- data-for='listXLS'
350
- onMouseEnter={handleMouseEnter}
351
- onMouseLeave={handleMouseLeave}
352
- >
353
- <>
354
- <Icon
355
- id={"listXLS" + (indexTd + index)}
356
- background="base"
357
- name="listXLS"
358
- onClick={(e) => { onClickActionListXLS(e, item) }}
359
- />
360
- <Horizontal size="xs" />
361
- </>
362
-
363
- </span>
364
-
365
- {isToolTipMounted ? (
366
- <ReactTooltip id='listXLS' type='error'>
367
- <span>{txtTootipIconListListXLS}</span>
368
- </ReactTooltip>
369
- ) : null}
370
- </>
371
-
372
- : null}
373
-
374
- {itemTd.viewListCSV && item.fileType === 'xml' ?
375
-
376
- <>
377
- <span
378
- data-tip
379
- data-for='listCSV'
380
- onMouseEnter={handleMouseEnter}
381
- onMouseLeave={handleMouseLeave}
382
- >
383
- <>
384
- <Icon
385
- id={"listCSV" + (indexTd + index)}
386
- background="base"
387
- name="listCSV"
388
- onClick={(e) => { onClickActionListCSV(e, item) }}
389
- />
390
- <Horizontal size="xs" />
391
- </>
392
-
393
- </span>
394
-
395
- {isToolTipMounted ? (
396
- <ReactTooltip id='listCSV' type='error'>
397
- <span>{txtTootipIconListListCSV}</span>
398
- </ReactTooltip>
399
- ) : null}
400
- </>
401
-
402
- : null}
403
-
404
- {itemTd.viewListPDF && item.fileType === 'pdf' ?
405
-
406
- <>
407
- <span
408
- data-tip
409
- data-for='listPDF'
410
- onMouseEnter={handleMouseEnter}
411
- onMouseLeave={handleMouseLeave}
412
- >
413
- <>
414
- <Icon
415
- id={"listPDF" + (indexTd + index)}
416
- background="base"
417
- name="listPDF"
418
- onClick={(e) => { onClickActionListPDF(e, item) }}
419
- />
420
- <Horizontal size="xs" />
421
- </>
374
+ <>
375
+ <span
376
+ data-tip
377
+ data-for='listCSV'
378
+ onMouseEnter={handleMouseEnter}
379
+ onMouseLeave={handleMouseLeave}
380
+ >
381
+ <>
382
+ <Icon
383
+ id={"listCSV" + (indexTd + index)}
384
+ background="base"
385
+ name="listCSV"
386
+ onClick={(e) => { onClickActionListCSV(e, item) }}
387
+ />
388
+ <Horizontal size="xs" />
389
+ </>
422
390
 
423
- </span>
391
+ </span>
424
392
 
425
- {isToolTipMounted ? (
426
- <ReactTooltip id='listPDF' type='error'>
427
- <span>{txtTootipIconListListPDF}</span>
428
- </ReactTooltip>
429
- ) : null}
430
- </>
393
+ {isToolTipMounted ? (
394
+ <ReactTooltip id='listCSV' type='error'>
395
+ <span>{txtTootipIconListListCSV}</span>
396
+ </ReactTooltip>
397
+ ) : null}
398
+ </>
431
399
 
432
- : null}
400
+ : null}
433
401
 
434
- {itemTd.viewEdit ?
402
+ {itemTd.viewListPDF && item.fileType === 'pdf' ?
435
403
 
436
- item.viewEdit === undefined ?
437
404
  <>
438
405
  <span
439
406
  data-tip
440
- data-for='edit'
407
+ data-for='listPDF'
441
408
  onMouseEnter={handleMouseEnter}
442
409
  onMouseLeave={handleMouseLeave}
443
410
  >
444
411
  <>
445
412
  <Icon
446
- id={"edit" + (indexTd + index)}
413
+ id={"listPDF" + (indexTd + index)}
447
414
  background="base"
448
- name="edit"
449
- onClick={(e) => { onClickActionEdit(e, item) }}
415
+ name="listPDF"
416
+ onClick={(e) => { onClickActionListPDF(e, item) }}
450
417
  />
451
418
  <Horizontal size="xs" />
452
419
  </>
@@ -454,15 +421,17 @@ export const RowTable = ({
454
421
  </span>
455
422
 
456
423
  {isToolTipMounted ? (
457
- <ReactTooltip id='edit' type='error'>
458
- <span>{txtTootipIconEdit}</span>
424
+ <ReactTooltip id='listPDF' type='error'>
425
+ <span>{txtTootipIconListListPDF}</span>
459
426
  </ReactTooltip>
460
427
  ) : null}
461
428
  </>
462
- :
463
429
 
464
- item.viewEdit ?
430
+ : null}
465
431
 
432
+ {itemTd.viewEdit ?
433
+
434
+ item.viewEdit === undefined ?
466
435
  <>
467
436
  <span
468
437
  data-tip
@@ -488,43 +457,43 @@ export const RowTable = ({
488
457
  </ReactTooltip>
489
458
  ) : null}
490
459
  </>
460
+ :
491
461
 
492
- : null
493
-
494
- : null}
495
-
496
- {itemTd.viewEmailSend ?
497
-
498
- item.viewEmailSend === undefined ?
462
+ item.viewEdit ?
499
463
 
500
- <>
501
- <span
502
- data-tip
503
- data-for='sendEmail'
504
- onMouseEnter={handleMouseEnter}
505
- onMouseLeave={handleMouseLeave}
506
- >
507
464
  <>
508
- <Icon
509
- background="base"
510
- name="sendEmail"
511
- onClick={e => { onClickActionSendEmail(e, item) }}
512
- />
513
- <Horizontal size="xs" />
465
+ <span
466
+ data-tip
467
+ data-for='edit'
468
+ onMouseEnter={handleMouseEnter}
469
+ onMouseLeave={handleMouseLeave}
470
+ >
471
+ <>
472
+ <Icon
473
+ id={"edit" + (indexTd + index)}
474
+ background="base"
475
+ name="edit"
476
+ onClick={(e) => { onClickActionEdit(e, item) }}
477
+ />
478
+ <Horizontal size="xs" />
479
+ </>
480
+
481
+ </span>
482
+
483
+ {isToolTipMounted ? (
484
+ <ReactTooltip id='edit' type='error'>
485
+ <span>{txtTootipIconEdit}</span>
486
+ </ReactTooltip>
487
+ ) : null}
514
488
  </>
515
489
 
516
- </span>
490
+ : null
517
491
 
518
- {isToolTipMounted ? (
519
- <ReactTooltip id='sendEmail' type='error'>
520
- <span>{txtTootipIconSendEmail}</span>
521
- </ReactTooltip>
522
- ) : null}
523
- </>
492
+ : null}
524
493
 
525
- :
494
+ {itemTd.viewEmailSend ?
526
495
 
527
- item.viewEmailSend ?
496
+ item.viewEmailSend === undefined ?
528
497
 
529
498
  <>
530
499
  <span
@@ -551,42 +520,42 @@ export const RowTable = ({
551
520
  ) : null}
552
521
  </>
553
522
 
554
- : null
555
-
556
- : null}
557
-
558
- {itemTd.viewTrash ?
523
+ :
559
524
 
560
- item.viewTrash === undefined ?
525
+ item.viewEmailSend ?
561
526
 
562
- <>
563
- <span
564
- data-tip
565
- data-for='trash'
566
- onMouseEnter={handleMouseEnter}
567
- onMouseLeave={handleMouseLeave}
568
- >
569
527
  <>
570
- <Icon
571
- background="base"
572
- name="trash"
573
- onClick={e => { onClickActionDelete(e, item) }}
574
- />
575
- <Horizontal size="xs" />
528
+ <span
529
+ data-tip
530
+ data-for='sendEmail'
531
+ onMouseEnter={handleMouseEnter}
532
+ onMouseLeave={handleMouseLeave}
533
+ >
534
+ <>
535
+ <Icon
536
+ background="base"
537
+ name="sendEmail"
538
+ onClick={e => { onClickActionSendEmail(e, item) }}
539
+ />
540
+ <Horizontal size="xs" />
541
+ </>
542
+
543
+ </span>
544
+
545
+ {isToolTipMounted ? (
546
+ <ReactTooltip id='sendEmail' type='error'>
547
+ <span>{txtTootipIconSendEmail}</span>
548
+ </ReactTooltip>
549
+ ) : null}
576
550
  </>
577
551
 
578
- </span>
552
+ : null
579
553
 
580
- {isToolTipMounted ? (
581
- <ReactTooltip id='trash' type='error'>
582
- <span>{txtTootipIconDelete}</span>
583
- </ReactTooltip>
584
- ) : null}
585
- </>
554
+ : null}
586
555
 
587
- :
556
+ {itemTd.viewTrash ?
588
557
 
589
- item.viewTrash ?
558
+ item.viewTrash === undefined ?
590
559
 
591
560
  <>
592
561
  <span
@@ -613,44 +582,43 @@ export const RowTable = ({
613
582
  ) : null}
614
583
  </>
615
584
 
616
- : null
617
-
618
- : null}
619
-
620
-
621
- {itemTd.viewLink ?
585
+ :
622
586
 
623
- item.viewLink === undefined ?
587
+ item.viewTrash ?
624
588
 
625
- <>
626
- <span
627
- data-tip
628
- data-for='linkUser'
629
- onMouseEnter={handleMouseEnter}
630
- onMouseLeave={handleMouseLeave}
631
- >
632
589
  <>
633
- <Icon
634
- background="base"
635
- name="linkUser"
636
- // onClick={(e) => onClickEdit(e, item)}
637
- onClick={e => { onClickActionLink(e, item) }}
638
- />
639
- <Horizontal size="xs" />
590
+ <span
591
+ data-tip
592
+ data-for='trash'
593
+ onMouseEnter={handleMouseEnter}
594
+ onMouseLeave={handleMouseLeave}
595
+ >
596
+ <>
597
+ <Icon
598
+ background="base"
599
+ name="trash"
600
+ onClick={e => { onClickActionDelete(e, item) }}
601
+ />
602
+ <Horizontal size="xs" />
603
+ </>
604
+
605
+ </span>
606
+
607
+ {isToolTipMounted ? (
608
+ <ReactTooltip id='trash' type='error'>
609
+ <span>{txtTootipIconDelete}</span>
610
+ </ReactTooltip>
611
+ ) : null}
640
612
  </>
641
613
 
642
- </span>
614
+ : null
643
615
 
644
- {isToolTipMounted ? (
645
- <ReactTooltip id='linkUser' type='error'>
646
- <span>{txtTootipIconLink}</span>
647
- </ReactTooltip>
648
- ) : null}
649
- </>
616
+ : null}
650
617
 
651
- :
652
618
 
653
- item.viewLink ?
619
+ {itemTd.viewLink ?
620
+
621
+ item.viewLink === undefined ?
654
622
 
655
623
  <>
656
624
  <span
@@ -678,44 +646,45 @@ export const RowTable = ({
678
646
  ) : null}
679
647
  </>
680
648
 
681
- : null
682
-
683
- : null}
684
-
685
-
686
-
687
- {itemTd.viewClone ?
649
+ :
688
650
 
689
- item.viewClone === undefined ?
651
+ item.viewLink ?
690
652
 
691
- <>
692
- <span
693
- data-tip
694
- data-for='clone'
695
- onMouseEnter={handleMouseEnter}
696
- onMouseLeave={handleMouseLeave}
697
- >
698
653
  <>
699
- <Icon
700
- background="base"
701
- name="cloneDefault"
702
- onClick={e => { onClickActionClone(e, item) }}
703
- />
704
- <Horizontal size="xs" />
654
+ <span
655
+ data-tip
656
+ data-for='linkUser'
657
+ onMouseEnter={handleMouseEnter}
658
+ onMouseLeave={handleMouseLeave}
659
+ >
660
+ <>
661
+ <Icon
662
+ background="base"
663
+ name="linkUser"
664
+ // onClick={(e) => onClickEdit(e, item)}
665
+ onClick={e => { onClickActionLink(e, item) }}
666
+ />
667
+ <Horizontal size="xs" />
668
+ </>
669
+
670
+ </span>
671
+
672
+ {isToolTipMounted ? (
673
+ <ReactTooltip id='linkUser' type='error'>
674
+ <span>{txtTootipIconLink}</span>
675
+ </ReactTooltip>
676
+ ) : null}
705
677
  </>
706
678
 
707
- </span>
679
+ : null
708
680
 
709
- {isToolTipMounted ? (
710
- <ReactTooltip id='clone' type='error'>
711
- <span>{txtTootipIconClone}</span>
712
- </ReactTooltip>
713
- ) : null}
714
- </>
681
+ : null}
715
682
 
716
- :
717
683
 
718
- item.viewClone ?
684
+
685
+ {itemTd.viewClone ?
686
+
687
+ item.viewClone === undefined ?
719
688
 
720
689
  <>
721
690
  <span
@@ -727,7 +696,7 @@ export const RowTable = ({
727
696
  <>
728
697
  <Icon
729
698
  background="base"
730
- name="clone"
699
+ name="cloneDefault"
731
700
  onClick={e => { onClickActionClone(e, item) }}
732
701
  />
733
702
  <Horizontal size="xs" />
@@ -742,90 +711,333 @@ export const RowTable = ({
742
711
  ) : null}
743
712
  </>
744
713
 
745
- : null
714
+ :
746
715
 
747
- : null}
716
+ item.viewClone ?
748
717
 
718
+ <>
719
+ <span
720
+ data-tip
721
+ data-for='clone'
722
+ onMouseEnter={handleMouseEnter}
723
+ onMouseLeave={handleMouseLeave}
724
+ >
725
+ <>
726
+ <Icon
727
+ background="base"
728
+ name="clone"
729
+ onClick={e => { onClickActionClone(e, item) }}
730
+ />
731
+ <Horizontal size="xs" />
732
+ </>
733
+
734
+ </span>
735
+
736
+ {isToolTipMounted ? (
737
+ <ReactTooltip id='clone' type='error'>
738
+ <span>{txtTootipIconClone}</span>
739
+ </ReactTooltip>
740
+ ) : null}
741
+ </>
749
742
 
743
+ : null
750
744
 
751
- </td>
745
+ : null}
752
746
 
753
- :
747
+ {itemTd.viewUserView ?
754
748
 
755
- itemTd.subAccessor !== ''
749
+ item.viewUserView === undefined ?
756
750
 
757
- ?
751
+ <>
752
+ <span
753
+ data-tip
754
+ data-for='userView'
755
+ onMouseEnter={handleMouseEnter}
756
+ onMouseLeave={handleMouseLeave}
757
+ >
758
+ <>
759
+ <Icon
760
+ id="userView"
761
+ background="base"
762
+ name="userView"
763
+ onClick={(e) => { onClickActionUserView(e, item) }}
764
+ />
765
+ <Horizontal size="xs" />
766
+ </>
758
767
 
759
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
768
+ </span>
760
769
 
761
- :
770
+ {isToolTipMounted ? (
771
+ <ReactTooltip id='userView' type='error'>
772
+ <span>{txtTootipIconUserView}</span>
773
+ </ReactTooltip>
774
+ ) : null}
775
+ </>
762
776
 
763
- itemTd.typeFilter === 'date'
777
+ :
764
778
 
765
- ?
779
+ item.viewUserView ?
780
+
781
+ <>
782
+ <span
783
+ data-tip
784
+ data-for='userView'
785
+ onMouseEnter={handleMouseEnter}
786
+ onMouseLeave={handleMouseLeave}
787
+ >
788
+ <>
789
+ <Icon
790
+ id="userView"
791
+ background="base"
792
+ name="userView"
793
+ onClick={(e) => { onClickActionUserView(e, item) }}
794
+ />
795
+ <Horizontal size="xs" />
796
+ </>
797
+
798
+ </span>
799
+
800
+ {isToolTipMounted ? (
801
+ <ReactTooltip id='userView' type='error'>
802
+ <span>{txtTootipIconUserView}</span>
803
+ </ReactTooltip>
804
+ ) : null}
805
+ </>
766
806
 
767
- itemTd.typeFilterSub === 'date_only' ?
807
+ : null
768
808
 
769
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
770
- <Moment format="DD/MM/YYYY">
771
- {item[itemTd.accessor]}
772
- </Moment>
773
- </td>
809
+ : null}
774
810
 
775
- :
776
811
 
777
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
778
- {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
779
- <Moment format="DD/MM/YYYY HH:mm">
780
- {item[itemTd.accessor]}
781
- </Moment>
782
- </td>
812
+ {itemTd.viewFileDownload ?
813
+
814
+ item.viewFileDownload === undefined ?
815
+
816
+ <>
817
+ <span
818
+ data-tip
819
+ data-for='fileDownload'
820
+ onMouseEnter={handleMouseEnter}
821
+ onMouseLeave={handleMouseLeave}
822
+ >
823
+ <>
824
+ <Icon
825
+ id="fileDownload"
826
+ background="base"
827
+ name="fileDownload"
828
+ onClick={(e) => { onClickActionFileDownload(e, item) }}
829
+ />
830
+ <Horizontal size="xs" />
831
+ </>
832
+
833
+ </span>
834
+
835
+ {isToolTipMounted ? (
836
+ <ReactTooltip id='fileDownload' type='error'>
837
+ <span>{txtTootipIconFileDownload}</span>
838
+ </ReactTooltip>
839
+ ) : null}
840
+ </>
841
+
842
+ :
843
+
844
+ item.viewFileDownload ?
845
+
846
+ <>
847
+ <span
848
+ data-tip
849
+ data-for='fileDownload'
850
+ onMouseEnter={handleMouseEnter}
851
+ onMouseLeave={handleMouseLeave}
852
+ >
853
+ <>
854
+ <Icon
855
+ id="fileDownload"
856
+ background="base"
857
+ name="fileDownload"
858
+ onClick={(e) => { onClickActionFileDownload(e, item) }}
859
+ />
860
+ <Horizontal size="xs" />
861
+ </>
862
+
863
+ </span>
864
+
865
+ {isToolTipMounted ? (
866
+ <ReactTooltip id='fileDownload' type='error'>
867
+ <span>{txtTootipIconFileDownload}</span>
868
+ </ReactTooltip>
869
+ ) : null}
870
+ </>
871
+
872
+ : null
873
+
874
+ : null}
875
+
876
+
877
+
878
+
879
+ {itemTd.viewCheckbox ?
880
+
881
+ item.viewCheckbox === undefined ?
882
+
883
+ <>
884
+ <span
885
+ data-tip
886
+ data-for='checkbox'
887
+ onMouseEnter={handleMouseEnter}
888
+ onMouseLeave={handleMouseLeave}
889
+ >
890
+ <>
891
+
892
+ <Toggle
893
+ id={'idToggle' + item.id}
894
+ checked={item.isSelected}
895
+ label=""
896
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
897
+ />
898
+
899
+ {/* <Horizontal size="xs" /> */}
900
+ </>
901
+
902
+ </span>
903
+
904
+ {isToolTipMounted ? (
905
+ <ReactTooltip id='checkbox' type='error'>
906
+ <span>{txtTootipIconCheckbox}</span>
907
+ </ReactTooltip>
908
+ ) : null}
909
+ </>
910
+
911
+ :
912
+
913
+ item.viewCheckbox ?
914
+
915
+ <>
916
+ <span
917
+ data-tip
918
+ data-for='checkbox'
919
+ onMouseEnter={handleMouseEnter}
920
+ onMouseLeave={handleMouseLeave}
921
+ >
922
+ <>
923
+ <Toggle
924
+ id={'idToggle' + item.id}
925
+ checked={item.isSelected}
926
+ label=""
927
+ onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
928
+ />
929
+
930
+ {/* <Horizontal size="xs" /> */}
931
+ </>
932
+
933
+ </span>
934
+
935
+ {isToolTipMounted ? (
936
+ <ReactTooltip id='checkbox' type='error'>
937
+ <span>{txtTootipIconCheckbox}</span>
938
+ </ReactTooltip>
939
+ ) : null}
940
+ </>
941
+
942
+ : null
943
+
944
+ : null}
945
+
946
+
947
+
948
+
949
+
950
+
951
+
952
+
953
+ </td>
954
+
955
+ :
956
+
957
+ itemTd.subAccessor !== ''
958
+
959
+ ?
960
+
961
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor][itemTd.subAccessor]}</td>
962
+
783
963
  :
784
964
 
785
- itemTd.typeFilter === 'select'
965
+ itemTd.typeFilter === 'date'
786
966
 
787
967
  ?
788
968
 
789
- itemTd.optionsSelect.map((itemSelect, indexSelect) => (
969
+ itemTd.typeFilterSub === 'date_only' ?
790
970
 
971
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
791
972
 
792
- item[itemTd.accessor] === itemSelect.value ?
973
+ {item[itemTd.accessor] ? (
793
974
 
794
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
795
- {itemSelect.label}
796
- </td>
975
+ <Moment format="DD/MM/YYYY">
976
+ {item[itemTd.accessor]}
977
+ </Moment>
797
978
 
798
- :
979
+ ) : null}
980
+
981
+ </td>
799
982
 
800
- null
801
- ))
983
+ :
984
+
985
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
986
+ {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
987
+ {item[itemTd.accessor] ? (
988
+
989
+ <Moment format="DD/MM/YYYY HH:mm">
990
+ {item[itemTd.accessor]}
991
+ </Moment>
802
992
 
993
+ ) : null}
994
+ </td>
803
995
  :
804
996
 
805
- itemTd.typeFilter === 'number'
997
+ itemTd.typeFilter === 'select'
806
998
 
807
999
  ?
808
1000
 
809
- itemTd.subTypeFilter
1001
+ itemTd.optionsSelect.map((itemSelect, indexSelect) => (
810
1002
 
811
- ?
812
1003
 
813
- itemTd.characterExtra === 'km'
814
- ?
815
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1004
+ item[itemTd.accessor] === itemSelect.value ?
1005
+
1006
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index) + indexSelect}>
1007
+ {itemSelect.label}
1008
+ </td>
1009
+
816
1010
  :
817
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
818
- :
819
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1011
+
1012
+ null
1013
+ ))
820
1014
 
821
1015
  :
822
1016
 
823
- itemTd.subTypeFilter
1017
+ itemTd.typeFilter === 'number'
824
1018
 
825
1019
  ?
826
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1020
+
1021
+ itemTd.subTypeFilter
1022
+
1023
+ ?
1024
+
1025
+ itemTd.characterExtra === 'km'
1026
+ ?
1027
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1028
+ :
1029
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1030
+ :
1031
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1032
+
827
1033
  :
828
- <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
1034
+
1035
+ itemTd.subTypeFilter
1036
+
1037
+ ?
1038
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{Number(item[itemTd.accessor]).toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
1039
+ :
1040
+ <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
829
1041
 
830
1042
  // <>
831
1043
 
@@ -857,8 +1069,9 @@ export const RowTable = ({
857
1069
  ))}
858
1070
  </tr>
859
1071
 
860
- ))}
861
- </tbody>
1072
+ ))
1073
+ }
1074
+ </tbody >
862
1075
  // </table>
863
1076
 
864
1077
  // </div>
@@ -881,6 +1094,7 @@ RowTable.propTypes = {
881
1094
  onClickActionDelete: PropTypes.func,
882
1095
  onClickActionLink: PropTypes.func,
883
1096
  onClickActionClone: PropTypes.func,
1097
+ onClickActionCheckbox: PropTypes.func,
884
1098
  txtTootipIconUserView: PropTypes.string,
885
1099
  txtTootipIconListInvoice: PropTypes.string,
886
1100
  txtTootipIconListListXLS: PropTypes.string,
@@ -891,6 +1105,7 @@ RowTable.propTypes = {
891
1105
  txtTootipIconDelete: PropTypes.string,
892
1106
  txtTootipIconLink: PropTypes.string,
893
1107
  txtTootipIconClone: PropTypes.string,
1108
+ txtTootipIconCheckbox: PropTypes.string,
894
1109
  colorRow: PropTypes.string,
895
1110
  isCheckedCheckbox: PropTypes.bool
896
1111
  }
@@ -910,6 +1125,7 @@ RowTable.defaultProps = {
910
1125
  onClickActionDelete: () => { },
911
1126
  onClickActionLink: () => { },
912
1127
  onClickActionClone: () => { },
1128
+ onClickActionCheckbox: () => { },
913
1129
  txtTootipIconUserView: '',
914
1130
  txtTootipIconListInvoice: '',
915
1131
  txtTootipIconListListXLS: '',
@@ -920,6 +1136,7 @@ RowTable.defaultProps = {
920
1136
  txtTootipIconDelete: '',
921
1137
  txtTootipIconLink: '',
922
1138
  txtTootipIconClone: '',
1139
+ txtTootipIconCheckbox: '',
923
1140
 
924
1141
  isCheckedCheckbox: false
925
1142