refactor: simplify PlaylistSelector logic

src/components/shows/PlaylistSelector.vue

@@ -106,15 +106,16 @@ import { mapGetters } from 'vuex'
 
 import prettyDate from '@/mixins/prettyDate'
 import playlist from '@/mixins/playlist'
+import { useTimeSlotStore } from '@/stores/timeslots'
 
 export default {
   mixins: [prettyDate, playlist],
-
+  props: {
+    timeslot: { type: Object, required: true },
+  },
   data() {
     return {
       scheduleId: null,
-      timeslot: null,
-
       audioFile: null,
       audioUpload: false,
       audioUploadError: '',
@@ -167,7 +168,6 @@ export default {
       getTimeslotById: 'shows/getTimeslotById',
     }),
   },
-
   methods: {
     upload(event) {
       event.preventDefault()
@@ -211,15 +211,14 @@ export default {
       this.audioUpload = !this.audioUpload
     },
 
-    open(scheduleId, timeslotId) {
+    open(scheduleId) {
       this.audioFile = null
       this.audioUpload = false
       this.scheduleId = scheduleId
-      this.timeslot = this.getTimeslotById(timeslotId)
       this.$refs.modalPlaylistSelector.show()
     },
 
-    choose(data) {
+    async choose(data) {
       const { item } = data || {}
       const { id } = item || {}
       let confirmed = true
@@ -229,16 +228,8 @@ export default {
       }
 
       if (confirmed) {
-        const ts = { ...this.timeslot }
-        ts.playlistId = id
-        this.$store.dispatch('shows/updateTimeslot', {
-          showId: this.selectedShow.id,
-          scheduleId: this.scheduleId,
-          timeslot: ts,
-          callback: () => {
-            this.timeslot = this.getTimeslotById(ts.id)
-          },
-        })
+        const timeslotStore = useTimeSlotStore()
+        await timeslotStore.partialUpdate(this.timeslot.id, { playlistId: id ?? null })
       }
     },
 

src/components/shows/TimeSlotRow.vue

@@ -65,7 +65,7 @@
   </tr>
 
   <Teleport to="body">
-    <PlaylistModal ref="playlistModal" />
+    <PlaylistModal ref="playlistModal" :timeslot="timeslot" />
     <NoteEditorModal
       v-model="localNoteId"
       :is-open="showNoteEditor"
@@ -132,6 +132,6 @@ function editNote() {
 }
 
 function editPlaylist() {
-  playlistModal.value.open(props.timeslot.scheduleId, props.timeslot.id)
+  playlistModal.value.open(props.timeslot.scheduleId)
 }
 </script>