From 9cebd803e63335289d9609215460694958bf21a0 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 25 Aug 2024 17:14:20 +0200
Subject: [PATCH] category chooser started

---
 src/components/category_chooser.vue | 24 ++++++++++++++++++++++++
 src/components/show_category.vue    |  2 ++
 2 files changed, 26 insertions(+)
 create mode 100644 src/components/category_chooser.vue

diff --git a/src/components/category_chooser.vue b/src/components/category_chooser.vue
new file mode 100644
index 0000000..f9d2a7b
--- /dev/null
+++ b/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>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index 91ce879..dffbb9f 100644
--- a/src/components/show_category.vue
+++ b/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>