🔨 ensure one-way data flow for edit/new song

devmount · Nov 5, 2019 · 4362fa2 · 4362fa2
1 parent 5020a66
commit 4362fa2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -67,7 +67,7 @@
 				v-if="modal.addsong"
 				:active="modal.addsong"
 				:existing="false"
-				:song="newSong"
+				:initialSong="newSong"
 				@closed="modal.addsong = false"
 				@reset="resetSong"
 			/>

diff --git a/src/components/SongSet.vue b/src/components/SongSet.vue
@@ -3,7 +3,7 @@
 		<!-- main modal: set song -->
 		<div class="modal modal-lg" :class="{ active: active }">
 			<a href="#" class="modal-overlay" aria-label="Close" @click.prevent="$emit('closed')"></a>
-			<div v-if="song" class="modal-container">
+			<div v-if="song && ready" class="modal-container">
 				<div class="modal-header">
 					<a href="#" class="btn btn-clear float-right" aria-label="Close" @click.prevent="$emit('closed')"></a>
 					<div v-if="!existing" class="modal-title h5">New Song</div>
@@ -187,7 +187,7 @@
 			</div>
 		</div>
 		<!-- additional modal: add translation -->
-		<div v-if="song" class="modal modal-secondary" :class="{ active: modal.translations }">
+		<div v-if="song && ready" class="modal modal-secondary" :class="{ active: modal.translations }">
 			<a href="#" class="modal-overlay" aria-label="Close" @click.prevent="modal.translations = false"></a>
 			<div class="modal-container">
 				<div class="modal-header">
@@ -258,7 +258,7 @@ export default {
 	props: {
 		active: Boolean,
 		existing: Boolean,
-		song: Object
+		initialSong: Object
 	},
 	firestore () {
 		return {
@@ -273,6 +273,8 @@ export default {
 	},
 	data () {
 		return {
+			song: JSON.parse(JSON.stringify(this.initialSong)),
+			ready: false,
 			modal: {
 				tags: false,
 				translations: false,

diff --git a/src/views/SongShow.vue b/src/views/SongShow.vue
@@ -9,10 +9,10 @@
 				<!-- sidebar: manage -->
 				<div class="divider text-center show-lg" data-content="M"></div>
 				<div class="divider text-center hide-lg" data-content="MANAGE"></div>
-				<button class="btn btn-secondary tooltip tooltip-right d-block stretch mb-1" @click="modal.song=song; existing=true; modal.set=true" data-tooltip=" EDIT ">
+				<button class="btn btn-secondary tooltip tooltip-right d-block stretch mb-1" @click="existing=true; modal.set=true" data-tooltip=" EDIT ">
 					<i class="icon ion-md-create float-left ml-1"></i><span class="hide-lg"> EDIT</span>
 				</button>
-				<button class="btn btn-secondary tooltip tooltip-right d-block stretch mb-1" @click="modal.song=song; existing=false; modal.set=true" data-tooltip=" CLONE ">
+				<button class="btn btn-secondary tooltip tooltip-right d-block stretch mb-1" @click="existing=false; modal.set=true" data-tooltip=" CLONE ">
 					<i class="icon ion-md-copy float-left ml-1"></i><span class="hide-lg"> CLONE</span>
 				</button>
 				<button class="btn btn-secondary tooltip tooltip-right btn-error d-block stretch" @click="modal.delete = true" data-tooltip=" DELETE ">
@@ -105,18 +105,21 @@
 			</div>
 			<!-- modals -->
 			<SongSet
+				v-if="modal.set"
 				:active="modal.set"
 				:existing="existing"
-				:song="modal.song"
+				:initialSong="song"
 				@closed="modal.set = false"
 			/>
 			<SongDelete
+				v-if="modal.delete"
 				:active="modal.delete"
 				:title="song.title"
 				:id="song['.key']"
 				@closed="modal.delete = false"
 			/>
 			<SongPresent
+				v-if="modal.present"
 				:active="modal.present"
 				:title="song.title"
 				:subtitle="song.subtitle"

diff --git a/src/views/Songs.vue b/src/views/Songs.vue
@@ -98,8 +98,20 @@
 				</tbody>
 			</table>
 			<!-- modals -->
-			<SongSet :active="modal.set" :existing="active.existing" :song="active.song" @closed="modal.set = false" />
-			<SongDelete :active="modal.delete" :title="active.title" :id="active.key" @closed="modal.delete = false" />
+			<SongSet
+				v-if="modal.set"
+				:active="modal.set"
+				:existing="active.existing"
+				:initialSong="active.song"
+				@closed="modal.set = false"
+			/>
+			<SongDelete
+				v-if="modal.delete"
+				:active="modal.delete"
+				:title="active.title"
+				:id="active.key"
+				@closed="modal.delete = false"
+			/>
 		</div>
 	</div>
 </template>