category chooser started

src/components/category_chooser.vue

@@ -0,0 +1,24 @@
+<script setup>
+	import { onMounted, ref, watch } from 'vue'
+	const props = defineProps(['categories'])
+	const instruments = ref([])
+	const chosenInstrument = ref('clarinet')
+	for(let category of props.categories){
+		if(!instruments.value.includes(category.instrument)){
+			instruments.value.push(category.instrument)
+		}
+	}
+</script>
+<template>
+	<h3>Choose Category</h3>
+	<select v-model="chosenInstrument">
+		<option v-for="instrument in instruments" v-bind:value="instrument">
+			{{instrument}}
+		</option>
+	</select>
+	<select v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
+		<option v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
+			{{category.category}}
+		</option>
+	</select>
+</template>

src/components/show_category.vue

@@ -1,4 +1,5 @@
 <script setup>
+	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
 
 	const props = defineProps(['currentWorkingCategoryID'])
@@ -44,6 +45,7 @@
 			{{category.category}}
 		</option>
 	</select>
+	<CategoryChooser v-if="categories.length > 0" :categories="categories" />
 	<table>
 		<thead>
 			<tr>