imbric-theme 0.9.0 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) 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/ColumnTable/ColumnTable.js +4 -3
  9. package/molecules/ColumnTable/ColumnTable.module.css +1 -0
  10. package/molecules/DatePicker/DatePicker.js +10 -4
  11. package/molecules/DynamicSelect/DynamicSelect.js +126 -32
  12. package/molecules/DynamicSelect/DynamicSelect.module.css +1 -1
  13. package/molecules/RowTable/RowTable.js +613 -396
  14. 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