using v-model for show category

src/App.vue

@@ -8,6 +8,7 @@
 	import Status from './components/status.vue'
 	
 	const currentWorkingCategory = ref(null)
+	const currentWorkingInstrument = ref(null)
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
@@ -26,6 +27,7 @@
 		response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
 		categories.value = await response.json()
 		currentWorkingCategory.value = categories.value[0]
+		currentWorkingInstrument.value = instruments.value.find(instrument => instrument.name === currentWorkingCategory.value.instrument)
 	}
 	onMounted(loadData)
 </script>
@@ -34,26 +36,29 @@
 	<main>
 		<section id="timer">
 			<Status ref="statusRef"/>
-			<Timer 
+			<!--<Timer 
 				v-if="categories.length > 0"
 				@loggedTime="refreshPage"
 				:categories="categories"
 				:instruments="instruments"
-				:currentWorkingCategory="currentWorkingCategory"/>
+				:currentWorkingCategory="currentWorkingCategory"/>-->
 		</section>
 		<section id="summary">
 			<Summary 
 				ref="summaryRef"
+				:instruments="instruments"
 				:categories="categories"
-				v-model="currentWorkingCategory" />
+				v-model:currentWorkingInstrument="currentWorkingInstrument"
+				v-model:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
 		<section id="category">
 			<ShowCategory
-				v-if="categories.length > 0"
+				v-if="currentWorkingInstrument"
+				ref="showCategoryRef"
 				:instruments="instruments"
 				:categories="categories"
-				ref="showCategoryRef"
-				:currentWorkingCategory="currentWorkingCategory"/>
+				v-model:currentWorkingInstrument="currentWorkingInstrument"
+				v-model:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/category_chooser.vue

@@ -1,21 +1,18 @@
 <script setup>
-	import { onMounted, ref, watch, toRefs } from 'vue'
-	const emit = defineEmits(['update'])
-	const props = defineProps(['instruments', 'categories', 'currentWorkingCategory'])
-	
-	const handleSelection = (event)=>{
-		emit('update', event.target.value)
-	}
+	const props = defineProps(['instruments', 'categories'])
+	const currentWorkingCategory = defineModel('currentWorkingCategory')
+	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 </script>
 <template>
-	<select v-model="currentWorkingCategory.instrument">
-		<option v-for="instrument in props.instruments">
+	<select v-model="currentWorkingInstrument">
+		<option :value="instrument" v-for="instrument in props.instruments">
 			{{instrument.name}}
 		</option>
 	</select>
-	<select @change="handleSelection" v-model="currentWorkingCategory.id">
-		<option v-show="category.instrument === currentWorkingCategory.instrument"
-			v-bind:value="category.id"
+	<select v-model="currentWorkingCategory">
+		<option
+			v-show="category.instrument === currentWorkingInstrument.name"
+			:value="category"
 			v-for="category in props.categories">
 				{{category.category}}
 		</option>

src/components/show_category.vue

@@ -1,41 +1,34 @@
 <script setup>
 	import { formatSeconds } from '../libs/time.js'
 	import CategoryChooser from './category_chooser.vue'
-	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
+	import { onMounted, ref, watch, defineProps } from 'vue'
 
-	const props = defineProps(['categories', 'instruments', 'currentWorkingCategory'])
+	const props = defineProps(['categories', 'instruments'])
+	const currentWorkingCategory = defineModel('currentWorkingCategory')
+	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 
 	const categorySessions = ref([])
 
-	const change = async (event) => {
-		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value)
-		categorySessions.value = await response.json()
-	}
-
 	const copy = (event) => {
 		navigator.clipboard.writeText(event.target.innerText)
 	}
 
-	const loadCategory = async (chosenCategoryID) => {
-		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+chosenCategoryID)
+	const loadCategory = async () => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+currentWorkingCategory.value.id)
 		categorySessions.value = await response.json()
 	}
 
-	onMounted(async () => {
-		loadCategory(props.currentWorkingCategory.id)
-	})
+	onMounted(loadCategory)
 
-	watch(() => props.currentWorkingCategory, (chosenCategory)=>{
-		loadCategory(chosenCategory.id)
-	})
+	watch(currentWorkingCategory, loadCategory)
 	defineExpose({loadCategory})
 </script>
 
 <template>
 	<h2>Show Category</h2>
 	<CategoryChooser
-		@update="loadCategory" 
-		:currentWorkingCategory="props.currentWorkingCategory"
+		v-model:currentWorkingCategory="currentWorkingCategory"
+		v-model:currentWorkingInstrument="currentWorkingInstrument"
 		:instruments="props.instruments"
 		:categories="props.categories" />
 	<table>

src/components/summary.vue

@@ -1,9 +1,8 @@
 <script setup>
 	import { onMounted, ref, defineExpose } from 'vue'
-	const props = defineProps(['categories'])
-	const currentWorkingCategory = defineModel()
-
-	const emit = defineEmits(['update'])
+	const props = defineProps(['instruments', 'categories'])
+	const currentWorkingCategory = defineModel('currentWorkingCategory')
+	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
 
 	const summary = ref([])
 
@@ -15,7 +14,9 @@
 	onMounted(loadData)
 
 	const setWorkingCategory = (choice) => {
-		currentWorkingCategory.value = props.categories.find(category => category.id === choice.category_id)
+		const chosenCategory = props.categories.find(category => category.id === choice.category_id)
+		currentWorkingCategory.value = chosenCategory
+		currentWorkingInstrument.value = props.instruments.find(instrument => instrument.name === chosenCategory.instrument)
 	}
 
 	defineExpose({loadData})