From a81108e1710a48cf2b60638d6fcc35262b154762 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 16:28:21 -0500
Subject: [PATCH] feat: change tab on swipe

---
 src/components/MyKiva/BorrowerCarousel.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 628c9d8548..881cec33ec 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -23,7 +23,7 @@
 			</div>
 		</template>
 		<div v-if="hasActiveLoans && !isLoading">
-			<KvTabs @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
+			<KvTabs ref="tabs" @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
 				<template #tabNav>
 					<KvTab
 						v-for="(loan, index) in filteredLoans"
@@ -81,6 +81,7 @@
 					:multiple-slides-visible="true"
 					:slide-max-width="singleSlideWidth"
 					:embla-options="{ loop: false, align: 'center'}"
+					@change="onInteractCarousel"
 				>
 					<template v-for="(loan, index) in loans" #[`slide${index+1}`] :key="loan.id || index">
 						<BorrowerStatusCard :loan="loan" class="tw-h-full" />
@@ -153,6 +154,7 @@ const emit = defineEmits(['selected-loan']);
 
 const { loans, totalLoans } = toRefs(props);
 const carousel = ref(null);
+const tabs = ref(null);
 const windowWidth = ref(0);
 
 const hasActiveLoans = computed(() => {
@@ -233,6 +235,10 @@ const handleResize = () => {
 
 const throttledResize = _throttle(handleResize, 200);
 
+const onInteractCarousel = interaction => {
+	tabs.value.tabContext.selectedIndex = interaction.value;
+};
+
 onMounted(() => {
 	if (!hasActiveLoans.value) {
 		$kvTrackEvent('portfolio', 'view', 'no-active-borrowers');