➕ Merge pull request #224 from devmount/bugs/save-existing-songs

Fix save existing songs from song preview

frontend/src/modals/SetlistSet.vue

@@ -140,7 +140,7 @@
 								</secondary-button>
 							</template>
 							<div class="max-h-80 overflow-y-auto flex flex-col gap-0.5 !p-2 text-sm">
-								<secondary-button 
+								<secondary-button
 									v-for="(l, k) in languages" :key="k"
 									@click="filter.language = k"
 									:class="{ '!bg-spring-700': k === filter.language }"

frontend/src/modals/SongSet.vue

@@ -240,7 +240,7 @@ import 'vue-prism-editor/dist/prismeditor.min.css';
 import { keyScale, sdHighlight, throwError, urlify } from '@/utils.js';
 import { notify } from '@kyvg/vue3-notification';
 import { PrismEditor } from 'vue-prism-editor';
-import { ref, reactive, computed, inject, watch } from 'vue';
+import { ref, reactive, computed, inject, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { setDoc, updateDoc, deleteDoc, doc } from 'firebase/firestore';
@@ -308,6 +308,7 @@ const initInput = () => {
 	song.value = {...props.initialSong};
 };
 watch(() => props.active, () => initInput());
+onMounted(() => initInput());
 
 // active modals state
 const showModal = reactive({
@@ -336,7 +337,7 @@ const createSlug = () => {
 	return urlify(song.value.title) + '-' + song.value.language;
 };
 
-// add or save edits of song to db 
+// add or save edits of song to db
 const busy = ref(false);
 const setSong = () => {
 	const slug = createSlug();

frontend/src/views/SongShow.vue

@@ -385,8 +385,8 @@ const position = computed(() => props.ready.setlists && urlSetlist && urlKey
 
 // get song object from db as soon as songs have finished loading
 const song = computed(() => {
-	if (props.ready.songs) {
-		return props.songs[songId];
+	if (songId && props.ready.songs) {
+		return { ...props.songs[songId], id: songId };
 	}
 	return null;
 });
@@ -401,7 +401,7 @@ const showLanguages = computed(() => {
 				languages.push([sId, props.songs[sId].language]);
 			}
 		}
-		return languages.sort((a, b) => { 
+		return languages.sort((a, b) => {
 			return a[1] > b[1] ? 1 : -1;
 		})
 	} else {