Skip to content

Commit

Permalink
Add Container in country ns ongoing
Browse files Browse the repository at this point in the history
  • Loading branch information
@barshathakuri @frozenhelium
barshathakuri authored and frozenhelium committed Dec 14, 2023
1 parent f2ceeab commit 21a5384
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 93 deletions.
175 changes: 85 additions & 90 deletions src/views/CountryNsOverviewActivities/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import ExportButton from '#components/domain/ExportButton';
import Message from '#components/Message';
import PieChart from '#components/PieChart';
import Table from '#components/Table';
import Page from '#components/Page';
import {
createDateRangeColumn,
createElementColumn,
Expand Down Expand Up @@ -235,11 +234,10 @@ export function Component() {
createStringColumn<Project, number>(
'contact',
strings.nSContactPerson,
(item) => (
`${item.reporting_ns_contact_name}
,
${item.reporting_ns_contact_email}`
),
(item) => ([
item.reporting_ns_contact_name,
item.reporting_ns_contact_email,
].filter(isDefined).join(', ')),
),
createElementColumn<Project, number, ProjectActionsProps>(
'actions',
Expand Down Expand Up @@ -311,9 +309,10 @@ export function Component() {
const showCardsSection = showCard1 || showCard2 || showCard3;

return (
<Page
mainSectionClassName={styles.countryThreeWNationalSocietyProjects}
description={strings.nSActivityDescription}
<Container
childrenContainerClassName={styles.countryThreeWNationalSocietyProjects}
headerDescription={strings.nSActivityDescription}
headerDescriptionContainerClassName={styles.nsActivityDescription}
actions={(
<Link
to="newThreeWActivity"
Expand All @@ -324,88 +323,84 @@ export function Component() {
</Link>
)}
>
<Container
childrenContainerClassName={styles.keyFigureCardList}
>
{projectListPending && <BlockLoading />}
{!projectListPending && showCardsSection && (
<>
{showCard1 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={countryCountWithNSProjects}
label={strings.countriesNSWork}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<KeyFigure
className={styles.keyFigure}
value={targetedPopulation}
label={strings.nSTargetedPopulationTitle}
labelClassName={styles.keyFigureDescription}
compactValue
/>
</div>
)}
{showCard2 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={filteredProjectList.length}
label={strings.nSTotalProjectsTitle}
labelClassName={styles.keyFigureDescription}
{projectListPending && <BlockLoading />}
{!projectListPending && showCardsSection && (
<div className={styles.keyFigureCardList}>
{showCard1 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={countryCountWithNSProjects}
label={strings.countriesNSWork}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<KeyFigure
className={styles.keyFigure}
value={targetedPopulation}
label={strings.nSTargetedPopulationTitle}
labelClassName={styles.keyFigureDescription}
compactValue
/>
</div>
)}
{showCard2 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={filteredProjectList.length}
label={strings.nSTotalProjectsTitle}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<Container
heading={strings.nSProgrammeType}
headingLevel={5}
className={styles.pieChartContainer}
>
<PieChart
className={styles.pieChart}
data={programmeTypeStats}
valueSelector={numericValueSelector}
labelSelector={stringLabelSelector}
keySelector={stringLabelSelector}
colors={primaryRedColorShades}
pieRadius={40}
chartPadding={10}
/>
<div className={styles.separator} />
<Container
heading={strings.nSProgrammeType}
headingLevel={5}
className={styles.pieChartContainer}
>
<PieChart
className={styles.pieChart}
data={programmeTypeStats}
valueSelector={numericValueSelector}
labelSelector={stringLabelSelector}
keySelector={stringLabelSelector}
colors={primaryRedColorShades}
pieRadius={40}
chartPadding={10}
/>
</Container>
</div>
)}
{showCard3 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={ongoingProjectBudget}
label={strings.nSFundingRequirementsTitle}
labelClassName={styles.keyFigureDescription}
compactValue
</Container>
</div>
)}
{showCard3 && (
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={ongoingProjectBudget}
label={strings.nSFundingRequirementsTitle}
labelClassName={styles.keyFigureDescription}
compactValue
/>
<div className={styles.separator} />
<Container
heading={strings.nSProjectStatus}
headingLevel={5}
className={styles.pieChartContainer}
>
<PieChart
className={styles.pieChart}
data={projectStatusTypeStats}
valueSelector={numericValueSelector}
labelSelector={stringLabelSelector}
keySelector={stringLabelSelector}
colors={primaryRedColorShades}
pieRadius={40}
chartPadding={10}
/>
<div className={styles.separator} />
<Container
heading={strings.nSProjectStatus}
headingLevel={5}
className={styles.pieChartContainer}
>
<PieChart
className={styles.pieChart}
data={projectStatusTypeStats}
valueSelector={numericValueSelector}
labelSelector={stringLabelSelector}
keySelector={stringLabelSelector}
colors={primaryRedColorShades}
pieRadius={40}
chartPadding={10}
/>
</Container>
</div>
)}
</>
)}
</Container>
</Container>
</div>
)}
</div>
)}
<Container
className={styles.ongoingProjects}
childrenContainerClassName={styles.content}
Expand Down Expand Up @@ -522,7 +517,7 @@ export function Component() {
keySelector={numericIdSelector}
/>
</Container>
</Page>
</Container>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/views/CountryNsOverviewActivities/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.country-threeW-national-society-projects {
.country-three-w-national-society-projects {
display: flex;
flex-direction: column;
gap: var(--go-ui-spacing-2xl);
Expand Down
2 changes: 1 addition & 1 deletion src/views/CountryThreeW/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function Component() {
>
<NavigationTabList variant="secondary">
<NavigationTab
to="countryThreeWNationalSocietyProjects"
to="countryNsOverviewActivities"
urlParams={{ countryId }}
>
{resolveToString(
Expand Down
2 changes: 1 addition & 1 deletion src/views/ThreeWProjectDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function Component() {
label={strings.reportingNationalSocietyTitle}
value={isDefined(projectResponse?.reporting_ns_detail?.iso3) ? (
<Link
to="countryThreeWNationalSocietyProjects"
to="countryNsOverviewActivities"
urlParams={{
countryId: projectResponse?.reporting_ns_detail.id,
}}
Expand Down

0 comments on commit 21a5384

Please sign in to comment.