From a62c96f66558c8a5c5671208386254892b76bc04 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 25 Aug 2024 23:56:51 +0200
Subject: [PATCH] category chooser changes when category id prop changes

---
 src/components/category_chooser.vue | 24 ++++++++++++++++++++----
 src/components/show_category.vue    |  6 +++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/category_chooser.vue b/src/components/category_chooser.vue
index 24582a5..1a6ce80 100644
--- a/src/components/category_chooser.vue
+++ b/src/components/category_chooser.vue
@@ -1,8 +1,9 @@
 <script setup>
 	import { onMounted, ref, watch, } from 'vue'
 	const emit = defineEmits(['update'])
-	const props = defineProps(['categories'])
+	const props = defineProps(['categories', 'currentWorkingCategoryID'])
 	const instruments = ref([])
+	const currentWorkingCategoryID = ref(props.currentWorkingCategoryID)
 	const chosenInstrument = ref('clarinet')
 	for(let category of props.categories){
 		if(!instruments.value.includes(category.instrument)){
@@ -12,6 +13,11 @@
 	const handleSelection = (event)=>{
 		emit('update', event.target.value)
 	}
+	
+	watch(() => props.currentWorkingCategoryID, (newValue)=>{
+		const newCategory = props.categories.find(category => category.id == newValue)
+		chosenInstrument.value = newCategory.instrument
+	})
 </script>
 <template>
 	<select v-model="chosenInstrument">
@@ -19,9 +25,19 @@
 			{{instrument}}
 		</option>
 	</select>
-	<select @change="handleSelection" v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
-		<option v-bind:value="category.id" v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
-			{{category.category}}
+	<select
+		@change="handleSelection"
+		v-for="instrument in instruments"
+		:key="instrument"
+		v-model="props.currentWorkingCategoryID"
+		v-show="instrument == chosenInstrument">
+			<option
+				v-bind:value="category.id"
+				v-for="category in props.categories"
+				:key="category.id"
+				v-show="category.instrument == instrument"
+				:selected="category.instrument == instrument">
+					{{category.category}}
 		</option>
 	</select>
 </template>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index 5764c3d..727c8e7 100644
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@@ -38,7 +38,11 @@
 
 <template>
 	<h2>Show Category</h2>
-	<CategoryChooser @update="loadCategory" v-if="categories.length > 0" :categories="categories" />
+	<CategoryChooser
+		@update="loadCategory" 
+		v-if="categories.length > 0" 
+		:currentWorkingCategoryID="props.currentWorkingCategoryID" 
+		:categories="categories" />
 	<table>
 		<thead>
 			<tr>