Skip to content

Commit 801ec3c

Browse files
tnagorratnagorra
committed
Hide buttons on national society indicators if no data
- Update descriptions on dref import template - Add fallback color for ProgressBar
1 parent 0e40681 commit 801ec3c

File tree

5 files changed

+59
-34
lines changed

5 files changed

+59
-34
lines changed

‎.changeset/blue-falcons-protect.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ifrc-go/ui": patch
3+
---
4+
5+
Add _primary red_ as fallback color for ProgressBar

‎.changeset/wet-penguins-approve.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ Update FDRS data in Country / Context and Structure / NS indicators
66

77
- Add separate icon for each field for data year
88
- Use separate icon for disaggregation
9+
- Update descriptions on dref import template (more details on *Missing / to be implemented* section in https://github.com/IFRCGo/go-web-app/pull/1434#issuecomment-2459034932)

‎app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/DownloadImportTemplateModal/useImportTemplateSchema.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,7 @@ function useImportTemplateSchema() {
608608
type: 'input',
609609
validation: 'number',
610610
label: 'Estimated number of <b>People on the move</b> (if any)',
611-
description: '<i>Percentage, e.g. XX%.</i>',
611+
description: '<i>Number, e.g. XX,XXX.</i>',
612612
},
613613

614614
risk_security: {
@@ -671,6 +671,7 @@ function useImportTemplateSchema() {
671671
type: 'input',
672672
validation: 'number',
673673
label: '<b>Requested Amount in CHF</b>',
674+
description: 'General funding requested to fund the interventions.',
674675
},
675676

676677
planned_interventions: {

‎app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyIndicators/index.tsx‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ interface YearPopupProps {
4141
function YearPopup(props: YearPopupProps) {
4242
const { year } = props;
4343

44+
if (isNotDefined(year)) {
45+
return null;
46+
}
47+
4448
return (
4549
<InfoPopup
4650
description={(
@@ -132,13 +136,6 @@ function NationalSocietyIndicators(props: Props) {
132136
founded_date,
133137
} = databankResponse;
134138

135-
const youthValue = sumSafe([
136-
fdrs_volunteer_age_6_12,
137-
fdrs_volunteer_age_13_17,
138-
fdrs_volunteer_age_18_29,
139-
fdrs_staff_age_18_29,
140-
]);
141-
142139
const volunteerDisaggregation = [
143140
{
144141
label: '6-12',
@@ -239,6 +236,16 @@ function NationalSocietyIndicators(props: Props) {
239236
const totalStaffDisaggregation = sumSafe([totalMaleStaff, totalFemaleStaff]);
240237
const maxStaffInDisaggregation = maxSafe([maxMaleStaff, maxFemaleStaff]);
241238

239+
let youthValue = sumSafe([
240+
fdrs_volunteer_age_6_12,
241+
fdrs_volunteer_age_13_17,
242+
fdrs_volunteer_age_18_29,
243+
fdrs_staff_age_18_29,
244+
]);
245+
if (isDefined(totalVolunteerDisaggregation) || isDefined(totalStaffDisaggregation)) {
246+
youthValue = youthValue ?? 0;
247+
}
248+
242249
return (
243250
<Container
244251
className={styles.nationalSocietyIndicators}
@@ -287,14 +294,15 @@ function NationalSocietyIndicators(props: Props) {
287294
label={strings.nationalSocietyTrainedInFirstAidLabel}
288295
value={fdrs_trained_in_first_aid}
289296
valueType="number"
290-
description={<YearPopup year={fdrs_trained_in_first_aid_data_year} />}
297+
description={(isDefined(fdrs_trained_in_first_aid)
298+
&& <YearPopup year={fdrs_trained_in_first_aid_data_year} />)}
291299
strongValue
292300
/>
293301
<TextOutput
294302
label={strings.nationalSocietyIncomeLabel}
295303
value={fdrs_income}
296304
valueType="number"
297-
description={<YearPopup year={fdrs_income_data_year} />}
305+
description={isDefined(fdrs_income) && <YearPopup year={fdrs_income_data_year} />}
298306
strongValue
299307
/>
300308
<TextOutput
@@ -303,38 +311,43 @@ function NationalSocietyIndicators(props: Props) {
303311
valueType="number"
304312
strongValue
305313
descriptionClassName={styles.infoContainer}
306-
description={(
314+
description={isDefined(fdrs_volunteer_total) && (
307315
<>
308316
<YearPopup year={fdrs_income_data_year} />
309-
<Button
310-
name={undefined}
311-
onClick={setShowVolunteerDisaggregationTrue}
312-
variant="tertiary"
313-
title="Show disaggregation"
314-
>
315-
<HumanResourcesIcon className={styles.disaggregationIcon} />
316-
</Button>
317+
{isDefined(totalVolunteerDisaggregation) && (
318+
<Button
319+
name={undefined}
320+
onClick={setShowVolunteerDisaggregationTrue}
321+
variant="tertiary"
322+
// FIXME: use strings
323+
title="Show disaggregation"
324+
>
325+
<HumanResourcesIcon className={styles.disaggregationIcon} />
326+
</Button>
327+
)}
317328
</>
318329
)}
319330
/>
320331
<TextOutput
321332
label={strings.nationalSocietyYouthLabel}
322333
value={youthValue}
323334
valueType="number"
324-
description={<YearPopup year={fdrs_volunteer_data_year} />}
335+
description={isDefined(youthValue) && <YearPopup year={fdrs_volunteer_data_year} />}
325336
strongValue
326337
/>
327338
<TextOutput
328339
label={strings.nationalSocietyExpendituresLabel}
329340
value={fdrs_expenditures}
330-
description={<YearPopup year={fdrs_expenditures_data_year} />}
341+
description={(isDefined(fdrs_expenditures)
342+
&& <YearPopup year={fdrs_expenditures_data_year} />)}
331343
valueType="number"
332344
strongValue
333345
/>
334346
<TextOutput
335347
label={strings.nationalSocietyBranchesLabel}
336348
value={fdrs_branches}
337-
description={<YearPopup year={fdrs_branches_data_year} />}
349+
description={(isDefined(fdrs_branches)
350+
&& <YearPopup year={fdrs_branches_data_year} />)}
338351
valueType="number"
339352
strongValue
340353
/>
@@ -344,17 +357,20 @@ function NationalSocietyIndicators(props: Props) {
344357
valueType="number"
345358
strongValue
346359
descriptionClassName={styles.infoContainer}
347-
description={(
360+
description={isDefined(fdrs_staff_total) && (
348361
<>
349362
<YearPopup year={fdrs_staff_data_year} />
350-
<Button
351-
name={undefined}
352-
onClick={setShowStaffDisaggregationTrue}
353-
variant="tertiary"
354-
title="Show disaggregation"
355-
>
356-
<HumanResourcesIcon className={styles.disaggregationIcon} />
357-
</Button>
363+
{isDefined(totalStaffDisaggregation) && (
364+
<Button
365+
name={undefined}
366+
onClick={setShowStaffDisaggregationTrue}
367+
variant="tertiary"
368+
// FIXME: use strings
369+
title="Show disaggregation"
370+
>
371+
<HumanResourcesIcon className={styles.disaggregationIcon} />
372+
</Button>
373+
)}
358374
</>
359375
)}
360376
/>
@@ -421,6 +437,7 @@ function NationalSocietyIndicators(props: Props) {
421437
className={styles.maleDisaggregation}
422438
value={volunteer.male}
423439
totalValue={maxVolunteerInDisaggregation}
440+
color="var(--go-ui-color-primary-blue)"
424441
>
425442
<Tooltip
426443
title={strings.volunteerTooltipMaleLabel}
@@ -453,6 +470,7 @@ function NationalSocietyIndicators(props: Props) {
453470
className={styles.femaleDisaggregation}
454471
value={volunteer.female}
455472
totalValue={maxVolunteerInDisaggregation}
473+
color="var(--go-ui-color-primary-red)"
456474
>
457475
<Tooltip
458476
title={strings.volunteerTooltipFemaleLabel}
@@ -547,7 +565,7 @@ function NationalSocietyIndicators(props: Props) {
547565
<NumberOutput
548566
className={styles.malePercentage}
549567
value={getPercentage(
550-
staff.male,
568+
staff.male ?? 0,
551569
totalStaffDisaggregation,
552570
)}
553571
suffix="%"
@@ -616,7 +634,7 @@ function NationalSocietyIndicators(props: Props) {
616634
<NumberOutput
617635
className={styles.femalePercentage}
618636
value={getPercentage(
619-
staff.female,
637+
staff.female ?? 0,
620638
totalStaffDisaggregation,
621639
)}
622640
suffix="%"

‎packages/ui/src/components/ProgressBar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function ProgressBar(props: Props) {
2727
value: valueUnsafe,
2828
showPercentageInTitle,
2929
children,
30-
color,
30+
color = 'var(--go-ui-color-primary-red)',
3131
} = props;
3232

3333
const value = isDefined(valueUnsafe)

0 commit comments

Comments
 (0)