From 48e121238101ae4e411562feae9e70afe4bffcd1 Mon Sep 17 00:00:00 2001 From: Glen Date: Mon, 1 Jul 2024 02:15:43 +0530 Subject: [PATCH] Add progress indicator in pledges screen --- public/locales/en/translation.json | 5 +- public/locales/fr/translation.json | 5 +- public/locales/hi/translation.json | 5 +- public/locales/sp/translation.json | 5 +- public/locales/zh/translation.json | 5 +- src/GraphQl/Queries/fundQueries.ts | 3 + .../FundCampaignPledge.module.css | 76 ++++++++++++- .../FundCampaignPledge/FundCampaignPledge.tsx | 103 +++++++++++++++++- .../FundCampaignPledge/PledgesMocks.ts | 15 +++ .../OrganizationFundCampagins.tsx | 1 + .../OrganizationFundCampaign.module.css | 6 +- src/utils/interfaces.ts | 3 + 12 files changed, 219 insertions(+), 13 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 1e41714ed5..d006fd3140 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -392,7 +392,10 @@ "lowestAmount": "Lowest Amount", "latestEndDate": "Latest End Date", "earliestEndDate": "Earliest End Date", - "campaigns": "Campaigns" + "campaigns": "Campaigns", + "pledges": "Pledges", + "endsOn": "Ends on", + "raised": "Raised" }, "orgPost": { "title": "Posts", diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 2fcd8a197b..57009be21f 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -398,7 +398,10 @@ "lowestAmount": "Montant le plus bas", "latestEndDate": "Date de fin la plus récente", "earliestEndDate": "Date de fin la plus proche", - "campaigns": "Campagnes" + "campaigns": "Campagnes", + "pledges": "Promesses de dons", + "endsOn": "Se termine le", + "raised": "Levé" }, "orgPost": { "title": "Des postes", diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json index 07f6c52203..4857816985 100644 --- a/public/locales/hi/translation.json +++ b/public/locales/hi/translation.json @@ -398,7 +398,10 @@ "lowestAmount": "सबसे कम राशि", "latestEndDate": "नवीनतम समाप्ति तिथि", "earliestEndDate": "सबसे प्रारंभिक समाप्ति तिथि", - "campaigns": "अभियान" + "campaigns": "अभियान", + "pledges": "प्रतिज्ञाएँ", + "endsOn": "पर समाप्त होता है", + "raised": "उठाया गया" }, "orgPost": { "title": "पदों", diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json index 2d4a0ea2f4..c289588a5d 100644 --- a/public/locales/sp/translation.json +++ b/public/locales/sp/translation.json @@ -526,7 +526,10 @@ "lowestAmount": "Cantidad más baja", "latestEndDate": "Fecha de finalización más reciente", "earliestEndDate": "Fecha de finalización más cercana", - "campaigns": "Campañas" + "campaigns": "Campañas", + "pledges": "Compromisos", + "endsOn": "Finaliza el", + "raised": "Recaudado" }, "orgPost": { diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index 83d6d42be9..fd2fd235c5 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -398,7 +398,10 @@ "lowestAmount": "最低金额", "latestEndDate": "最新结束日期", "earliestEndDate": "最早结束日期", - "campaigns": "活动" + "campaigns": "活动", + "pledges": "承诺", + "endsOn": "结束于", + "raised": "筹集到" }, "orgPost": { "title": "帖子", diff --git a/src/GraphQl/Queries/fundQueries.ts b/src/GraphQl/Queries/fundQueries.ts index bed8d027ff..daec99a8c9 100644 --- a/src/GraphQl/Queries/fundQueries.ts +++ b/src/GraphQl/Queries/fundQueries.ts @@ -58,6 +58,9 @@ export const FUND_CAMPAIGN = gql` export const FUND_CAMPAIGN_PLEDGE = gql` query GetFundraisingCampaignById($id: ID!, $orderBy: PledgeOrderByInput) { getFundraisingCampaignById(id: $id, orderBy: $orderBy) { + name + fundingGoal + currency startDate endDate pledges { diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css index 51ce5a3ea5..646fbb54c3 100644 --- a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css +++ b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css @@ -58,7 +58,8 @@ .btnsContainer { display: flex; - margin: 2rem 0 2.5rem 0; + gap: 0.8rem; + margin: 2.2rem 0 0.8rem 0; } .btnsContainer .input { @@ -125,3 +126,76 @@ .noOutline input { outline: none; } + +.overviewContainer { + display: flex; + gap: 7rem; + width: 100%; + justify-content: space-between; + margin: 1.5rem 0 0 0; + padding: 1.25rem 2rem; + background-color: rgba(255, 255, 255, 0.591); + + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + border-radius: 0.5rem; +} + +.titleContainer { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.titleContainer h3 { + font-size: 1.75rem; + font-weight: 750; + color: #5e5e5e; + margin-top: 0.2rem; +} + +.titleContainer span { + font-size: 0.9rem; + margin-left: 0.5rem; + font-weight: lighter; + color: #707070; +} + +.raisedAmount { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.25rem; + font-weight: 750; + color: #5e5e5e; +} + +.progressContainer { + display: flex; + flex-direction: column; + gap: 0.5rem; + flex-grow: 1; +} + +.progress { + margin-top: 0.2rem; + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.endpoints { + display: flex; + position: relative; + font-size: 0.85rem; +} + +.start { + position: absolute; + top: 0px; +} + +.end { + position: absolute; + top: 0px; + right: 0px; +} diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx index 0d297c5898..2c1ad0045d 100644 --- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx +++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx @@ -11,7 +11,14 @@ import { currencySymbols } from 'utils/currency'; import styles from './FundCampaignPledge.module.css'; import PledgeDeleteModal from './PledgeDeleteModal'; import PledgeModal from './PledgeModal'; -import { Breadcrumbs, Link, Stack, Typography } from '@mui/material'; +import { + Breadcrumbs, + LinearProgress, + Link, + Stack, + Typography, + linearProgressClasses, +} from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; import Avatar from 'components/Avatar/Avatar'; import type { GridCellParams, GridColDef } from '@mui/x-data-grid'; @@ -20,6 +27,15 @@ import type { InterfacePledgeVolunteer, InterfaceQueryFundCampaignsPledges, } from 'utils/interfaces'; +import { styled } from '@mui/system'; + +interface InterfaceCampaignInfo { + name: string; + goal: number; + startDate: Date; + endDate: Date; + currency: string; +} enum Modal { SAME = 'same', @@ -47,6 +63,18 @@ const dataGridStyle = { }, }; +const BorderLinearProgress = styled(LinearProgress)(() => ({ + height: 15, + borderRadius: 4, + [`&.${linearProgressClasses.colorPrimary}`]: { + backgroundColor: '#e0e0e0', + }, + [`& .${linearProgressClasses.bar}`]: { + borderRadius: 5, + backgroundColor: '#31bb6b', + }, +})); + const fundCampaignPledge = (): JSX.Element => { const { t } = useTranslation('translation', { keyPrefix: 'pledges', @@ -58,6 +86,14 @@ const fundCampaignPledge = (): JSX.Element => { return ; } + const [campaignInfo, setCampaignInfo] = useState({ + name: '', + goal: 0, + startDate: new Date(), + endDate: new Date(), + currency: '', + }); + const [modalState, setModalState] = useState<{ [key in Modal]: boolean }>({ [Modal.SAME]: false, [Modal.DELETE]: false, @@ -113,6 +149,18 @@ const fundCampaignPledge = (): JSX.Element => { ); }, [pledgeData, searchTerm]); + useEffect(() => { + if (pledgeData) { + setCampaignInfo({ + name: pledgeData.getFundraisingCampaignById.name, + goal: pledgeData.getFundraisingCampaignById.fundingGoal, + startDate: pledgeData.getFundraisingCampaignById.startDate, + endDate: pledgeData.getFundraisingCampaignById.endDate, + currency: pledgeData.getFundraisingCampaignById.currency, + }); + } + }, [pledgeData]); + useEffect(() => { refetchPledge(); }, [sortBy, refetchPledge]); @@ -228,7 +276,7 @@ const fundCampaignPledge = (): JSX.Element => { }, { field: 'amount', - headerName: 'Pledge Amount', + headerName: 'Pledged', flex: 1, minWidth: 100, align: 'center', @@ -251,6 +299,31 @@ const fundCampaignPledge = (): JSX.Element => { ); }, }, + { + field: 'paid', + headerName: 'Paid', + flex: 1, + minWidth: 100, + align: 'center', + headerAlign: 'center', + headerClassName: `${styles.tableHeader}`, + sortable: false, + renderCell: (params: GridCellParams) => { + return ( +
+ { + currencySymbols[ + params.row.currency as keyof typeof currencySymbols + ] + } + 0 +
+ ); + }, + }, { field: 'action', headerName: 'Action', @@ -294,7 +367,7 @@ const fundCampaignPledge = (): JSX.Element => { return (
- + { > {t('campaigns')} - Fund Campaign Pledges + {t('pledges')} + +
+
+

{campaignInfo?.name}

+ + {t('endsOn')} {campaignInfo?.endDate.toString()} + +
+
+
$1,000 {t('raised')}
+
+ +
+
$0
+
${campaignInfo?.goal}
+
+
+
+
+
{ row._id} components={{ diff --git a/src/screens/FundCampaignPledge/PledgesMocks.ts b/src/screens/FundCampaignPledge/PledgesMocks.ts index cf07d1cf28..5a913ff3d6 100644 --- a/src/screens/FundCampaignPledge/PledgesMocks.ts +++ b/src/screens/FundCampaignPledge/PledgesMocks.ts @@ -18,6 +18,9 @@ export const MOCKS = [ result: { data: { getFundraisingCampaignById: { + name: 'Campaign Name', + fundingGoal: 1000, + currency: 'USD', startDate: '2024-01-01', endDate: '2024-08-08', pledges: [ @@ -67,6 +70,9 @@ export const MOCKS = [ result: { data: { getFundraisingCampaignById: { + name: 'Campaign Name', + fundingGoal: 1000, + currency: 'USD', startDate: '2024-01-01', endDate: '2024-08-08', pledges: [ @@ -116,6 +122,9 @@ export const MOCKS = [ result: { data: { getFundraisingCampaignById: { + name: 'Campaign Name', + fundingGoal: 1000, + currency: 'USD', startDate: '2024-01-01', endDate: '2024-08-08', pledges: [ @@ -165,6 +174,9 @@ export const MOCKS = [ result: { data: { getFundraisingCampaignById: { + name: 'Campaign Name', + fundingGoal: 1000, + currency: 'USD', startDate: '2024-01-01', endDate: '2024-08-08', pledges: [ @@ -422,6 +434,9 @@ export const EMPTY_MOCKS = [ result: { data: { getFundraisingCampaignById: { + name: 'Campaign Name', + fundingGoal: 1000, + currency: 'USD', startDate: '2024-01-01', endDate: '2024-01-01', pledges: [], diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx index 37009e7259..86a9d7d290 100644 --- a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx +++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx @@ -313,6 +313,7 @@ const orgFundCampaign = (): JSX.Element => { FundRaising Campaign +