From ed4a78f37332966bcdd4c113f56e78984eee120f Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 1 Sep 2024 12:20:04 -0400
Subject: [PATCH] using v-model on summary

---
 src/App.vue                |  9 ++++-----
 src/components/summary.vue | 13 ++++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb3bb7d..56b11d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,10 +14,6 @@
 	const instruments = ref([])
 	const categories = ref([])
 
-	const updateCurrentWorkingCategory = (summarizedCategory) =>{
-		currentWorkingCategory.value = categories.value.find(category => category.id === summarizedCategory.category_id)
-	}
-
 	const refreshPage = (session) => {
 		summaryRef.value.loadData()
 		statusRef.value.loadData()
@@ -46,7 +42,10 @@
 				:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
 		<section id="summary">
-			<Summary ref="summaryRef" @update="updateCurrentWorkingCategory"/>
+			<Summary 
+				ref="summaryRef"
+				:categories="categories"
+				v-model="currentWorkingCategory" />
 		</section>
 		<section id="category">
 			<ShowCategory
diff --git a/src/components/summary.vue b/src/components/summary.vue
index 7dfb26b..4766639 100644
--- a/src/components/summary.vue
+++ b/src/components/summary.vue
@@ -1,18 +1,21 @@
 <script setup>
 	import { onMounted, ref, defineExpose } from 'vue'
+	const props = defineProps(['categories'])
+	const currentWorkingCategory = defineModel()
+
 	const emit = defineEmits(['update'])
 
-	const categories = ref([])
+	const summary = ref([])
 
 	const loadData = async () => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'summary')
-		categories.value = await response.json()
+		summary.value = await response.json()
 	}
 
 	onMounted(loadData)
 
-	const setWorkingCategory = (category) => {
-		emit('update', category)
+	const setWorkingCategory = (choice) => {
+		currentWorkingCategory.value = props.categories.find(category => category.id === choice.category_id)
 	}
 
 	defineExpose({loadData})
@@ -31,7 +34,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr v-for="category in categories" @click="setWorkingCategory(category)">
+			<tr v-for="category in summary" @click="setWorkingCategory(category)">
 				<td>{{category.category_id}}</td>
 				<td>{{category.category}}</td>
 				<td>{{category.chunks_practiced}}</td>