🔨 implement song tuning for modals

devmount · Nov 3, 2019 · 77ccd77 · 77ccd77
1 parent f5f5238
commit 77ccd77
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -64,16 +64,18 @@
 
 			<!-- modals -->
 			<SongSet
+				v-if="modal.addsong"
 				:active="modal.addsong"
 				:existing="false"
 				:song="newSong"
 				@closed="modal.addsong = false"
 				@reset="resetSong"
 			/>
 			<SetlistSet
+				v-if="modal.addsetlist"
 				:active="modal.addsetlist"
 				:existing="false"
-				:setlist="newSetlist"
+				:initialSetlist="newSetlist"
 				@closed="modal.addsetlist = false"
 				@reset="resetSetlist"
 			/>

diff --git a/src/components/SetlistSet.vue b/src/components/SetlistSet.vue
@@ -77,7 +77,7 @@
 									</div>
 									<div class="form-group max-column mt-2">
 										<label v-for="(fsong, key) in filteredSongs" :key="key" class="form-checkbox mt-2">
-											<input v-model="setlist.songs" :value="{id: key}" type="checkbox">
+											<input v-model="setlistSongs" :value="key" type="checkbox">
 											<i class="form-icon"></i> {{ fsong.title }} [{{ fsong.tuning }}]
 											<div class="text-gray text-small">
 												{{ fsong.subtitle }}
@@ -96,7 +96,7 @@
 									<div v-else>
 										<h3 class="text-center">Selection</h3>
 										<div v-sortable="{ onEnd: reorder, handle: '.handle' }">
-											<div v-for="(song, i) in setlistSongs" :key="song.id" class="tile tile-centered mb-2">
+											<div v-for="(song, i) in setlist.songs" :key="song.id" class="tile tile-centered mb-2">
 												<span class="c-move text-center text-gray"><i class="icon ion-md-reorder px-2 mx-2 handle"></i></span>
 												<button class="btn btn-secondary btn-sm btn-fw" @click.prevent="tuneDown(i)">
 													<i class="icon ion-md-arrow-back"></i>
@@ -112,7 +112,7 @@
 													<div class="tile-subtitle text-gray text-small">{{ songs[song.id].subtitle }}</div>
 												</div>
 												<div class="tile-action">
-													<button class="btn btn-link btn-action" @click="setlist.songs = setlist.songs.filter(function(k) {return k.id !== song.id})">
+													<button class="btn btn-link btn-action" @click="setlistSongs = setlistSongs.filter(function(k) {return k !== song.id})">
 														<i class="icon ion-md-close"></i>
 													</button>
 												</div>
@@ -150,7 +150,7 @@ export default {
 	props: {
 		active: Boolean,
 		existing: Boolean,
-		setlist: Object
+		initialSetlist: Object
 	},
 	firestore () {
 		return {
@@ -165,15 +165,39 @@ export default {
 	},
 	data () {
 		return {
+			setlist: this.initialSetlist,
+			setlistSongs: this.initialSetlist.songs.map(s => s.id),
 			ready: false,
 			search: '',
 			filter: '',
 			tuning: '',
 			tunes: ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'B', 'H'],
 		}
 	},
+	watch: {
+		setlistSongs: function (newList, oldList) {
+			if (newList.length > oldList.length) {
+				let songAdded = newList.filter(x => !oldList.includes(x))[0]
+				this.setlist.songs.push({ id: songAdded, tuning: this.songs[songAdded].tuning })
+			} else {
+				let songRemoved = oldList.filter(x => !newList.includes(x))[0], newSongs = []
+				for (var i in this.setlist.songs) {
+					if (this.setlist.songs[i].id != songRemoved) {
+						newSongs.push({ id: this.setlist.songs[i].id, tuning: this.setlist.songs[i].tuning })
+					}
+				}
+				this.setlist.songs = newSongs
+			}
+		}
+	},
 	mounted () {
+		// initial date today
 		this.updateDate(new Date())
+		// initially fill setlistSongs array
+		// for (var i in this.initialSetlist.songs) {
+		// 	this.setlistSongs.push(this.initialSetlist.songs[i].id)
+		// }
+		// console.log(this.setlistSongs)
 	},
 	methods: {
 		// update setlist date from datepicker
@@ -197,7 +221,6 @@ export default {
 			}
 			// save tuning in setlist
 			this.setlist.songs[position].tuning = tone
-			console.log(this.setlist.songs[position].tuning)
 		},
 		tuneDown (position) {
 			let songs = this.setlist.songs
@@ -300,9 +323,6 @@ export default {
 			}
 			return songs
 		},
-		setlistSongs() {
-			return this.setlist.songs
-		}
 	}
 }
 </script>

diff --git a/src/views/SetlistShow.vue b/src/views/SetlistShow.vue
@@ -118,18 +118,21 @@
 			</div>
 			<!-- modals -->
 			<SetlistSet
+				v-if="modal.set"
 				:active="modal.set"
 				:existing="existing"
-				:setlist="modal.setlist"
+				:initialSetlist="modal.setlist"
 				@closed="modal.set = false"
 			/>
 			<SetlistDelete
+				v-if="modal.delete"
 				:active="modal.delete"
 				:title="setlist.title"
 				:id="setlist['.key']"
 				@closed="modal.delete = false"
 			/>
 			<SetlistPresent
+				v-if="modal.present"
 				:active="modal.present"
 				:songs="getSetlistSongs"
 				:position="setlist.position"

diff --git a/src/views/Setlists.vue b/src/views/Setlists.vue
@@ -90,9 +90,22 @@
 					</tr>
 				</tbody>
 			</table>
+
 			<!-- modals -->
-			<SetlistSet :active="modal.set" :existing="active.existing" :setlist="active.setlist" @closed="modal.set = false" />
-			<SetlistDelete :active="modal.delete" :title="active.title" :id="active.key" @closed="modal.delete = false" />
+			<SetlistSet
+				v-if="modal.set"
+				:active="modal.set"
+				:existing="active.existing"
+				:initialSetlist="active.setlist"
+				@closed="modal.set = false"
+			/>
+			<SetlistDelete
+				v-if="modal.delete"
+				:active="modal.delete"
+				:title="active.title"
+				:id="active.key"
+				@closed="modal.delete = false"
+			/>
 
 		</div>
 	</div>