Merge pull request 'practiced-songs' (#1) from practiced-songs into main

Reviewed-on: #1

public/app.css

@@ -10,6 +10,11 @@ body {
 	a {
 		color:white;
 	}
+
+	tbody tr:nth-child(even) td,
+	tbody tr:nth-child(even) td a {
+		color:black;
+	}
 }
 
 td,th {

src/components/show_category.vue

@@ -31,26 +31,28 @@
 	<table>
 		<thead>
 			<tr>
-				<th>id</th>
 				<th>description</th>
-				<th>seconds</th>
+				<th>duration</th>
+				<th>songs</th>
 				<th>comments</th>
 				<th>created at</th>
-				<th>category id</th>
-				<th>category</th>
-				<th>instrument</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr v-for="session in categorySessions">
-				<td>{{session.id}}</td>
 				<td @click="copy">{{session.description}}</td>
 				<td @click="copy">{{formatSeconds(session.seconds)}}</td>
+				<td>
+					<ul>
+						<li v-for="song in session.songs">
+							<a v-bind:href="'#/songs/' + song.id">
+								{{song.title}}
+							</a>
+						</li>
+					</ul>
+				</td>
 				<td @click="copy">{{session.comments}}</td>
-				<td>{{session.created_at}}</td>
+				<td>{{new Date(session.created_at).toLocaleString("en-US")}}</td>
-				<td>{{session.category_id}}</td>
-				<td>{{session.category}}</td>
-				<td>{{session.instrument}}</td>
 			</tr>
 		</tbody>
 	</table>

src/components/songs.vue

@@ -11,9 +11,9 @@
 	const copy = (title) => {
 		navigator.clipboard.writeText(title);
 	}
-	const paste = (title) => {
+	const paste = (song) => {
-		if(copiedSongs.value.indexOf(title) === -1){
+		if(copiedSongs.value.findIndex(copiedSong=>copiedSong.id === song.id) === -1){
-			copiedSongs.value.push(title)
+			copiedSongs.value.push(song)
 		}
 	}
 </script>
@@ -31,10 +31,12 @@
 			<tr v-for="song in songs">
 				<td>{{song.id}}</td>
 				<td>
+					<a v-bind:name="'/songs/' + song.id">
 						{{song.title}}
+					</a>
 					<br/>
 					<button @click="copy(song.title)">Copy</button>
-					<button @click="paste(song.title)">Paste</button>
+					<button @click="paste(song)">Paste</button>
 				</td>
 				<td>{{song.notes}}</td>
 			</tr>

src/components/timer.vue

@@ -40,7 +40,7 @@
 	} from '../libs/state.js'
 
 	const removeSong = (song) => {
-		copiedSongs.value = copiedSongs.value.filter(curr => curr !== song)
+		copiedSongs.value = copiedSongs.value.filter(curr => curr.id !== song.id)
 	}
 
 	export default {
@@ -71,13 +71,11 @@
 				const reqBody = {
 					description:description.value,
 					seconds: this.totalSeconds,
-					practice_category_id: currentWorkingCategory.value.id
+					practice_category_id: currentWorkingCategory.value.id,
 				}
 
-				if(reqBody.description && copiedSongs.value.length > 0){
+				if(copiedSongs.value.length > 0){
-					reqBody.description += `: ${copiedSongs.value.join(', ')}`
+					reqBody.songs = copiedSongs.value
-				} else if (copiedSongs.value.length > 0){
-					reqBody.description = `${copiedSongs.value.join(', ')}`
 				}
 
 				if(this.comments){
@@ -230,8 +228,9 @@
 		<label>Description</label>
 		<input v-model="description" ref="descriptionInput" type="text" maxlength="128"/>
 
+		<label>Songs</label>
 		<ul v-if="copiedSongs.length > 0">
-			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song}}</li>
+			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song.title}}</li>
 		</ul>
 
 		<label>Seconds</label>