feat: export button functionality

src/components/Portfolio/LoanFilterBar.vue

@@ -8,6 +8,8 @@
 				<kv-button
 					class="tw-text-sm"
 					variant="primary"
+					v-kv-track-event="['portfolio', 'click', 'export-loans']"
+					@click="handleExportClick"
 				>
 					Export {{ totalLoans }} loans
 				</kv-button>
@@ -55,18 +57,48 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, inject } from 'vue';
 import { KvSelect, KvTextInput, KvButton } from '@kiva/kv-components';
+import logReadQueryError from '#src/util/logReadQueryError';
+import userIdQuery from '#src/graphql/query/userId.graphql';
+import logFormatter from '#src/util/logFormatter';
 
-defineProps({
+const props = defineProps({
 	totalLoans: {
 		type: Number,
 		default: 0
 	}
 });
 
+const apollo = inject('apollo');
 const searchText = ref('');
 const selectedStatus = ref('all');
 const selectedLocation = ref('all');
 const selectedPartner = ref('all');
+
+const handleExportClick = async () => {
+	try {
+		const { data } = await apollo.query({
+			query: userIdQuery
+		});
+
+		const userId = data?.my?.userAccount?.id;
+		if (!userId) {
+			logFormatter('No user ID available for export');
+			this.$showTipMsg('There was a problem preparing your loan export.', 'error');
+			return;
+		}
+
+		const queryParams = new URLSearchParams({
+			iDisplayStart: '0',
+			iDisplayLength: props.totalLoans.toString(),
+			user_id: userId.toString()
+		});
+
+		window.location.href = `https://www.kiva.org/portfolio/loans/export?${queryParams.toString()}`;
+	} catch (error) {
+		logReadQueryError(error, 'LoanFilterBar userIdQuery');
+		this.$showTipMsg('There was a problem preparing your loan export.', 'error');
+	}
+};
 </script>