|
1 | 1 | // Copyright (c) 2014 - 2023 UNICEF. All rights reserved. |
2 | 2 |
|
3 | | -import { Fragment } from "react"; |
4 | 3 | import { Grid } from "@mui/material"; |
5 | 4 | import PropTypes from "prop-types"; |
6 | 5 | import { fromJS } from "immutable"; |
7 | | -import { useDispatch } from "react-redux"; |
8 | | -import { push } from "connected-react-router"; |
9 | 6 |
|
10 | | -import { ROUTES } from "../../../config"; |
11 | | -import { buildFilter } from "../utils"; |
12 | 7 | import DoughnutChart from "../doughnut-chart"; |
13 | | -import { useI18n } from "../../i18n"; |
14 | | -import LoadingIndicator from "../../loading-indicator"; |
15 | | -import NAMESPACE from "../../pages/dashboard/namespace"; |
16 | | -import { useApp } from "../../application"; |
17 | | -import ActionButton from "../../action-button"; |
18 | 8 |
|
19 | 9 | import css from "./styles.css"; |
| 10 | +import IndicatorSection from "./indicator-section"; |
20 | 11 |
|
21 | 12 | function OverviewBox({ items, chartData, sumTitle, withTotal = true, loading, errors }) { |
22 | | - const i18n = useI18n(); |
23 | | - const { approvalsLabels } = useApp(); |
24 | | - const dispatch = useDispatch(); |
25 | 13 | const indicators = items.get("indicators", fromJS({})); |
26 | | - const indicatorsKeys = indicators.keySeq(); |
27 | | - |
28 | | - const loadingIndicatorProps = { |
29 | | - overlay: true, |
30 | | - hasData: indicators.size > 1, |
31 | | - type: NAMESPACE, |
32 | | - loading, |
33 | | - errors |
34 | | - }; |
35 | | - |
36 | | - const sum = () => { |
37 | | - return indicatorsKeys.reduce((prev, current) => prev + (indicators.getIn([current, "count"]) || 0), 0); |
38 | | - }; |
39 | | - |
40 | | - const handleClick = query => { |
41 | | - dispatch( |
42 | | - push({ |
43 | | - pathname: ROUTES.cases, |
44 | | - search: buildFilter(query) |
45 | | - }) |
46 | | - ); |
47 | | - }; |
48 | | - |
49 | | - const buildLabelItem = item => { |
50 | | - switch (item) { |
51 | | - case "approval_assessment_pending_group": |
52 | | - return approvalsLabels.get("assessment"); |
53 | | - case "approval_case_plan_pending_group": |
54 | | - return approvalsLabels.get("case_plan"); |
55 | | - case "approval_closure_pending_group": |
56 | | - return approvalsLabels.get("closure"); |
57 | | - case "approval_action_plan_pending_group": |
58 | | - return approvalsLabels.get("action_plan"); |
59 | | - case "approval_gbv_closure_pending_group": |
60 | | - return approvalsLabels.get("gbv_closure"); |
61 | | - default: |
62 | | - return i18n.t(`dashboard.${item}`); |
63 | | - } |
64 | | - }; |
65 | | - |
66 | | - const statItems = () => { |
67 | | - const handleButtonClick = query => () => handleClick(query); |
68 | | - |
69 | | - return indicators.keySeq().map(item => { |
70 | | - return ( |
71 | | - <Fragment key={item}> |
72 | | - <ActionButton |
73 | | - id={`overview-${item}-number`} |
74 | | - className={css.itemButtonNumber} |
75 | | - type="link" |
76 | | - text={indicators.getIn([item, "count"])} |
77 | | - onClick={handleButtonClick(indicators.getIn([item, "query"], []))} |
78 | | - noTranslate |
79 | | - /> |
80 | | - <ActionButton |
81 | | - id={`overview-${item}-text`} |
82 | | - className={css.itemButton} |
83 | | - type="link" |
84 | | - text={buildLabelItem(item)} |
85 | | - onClick={handleButtonClick(indicators.getIn([item, "query"], []))} |
86 | | - noTranslate |
87 | | - /> |
88 | | - </Fragment> |
89 | | - ); |
90 | | - }); |
91 | | - }; |
92 | | - |
93 | | - const renderSum = () => { |
94 | | - return withTotal ? `${sum()} ${sumTitle}` : sumTitle; |
95 | | - }; |
96 | | - |
97 | | - // eslint-disable-next-line react/no-multi-comp, react/display-name |
98 | | - const renderItems = () => ( |
99 | | - <LoadingIndicator {...loadingIndicatorProps}> |
100 | | - <div className={css.overviewBox} data-testid="overview-box"> |
101 | | - <div className={css.sectionTitle}>{renderSum()}</div> |
102 | | - <div className={css.overviewList}>{statItems()}</div> |
103 | | - </div> |
104 | | - </LoadingIndicator> |
| 14 | + const indicatorSection = ( |
| 15 | + <> |
| 16 | + <IndicatorSection |
| 17 | + indicators={indicators} |
| 18 | + loading={loading} |
| 19 | + errors={errors} |
| 20 | + sumTitle={sumTitle} |
| 21 | + withTotal={withTotal} |
| 22 | + /> |
| 23 | + </> |
105 | 24 | ); |
106 | 25 |
|
107 | | - // eslint-disable-next-line react/no-multi-comp, react/display-name |
108 | | - const renderWithChart = () => ( |
109 | | - <div className={css.root} data-testid="overview-box"> |
110 | | - <Grid container spacing={3}> |
111 | | - {chartData && ( |
112 | | - <Grid item md={4} xs={12} className={css.dashboardChart}> |
113 | | - <DoughnutChart chartData={chartData} /> |
| 26 | + if (chartData) { |
| 27 | + return ( |
| 28 | + <div className={css.root} data-testid="overview-box"> |
| 29 | + <Grid container spacing={3}> |
| 30 | + {chartData && ( |
| 31 | + <Grid item md={4} xs={12} className={css.dashboardChart}> |
| 32 | + <DoughnutChart chartData={chartData} /> |
| 33 | + </Grid> |
| 34 | + )} |
| 35 | + <Grid item md={8} xs={12}> |
| 36 | + {indicatorSection} |
114 | 37 | </Grid> |
115 | | - )} |
116 | | - <Grid item md={8} xs={12}> |
117 | | - {renderItems()} |
118 | 38 | </Grid> |
119 | | - </Grid> |
120 | | - </div> |
121 | | - ); |
122 | | - |
123 | | - const renderOverviewBox = chartData ? renderWithChart() : renderItems(); |
| 39 | + </div> |
| 40 | + ); |
| 41 | + } |
124 | 42 |
|
125 | | - return <>{renderOverviewBox}</>; |
| 43 | + return indicatorSection; |
126 | 44 | } |
127 | 45 |
|
128 | 46 | OverviewBox.displayName = "OverviewBox"; |
|
0 commit comments