paste songs into description

src/components/songs.vue

@@ -1,5 +1,6 @@
 <script setup>
 	import { onMounted, ref } from 'vue'
+	import { copiedSongs } from '../libs/state.js'
 
 	const songs = ref([])
 
@@ -11,7 +12,9 @@
 		navigator.clipboard.writeText(title);
 	}
 	const paste = (title) => {
-		alert(title)
+		if(copiedSongs.value.indexOf(title) === -1){
+			copiedSongs.value.push(title)
+		}
 	}
 </script>
 <template>

src/components/timer.vue

@@ -1,10 +1,13 @@
 <script setup>
-	import { onMounted, getCurrentInstance } from 'vue'
+	import { onMounted, getCurrentInstance, ref } from 'vue'
+
 	const micThresholdExceeded = defineModel('micThresholdExceeded')
 	const timerRunning = defineModel('timerRunning')
 	const currentWorkingCategory = defineModel('currentWorkingCategory')
 	const currentWorkingInstrument = defineModel('currentWorkingInstrument')
+
 	const props = defineProps(['categories', 'instruments'])
+
 	const { proxy } = getCurrentInstance();
 
 	onMounted(()=>{
@@ -21,8 +24,16 @@
 </script>
 <script>
 	import axios from 'axios';
+
 	import CategoryChooser from './category_chooser.vue'
 	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
+	import { copiedSongs } from '../libs/state.js'
+
+	const description = ref('')
+
+	const removeSong = (song) => {
+		copiedSongs.value = copiedSongs.value.filter(curr => curr !== song)
+	}
 
 	export default {
 		data() {
@@ -30,7 +41,6 @@
 				startTime:0,
 				savedPreviousSeconds:0,
 				totalSeconds:0,
-				description:'',
 				comments:'',
 				manualHours:0,
 				manualMinutes:0,
@@ -51,11 +61,17 @@
 			submit(event){
 				event.preventDefault();
 				const reqBody = {
-					description:this.description,
+					description:description.value,
 					seconds: this.totalSeconds,
 					practice_category_id: this.currentWorkingCategory.id
 				}
 
+				if(reqBody.description && copiedSongs.value.length > 0){
+					reqBody.description += `: ${copiedSongs.value.join(', ')}`
+				} else if (copiedSongs.value.length > 0){
+					reqBody.description = `${copiedSongs.value.join(', ')}`
+				}
+
 				if(this.comments){
 					reqBody.comments = this.comments
 				}
@@ -64,7 +80,8 @@
 					import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'sessions',
 					reqBody
 				).then(()=>{
-					this.description = null;
+					description.value = null;
+					copiedSongs.value = []
 					this.totalSeconds = 0;
 					this.savedPreviousSeconds = 0;
 					this.comments = null;
@@ -205,6 +222,10 @@
 		<label>Description</label>
 		<input v-model="description" type="text" maxlength="128"/>
 
+		<ul v-if="copiedSongs.length > 0">
+			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song}}</li>
+		</ul>
+
 		<label>Seconds</label>
 		<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
 

src/libs/state.js

@@ -0,0 +1,2 @@
+import { ref } from 'vue'
+export const copiedSongs = ref([])