Skip to content

Commit ce2ccd1

Browse files
mcstovermcstover
committed
fix: use global kv-card-frame component, tweak styles and visual layout, stub forthcoming elements
1 parent b0d17d6 commit ce2ccd1

File tree

1 file changed

+115
-77
lines changed

1 file changed

+115
-77
lines changed

‎src/pages/GivingFunds/GivingFundsManagementPage.vue

Lines changed: 115 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,121 @@
1-
<!-- eslint-disable max-len -->
21
<template>
3-
<WwwPage main-class="tw-bg-secondary tw-pb-3">
2+
<WwwPage main-class="tw-bg-secondary tw-pb-5">
43
<KvPageContainer>
5-
<KvGrid class="tw-grid-cols-12 tw--mx-2.5 md:tw-mx-0">
4+
<KvGrid class="tw-grid-cols-12 md:tw-mx-0">
65
<div class="tw-col-span-12 tw-pt-1.5 md:tw-pt-3">
7-
<div class="tw-py-2 md:tw-py-3">
6+
<div class="tw-py-2 md:tw-py-3 tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
87
<h1 class="tw-mb-2 tw-break-words">
98
<div>
10-
My Giving Funds
9+
Giving Funds
1110
</div>
1211
</h1>
13-
</div>
14-
<div
15-
v-if="activeFundraisers?.length"
16-
class="tw-pb-2 md:tw-pb-3"
17-
>
18-
<h3 class="tw-mb-2">
19-
Active Fundraisers
20-
</h3>
21-
<div
22-
class="tw-rounded tw-p-2 tw-bg-primary"
12+
<kv-button
13+
variant="primary"
14+
:href="`#`"
15+
@click.prevent="createNewFund"
16+
v-kv-track-event="['giving-funds', 'click', 'Start a new fund']"
2317
>
24-
<KvLoadingPlaceholder
25-
v-if="loading"
26-
class="md:!tw-mt-1 !tw-w-1/4"
27-
style="height: 32px; margin-top: 2px;"
28-
/>
29-
<div
30-
v-for="(fund, i) in activeFundraisers"
31-
:key="`active-fundraiser-${i}`"
32-
>
33-
You hava active fundraiser for <b>{{ fund.name }}</b> <a
34-
:href="`/gf-beta/${fund.id}`"
35-
target="_blank"
36-
v-kv-track-event="['giving-funds', 'click', 'View active fundraiser']"
37-
>View</a>
38-
</div>
39-
</div>
18+
Start a new fund
19+
</kv-button>
4020
</div>
21+
22+
<kv-loading-placeholder
23+
v-if="loading"
24+
class="tw-rounded tw-mb-2 tw-w-full" :style="{ height: '150px' }"
25+
/>
26+
4127
<div
42-
v-if="givingFundsEntries?.length"
28+
v-else-if="givingFundsEntries?.length"
4329
>
44-
<h3 class="tw-mb-2">
45-
Giving Funds
46-
</h3>
47-
<div
30+
<kv-card-frame
4831
v-for="(fund, i) in givingFundsEntries"
4932
:key="`fund-${i}`"
50-
class="tw-rounded tw-p-2 tw-bg-primary tw-mb-2"
33+
class="tw-mb-2"
5134
>
52-
<div class="tw-flex tw-items-center tw-justify-between">
53-
<div>
54-
<h4 class="tw-mb-1">
55-
{{ fund?.campaign?.category?.name }}
56-
</h4>
57-
<p class="tw-text-subhead">
58-
{{ fund?.campaign?.category?.description }}
59-
</p>
60-
<p class="">
61-
Total Donated: <b>{{ fund?.amountDonated }}</b>
62-
</p>
35+
<div class="tw-p-2">
36+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
37+
<div>
38+
<h3 class="tw-mb-1">
39+
{{ fund?.campaign?.category?.name }}
40+
</h3>
41+
<!-- eslint-disable max-len -->
42+
<div
43+
v-if="fund?.goals?.values?.filter(goal => goal?.status === 'IN_PROGRESS')?.length"
44+
>
45+
<h4
46+
class="tw-bg-brand-200 tw-pt-1 tw-pb-0.5 tw-px-1.5 tw-rounded-full tw-inline-block tw-mb-2 tw-mr-1"
47+
>
48+
Actively fundraising
49+
</h4>
50+
<kv-text-link
51+
:href="`/gf-beta/${fund.id}`"
52+
target="_blank"
53+
v-kv-track-event="['giving-funds', 'click', 'View active fundraiser']"
54+
>
55+
View
56+
</kv-text-link>
57+
</div>
58+
<!-- eslint-enable max-len -->
59+
<!-- eslint-disable max-len -->
60+
<p v-if="fund?.campaign?.lendingStats?.totalLivesTouched">
61+
You have helped support {{ fund?.campaign?.lendingStats?.totalLivesTouched }} {{ fund?.campaign?.category?.name }} entrpeneurs!
62+
</p>
63+
<!-- eslint-enable max-len -->
64+
<p v-else>
65+
{{ fund?.campaign?.category?.description }}
66+
</p>
67+
68+
<div class="tw-flex tw-justify-left tw-gap-4 tw-mt-2 md:tw-self-end">
69+
<div v-if="fund?.amountDonated">
70+
<h3>{{ fund?.amountDonated }}</h3>
71+
<p class="tw-text-small tw-text-gray-500">
72+
Total fund value
73+
</p>
74+
</div>
75+
<div
76+
v-if="fund?.campaign?.lendingStats?.totalLivesTouched"
77+
>
78+
<h3>{{ fund?.campaign?.lendingStats?.totalLivesTouched }}</h3>
79+
<p class="tw-text-small tw-text-gray-500">
80+
People reached
81+
</p>
82+
</div>
83+
</div>
84+
</div>
85+
86+
<div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-right tw-gap-1.5">
87+
<KvButton
88+
:href="`#`"
89+
target="_blank"
90+
@click.prevent="handleDonateToFund(fund.id)"
91+
v-kv-track-event="['giving-funds', 'click', 'Donate']"
92+
>
93+
Donate
94+
</KvButton>
95+
<KvButton
96+
:href="`/gf-beta/${fund.id}`"
97+
target="_blank"
98+
variant="secondary"
99+
v-kv-track-event="['giving-funds', 'click', 'View giving fund']"
100+
>
101+
View and Edit
102+
</KvButton>
103+
</div>
63104
</div>
64-
<KvButton
65-
:href="`/gf-beta/${fund.id}`"
66-
target="_blank"
67-
variant="secondary"
68-
v-kv-track-event="['giving-funds', 'click', 'View giving fund']"
69-
>
70-
View Fund
71-
</KvButton>
72105
</div>
73-
</div>
106+
</kv-card-frame>
74107
</div>
108+
109+
<kv-card-frame
110+
v-else
111+
class="tw-mb-2"
112+
>
113+
<div class="tw-p-2">
114+
<p class="tw-text-center tw-text-gray-500">
115+
You have not created any giving funds yet.
116+
</p>
117+
</div>
118+
</kv-card-frame>
75119
</div>
76120
</KvGrid>
77121
</KvPageContainer>
@@ -80,17 +124,18 @@
80124

81125
<script setup>
82126
import {
83-
computed,
84127
onMounted,
85128
ref,
86129
inject,
87130
} from 'vue';
88131
import WwwPage from '#src/components/WwwFrame/WwwPage';
89132
import {
90-
KvPageContainer,
91-
KvGrid,
92133
KvButton,
134+
KvCardFrame,
135+
KvGrid,
93136
KvLoadingPlaceholder,
137+
KvPageContainer,
138+
KvTextLink,
94139
} from '@kiva/kv-components';
95140
import logFormatter from '#src/util/logFormatter';
96141
import myGivingFundsQuery from '#src/graphql/query/portfolio/myGivingFunds.graphql';
@@ -102,23 +147,6 @@ const givingFundsInfo = ref({});
102147
const givingFundsTotalCount = ref(0);
103148
const givingFundsEntries = ref([]);
104149
105-
const activeFundraisers = computed(() => {
106-
const fundsWithActiveFundraisers = givingFundsEntries?.value?.filter(fund => {
107-
const activeFundGoals = fund?.goals?.values?.filter(goal => {
108-
return goal?.status === 'IN_PROGRESS';
109-
});
110-
return activeFundGoals?.length > 0;
111-
}) ?? [];
112-
return fundsWithActiveFundraisers.map(fund => {
113-
const activeFundGoal = fund?.goals?.values?.find(goal => goal?.status === 'IN_PROGRESS');
114-
return {
115-
name: fund?.campaign?.category?.name,
116-
id: fund?.id,
117-
activeFundGoal,
118-
};
119-
});
120-
});
121-
122150
const fetchGivingFundData = async () => {
123151
try {
124152
const response = await apollo.query({
@@ -133,6 +161,16 @@ const fetchGivingFundData = async () => {
133161
}
134162
};
135163
164+
const createNewFund = () => {
165+
// Handle the logic for creating a new giving fund
166+
logFormatter('Create a new giving fund', 'info');
167+
};
168+
169+
const handleDonateToFund = fundId => {
170+
// Handle the logic for donating to a fund
171+
logFormatter(`Donate to fund with ID: ${fundId}`, 'info');
172+
};
173+
136174
onMounted(() => {
137175
fetchGivingFundData();
138176
});

0 commit comments

Comments
 (0)