Passed
Push — master ( bd1cbf...6677f6 )
by Guangyu
04:38 queued 10s
created

src/components/MyEMS/FDD/StoreFault.js   A

Complexity

Total Complexity 15
Complexity/F 0

Size

Lines of Code 898
Function Count 0

Duplication

Duplicated Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
wmc 15
eloc 795
mnd 15
bc 15
fnc 0
dl 0
loc 898
rs 9.805
bpm 0
cpm 0
noi 0
c 0
b 0
f 0
1
import React, { createRef, Fragment, useEffect, useState } from 'react';
2
import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
3
import BootstrapTable from 'react-bootstrap-table-next';
4
import {
5
  Breadcrumb,
6
  BreadcrumbItem,
7
  Row,
8
  Col,
9
  Card,
10
  CardBody,
11
  Button,
12
  ButtonGroup,
13
  Form,
14
  FormGroup,
15
  Input,
16
  Label,
17
  CustomInput,
18
  DropdownItem,
19
  DropdownMenu,
20
  DropdownToggle,
21
  InputGroup,
22
  UncontrolledDropdown
23
} from 'reactstrap';
24
import Datetime from 'react-datetime';
25
import moment from 'moment';
26
import Cascader from 'rc-cascader';
27
import ButtonIcon from '../../common/ButtonIcon';
28
import { Link } from 'react-router-dom';
29
import Badge from 'reactstrap/es/Badge';
30
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
31
import FalconCardHeader from '../../common/FalconCardHeader';
32
import uuid from 'uuid/v1';
33
import { getPaginationArray } from '../../../helpers/utils';
34
import { getCookieValue, createCookie } from '../../../helpers/utils';
35
import withRedirect from '../../../hoc/withRedirect';
36
import { withTranslation } from 'react-i18next';
37
import { toast } from 'react-toastify';
38
import { APIBaseURL } from '../../../config';
39
40
41
const StoreFault = ({ setRedirect, setRedirectUrl, t }) => {
42
  let current_moment = moment();
43
  useEffect(() => {
44
    let is_logged_in = getCookieValue('is_logged_in');
45
    let user_name = getCookieValue('user_name');
46
    let user_display_name = getCookieValue('user_display_name');
47
    let user_uuid = getCookieValue('user_uuid');
48
    let token = getCookieValue('token');
49
    if (is_logged_in === null || !is_logged_in) {
50
      setRedirectUrl(`/authentication/basic/login`);
51
      setRedirect(true);
52
    } else {
53
      //update expires time of cookies
54
      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
55
      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
56
      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
57
      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
58
      createCookie('token', token, 1000 * 60 * 60 * 8);
59
    }
60
  });
61
  // State
62
  // Query Parameters
63
  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
64
  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
65
  const [storeList, setStoreList] = useState([]);
66
  const [selectedStore, setSelectedStore] = useState(undefined);
67
  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
68
  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
69
  const [cascaderOptions, setCascaderOptions] = useState(undefined);
70
  const [isDisabled, setIsDisabled] = useState(true);
71
  //Results
72
  const [detailedDataTableData, setDetailedDataTableData] = useState([]);
73
  const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
74
75
  useEffect(() => {
76
    let isResponseOK = false;
77
    fetch(APIBaseURL + '/spaces/tree', {
78
      method: 'GET',
79
      headers: {
80
        "Content-type": "application/json",
81
        "User-UUID": getCookieValue('user_uuid'),
82
        "Token": getCookieValue('token')
83
      },
84
      body: null,
85
86
    }).then(response => {
87
      console.log(response)
88
      if (response.ok) {
89
        isResponseOK = true;
90
      }
91
      return response.json();
92
    }).then(json => {
93
      console.log(json)
94
      if (isResponseOK) {
95
        // rename keys 
96
        json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
97
        setCascaderOptions(json);
98
        setSelectedSpaceName([json[0]].map(o => o.label));
99
        setSelectedSpaceID([json[0]].map(o => o.value));
100
        // get Stores by root Space ID
101
        let isResponseOK = false;
102
        fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/stores', {
103
          method: 'GET',
104
          headers: {
105
            "Content-type": "application/json",
106
            "User-UUID": getCookieValue('user_uuid'),
107
            "Token": getCookieValue('token')
108
          },
109
          body: null,
110
111
        }).then(response => {
112
          if (response.ok) {
113
            isResponseOK = true;
114
          }
115
          return response.json();
116
        }).then(json => {
117
          if (isResponseOK) {
118
            json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
119
            console.log(json);
120
            setStoreList(json[0]);
121
            if (json[0].length > 0) {
122
              setSelectedStore(json[0][0].value);
123
              setIsDisabled(false);
124
            } else {
125
              setSelectedStore(undefined);
126
              setIsDisabled(true);
127
            }
128
          } else {
129
            toast.error(json.description)
130
          }
131
        }).catch(err => {
132
          console.log(err);
133
        });
134
        // end of get Stores by root Space ID
135
      } else {
136
        toast.error(json.description)
137
      }
138
    }).catch(err => {
139
      console.log(err);
140
    });
141
142
  }, []);
143
  const orderFormatter = (dataField, { id, name, email }) => (
144
    <Fragment>
145
      <Link to="/e-commerce/order-details">
146
        <strong>#{id}</strong>
147
      </Link>{' '}
148
      by <strong>{name}</strong>
149
      <br />
150
      <a href={`mailto:${email}`}>{email}</a>
151
    </Fragment>
152
  );
153
154
  const shippingFormatter = (address, { shippingType }) => (
155
    <Fragment>
156
      {address}
157
      <p className="mb-0 text-500">{shippingType}</p>
158
    </Fragment>
159
  );
160
161
  const badgeFormatter = status => {
162
    let color = '';
163
    let icon = '';
164
    let text = '';
165
    switch (status) {
166
      case 'success':
167
        color = 'success';
168
        icon = 'check';
169
        text = 'Completed';
170
        break;
171
      case 'hold':
172
        color = 'secondary';
173
        icon = 'ban';
174
        text = 'On hold';
175
        break;
176
      case 'processing':
177
        color = 'primary';
178
        icon = 'redo';
179
        text = 'Processing';
180
        break;
181
      case 'pending':
182
        color = 'warning';
183
        icon = 'stream';
184
        text = 'Pending';
185
        break;
186
      default:
187
        color = 'warning';
188
        icon = 'stream';
189
        text = 'Pending';
190
    }
191
192
    return (
193
      <Badge color={`soft-${color}`} className="rounded-capsule fs--1 d-block">
194
        {text}
195
        <FontAwesomeIcon icon={icon} transform="shrink-2" className="ml-1" />
196
      </Badge>
197
    );
198
  };
199
200
  const actionFormatter = (dataField, { id }) => (
201
    // Control your row with this id
202
    <UncontrolledDropdown>
203
      <DropdownToggle color="link" size="sm" className="text-600 btn-reveal mr-3">
204
        <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
205
      </DropdownToggle>
206
      <DropdownMenu right className="border py-2">
207
        <DropdownItem onClick={() => console.log('Completed: ', id)}>Completed</DropdownItem>
208
        <DropdownItem onClick={() => console.log('Processing: ', id)}>Processing</DropdownItem>
209
        <DropdownItem onClick={() => console.log('On hold: ', id)}>On hold</DropdownItem>
210
        <DropdownItem onClick={() => console.log('Pending: ', id)}>Pending</DropdownItem>
211
        <DropdownItem divider />
212
        <DropdownItem onClick={() => console.log('Delete: ', id)} className="text-danger">
213
          Delete
214
        </DropdownItem>
215
      </DropdownMenu>
216
    </UncontrolledDropdown>
217
  );
218
219
  const options = {
220
    custom: true,
221
    sizePerPage: 10,
222
    totalSize: detailedDataTableData.length
223
  };
224
225
  const SelectRowInput = ({ indeterminate, rowIndex, ...rest }) => (
226
    <div className="custom-control custom-checkbox">
227
      <input
228
        className="custom-control-input"
229
        {...rest}
230
        onChange={() => { }}
231
        ref={input => {
232
          if (input) input.indeterminate = indeterminate;
233
        }}
234
      />
235
      <label className="custom-control-label" />
236
    </div>
237
  );
238
239
  const selectRow = onSelect => ({
240
    mode: 'checkbox',
241
    classes: 'py-2 align-middle',
242
    clickToSelect: false,
243
    selectionHeaderRenderer: ({ mode, ...rest }) => <SelectRowInput type="checkbox" {...rest} />,
244
    selectionRenderer: ({ mode, ...rest }) => <SelectRowInput type={mode} {...rest} />,
245
    onSelect: onSelect,
246
    onSelectAll: onSelect
247
  });
248
  
249
  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
250
251
  let table = createRef();
252
253
  const [isSelected, setIsSelected] = useState(false);
254
  const handleNextPage = ({ page, onPageChange }) => () => {
255
    onPageChange(page + 1);
256
  };
257
258
  const handlePrevPage = ({ page, onPageChange }) => () => {
259
    onPageChange(page - 1);
260
  };
261
262
  const onSelect = () => {
263
    setImmediate(() => {
264
      setIsSelected(!!table.current.selectionContext.selected.length);
265
    });
266
  };
267
268
  let onSpaceCascaderChange = (value, selectedOptions) => {
269
    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
270
    setSelectedSpaceID(value[value.length - 1]);
271
272
    let isResponseOK = false;
273
    fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/stores', {
274
      method: 'GET',
275
      headers: {
276
        "Content-type": "application/json",
277
        "User-UUID": getCookieValue('user_uuid'),
278
        "Token": getCookieValue('token')
279
      },
280
      body: null,
281
282
    }).then(response => {
283
      if (response.ok) {
284
        isResponseOK = true;
285
      }
286
      return response.json();
287
    }).then(json => {
288
      if (isResponseOK) {
289
        json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
290
        console.log(json)
291
        setStoreList(json[0]);
292
        if (json[0].length > 0) {
293
          setSelectedStore(json[0][0].value);
294
          setIsDisabled(false);
295
        } else {
296
          setSelectedStore(undefined);
297
          setIsDisabled(true);
298
        }
299
      } else {
300
        toast.error(json.description)
301
      }
302
    }).catch(err => {
303
      console.log(err);
304
    });
305
  }
306
  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
307
    setReportingPeriodBeginsDatetime(newDateTime);
308
  }
309
310
  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
311
    setReportingPeriodEndsDatetime(newDateTime);
312
  }
313
314
  var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
315
    return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
316
  }
317
318
  var getValidReportingPeriodEndsDatetimes = function (currentDate) {
319
    return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
320
  }
321
322
  // Handler
323
  const handleSubmit = e => {
324
    e.preventDefault();
325
    console.log('handleSubmit');
326
    console.log(selectedSpaceID);
327
    console.log(selectedStore);
328
    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
329
    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
330
331
    // Reinitialize tables
332
    setDetailedDataTableData([]);
333
    
334
    let isResponseOK = false;
335
    fetch(APIBaseURL + '/reports/fddstorefault?' +
336
      'storeid' + selectedStore +
337
      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
338
      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
339
      method: 'GET',
340
      headers: {
341
        "Content-type": "application/json",
342
        "User-UUID": getCookieValue('user_uuid'),
343
        "Token": getCookieValue('token')
344
      },
345
      body: null,
346
347
    }).then(response => {
348
      if (response.ok) {
349
        isResponseOK = true;
350
      }
351
      return response.json();
352
    }).then(json => {
353
      if (isResponseOK) {
354
        console.log(json);
355
        setDetailedDataTableData([
356
          {
357
            id: uuid().split('-')[0],
358
            // id: 181,
359
            name: 'Ricky Antony',
360
            email: '[email protected]',
361
            date: '20/04/2019',
362
            address: 'Ricky Antony, 2392 Main Avenue, Penasauka, New Jersey 02149',
363
            shippingType: 'Via Flat Rate',
364
            status: 'success',
365
            amount: 99
366
          },
367
          {
368
            id: uuid().split('-')[0],
369
            // id: 182,
370
            name: 'Kin Rossow',
371
            email: '[email protected]',
372
            date: '20/04/2019',
373
            address: 'Kin Rossow, 1 Hollywood Blvd,Beverly Hills, California 90210',
374
            shippingType: 'Via Free Shipping',
375
            status: 'success',
376
            amount: 120
377
          },
378
          {
379
            id: uuid().split('-')[0],
380
            // id: 183,
381
            name: 'Merry Diana',
382
            email: '[email protected]',
383
            date: '30/04/2019',
384
            address: 'Merry Diana, 1 Infinite Loop, Cupertino, California 90210',
385
            shippingType: 'Via Link Road',
386
            status: 'hold',
387
            amount: 70
388
          },
389
          {
390
            id: uuid().split('-')[0],
391
            // id: 184,
392
            name: 'Bucky Robert',
393
            email: '[email protected]',
394
            date: '30/04/2019',
395
            address: 'Bucky Robert, 1 Infinite Loop, Cupertino, California 90210',
396
            shippingType: 'Via Free Shipping',
397
            status: 'pending',
398
            amount: 92
399
          },
400
          {
401
            id: uuid().split('-')[0],
402
            // id: 185,
403
            name: 'Rocky Zampa',
404
            email: '[email protected]',
405
            date: '30/04/2019',
406
            address: 'Rocky Zampa, 1 Infinite Loop, Cupertino, California 90210',
407
            shippingType: 'Via Free Road',
408
            status: 'hold',
409
            amount: 120
410
          },
411
          {
412
            id: uuid().split('-')[0],
413
            // id: 186,
414
            name: 'Ricky John',
415
            email: '[email protected]',
416
            date: '30/04/2019',
417
            address: 'Ricky John, 1 Infinite Loop, Cupertino, California 90210',
418
            shippingType: 'Via Free Shipping',
419
            status: 'processing',
420
            amount: 145
421
          },
422
          {
423
            id: uuid().split('-')[0],
424
            // id: 187,
425
            name: 'Cristofer Henric',
426
            email: '[email protected]',
427
            date: '30/04/2019',
428
            address: 'Cristofer Henric, 1 Infinite Loop, Cupertino, California 90210',
429
            shippingType: 'Via Flat Rate',
430
            status: 'success',
431
            amount: 55
432
          },
433
          {
434
            id: uuid().split('-')[0],
435
            // id: 188,
436
            name: 'Brate Lee',
437
            email: '[email protected]',
438
            date: '29/04/2019',
439
            address: 'Brate Lee, 1 Infinite Loop, Cupertino, California 90210',
440
            shippingType: 'Via Link Road',
441
            status: 'hold',
442
            amount: 90
443
          },
444
          {
445
            id: uuid().split('-')[0],
446
            // id: 189,
447
            name: 'Thomas Stephenson',
448
            email: '[email protected]',
449
            date: '29/04/2019',
450
            address: 'Thomas Stephenson, 116 Ballifeary Road, Bamff',
451
            shippingType: 'Via Flat Rate',
452
            status: 'processing',
453
            amount: 52
454
          },
455
          {
456
            id: uuid().split('-')[0],
457
            // id: 190,
458
            name: 'Evie Singh',
459
            email: '[email protected]',
460
            date: '29/04/2019',
461
            address: 'Evie Singh, 54 Castledore Road, Tunstead',
462
            shippingType: 'Via Flat Rate',
463
            status: 'success',
464
            amount: 90
465
          },
466
          {
467
            id: uuid().split('-')[0],
468
            // id: 191,
469
            name: 'David Peters',
470
            email: '[email protected]',
471
            date: '29/04/2019',
472
            address: 'David Peters, Rhyd Y Groes, Rhosgoch, LL66 0AT',
473
            shippingType: 'Via Link Road',
474
            status: 'success',
475
            amount: 69
476
          },
477
          {
478
            id: uuid().split('-')[0],
479
            // id: 192,
480
            name: 'Jennifer Johnson',
481
            email: '[email protected]',
482
            date: '28/04/2019',
483
            address: 'Jennifer Johnson, Rhyd Y Groes, Rhosgoch, LL66 0AT',
484
            shippingType: 'Via Flat Rate',
485
            status: 'processing',
486
            amount: 112
487
          },
488
          {
489
            id: uuid().split('-')[0],
490
            // id: 193,
491
            name: ' Demarcus Okuneva',
492
            email: '[email protected]',
493
            date: '28/04/2019',
494
            address: ' Demarcus Okuneva, 90555 Upton Drive Jeffreyview, UT 08771',
495
            shippingType: 'Via Flat Rate',
496
            status: 'success',
497
            amount: 99
498
          },
499
          {
500
            id: uuid().split('-')[0],
501
            // id: 194,
502
            name: 'Simeon Harber',
503
            email: '[email protected]',
504
            date: '27/04/2019',
505
            address: 'Simeon Harber, 702 Kunde Plain Apt. 634 East Bridgetview, HI 13134-1862',
506
            shippingType: 'Via Free Shipping',
507
            status: 'hold',
508
            amount: 129
509
          },
510
          {
511
            id: uuid().split('-')[0],
512
            // id: 195,
513
            name: 'Lavon Haley',
514
            email: '[email protected]',
515
            date: '27/04/2019',
516
            address: 'Lavon Haley, 30998 Adonis Locks McGlynnside, ID 27241',
517
            shippingType: 'Via Free Shipping',
518
            status: 'pending',
519
            amount: 70
520
          },
521
          {
522
            id: uuid().split('-')[0],
523
            // id: 196,
524
            name: 'Ashley Kirlin',
525
            email: '[email protected]',
526
            date: '26/04/2019',
527
            address: 'Ashley Kirlin, 43304 Prosacco Shore South Dejuanfurt, MO 18623-0505',
528
            shippingType: 'Via Link Road',
529
            status: 'processing',
530
            amount: 39
531
          },
532
          {
533
            id: uuid().split('-')[0],
534
            // id: 197,
535
            name: 'Johnnie Considine',
536
            email: '[email protected]',
537
            date: '26/04/2019',
538
            address: 'Johnnie Considine, 6008 Hermann Points Suite 294 Hansenville, TN 14210',
539
            shippingType: 'Via Flat Rate',
540
            status: 'pending',
541
            amount: 70
542
          },
543
          {
544
            id: uuid().split('-')[0],
545
            // id: 198,
546
            name: 'Trace Farrell',
547
            email: '[email protected]',
548
            date: '26/04/2019',
549
            address: 'Trace Farrell, 431 Steuber Mews Apt. 252 Germanland, AK 25882',
550
            shippingType: 'Via Free Shipping',
551
            status: 'success',
552
            amount: 70
553
          },
554
          {
555
            id: uuid().split('-')[0],
556
            // id: 199,
557
            name: 'Estell Nienow',
558
            email: '[email protected]',
559
            date: '26/04/2019',
560
            address: 'Estell Nienow, 4167 Laverna Manor Marysemouth, NV 74590',
561
            shippingType: 'Via Free Shipping',
562
            status: 'success',
563
            amount: 59
564
          },
565
          {
566
            id: uuid().split('-')[0],
567
            // id: 200,
568
            name: 'Daisha Howe',
569
            email: '[email protected]',
570
            date: '25/04/2019',
571
            address: 'Daisha Howe, 829 Lavonne Valley Apt. 074 Stehrfort, RI 77914-0379',
572
            shippingType: 'Via Free Shipping',
573
            status: 'success',
574
            amount: 39
575
          },
576
          {
577
            id: uuid().split('-')[0],
578
            // id: 201,
579
            name: 'Miles Haley',
580
            email: '[email protected]',
581
            date: '24/04/2019',
582
            address: 'Miles Haley, 53150 Thad Squares Apt. 263 Archibaldfort, MO 00837',
583
            shippingType: 'Via Flat Rate',
584
            status: 'success',
585
            amount: 55
586
          },
587
          {
588
            id: uuid().split('-')[0],
589
            // id: 202,
590
            name: 'Brenda Watsica',
591
            email: '[email protected]',
592
            date: '24/04/2019',
593
            address: "Brenda Watsica, 9198 O'Kon Harbors Morarborough, IA 75409-7383",
594
            shippingType: 'Via Free Shipping',
595
            status: 'success',
596
            amount: 89
597
          },
598
          {
599
            id: uuid().split('-')[0],
600
            // id: 203,
601
            name: "Ellie O'Reilly",
602
            email: '[email protected]',
603
            date: '24/04/2019',
604
            address: "Ellie O'Reilly, 1478 Kaitlin Haven Apt. 061 Lake Muhammadmouth, SC 35848",
605
            shippingType: 'Via Free Shipping',
606
            status: 'success',
607
            amount: 47
608
          },
609
          {
610
            id: uuid().split('-')[0],
611
            // id: 204,
612
            name: 'Garry Brainstrow',
613
            email: '[email protected]',
614
            date: '23/04/2019',
615
            address: 'Garry Brainstrow, 13572 Kurt Mews South Merritt, IA 52491',
616
            shippingType: 'Via Free Shipping',
617
            status: 'success',
618
            amount: 139
619
          },
620
          {
621
            id: uuid().split('-')[0],
622
            // id: 205,
623
            name: 'Estell Pollich',
624
            email: '[email protected]',
625
            date: '23/04/2019',
626
            address: 'Estell Pollich, 13572 Kurt Mews South Merritt, IA 52491',
627
            shippingType: 'Via Free Shipping',
628
            status: 'hold',
629
            amount: 49
630
          },
631
          {
632
            id: uuid().split('-')[0],
633
            // id: 206,
634
            name: 'Ara Mueller',
635
            email: '[email protected]',
636
            date: '23/04/2019',
637
            address: 'Ara Mueller, 91979 Kohler Place Waelchiborough, CT 41291',
638
            shippingType: 'Via Flat Rate',
639
            status: 'hold',
640
            amount: 19
641
          },
642
          {
643
            id: uuid().split('-')[0],
644
            // id: 207,
645
            name: 'Lucienne Blick',
646
            email: '[email protected]',
647
            date: '23/04/2019',
648
            address: 'Lucienne Blick, 6757 Giuseppe Meadows Geraldinemouth, MO 48819-4970',
649
            shippingType: 'Via Flat Rate',
650
            status: 'hold',
651
            amount: 59
652
          },
653
          {
654
            id: uuid().split('-')[0],
655
            // id: 208,
656
            name: 'Laverne Haag',
657
            email: '[email protected]',
658
            date: '22/04/2019',
659
            address: 'Laverne Haag, 2327 Kaylee Mill East Citlalli, AZ 89582-3143',
660
            shippingType: 'Via Flat Rate',
661
            status: 'hold',
662
            amount: 49
663
          },
664
          {
665
            id: uuid().split('-')[0],
666
            // id: 209,
667
            name: 'Brandon Bednar',
668
            email: '[email protected]',
669
            date: '22/04/2019',
670
            address: 'Brandon Bednar, 25156 Isaac Crossing Apt. 810 Lonborough, CO 83774-5999',
671
            shippingType: 'Via Flat Rate',
672
            status: 'hold',
673
            amount: 39
674
          },
675
          {
676
            id: uuid().split('-')[0],
677
            // id: 210,
678
            name: 'Dimitri Boehm',
679
            email: '[email protected]',
680
            date: '23/04/2019',
681
            address: 'Dimitri Boehm, 71603 Wolff Plains Apt. 885 Johnstonton, MI 01581',
682
            shippingType: 'Via Flat Rate',
683
            status: 'hold',
684
            amount: 111
685
          }
686
        ]);
687
688
        setDetailedDataTableColumns([
689
          {
690
            dataField: 'id',
691
            text: 'Space',
692
            classes: 'py-2 align-middle',
693
            formatter: orderFormatter,
694
            sort: true
695
          },
696
          {
697
            dataField: 'date',
698
            text: 'Date',
699
            classes: 'py-2 align-middle',
700
            sort: true
701
          },
702
          {
703
            dataField: 'address',
704
            text: 'Description',
705
            classes: 'py-2 align-middle',
706
            formatter: shippingFormatter,
707
            sort: true
708
          },
709
          {
710
            dataField: 'status',
711
            text: 'Status',
712
            classes: 'py-2 align-middle',
713
            formatter: badgeFormatter,
714
            sort: true
715
          },
716
          {
717
            dataField: '',
718
            text: '',
719
            classes: 'py-2 align-middle',
720
            formatter: actionFormatter,
721
            align: 'right'
722
          }
723
        ]);   
724
725
      } else {
726
        toast.error(json.description)
727
      }
728
    }).catch(err => {
729
      console.log(err);
730
    });
731
  };
732
733
734
  return (
735
    <Fragment>
736
      <div>
737
        <Breadcrumb>
738
          <BreadcrumbItem>{t('Fault Detection & Diagnostics')}</BreadcrumbItem><BreadcrumbItem active>{t('Store Faults Data')}</BreadcrumbItem>
739
        </Breadcrumb>
740
      </div>
741
      <Card className="bg-light mb-3">
742
        <CardBody className="p-3">
743
          <Form onSubmit={handleSubmit}>
744
            <Row form>
745
              <Col xs="auto">
746
                <FormGroup className="form-group">
747
                  <Label className={labelClasses} for="space">
748
                    {t('Space')}
749
                  </Label>
750
                  <br />
751
                  <Cascader options={cascaderOptions}
752
                    onChange={onSpaceCascaderChange}
753
                    changeOnSelect
754
                    expandTrigger="hover">
755
                    <Input value={selectedSpaceName || ''} readOnly />
756
                  </Cascader>
757
                </FormGroup>
758
              </Col>
759
              <Col xs="auto">
760
                <FormGroup>
761
                  <Label className={labelClasses} for="storeSelect">
762
                    {t('Store')}
763
                  </Label>
764
                  <CustomInput type="select" id="storeSelect" name="storeSelect" onChange={({ target }) => setSelectedStore(target.value)}
765
                  >
766
                    {storeList.map((store, index) => (
767
                      <option value={store.value} key={store.value}>
768
                        {store.label}
769
                      </option>
770
                    ))}
771
                  </CustomInput>
772
                </FormGroup>
773
              </Col>
774
              <Col xs="auto">
775
                <FormGroup className="form-group">
776
                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
777
                    {t('Reporting Period Begins')}
778
                  </Label>
779
                  <Datetime id='reportingPeriodBeginsDatetime'
780
                    value={reportingPeriodBeginsDatetime}
781
                    onChange={onReportingPeriodBeginsDatetimeChange}
782
                    isValidDate={getValidReportingPeriodBeginsDatetimes}
783
                    closeOnSelect={true} />
784
                </FormGroup>
785
              </Col>
786
              <Col xs="auto">
787
                <FormGroup className="form-group">
788
                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
789
                    {t('Reporting Period Ends')}
790
                  </Label>
791
                  <Datetime id='reportingPeriodEndsDatetime'
792
                    value={reportingPeriodEndsDatetime}
793
                    onChange={onReportingPeriodEndsDatetimeChange}
794
                    isValidDate={getValidReportingPeriodEndsDatetimes}
795
                    closeOnSelect={true} />
796
                </FormGroup>
797
              </Col>
798
              <Col xs="auto">
799
                <FormGroup>
800
                  <br></br>
801
                  <ButtonGroup id="submit">
802
                    <Button color="success" disabled={isDisabled} >{t('Submit')}</Button>
803
                  </ButtonGroup>
804
                </FormGroup>
805
              </Col>
806
            </Row>
807
          </Form>
808
        </CardBody>
809
      </Card>
810
      <Card className="mb-3">
811
        <FalconCardHeader title={t('Fault List')} light={false}>
812
          {isSelected ? (
813
            <InputGroup size="sm" className="input-group input-group-sm">
814
              <CustomInput type="select" id="bulk-select">
815
                <option>Bulk actions</option>
816
                <option value="Refund">Refund</option>
817
                <option value="Delete">Delete</option>
818
                <option value="Archive">Archive</option>
819
              </CustomInput>
820
              <Button color="falcon-default" size="sm" className="ml-2">
821
                Apply
822
                </Button>
823
            </InputGroup>
824
          ) : (
825
              <Fragment>
826
                <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" size="sm">
827
                  {t('Export')}
828
                </ButtonIcon>
829
              </Fragment>
830
            )}
831
        </FalconCardHeader>
832
        <CardBody className="p-0">
833
          <PaginationProvider pagination={paginationFactory(options)}>
834
            {({ paginationProps, paginationTableProps }) => {
835
              const lastIndex = paginationProps.page * paginationProps.sizePerPage;
836
837
              return (
838
                <Fragment>
839
                  <div className="table-responsive">
840
                    <BootstrapTable
841
                      ref={table}
842
                      bootstrap4
843
                      keyField="id"
844
                      data={detailedDataTableData}
845
                      columns={detailedDataTableColumns}
846
                      selectRow={selectRow(onSelect)}
847
                      bordered={false}
848
                      classes="table-dashboard table-striped table-sm fs--1 border-bottom mb-0 table-dashboard-th-nowrap"
849
                      rowClasses="btn-reveal-trigger"
850
                      headerClasses="bg-200 text-900"
851
                      {...paginationTableProps}
852
                    />
853
                  </div>
854
                  <Row noGutters className="px-1 py-3 flex-center">
855
                    <Col xs="auto">
856
                      <Button
857
                        color="falcon-default"
858
                        size="sm"
859
                        onClick={handlePrevPage(paginationProps)}
860
                        disabled={paginationProps.page === 1}
861
                      >
862
                        <FontAwesomeIcon icon="chevron-left" />
863
                      </Button>
864
                      {getPaginationArray(paginationProps.totalSize, paginationProps.sizePerPage).map(pageNo => (
865
                        <Button
866
                          color={paginationProps.page === pageNo ? 'falcon-primary' : 'falcon-default'}
867
                          size="sm"
868
                          className="ml-2"
869
                          onClick={() => paginationProps.onPageChange(pageNo)}
870
                          key={pageNo}
871
                        >
872
                          {pageNo}
873
                        </Button>
874
                      ))}
875
                      <Button
876
                        color="falcon-default"
877
                        size="sm"
878
                        className="ml-2"
879
                        onClick={handleNextPage(paginationProps)}
880
                        disabled={lastIndex >= paginationProps.totalSize}
881
                      >
882
                        <FontAwesomeIcon icon="chevron-right" />
883
                      </Button>
884
                    </Col>
885
                  </Row>
886
                </Fragment>
887
              );
888
            }}
889
          </PaginationProvider>
890
        </CardBody>
891
      </Card>
892
893
    </Fragment>
894
  );
895
};
896
897
export default withTranslation()(withRedirect(StoreFault));
898