From 0ae294716dd7b8280593141693ce96cb87bb02c9 Mon Sep 17 00:00:00 2001 From: marinovl7 Date: Wed, 19 Oct 2022 14:23:17 +0200 Subject: [PATCH 1/6] Saving files --- public/locales/bg/profile.json | 6 ++++++ public/locales/en/profile.json | 6 ++++++ src/common/hooks/campaigns.ts | 15 +++++++++++++++ src/common/routes.ts | 1 + src/components/auth/profile/ProfilePage.tsx | 9 +++++++++ src/components/auth/profile/tabs.tsx | 7 +++++++ src/components/campaigns/grid/CampaignGrid.tsx | 14 +++++++------- src/service/apiEndpoints.ts | 6 ++++++ 8 files changed, 57 insertions(+), 7 deletions(-) diff --git a/public/locales/bg/profile.json b/public/locales/bg/profile.json index 404452d31..3d4b6e08c 100644 --- a/public/locales/bg/profile.json +++ b/public/locales/bg/profile.json @@ -50,6 +50,12 @@ "index": "История на сертификати", "title": "Онлайн дарения" }, + "myCampaigns": { + "index": "Моите кампании", + "history": "История на моите кампании", + "noCampaigns": "Вие не сте организатор,координатор или бенефицент на нито една кампания", + "donatedTo": "Кампании, към които сте направили дарение" + }, "donationsContract": "Договор дарение", "certificates": "Сертификати", "birthdateModal": { diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json index 9bb7de7ba..63a833e69 100644 --- a/public/locales/en/profile.json +++ b/public/locales/en/profile.json @@ -43,6 +43,12 @@ "index": "Certificate history", "title": "Online donations" }, + "myCampaigns": { + "index": "My campaigns", + "history": "My campaigns history", + "noCampaigns": "You are not organizer,coordinator or beneficiery to any campaign", + "donatedTo": "Campaigns, which You donated to" + }, "donationsContract": "Donation contract", "certificates": "Certificates", "birthdateModal": { diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts index 08f878f92..5f16eb912 100644 --- a/src/common/hooks/campaigns.ts +++ b/src/common/hooks/campaigns.ts @@ -24,6 +24,21 @@ export function useCampaignAdminList() { ) } +export const useGetUserCampaigns = () => { + const { data: session } = useSession() + return useQuery( + endpoints.campaign.getUserCamapaigns.url, + authQueryFnFactory(session?.accessToken), + ) +} + +export function useUserDonationsCampaigns() { + const { data: session } = useSession() + return useQuery(endpoints.campaign.getUserDonatedToCampaigns.url, { + queryFn: authQueryFnFactory(session?.accessToken), + }) +} + export function useCampaignTypesList() { return useQuery(endpoints.campaignTypes.listCampaignTypes.url) } diff --git a/src/common/routes.ts b/src/common/routes.ts index b7808f39e..d4f52eb5c 100644 --- a/src/common/routes.ts +++ b/src/common/routes.ts @@ -57,6 +57,7 @@ export const routes = { personalInformation: '/profile/personal-information', certificates: '/profile/certificates', contractDonation: '/profile/contract-donation', + myCampaigns: '/profile/my-campaigns', }, register: '/register', aboutProject: '/about-project', diff --git a/src/components/auth/profile/ProfilePage.tsx b/src/components/auth/profile/ProfilePage.tsx index 366a9b9e6..97f0e5b2b 100644 --- a/src/components/auth/profile/ProfilePage.tsx +++ b/src/components/auth/profile/ProfilePage.tsx @@ -9,6 +9,7 @@ import { VolunteerActivism as DonationIcon, AccountBox as AccountBoxIcon, Assignment as CertificateIcon, + AssignmentInd as CampaignIcon, } from '@mui/icons-material' import { useSession } from 'next-auth/react' @@ -106,6 +107,14 @@ export default function ProfilePage() { onClick={() => router.push(routes.profile.certificates)} icon={matches ? : undefined} /> + router.push(routes.profile.myCampaigns)} + icon={matches ? : undefined} + /> {/* Currently we don't generate donation contract, when such document is generated we can either combine it with the certificate or unhide the contracts section. */} {/* } -const DisplayCoordinator = ({ params }: CampaignCellProps) => { +export const DisplayCoordinator = ({ params }: CampaignCellProps) => { return ( <> {params.row.coordinator.person.firstName} {params.row.coordinator.person.lastName} ) } -const DisplayOrganizer = ({ params }: CampaignCellProps) => { +export const DisplayOrganizer = ({ params }: CampaignCellProps) => { return ( <> {params.row.organizer?.person.firstName || ''} {params.row.organizer?.person.lastName || ''} @@ -38,7 +38,7 @@ const DisplayOrganizer = ({ params }: CampaignCellProps) => { ) } -const DisplayBeneficiary = ({ params }: CampaignCellProps) => { +export const DisplayBeneficiary = ({ params }: CampaignCellProps) => { return ( <> {params.row.beneficiary.type === BeneficiaryType.individual @@ -48,19 +48,19 @@ const DisplayBeneficiary = ({ params }: CampaignCellProps) => { ) } -const DisplayExpandableDescription = (params: GridRenderCellParams) => { +export const DisplayExpandableDescription = (params: GridRenderCellParams) => { return } -const DisplayReachedAmount = ({ params }: CampaignCellProps) => { +export const DisplayReachedAmount = ({ params }: CampaignCellProps) => { return <>{money(params.row.summary.reachedAmount ?? 0, params.row.currency)} } -const DisplayBlockedAmount = ({ params }: CampaignCellProps) => { +export const DisplayBlockedAmount = ({ params }: CampaignCellProps) => { return <>{money(params.row.summary.blockedAmount ?? 0, params.row.currency)} } -const DisplayCurrentAmount = ({ params }: CampaignCellProps) => { +export const DisplayCurrentAmount = ({ params }: CampaignCellProps) => { return <>{money(params.row.summary.currentAmount ?? 0, params.row.currency)} } diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index f32cecd6b..52c41090d 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -16,7 +16,12 @@ export const endpoints = { campaign: { listCampaigns: { url: '/campaign/list', method: 'GET' }, listAdminCampaigns: { url: '/campaign/list-all', method: 'GET' }, + getUserDonatedToCampaigns: { + url: '/campaign/user-donations-campaigns', + method: 'GET', + }, createCampaign: { url: '/campaign/create-campaign', method: 'POST' }, + getUserCamapaigns: { url: '/campaign/get-user-campaigns', method: 'GET' }, viewCampaign: (slug: string) => { url: `/campaign/${slug}`, method: 'GET' }, viewCampaignById: (id: string) => { url: `/campaign/byId/${id}`, method: 'GET' }, editCampaign: (id: string) => { url: `/campaign/${id}`, method: 'PUT' }, @@ -65,6 +70,7 @@ export const endpoints = { editDonation: (id: string) => { url: `/donation/${id}`, method: 'PATCH' }, deleteDonation: { url: `/donation/delete`, method: 'POST' }, userDonations: { url: 'donation/user-donations', method: 'GET' }, + userDonationsCampaigns: { url: 'donation/user-donations-campaigns', method: 'GET' }, uploadBankTransactionsFile: (bankTransactionsFileId: string) => { url: `/bank-transactions-file/${bankTransactionsFileId}`, method: 'POST' }, }, From 36a829679a77fda7a9df3640dc9679c9501655c3 Mon Sep 17 00:00:00 2001 From: marinovl7 Date: Wed, 19 Oct 2022 14:28:18 +0200 Subject: [PATCH 2/6] Added MyCampaigns Tab feature --- .../auth/profile/MyCampaignsTab.tsx | 72 +++++ .../auth/profile/MyCampaignsTable.tsx | 268 ++++++++++++++++++ .../profile/MyDonatedToCampaignsTable.tsx | 221 +++++++++++++++ 3 files changed, 561 insertions(+) create mode 100644 src/components/auth/profile/MyCampaignsTab.tsx create mode 100644 src/components/auth/profile/MyCampaignsTable.tsx create mode 100644 src/components/auth/profile/MyDonatedToCampaignsTable.tsx diff --git a/src/components/auth/profile/MyCampaignsTab.tsx b/src/components/auth/profile/MyCampaignsTab.tsx new file mode 100644 index 000000000..ad0649f86 --- /dev/null +++ b/src/components/auth/profile/MyCampaignsTab.tsx @@ -0,0 +1,72 @@ +import { styled } from '@mui/material/styles' +import { Box, Typography } from '@mui/material' +import React from 'react' +import { useTranslation } from 'next-i18next' + +import ProfileTab from './ProfileTab' +import { ProfileTabs } from './tabs' +import MyCampaingsTable from './MyCampaignsTable' +import MyDonatedToCampaignTable from './MyDonatedToCampaignsTable' + +const PREFIX = 'MyCampaignsTab' + +const classes = { + h3: `${PREFIX}-h3`, + thinFont: `${PREFIX}-thinFont`, + smallText: `${PREFIX}-smallText`, + boxTitle: `${PREFIX}-boxTitle`, +} + +const Root = styled('div')(({ theme }) => ({ + [`& .${classes.h3}`]: { + fontStyle: 'normal', + fontWeight: '500', + fontSize: '25px', + lineHeight: '116.7%', + margin: '0', + }, + [`& .${classes.thinFont}`]: { + fontStyle: 'normal', + fontWeight: 400, + fontSize: '24px', + lineHeight: '123.5%', + letterSpacing: '0.25px', + color: '#000000', + margin: 0, + }, + [`& .${classes.smallText}`]: { + fontFamily: 'Lato, sans-serif', + fontStyle: 'normal', + fontWeight: '500', + fontSize: '15px', + lineHeight: '160%', + letterSpacing: '0.15px', + }, + [`& .${classes.boxTitle}`]: { + backgroundColor: 'white', + padding: theme.spacing(3, 7), + paddingBottom: theme.spacing(3), + marginTop: theme.spacing(3), + boxShadow: theme.shadows[3], + }, +})) + +export default function MyCampaignsTab() { + const { t } = useTranslation() + return ( + + + {t('profile:myCampaigns.history')} + + + + + + {t('profile:myCampaigns.donatedTo')} + + + + + + ) +} diff --git a/src/components/auth/profile/MyCampaignsTable.tsx b/src/components/auth/profile/MyCampaignsTable.tsx new file mode 100644 index 000000000..ba2173ad2 --- /dev/null +++ b/src/components/auth/profile/MyCampaignsTable.tsx @@ -0,0 +1,268 @@ +import { bg, enUS } from 'date-fns/locale' +import { useTranslation } from 'next-i18next' +import { useState, useMemo } from 'react' +import { DataGrid, GridColDef, GridColumns, GridRenderCellParams } from '@mui/x-data-grid' +import { Tooltip, Button, Box } from '@mui/material' + +import { getExactDateTime, getRelativeDate } from 'common/util/date' +import { money } from 'common/util/money' +import { useGetUserCampaigns } from 'common/hooks/campaigns' +import Link from 'components/common/Link' +import GridActions from 'components/campaigns/grid/GridActions' +import { + DisplayBeneficiary, + DisplayBlockedAmount, + DisplayCoordinator, + DisplayCurrentAmount, + DisplayExpandableDescription, + DisplayOrganizer, + DisplayReachedAmount, +} from 'components/campaigns/grid/CampaignGrid' +import DetailsModal from '../../campaigns/grid/modals/DetailsModal' +import DeleteModal from '../../campaigns/grid/modals/DeleteModal' + +export default function MyCampaingsTable() { + const { t, i18n } = useTranslation() + const locale = i18n.language == 'bg' ? bg : enUS + const [viewId, setViewId] = useState() + const [deleteId, setDeleteId] = useState() + const { data = [], refetch } = useGetUserCampaigns() + const selectedCampaign = useMemo(() => data.find((c) => c.id === viewId), [data, viewId]) + const commonProps: Partial = { + align: 'left', + width: 100, + headerAlign: 'left', + } + const columns: GridColumns = [ + { + field: 'actions', + headerName: t('campaigns:actions'), + width: 120, + type: 'actions', + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => { + return ( + setViewId(cellValues.row.id)} + onDelete={() => setDeleteId(cellValues.row.id)} + /> + ) + }, + }, + { + field: 'state', + headerName: t('campaigns:status'), + ...commonProps, + align: 'left', + width: 120, + }, + { + field: 'title', + headerName: t('campaigns:title'), + ...commonProps, + align: 'left', + width: 350, + renderCell: (cellValues: GridRenderCellParams) => ( + {cellValues.row.title} + ), + }, + { + field: 'essence', + headerName: t('campaigns:essence'), + ...commonProps, + align: 'left', + width: 350, + }, + { + field: 'coordinator', + headerName: t('campaigns:coordinator'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 200, + }, + { + field: 'organizer', + headerName: t('campaigns:organizer'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 200, + }, + { + field: 'beneficiary', + headerName: t('campaigns:beneficiary'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 200, + }, + { + field: 'campaignType', + headerName: t('campaigns:campaignType'), + ...commonProps, + align: 'left', + width: 250, + renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}, + }, + { + field: 'description', + headerName: t('campaigns:description'), + ...commonProps, + align: 'left', + width: 350, + renderCell: DisplayExpandableDescription, + }, + { + field: 'reachedAmount', + headerName: t('campaigns:donationsAmount'), + ...commonProps, + align: 'right', + width: 200, + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'blockedAmount', + headerName: t('campaigns:blockedAmount'), + ...commonProps, + align: 'right', + width: 200, + renderCell: (cellValues: GridRenderCellParams) => ( + + ), + }, + { + field: 'currentAmount', + headerName: t('campaigns:amount'), + ...commonProps, + align: 'right', + width: 200, + renderCell: (cellValues: GridRenderCellParams) => ( + + ), + }, + { + field: 'targetAmount', + headerName: t('campaigns:targetAmount'), + ...commonProps, + align: 'right', + width: 150, + renderCell: (cellValues: GridRenderCellParams) => ( + <>{money(cellValues.row.targetAmount, cellValues.row.currency)} + ), + }, + { + field: 'currency', + headerName: t('campaigns:currency'), + ...commonProps, + align: 'left', + }, + { + field: 'startDate', + headerName: t('campaigns:startDate'), + align: 'left', + width: 230, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'endDate', + headerName: t('campaigns:endDate'), + align: 'left', + width: 230, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'createdAt', + headerName: t('campaigns:createDate'), + align: 'left', + width: 230, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'updatedAt', + headerName: t('campaigns:updatedAt'), + align: 'left', + width: 230, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'deletedAt', + headerName: t('campaigns:deletedAt'), + align: 'left', + width: 230, + headerAlign: 'left', + }, + ] + return ( + <> + {data.length !== 0 ? ( + + ) : ( + {t('profile:myCampaigns.noCampaigns')} + )} + + {selectedCampaign && ( + setViewId(undefined)} /> + )} + {deleteId && ( + { + refetch() + setDeleteId(undefined) + }} + onClose={() => setDeleteId(undefined)} + /> + )} + + + ) +} diff --git a/src/components/auth/profile/MyDonatedToCampaignsTable.tsx b/src/components/auth/profile/MyDonatedToCampaignsTable.tsx new file mode 100644 index 000000000..c0ba421e1 --- /dev/null +++ b/src/components/auth/profile/MyDonatedToCampaignsTable.tsx @@ -0,0 +1,221 @@ +import { bg, enUS } from 'date-fns/locale' +import { useTranslation } from 'next-i18next' +import { DataGrid, GridColDef, GridColumns, GridRenderCellParams } from '@mui/x-data-grid' +import { Tooltip, Button, Box } from '@mui/material' + +import { getExactDateTime, getRelativeDate } from 'common/util/date' +import { money } from 'common/util/money' +import { useUserDonationsCampaigns } from 'common/hooks/campaigns' +import Link from 'components/common/Link' +import { + DisplayBeneficiary, + DisplayCoordinator, + DisplayCurrentAmount, + DisplayExpandableDescription, + DisplayOrganizer, + DisplayReachedAmount, +} from 'components/campaigns/grid/CampaignGrid' + +export default function MyDonatedToCampaignTable() { + const { t, i18n } = useTranslation() + const locale = i18n.language == 'bg' ? bg : enUS + const { data = [], refetch } = useUserDonationsCampaigns() + console.log(data) + const commonProps: Partial = { + align: 'left', + width: 100, + headerAlign: 'left', + } + console.log(data) + const columns: GridColumns = [ + { + field: 'state', + headerName: t('campaigns:status'), + ...commonProps, + align: 'left', + width: 120, + }, + { + field: 'title', + headerName: t('campaigns:title'), + ...commonProps, + align: 'left', + width: 370, + renderCell: (cellValues: GridRenderCellParams) => ( + {cellValues.row.title} + ), + }, + { + field: 'essence', + headerName: t('campaigns:essence'), + ...commonProps, + align: 'left', + width: 370, + }, + { + field: 'coordinator', + headerName: t('campaigns:coordinator'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 220, + }, + { + field: 'organizer', + headerName: t('campaigns:organizer'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 220, + }, + { + field: 'beneficiary', + headerName: t('campaigns:beneficiary'), + ...commonProps, + renderCell: (params: GridRenderCellParams) => { + return + }, + align: 'left', + width: 220, + }, + { + field: 'campaignType', + headerName: t('campaigns:campaignType'), + ...commonProps, + align: 'left', + width: 270, + renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}, + }, + { + field: 'description', + headerName: t('campaigns:description'), + ...commonProps, + align: 'left', + width: 370, + renderCell: DisplayExpandableDescription, + }, + { + field: 'reachedAmount', + headerName: t('campaigns:donationsAmount'), + ...commonProps, + align: 'right', + width: 220, + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'currentAmount', + headerName: t('campaigns:amount'), + ...commonProps, + align: 'right', + width: 220, + renderCell: (cellValues: GridRenderCellParams) => ( + + ), + }, + { + field: 'targetAmount', + headerName: t('campaigns:targetAmount'), + ...commonProps, + align: 'right', + width: 170, + renderCell: (cellValues: GridRenderCellParams) => ( + <>{money(cellValues.row.targetAmount, cellValues.row.currency)} + ), + }, + { + field: 'currency', + headerName: t('campaigns:currency'), + ...commonProps, + align: 'left', + }, + { + field: 'startDate', + headerName: t('campaigns:startDate'), + align: 'left', + width: 250, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'endDate', + headerName: t('campaigns:endDate'), + align: 'left', + width: 250, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'createdAt', + headerName: t('campaigns:createDate'), + align: 'left', + width: 250, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'updatedAt', + headerName: t('campaigns:updatedAt'), + align: 'left', + width: 250, + headerAlign: 'left', + renderCell: (cellValues: GridRenderCellParams) => ( + + + + ), + }, + { + field: 'deletedAt', + headerName: t('campaigns:deletedAt'), + align: 'left', + width: 250, + headerAlign: 'left', + }, + ] + return ( + <> + {data.length !== 0 ? ( + + ) : ( + {t('profile:donations.noDonations')} + )} + + ) +} From 5a67ee1670a06cd33978e51e24aed1c9eeafe925 Mon Sep 17 00:00:00 2001 From: marinovl7 Date: Wed, 19 Oct 2022 16:05:35 +0200 Subject: [PATCH 3/6] Fixed the whitespace and the translations --- .../auth/profile/MyCampaignsTable.tsx | 3 +- .../profile/MyDonatedToCampaignsTable.tsx | 43 +++++++------------ src/pages/profile/[slug].ts | 1 + src/pages/profile/index.ts | 1 + 4 files changed, 19 insertions(+), 29 deletions(-) diff --git a/src/components/auth/profile/MyCampaignsTable.tsx b/src/components/auth/profile/MyCampaignsTable.tsx index ba2173ad2..58a2344dd 100644 --- a/src/components/auth/profile/MyCampaignsTable.tsx +++ b/src/components/auth/profile/MyCampaignsTable.tsx @@ -230,7 +230,6 @@ export default function MyCampaingsTable() { ) : ( - {t('profile:myCampaigns.noCampaigns')} + {t('profile:myCampaigns.noCampaigns')} )} {selectedCampaign && ( diff --git a/src/components/auth/profile/MyDonatedToCampaignsTable.tsx b/src/components/auth/profile/MyDonatedToCampaignsTable.tsx index c0ba421e1..73633e13d 100644 --- a/src/components/auth/profile/MyDonatedToCampaignsTable.tsx +++ b/src/components/auth/profile/MyDonatedToCampaignsTable.tsx @@ -33,14 +33,14 @@ export default function MyDonatedToCampaignTable() { headerName: t('campaigns:status'), ...commonProps, align: 'left', - width: 120, + width: 130, }, { field: 'title', headerName: t('campaigns:title'), ...commonProps, align: 'left', - width: 370, + width: 380, renderCell: (cellValues: GridRenderCellParams) => ( {cellValues.row.title} ), @@ -50,7 +50,7 @@ export default function MyDonatedToCampaignTable() { headerName: t('campaigns:essence'), ...commonProps, align: 'left', - width: 370, + width: 380, }, { field: 'coordinator', @@ -60,7 +60,7 @@ export default function MyDonatedToCampaignTable() { return }, align: 'left', - width: 220, + width: 230, }, { field: 'organizer', @@ -70,7 +70,7 @@ export default function MyDonatedToCampaignTable() { return }, align: 'left', - width: 220, + width: 230, }, { field: 'beneficiary', @@ -80,14 +80,14 @@ export default function MyDonatedToCampaignTable() { return }, align: 'left', - width: 220, + width: 230, }, { field: 'campaignType', headerName: t('campaigns:campaignType'), ...commonProps, align: 'left', - width: 270, + width: 280, renderCell: (cellValues: GridRenderCellParams) => <>{cellValues.row.campaignType.name}, }, { @@ -95,7 +95,7 @@ export default function MyDonatedToCampaignTable() { headerName: t('campaigns:description'), ...commonProps, align: 'left', - width: 370, + width: 380, renderCell: DisplayExpandableDescription, }, { @@ -103,29 +103,19 @@ export default function MyDonatedToCampaignTable() { headerName: t('campaigns:donationsAmount'), ...commonProps, align: 'right', - width: 220, + width: 250, renderCell: (cellValues: GridRenderCellParams) => ( ), }, - { - field: 'currentAmount', - headerName: t('campaigns:amount'), - ...commonProps, - align: 'right', - width: 220, - renderCell: (cellValues: GridRenderCellParams) => ( - - ), - }, { field: 'targetAmount', headerName: t('campaigns:targetAmount'), ...commonProps, align: 'right', - width: 170, + width: 180, renderCell: (cellValues: GridRenderCellParams) => ( <>{money(cellValues.row.targetAmount, cellValues.row.currency)} ), @@ -140,7 +130,7 @@ export default function MyDonatedToCampaignTable() { field: 'startDate', headerName: t('campaigns:startDate'), align: 'left', - width: 250, + width: 270, headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( @@ -152,7 +142,7 @@ export default function MyDonatedToCampaignTable() { field: 'endDate', headerName: t('campaigns:endDate'), align: 'left', - width: 250, + width: 270, headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( @@ -164,7 +154,7 @@ export default function MyDonatedToCampaignTable() { field: 'createdAt', headerName: t('campaigns:createDate'), align: 'left', - width: 250, + width: 270, headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( @@ -176,7 +166,7 @@ export default function MyDonatedToCampaignTable() { field: 'updatedAt', headerName: t('campaigns:updatedAt'), align: 'left', - width: 250, + width: 270, headerAlign: 'left', renderCell: (cellValues: GridRenderCellParams) => ( @@ -188,7 +178,7 @@ export default function MyDonatedToCampaignTable() { field: 'deletedAt', headerName: t('campaigns:deletedAt'), align: 'left', - width: 250, + width: 270, headerAlign: 'left', }, ] @@ -198,7 +188,6 @@ export default function MyDonatedToCampaignTable() { ) : ( - {t('profile:donations.noDonations')} + {t('profile:donations.noDonations')} )} ) diff --git a/src/pages/profile/[slug].ts b/src/pages/profile/[slug].ts index dba7f75f7..7ad5c68db 100644 --- a/src/pages/profile/[slug].ts +++ b/src/pages/profile/[slug].ts @@ -6,6 +6,7 @@ export const getServerSideProps = securedPropsWithTranslation([ 'profile', 'common', 'validation', + 'campaigns', ]) export default ProfilePage diff --git a/src/pages/profile/index.ts b/src/pages/profile/index.ts index 3754df011..712a5920e 100644 --- a/src/pages/profile/index.ts +++ b/src/pages/profile/index.ts @@ -6,6 +6,7 @@ export const getServerSideProps = securedPropsWithTranslation([ 'profile', 'common', 'validation', + 'campaigns', ]) export default ProfilePage From 7f3d50002c420a68c8465010ecbde9e33ff888cf Mon Sep 17 00:00:00 2001 From: marinovl7 Date: Wed, 19 Oct 2022 18:58:55 +0200 Subject: [PATCH 4/6] Fixed dublicate endpoints with different names --- src/service/apiEndpoints.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index 52c41090d..c4c7dff35 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -70,7 +70,6 @@ export const endpoints = { editDonation: (id: string) => { url: `/donation/${id}`, method: 'PATCH' }, deleteDonation: { url: `/donation/delete`, method: 'POST' }, userDonations: { url: 'donation/user-donations', method: 'GET' }, - userDonationsCampaigns: { url: 'donation/user-donations-campaigns', method: 'GET' }, uploadBankTransactionsFile: (bankTransactionsFileId: string) => { url: `/bank-transactions-file/${bankTransactionsFileId}`, method: 'POST' }, }, From bbb2f6ed2b5e21de83f5286a609af172c4f77b12 Mon Sep 17 00:00:00 2001 From: quantum-grit Date: Mon, 24 Oct 2022 10:29:43 +0300 Subject: [PATCH 5/6] improved wording --- public/locales/bg/profile.json | 6 +++--- public/locales/en/profile.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/public/locales/bg/profile.json b/public/locales/bg/profile.json index 3d4b6e08c..747bbc8bb 100644 --- a/public/locales/bg/profile.json +++ b/public/locales/bg/profile.json @@ -52,9 +52,9 @@ }, "myCampaigns": { "index": "Моите кампании", - "history": "История на моите кампании", - "noCampaigns": "Вие не сте организатор,координатор или бенефицент на нито една кампания", - "donatedTo": "Кампании, към които сте направили дарение" + "history": "Управление на моите кампании", + "noCampaigns": "Вие не сте в роля организатор, координатор или бенефицент към нито една кампания", + "donatedTo": "Кампании, в които съм дарил" }, "donationsContract": "Договор дарение", "certificates": "Сертификати", diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json index 63a833e69..30902097e 100644 --- a/public/locales/en/profile.json +++ b/public/locales/en/profile.json @@ -45,9 +45,9 @@ }, "myCampaigns": { "index": "My campaigns", - "history": "My campaigns history", - "noCampaigns": "You are not organizer,coordinator or beneficiery to any campaign", - "donatedTo": "Campaigns, which You donated to" + "history": "Manage my campaigns", + "noCampaigns": "You are not in organizer, coordinator or beneficiery role in any campaign", + "donatedTo": "Campaigns I donated to" }, "donationsContract": "Donation contract", "certificates": "Certificates", From bd2222fa997674f364849a578a86c3c2f8695725 Mon Sep 17 00:00:00 2001 From: quantum-grit Date: Mon, 24 Oct 2022 10:30:30 +0300 Subject: [PATCH 6/6] hide my campaigns table if not in role --- .../auth/profile/MyCampaignsTab.tsx | 7 +- .../auth/profile/MyCampaignsTable.tsx | 101 +++++++++++++----- 2 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/components/auth/profile/MyCampaignsTab.tsx b/src/components/auth/profile/MyCampaignsTab.tsx index ad0649f86..4265d111d 100644 --- a/src/components/auth/profile/MyCampaignsTab.tsx +++ b/src/components/auth/profile/MyCampaignsTab.tsx @@ -55,12 +55,7 @@ export default function MyCampaignsTab() { const { t } = useTranslation() return ( - - {t('profile:myCampaigns.history')} - - - - + {t('profile:myCampaigns.donatedTo')} diff --git a/src/components/auth/profile/MyCampaignsTable.tsx b/src/components/auth/profile/MyCampaignsTable.tsx index 58a2344dd..5f2c24433 100644 --- a/src/components/auth/profile/MyCampaignsTable.tsx +++ b/src/components/auth/profile/MyCampaignsTable.tsx @@ -2,7 +2,7 @@ import { bg, enUS } from 'date-fns/locale' import { useTranslation } from 'next-i18next' import { useState, useMemo } from 'react' import { DataGrid, GridColDef, GridColumns, GridRenderCellParams } from '@mui/x-data-grid' -import { Tooltip, Button, Box } from '@mui/material' +import { Tooltip, Button, Box, Typography, styled } from '@mui/material' import { getExactDateTime, getRelativeDate } from 'common/util/date' import { money } from 'common/util/money' @@ -20,14 +20,62 @@ import { } from 'components/campaigns/grid/CampaignGrid' import DetailsModal from '../../campaigns/grid/modals/DetailsModal' import DeleteModal from '../../campaigns/grid/modals/DeleteModal' +import ProfileTab from './ProfileTab' +import { ProfileTabs } from './tabs' + +const PREFIX = 'MyCampaignsTab' + +const classes = { + h3: `${PREFIX}-h3`, + thinFont: `${PREFIX}-thinFont`, + smallText: `${PREFIX}-smallText`, + boxTitle: `${PREFIX}-boxTitle`, +} + +const Root = styled('div')(({ theme }) => ({ + [`& .${classes.h3}`]: { + fontStyle: 'normal', + fontWeight: '500', + fontSize: '25px', + lineHeight: '116.7%', + margin: '0', + }, + [`& .${classes.thinFont}`]: { + fontStyle: 'normal', + fontWeight: 400, + fontSize: '24px', + lineHeight: '123.5%', + letterSpacing: '0.25px', + color: '#000000', + margin: 0, + }, + [`& .${classes.smallText}`]: { + fontFamily: 'Lato, sans-serif', + fontStyle: 'normal', + fontWeight: '500', + fontSize: '15px', + lineHeight: '160%', + letterSpacing: '0.15px', + }, + [`& .${classes.boxTitle}`]: { + backgroundColor: 'white', + padding: theme.spacing(3, 7), + paddingBottom: theme.spacing(3), + marginTop: theme.spacing(3), + boxShadow: theme.shadows[3], + }, +})) export default function MyCampaingsTable() { const { t, i18n } = useTranslation() const locale = i18n.language == 'bg' ? bg : enUS const [viewId, setViewId] = useState() const [deleteId, setDeleteId] = useState() - const { data = [], refetch } = useGetUserCampaigns() - const selectedCampaign = useMemo(() => data.find((c) => c.id === viewId), [data, viewId]) + const { data: campaigns = [], refetch } = useGetUserCampaigns() + const selectedCampaign = useMemo( + () => campaigns.find((c) => c.id === viewId), + [campaigns, viewId], + ) const commonProps: Partial = { align: 'left', width: 100, @@ -226,27 +274,32 @@ export default function MyCampaingsTable() { ] return ( <> - {data.length !== 0 ? ( - - ) : ( - {t('profile:myCampaigns.noCampaigns')} - )} + {campaigns.length !== 0 ? ( + <> + + {t('profile:myCampaigns.history')} + + + + + + ) : null} {selectedCampaign && ( setViewId(undefined)} />