feat: teams page additional features

src/graphql/query/leaderboardsQuery.graphql

@@ -1,6 +1,6 @@
-query leaderboardsQuery {
+query leaderboardsQuery($category: TeamCategoryEnum) {
 	community {
-		leaderboards {
+		leaderboards(category: $category ) {
 			amountFunded {
 				lastMonth {
 					rank

src/pages/LendingTeams/TeamLeaderboard.vue

@@ -41,7 +41,17 @@
 					:key="timeFrame"
 					class="tw-border-primary"
 				>
+					<!-- loader and no teams -->
+					<span
+						class="tw-text-center tw-text-secondary tw-mb-2"
+						v-if="!isLoading && teamsToShow(timeFrame).length === 0"
+					>No teams to show</span>
+					<kv-loading-placeholder
+						v-if="isLoading"
+						class="tw-mb-2" :style="{width: '100%', height: '1.6rem'}"
+					/>
 					<div
+						v-else
 						v-for="leaderboardTeam in teamsToShow(timeFrame)"
 						:key="leaderboardTeam.team.id"
 						class="tw-text-small tw-rounded-sm tw-flex tw-flex-row tw-p-1"
@@ -117,10 +127,12 @@ import KvTab from '~/@kiva/kv-components/vue/KvTab';
 import KvTabPanel from '~/@kiva/kv-components/vue/KvTabPanel';
 import KvTabs from '~/@kiva/kv-components/vue/KvTabs';
 import KvProgressBar from '~/@kiva/kv-components/vue/KvProgressBar';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 
 export default {
 	name: 'TeamLeaderboard',
 	components: {
+		KvLoadingPlaceholder,
 		KvProgressBar,
 		KvTabs,
 		KvTab,
@@ -132,10 +144,14 @@ export default {
 			teamNoImage,
 			isMobile: false,
 			expandTeams: false,
-			selectedTabIndex: 0
+			selectedTabIndex: 0,
 		};
 	},
 	props: {
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
 		boardType: {
 			type: String,
 			validator: value => ['memberCount', 'overallLoanedAmount'].includes(value),

src/pages/LendingTeams/TeamLeaderboards.vue

@@ -1,17 +1,30 @@
 <template>
 	<div class="tw-col-span-12 md:tw-col-span-4">
-		<h3 class="tw-mb-3">
+		<h3 class="tw-mb-0">
 			Team Leaderboards
 		</h3>
-		<team-leaderboard board-type="overallLoanedAmount" :board-teams="funded" />
-		<team-leaderboard board-type="memberCount" :board-teams="members" />
+		<p class="tw-text-small  tw-mb-2">
+			For {{ teamCategory ? teamCategoryFriendlyName(teamCategory) : 'all' }} teams
+		</p>
+		<team-leaderboard
+			board-type="overallLoanedAmount"
+			:board-teams="funded"
+			:team-category="teamCategory"
+			:is-loading="isLoading"
+		/>
+		<team-leaderboard
+			board-type="memberCount"
+			:board-teams="members"
+			:team-category="teamCategory"
+			:is-loading="isLoading"
+		/>
 	</div>
 </template>
 
 <script>
 
 import TeamLeaderboard from './TeamLeaderboard';
-import { fetchLeaderboard } from '../../util/teamsUtil';
+import { fetchLeaderboard, teamCategoryFriendlyName } from '../../util/teamsUtil';
 
 export default {
 	name: 'TeamLeaderboards',
@@ -23,13 +36,38 @@ export default {
 		return {
 			funded: {},
 			members: {},
+			teamCategory: '',
+			isLoading: true,
 		};
 	},
+	watch: {
+		'$route.query.teamCategory': {
+			handler(teamCategory) {
+				if (teamCategory !== '') {
+					this.teamCategory = teamCategory;
+					this.getLeaderboards();
+				}
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	methods: {
+		getLeaderboards() {
+			this.isLoading = true;
+			fetchLeaderboard(this.apollo, this.teamCategory)
+				.then(leaderboards => {
+					this.funded = leaderboards?.amountFunded ?? {};
+					this.members = leaderboards?.newUsers ?? {};
+				})
+				.finally(() => {
+					this.isLoading = false;
+				});
+		},
+		teamCategoryFriendlyName
+	},
 	mounted() {
-		fetchLeaderboard(this.apollo).then(leaderboards => {
-			this.funded = leaderboards?.amountFunded ?? {};
-			this.members = leaderboards?.newUsers ?? {};
-		});
+		this.getLeaderboards();
 	},
 };
 </script>

src/pages/LendingTeams/TeamListing.vue

@@ -1,14 +1,12 @@
 <template>
 	<div>
-		<div
-			class="tw-flex tw-justify-between tw-items-baseline tw-mb-3"
-		>
-			<h3>
+		<div>
+			<h3 class="tw-mb-0">
 				Team Listing
 			</h3>
-			<p class="tw-text-small" v-if="!loading">
+			<p class="tw-text-small tw-mb-2">
 				<!-- eslint-disable-next-line max-len -->
-				{{ numeral(totalCount).format('0,0') }} lending teams in {{ teamCategory ? teamCategory : 'all categories' }}
+				<span v-if="!loading">{{ numeral(totalCount).format('0,0') }}</span> lending teams in {{ teamCategory ? teamCategoryFriendlyName(teamCategory) : 'all categories' }}
 			</p>
 		</div>
 		<team-search-bar
@@ -26,59 +24,8 @@
 					@update:modelValue="pushChangesToUrl"
 					v-kv-track-event="['teams', 'filter', 'teams-search', teamCategory]"
 				>
-					<option value="">
-						-- All Categories --
-					</option>
-					<option value="AlumniGroups">
-						Alumni Groups
-					</option>
-					<option value="Businesses">
-						Businesses
-					</option>
-					<option value="BusinessesInternalGroups">
-						Business - Internal Groups
-					</option>
-					<option value="Clubs">
-						Clubs
-					</option>
-					<option value="CollegesUniversities">
-						Colleges/Universities
-					</option>
-					<option value="CommonInterest">
-						Common Interest
-					</option>
-					<option value="Events">
-						Events
-					</option>
-					<option value="Families">
-						Families
-					</option>
-					<option value="FieldPartnerFans">
-						Field Partner Fans
-					</option>
-					<option value="Friends">
-						Friends
-					</option>
-					<option value="LocalArea">
-						Local Area
-					</option>
-					<option value="Memorials">
-						Memorials
-					</option>
-					<option value="ReligiousCongregations">
-						Religious Congregations
-					</option>
-					<option value="Schools">
-						Schools
-					</option>
-					<option value="SportsGroups">
-						Sports Groups
-					</option>
-					<option value="YouthGroups">
-						Youth Groups
-					</option>
-					<option value="Other">
-						Other
+					<option v-for="(category, index) in teamCategories" :key="index" :value="category.value">
+						{{ category.label }}
 					</option>
 				</kv-select>
 			</div>
@@ -303,7 +250,7 @@ import teamNoImage from '@/assets/images/team_s135.png';
 import { gql } from '@apollo/client';
 import KvPagination from '~/@kiva/kv-components/vue/KvPagination';
 import KvSelect from '~/@kiva/kv-components/vue/KvSelect';
-import { fetchTeams } from '../../util/teamsUtil';
+import { fetchTeams, teamCategories, teamCategoryFriendlyName } from '../../util/teamsUtil';
 import TeamSearchBar from './TeamSearchBar';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
@@ -376,6 +323,7 @@ export default {
 	inject: ['apollo', 'cookieStore'],
 	data() {
 		return {
+			teamCategories,
 			teamCategory: '',
 			teamOption: '',
 			teamSort: 'overallLoanedAmount',
@@ -403,15 +351,15 @@ export default {
 		urlParams() {
 			return toUrlParams({
 				offset: this.offset,
-				teamCategory: this.teamCategory,
-				teamOption: this.teamOption,
+				...(this.teamCategory !== '' && { teamCategory: this.teamCategory }),
+				...(this.teamOption !== '' && { teamOption: this.teamOption }),
 				teamSort: this.teamSort,
 				queryString: this.queryString,
 			});
 		},
 		lastTeamPage() {
 			return Math.ceil(this.totalCount / this.limit);
-		},
+		}
 	},
 	methods: {
 		handleSearchQuery(queryString) {
@@ -450,10 +398,20 @@ export default {
 				pushToRouter('teamCategory');
 				return;
 			}
+			if (this.teamCategory === '' && this.teamCategory !== this.$route.query?.teamCategory) {
+				const query = { ...this.$route.query };
+				delete query?.teamCategory;
+				this.$router.replace({ query });
+			}
 			if (this.teamOption && this.teamOption !== this.$route.query?.teamOption) {
 				pushToRouter('teamOption');
 				return;
 			}
+			if (this.teamOption === '' && this.teamOption !== this.$route.query?.teamOption) {
+				const query = { ...this.$route.query };
+				delete query?.teamCategory;
+				this.$router.replace({ query });
+			}
 			if (this.queryString && this.queryString !== this.$route.query?.queryString) {
 				pushToRouter('queryString');
 				return;
@@ -492,6 +450,7 @@ export default {
 		userIsTeamMember(teamId) {
 			return this.myTeams.some(team => team.id === teamId);
 		},
+		teamCategoryFriendlyName
 	},
 	created() {
 		// extract query

src/util/teamsUtil.js

@@ -1,6 +1,85 @@
 import teamsQuery from '@/graphql/query/teamsQuery.graphql';
 import leaderboardsQuery from '@/graphql/query/leaderboardsQuery.graphql';
 
+export const teamCategories = [
+	{
+		value: '',
+		label: '-- All Categories --',
+	},
+	{
+		value: 'AlumniGroups',
+		label: 'Alumni Groups',
+	},
+	{
+		value: 'Businesses',
+		label: 'Businesses',
+	},
+	{
+		value: 'BusinessesInternalGroups',
+		label: 'Business - Internal Groups',
+	},
+	{
+		value: 'Clubs',
+		label: 'Clubs',
+	},
+	{
+		value: 'CollegesUniversities',
+		label: 'Colleges/Universities',
+	},
+	{
+		value: 'CommonInterest',
+		label: 'Common Interest',
+	},
+	{
+		value: 'Events',
+		label: 'Events',
+	},
+	{
+		value: 'Families',
+		label: 'Families',
+	},
+	{
+		value: 'FieldPartnerFans',
+		label: 'Field Partner Fans',
+	},
+	{
+		value: 'Friends',
+		label: 'Friends',
+	},
+	{
+		value: 'LocalArea',
+		label: 'Local Area',
+	},
+	{
+		value: 'Memorials',
+		label: 'Memorials',
+	},
+	{
+		value: 'ReligiousCongregations',
+		label: 'Religious Congregations',
+	},
+	{
+		value: 'Schools',
+		label: 'Schools',
+	},
+	{
+		value: 'SportsGroups',
+		label: 'Sports Groups',
+	},
+	{
+		value: 'YouthGroups',
+		label: 'Youth Groups',
+	},
+	{
+		value: 'Other',
+		label: 'Other',
+	}
+];
+
+export function teamCategoryFriendlyName(categoryValue) {
+	return teamCategories.find(category => category.value === categoryValue)?.label;
+}
+
 /**
 * @param {Object} apollo, sortOption, category, membershipType, queryString, offset, limit
 */
@@ -24,10 +103,13 @@ export async function fetchTeams(apollo, sortOption, category, membershipType, q
 	}
 }
 
-export async function fetchLeaderboard(apollo) {
+export async function fetchLeaderboard(apollo, category) {
 	try {
 		const result = await apollo.query({
 			query: leaderboardsQuery,
+			variables: {
+				category: category || undefined,
+			},
 		});
 		return result.data?.community?.leaderboards;
 	} catch (e) {