From cc9542b3a92b46b3ef94e1d2b06acac47ea76a0e Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 19 Jan 2025 10:34:27 -0500
Subject: [PATCH] converting songs to new vue3 syntax.  Adding copy/paste
 buttons

---
 src/components/songs.vue | 41 ++++++++++++++++++----------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/songs.vue b/src/components/songs.vue
index eda8f32..c6cde35 100644
--- a/src/components/songs.vue
+++ b/src/components/songs.vue
@@ -1,25 +1,19 @@
-<script lang="ts">
-	import axios from 'axios';
+<script setup>
+	import { onMounted, ref } from 'vue'
 
-	export default {
-		data() {
-			return {
-				songs:[]
-			}
-		},
-		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs').then((response)=>{
-				this.songs = response.data
-			})
-		},
-		methods: {
-			copy(event){
-				navigator.clipboard.writeText(event.target.innerText);
-			}
-		},
+	const songs = ref([])
+
+	onMounted(async ()=>{
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs')
+		songs.value = await response.json()
+	})
+	const copy = (title) => {
+		navigator.clipboard.writeText(title);
+	}
+	const paste = (title) => {
+		alert(title)
 	}
 </script>
-
 <template>
 	<h2>Songs</h2>
 	<table>
@@ -33,12 +27,13 @@
 		<tbody>
 			<tr v-for="song in songs">
 				<td>{{song.id}}</td>
-				<td @click="copy">{{song.title}}</td>
+				<td>
+					{{song.title}}
+					<button @click="copy(song.title)">Copy</button>
+					<button @click="paste(song.title)">Paste</button>
+				</td>
 				<td>{{song.notes}}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
-
-<style scoped>
-</style>